feat: update translation

feat: move nwc to settings
feat: add tutorial
2024-01-15 20:01:06 +07:00 · 2024-01-15 15:33:05 +07:00 · 2024-01-15 14:06:11 +07:00 · 2024-01-15 09:51:49 +07:00 · 2024-01-15 08:36:23 +07:00 · 2024-01-14 18:05:36 +07:00
635 changed files with 21719 additions and 19420 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +0,0 @@
-/**/node_modules/*
-node_modules/
-dist/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,49 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      node: {
-        paths: ['src'],
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
-  },
-  env: {
-    browser: true,
-    amd: true,
-    node: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:jsx-a11y/recommended',
-    'prettier'
-  ],
-  plugins: [],
-  rules: {
-    'react/react-in-jsx-scope': 'off',
-    'jsx-a11y/accessible-emoji': 'off',
-    'react/prop-types': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    'jsx-a11y/anchor-is-valid': [
-      'error',
-      {
-        components: ['Link'],
-        specialLink: ['hrefLeft', 'hrefRight'],
-        aspects: ['invalidHref', 'preferButton'],
-      },
-    ],
-  },
-};
--- a/.gitignore
+++ b/.gitignore
@@ -1,33 +1,38 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*

-node_modules
-dist
-dist-ssr
-out
-*.local
-.next
-.vscode
-*.db
-*.db-journal
-bun.lockb
-
-.direnv
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-/.gtm/
+*.pem
--- a/.gitmodules
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "modules/depot"]
+	path = modules/depot
+	url = https://github.com/luminous-devs/depot.git
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm exec lint-staged
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,9 +0,0 @@
-.tmp
-.cache/
-coverage/
-.nyc_output/
-**/.yarn/**
-**/.pnp.*
-/dist*/
-node_modules/
-src-tauri/
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,22 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 90,
-  "useTabs": false,
-  "bracketSpacing": true,
-  "bracketSameLine": false,
-  "importOrder": [
-    "^@app/(.*)$",
-    "^@libs/(.*)$",
-    "^@shared/(.*)$",
-    "^@stores/(.*)$",
-    "^@utils/(.*)$",
-    "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
-  "pluginSearchDirs": false
-}
--- a/apps/desktop/index.html
+++ b/apps/desktop/index.html
@@ -0,0 +1,13 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lume</title>
+  </head>
+  <body
+    class="relative w-screen h-screen overflow-hidden font-sans antialiased cursor-default select-none text-neutral-950 dark:text-neutral-50"
+  >
+    <div id="root"></div>
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -0,0 +1,86 @@
+{
+	"name": "lume",
+	"private": true,
+	"version": "3.0.0",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build"
+	},
+	"dependencies": {
+		"@columns/antenas": "workspace:^",
+		"@columns/default": "workspace:^",
+		"@columns/group": "workspace:^",
+		"@columns/hashtag": "workspace:^",
+		"@columns/thread": "workspace:^",
+		"@columns/timeline": "workspace:^",
+		"@columns/user": "workspace:^",
+		"@getalby/sdk": "^3.2.3",
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/storage": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@nostr-dev-kit/ndk": "^2.3.2",
+		"@radix-ui/react-accordion": "^1.1.2",
+		"@radix-ui/react-alert-dialog": "^1.0.5",
+		"@radix-ui/react-avatar": "^1.0.4",
+		"@radix-ui/react-collapsible": "^1.0.3",
+		"@radix-ui/react-dialog": "^1.0.5",
+		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-hover-card": "^1.0.7",
+		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-select": "^2.0.0",
+		"@radix-ui/react-switch": "^1.0.3",
+		"@radix-ui/react-tooltip": "^1.0.7",
+		"@tanstack/react-query": "^5.17.9",
+		"@tauri-apps/api": "2.0.0-alpha.13",
+		"@tauri-apps/plugin-autostart": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-clipboard-manager": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-dialog": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-fs": "2.0.0-alpha.6",
+		"@tauri-apps/plugin-http": "2.0.0-alpha.6",
+		"@tauri-apps/plugin-notification": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-os": "2.0.0-alpha.6",
+		"@tauri-apps/plugin-process": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-shell": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-sql": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-updater": "2.0.0-alpha.5",
+		"@tauri-apps/plugin-upload": "2.0.0-alpha.5",
+		"@vidstack/react": "^1.9.8",
+		"framer-motion": "^10.18.0",
+		"jotai": "^2.6.1",
+		"minidenticons": "^4.2.0",
+		"nanoid": "^5.0.4",
+		"nostr-fetch": "^0.15.0",
+		"nostr-tools": "^1.17.0",
+		"qrcode.react": "^3.1.0",
+		"react": "^18.2.0",
+		"react-currency-input-field": "^3.6.14",
+		"react-dom": "^18.2.0",
+		"react-hook-form": "^7.49.3",
+		"react-router-dom": "^6.21.2",
+		"smol-toml": "^1.1.3",
+		"sonner": "^1.3.1",
+		"unique-names-generator": "^4.7.1",
+		"virtua": "^0.20.4"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/node": "^20.11.0",
+		"@types/react": "^18.2.47",
+		"@types/react-dom": "^18.2.18",
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"autoprefixer": "^10.4.16",
+		"cross-env": "^7.0.3",
+		"encoding": "^0.1.13",
+		"postcss": "^8.4.33",
+		"tailwind-merge": "^2.2.0",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.11",
+		"vite-plugin-top-level-await": "^1.4.1",
+		"vite-tsconfig-paths": "^4.2.3"
+	}
+}
--- a/apps/desktop/postcss.config.js
+++ b/apps/desktop/postcss.config.js
--- a/apps/desktop/public/anime.jpg
+++ b/apps/desktop/public/anime.jpg
--- a/apps/desktop/public/art.jpg
+++ b/apps/desktop/public/art.jpg
--- a/apps/desktop/public/clapping_hands.png
+++ b/apps/desktop/public/clapping_hands.png
--- a/apps/desktop/public/clown_face.png
+++ b/apps/desktop/public/clown_face.png
--- a/apps/desktop/public/columns/antenas.jpg
+++ b/apps/desktop/public/columns/antenas.jpg
--- a/apps/desktop/public/columns/antenas@2x.jpg
+++ b/apps/desktop/public/columns/antenas@2x.jpg
--- a/apps/desktop/public/columns/group.jpg
+++ b/apps/desktop/public/columns/group.jpg
--- a/apps/desktop/public/columns/group@2x.jpg
+++ b/apps/desktop/public/columns/group@2x.jpg
--- a/apps/desktop/public/columns/topic.jpg
+++ b/apps/desktop/public/columns/topic.jpg
--- a/apps/desktop/public/columns/topic@2x.jpg
+++ b/apps/desktop/public/columns/topic@2x.jpg
--- a/apps/desktop/public/crying_face.png
+++ b/apps/desktop/public/crying_face.png
--- a/apps/desktop/public/face_with_open_mouth.png
+++ b/apps/desktop/public/face_with_open_mouth.png
--- a/apps/desktop/public/face_with_tongue.png
+++ b/apps/desktop/public/face_with_tongue.png
--- a/apps/desktop/public/fallback-image.jpg
+++ b/apps/desktop/public/fallback-image.jpg
--- a/apps/desktop/public/gaming.jpg
+++ b/apps/desktop/public/gaming.jpg
--- a/apps/desktop/public/ghost.png
+++ b/apps/desktop/public/ghost.png
--- a/apps/desktop/public/heading.png
+++ b/apps/desktop/public/heading.png
--- a/apps/desktop/public/heading@2x.png
+++ b/apps/desktop/public/heading@2x.png
--- a/apps/desktop/public/icon.png
+++ b/apps/desktop/public/icon.png
--- a/apps/desktop/public/movie.jpg
+++ b/apps/desktop/public/movie.jpg
--- a/apps/desktop/public/music.jpg
+++ b/apps/desktop/public/music.jpg
--- a/apps/desktop/public/nsfw.jpg
+++ b/apps/desktop/public/nsfw.jpg
--- a/apps/desktop/public/photography.jpg
+++ b/apps/desktop/public/photography.jpg
--- a/apps/desktop/public/technology.jpg
+++ b/apps/desktop/public/technology.jpg
--- a/apps/desktop/public/translate.jpg
+++ b/apps/desktop/public/translate.jpg
--- a/apps/desktop/public/translate@2x.jpg
+++ b/apps/desktop/public/translate@2x.jpg
--- a/apps/desktop/public/tutorial-1.gif
+++ b/apps/desktop/public/tutorial-1.gif
--- a/apps/desktop/public/tutorial-2.gif
+++ b/apps/desktop/public/tutorial-2.gif
--- a/apps/desktop/public/tutorial-3.gif
+++ b/apps/desktop/public/tutorial-3.gif
--- a/apps/desktop/public/zap.png
+++ b/apps/desktop/public/zap.png
--- a/apps/desktop/src/app.css
+++ b/apps/desktop/src/app.css
@@ -0,0 +1,41 @@
+/* Vidstack */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .break-p {
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .prose :where(iframe):not(:where([class~='not-prose'] *)) {
+    @apply w-full h-auto mx-auto aspect-video;
+  }
+}
+
+html {
+  font-size: 14px;
+}
+
+a {
+  @apply cursor-default no-underline !important;
+}
+
+button {
+  @apply cursor-default focus:outline-none;
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+
+::-webkit-input-placeholder {
+  line-height: normal;
+}
+
+.border {
+  background-clip: padding-box;
+}
--- a/apps/desktop/src/app.tsx
+++ b/apps/desktop/src/app.tsx
@@ -0,0 +1,28 @@
+import { ColumnProvider, LumeProvider } from "@lume/ark";
+import { StorageProvider } from "@lume/storage";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "sonner";
+import Router from "./router";
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds
+		},
+	},
+});
+
+export default function App() {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<Toaster position="top-center" theme="system" closeButton />
+			<StorageProvider>
+				<LumeProvider>
+					<ColumnProvider>
+						<Router />
+					</ColumnProvider>
+				</LumeProvider>
+			</StorageProvider>
+		</QueryClientProvider>
+	);
+}
--- a/apps/desktop/src/main.jsx
+++ b/apps/desktop/src/main.jsx
@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import App from "./app";
+import "./app.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(<App />);
--- a/apps/desktop/src/router.tsx
+++ b/apps/desktop/src/router.tsx
@@ -0,0 +1,323 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { AppLayout, AuthLayout, HomeLayout, SettingsLayout } from "@lume/ui";
+import { fetch } from "@tauri-apps/plugin-http";
+import {
+	RouterProvider,
+	createBrowserRouter,
+	defer,
+	redirect,
+} from "react-router-dom";
+import { ErrorScreen } from "./routes/error";
+
+export default function Router() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const router = createBrowserRouter([
+		{
+			element: <AppLayout platform={storage.platform} />,
+			children: [
+				{
+					path: "/",
+					element: <HomeLayout />,
+					errorElement: <ErrorScreen />,
+					loader: async () => {
+						if (!ark.account) return redirect("auth");
+						return null;
+					},
+					children: [
+						{
+							index: true,
+							async lazy() {
+								const { HomeScreen } = await import("./routes/home");
+								return { Component: HomeScreen };
+							},
+						},
+						{
+							path: "settings",
+							element: <SettingsLayout />,
+							children: [
+								{
+									index: true,
+									async lazy() {
+										const { UserSettingScreen } = await import(
+											"./routes/settings"
+										);
+										return { Component: UserSettingScreen };
+									},
+								},
+								{
+									path: "edit-profile",
+									async lazy() {
+										const { EditProfileScreen } = await import(
+											"./routes/settings/editProfile"
+										);
+										return { Component: EditProfileScreen };
+									},
+								},
+								{
+									path: "edit-contact",
+									async lazy() {
+										const { EditContactScreen } = await import(
+											"./routes/settings/editContact"
+										);
+										return { Component: EditContactScreen };
+									},
+								},
+								{
+									path: "general",
+									async lazy() {
+										const { GeneralSettingScreen } = await import(
+											"./routes/settings/general"
+										);
+										return { Component: GeneralSettingScreen };
+									},
+								},
+								{
+									path: "backup",
+									async lazy() {
+										const { BackupSettingScreen } = await import(
+											"./routes/settings/backup"
+										);
+										return { Component: BackupSettingScreen };
+									},
+								},
+								{
+									path: "advanced",
+									async lazy() {
+										const { AdvancedSettingScreen } = await import(
+											"./routes/settings/advanced"
+										);
+										return { Component: AdvancedSettingScreen };
+									},
+								},
+								{
+									path: "nwc",
+									async lazy() {
+										const { NWCScreen } = await import("./routes/settings/nwc");
+										return { Component: NWCScreen };
+									},
+								},
+								{
+									path: "about",
+									async lazy() {
+										const { AboutScreen } = await import(
+											"./routes/settings/about"
+										);
+										return { Component: AboutScreen };
+									},
+								},
+							],
+						},
+					],
+				},
+				{
+					path: "activity",
+					async lazy() {
+						const { ActivityScreen } = await import("./routes/activty");
+						return { Component: ActivityScreen };
+					},
+					children: [
+						{
+							path: ":id",
+							async lazy() {
+								const { ActivityIdScreen } = await import(
+									"./routes/activty/id"
+								);
+								return { Component: ActivityIdScreen };
+							},
+						},
+					],
+				},
+				{
+					path: "relays",
+					async lazy() {
+						const { RelaysScreen } = await import("./routes/relays");
+						return { Component: RelaysScreen };
+					},
+					children: [
+						{
+							index: true,
+							async lazy() {
+								const { RelayGlobalScreen } = await import(
+									"./routes/relays/global"
+								);
+								return { Component: RelayGlobalScreen };
+							},
+						},
+						{
+							path: "follows",
+							async lazy() {
+								const { RelayFollowsScreen } = await import(
+									"./routes/relays/follows"
+								);
+								return { Component: RelayFollowsScreen };
+							},
+						},
+						{
+							path: ":url",
+							loader: async ({ request, params }) => {
+								return defer({
+									relay: fetch(`https://${params.url}`, {
+										method: "GET",
+										headers: {
+											Accept: "application/nostr+json",
+										},
+										signal: request.signal,
+									}).then((res) => res.json()),
+								});
+							},
+							async lazy() {
+								const { RelayUrlScreen } = await import("./routes/relays/url");
+								return { Component: RelayUrlScreen };
+							},
+						},
+					],
+				},
+				{
+					path: "depot",
+					children: [
+						{
+							index: true,
+							loader: () => {
+								const depot = storage.checkDepot();
+								if (!depot) return redirect("/depot/onboarding/");
+								return null;
+							},
+							async lazy() {
+								const { DepotScreen } = await import("./routes/depot");
+								return { Component: DepotScreen };
+							},
+						},
+						{
+							path: "onboarding",
+							async lazy() {
+								const { DepotOnboardingScreen } = await import(
+									"./routes/depot/onboarding"
+								);
+								return { Component: DepotOnboardingScreen };
+							},
+						},
+					],
+				},
+			],
+		},
+		{
+			path: "auth",
+			element: <AuthLayout platform={storage.platform} />,
+			errorElement: <ErrorScreen />,
+			children: [
+				{
+					index: true,
+					async lazy() {
+						const { WelcomeScreen } = await import("./routes/auth/welcome");
+						return { Component: WelcomeScreen };
+					},
+				},
+				{
+					path: "create",
+					loader: async () => {
+						return await ark.getOAuthServices();
+					},
+					async lazy() {
+						const { CreateAccountScreen } = await import(
+							"./routes/auth/create"
+						);
+						return { Component: CreateAccountScreen };
+					},
+				},
+				{
+					path: "login",
+					async lazy() {
+						const { LoginScreen } = await import("./routes/auth/login");
+						return { Component: LoginScreen };
+					},
+				},
+				{
+					path: "login-key",
+					async lazy() {
+						const { LoginWithKey } = await import("./routes/auth/login-key");
+						return { Component: LoginWithKey };
+					},
+				},
+				{
+					path: "login-nsecbunker",
+					async lazy() {
+						const { LoginWithNsecbunker } = await import(
+							"./routes/auth/login-nsecbunker"
+						);
+						return { Component: LoginWithNsecbunker };
+					},
+				},
+				{
+					path: "login-oauth",
+					async lazy() {
+						const { LoginWithOAuth } = await import(
+							"./routes/auth/login-oauth"
+						);
+						return { Component: LoginWithOAuth };
+					},
+				},
+				{
+					path: "onboarding",
+					async lazy() {
+						const { OnboardingScreen } = await import(
+							"./routes/auth/onboarding"
+						);
+						return { Component: OnboardingScreen };
+					},
+				},
+				{
+					path: "tutorials/note",
+					async lazy() {
+						const { TutorialNoteScreen } = await import(
+							"./routes/auth/tutorials/note"
+						);
+						return { Component: TutorialNoteScreen };
+					},
+				},
+				{
+					path: "tutorials/widget",
+					async lazy() {
+						const { TutorialWidgetScreen } = await import(
+							"./routes/auth/tutorials/widget"
+						);
+						return { Component: TutorialWidgetScreen };
+					},
+				},
+				{
+					path: "tutorials/posting",
+					async lazy() {
+						const { TutorialPostingScreen } = await import(
+							"./routes/auth/tutorials/posting"
+						);
+						return { Component: TutorialPostingScreen };
+					},
+				},
+				{
+					path: "tutorials/finish",
+					async lazy() {
+						const { TutorialFinishScreen } = await import(
+							"./routes/auth/tutorials/finish"
+						);
+						return { Component: TutorialFinishScreen };
+					},
+				},
+			],
+		},
+	]);
+
+	return (
+		<RouterProvider
+			router={router}
+			fallbackElement={
+				<div className="flex items-center justify-center w-full h-full">
+					<LoaderIcon className="w-6 h-6 animate-spin" />
+				</div>
+			}
+			future={{ v7_startTransition: true }}
+		/>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/activityRepost.tsx
+++ b/apps/desktop/src/routes/activty/components/activityRepost.tsx
@@ -0,0 +1,28 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityRepost({ event }: { event: NDKEvent }) {
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">reposted</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/activityText.tsx
+++ b/apps/desktop/src/routes/activty/components/activityText.tsx
@@ -0,0 +1,28 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityText({ event }: { event: NDKEvent }) {
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">mention you</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/activityZap.tsx
+++ b/apps/desktop/src/routes/activty/components/activityZap.tsx
@@ -0,0 +1,33 @@
+import { User } from "@lume/ark";
+import { compactNumber } from "@lume/utils";
+import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityZap({ event }: { event: NDKEvent }) {
+	const invoice = zapInvoiceFromEvent(event);
+
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">
+								zapped {compactNumber.format(invoice.amount)} sats
+							</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/list.tsx
+++ b/apps/desktop/src/routes/activty/components/list.tsx
@@ -0,0 +1,115 @@
+import { useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { ActivityRepost } from "./activityRepost";
+import { ActivityText } from "./activityText";
+import { ActivityZap } from "./activityZap";
+
+export function ActivityList() {
+	const ark = useArk();
+	const queryClient = useQueryClient();
+
+	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: ["activity"],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const events = await ark.getInfiniteEvents({
+					filter: {
+						kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Zap],
+						"#p": [ark.account.pubkey],
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			initialData: () => {
+				const queryCacheData = queryClient.getQueryState(["activity"])
+					?.data as NDKEvent[];
+				if (queryCacheData) {
+					return {
+						pageParams: [undefined, 1],
+						pages: [queryCacheData],
+					};
+				}
+			},
+			staleTime: 360 * 1000,
+			refetchOnWindowFocus: false,
+			refetchOnMount: false,
+		});
+
+	const allEvents = useMemo(
+		() => (data ? data.pages.flatMap((page) => page) : []),
+		[data],
+	);
+
+	const renderEvenKind = useCallback(
+		(event: NDKEvent) => {
+			if (event.pubkey === ark.account.pubkey) return null;
+			switch (event.kind) {
+				case NDKKind.Text:
+					return <ActivityText key={event.id} event={event} />;
+				case NDKKind.Repost:
+					return <ActivityRepost key={event.id} event={event} />;
+				case NDKKind.Zap:
+					return <ActivityZap key={event.id} event={event} />;
+				default:
+					return <ActivityText key={event.id} event={event} />;
+			}
+		},
+		[data],
+	);
+
+	return (
+		<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+			{isLoading ? (
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<LoaderIcon className="size-5 animate-spin" />
+				</div>
+			) : !allEvents.length ? (
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<p className="mb-2 text-2xl">🎉</p>
+					<p className="text-center font-medium">Yo! Nothing new yet.</p>
+				</div>
+			) : (
+				allEvents.map((event) => renderEvenKind(event))
+			)}
+			<div className="flex items-center justify-center h-16 px-5">
+				{hasNextPage ? (
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={!hasNextPage || isFetchingNextPage}
+						className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20 rounded-xl focus:outline-none"
+					>
+						{isFetchingNextPage ? (
+							<LoaderIcon className="size-5 animate-spin" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				) : null}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/rootNote.tsx
+++ b/apps/desktop/src/routes/activty/components/rootNote.tsx
@@ -0,0 +1,40 @@
+import { Note, useEvent } from "@lume/ark";
+
+export function ActivityRootNote({ eventId }: { eventId: string }) {
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return (
+			<div className="relative flex gap-3">
+				<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+					<div className="h-4 w-full animate-pulse bg-neutral-300 dark:bg-neutral-700" />
+				</div>
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="relative flex gap-3">
+				<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+					Failed to fetch event
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root>
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.User className="flex-1 pr-1" />
+				</div>
+				<Note.Content className="min-w-0 px-3" />
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.Pin />
+					<div className="inline-flex items-center gap-10" />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/singleRepost.tsx
+++ b/apps/desktop/src/routes/activty/components/singleRepost.tsx
@@ -0,0 +1,33 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleRepost({ event }: { event: NDKEvent }) {
+	const repostId = event.tags.find((el) => el[0] === "e")[1];
+
+	return (
+		<div className="pb-3 flex flex-col">
+			<div className="h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">Boost</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has reposted to your note
+				</p>
+			</div>
+			<div className="flex-1 min-h-0">
+				<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
+					<User.Provider pubkey={event.pubkey}>
+						<User.Root>
+							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
+						</User.Root>
+					</User.Provider>
+					<div className="flex flex-col items-center gap-3">
+						<div className="h-4 w-px bg-blue-500" />
+						<h3 className="font-semibold">Reposted</h3>
+						<div className="h-4 w-px bg-blue-500" />
+					</div>
+					<ActivityRootNote eventId={repostId} />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/singleText.tsx
+++ b/apps/desktop/src/routes/activty/components/singleText.tsx
@@ -0,0 +1,53 @@
+import { Note, useArk } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleText({ event }: { event: NDKEvent }) {
+	const ark = useArk();
+	const thread = ark.getEventThread({
+		content: event.content,
+		tags: event.tags,
+	});
+
+	return (
+		<div className="h-full w-full flex flex-col justify-between">
+			<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">
+					Conversation
+				</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has replied to your note
+				</p>
+			</div>
+			<div className="overflow-y-auto">
+				<div className="max-w-xl mx-auto py-6">
+					{thread ? (
+						<div className="flex flex-col gap-3 mb-1">
+							<ActivityRootNote eventId={thread.rootEventId} />
+							<ActivityRootNote eventId={thread.replyEventId} />
+						</div>
+					) : null}
+					<div className="mt-3 flex flex-col gap-3">
+						<div className="flex items-center gap-3">
+							<p className="text-teal-500 font-medium">New reply</p>
+							<div className="flex-1 h-px bg-teal-300" />
+							<div className="w-4 shrink-0 h-px bg-teal-300" />
+						</div>
+						<Note.Provider event={event}>
+							<Note.Root>
+								<div className="flex items-center justify-between px-3 h-14">
+									<Note.User className="flex-1 pr-1" />
+								</div>
+								<Note.Content className="min-w-0 px-3" />
+								<div className="flex items-center justify-between px-3 h-14">
+									<Note.Pin />
+									<div className="inline-flex items-center gap-10" />
+								</div>
+							</Note.Root>
+						</Note.Provider>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/activty/components/singleZap.tsx
+++ b/apps/desktop/src/routes/activty/components/singleZap.tsx
@@ -0,0 +1,39 @@
+import { User } from "@lume/ark";
+import { compactNumber } from "@lume/utils";
+import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleZap({ event }: { event: NDKEvent }) {
+	const zapEventId = event.tags.find((el) => el[0] === "e")[1];
+	const invoice = zapInvoiceFromEvent(event);
+
+	return (
+		<div className="h-full w-full flex flex-col justify-between">
+			<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">
+					Conversation
+				</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has replied to your note
+				</p>
+			</div>
+			<div className="flex-1 min-h-0">
+				<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
+					<User.Provider pubkey={event.pubkey}>
+						<User.Root>
+							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
+						</User.Root>
+					</User.Provider>
+					<div className="flex flex-col items-center gap-3">
+						<div className="h-4 w-px bg-blue-500" />
+						<h3 className="font-semibold">
+							Zap you {compactNumber.format(invoice.amount)} sats for
+						</h3>
+						<div className="h-4 w-px bg-blue-500" />
+					</div>
+					<ActivityRootNote eventId={zapEventId} />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/activty/id.tsx
+++ b/apps/desktop/src/routes/activty/id.tsx
@@ -0,0 +1,27 @@
+import { useEvent } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useParams } from "react-router-dom";
+import { ActivitySingleRepost } from "./components/singleRepost";
+import { ActivitySingleText } from "./components/singleText";
+import { ActivitySingleZap } from "./components/singleZap";
+
+export function ActivityIdScreen() {
+	const { id } = useParams();
+	const { isLoading, data } = useEvent(id);
+
+	if (isLoading || !data) {
+		return (
+			<div className="w-full h-full flex items-center justify-center">
+				<LoaderIcon className="size-5 animate-spin" />
+			</div>
+		);
+	}
+
+	if (data.kind === NDKKind.Text) return <ActivitySingleText event={data} />;
+	if (data.kind === NDKKind.Zap) return <ActivitySingleZap event={data} />;
+	if (data.kind === NDKKind.Repost)
+		return <ActivitySingleRepost event={data} />;
+
+	return <ActivitySingleText event={data} />;
+}
--- a/apps/desktop/src/routes/activty/index.tsx
+++ b/apps/desktop/src/routes/activty/index.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { ActivityList } from "./components/list";
+
+export function ActivityScreen() {
+	return (
+		<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
+			<div className="h-full flex flex-col w-96 shrink-0 rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50">
+				<div className="h-14 shrink-0 flex items-center px-5 text-lg font-semibold border-b border-black/10 dark:border-white/10">
+					Activity
+				</div>
+				<ActivityList />
+			</div>
+			<div className="flex-1 rounded-r-xl bg-white pb-20 dark:bg-black">
+				<Outlet />
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/create.tsx
+++ b/apps/desktop/src/routes/auth/create.tsx
@@ -0,0 +1,302 @@
+import { useArk } from "@lume/ark";
+import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { onboardingAtom } from "@lume/utils";
+import NDK, {
+	NDKEvent,
+	NDKKind,
+	NDKNip46Signer,
+	NDKPrivateKeySigner,
+} from "@nostr-dev-kit/ndk";
+import * as Select from "@radix-ui/react-select";
+import { downloadDir } from "@tauri-apps/api/path";
+import { Window } from "@tauri-apps/api/window";
+import { save } from "@tauri-apps/plugin-dialog";
+import { writeTextFile } from "@tauri-apps/plugin-fs";
+import { useSetAtom } from "jotai";
+import { getPublicKey, nip19 } from "nostr-tools";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useLoaderData, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+const Item = ({ event }: { event: NDKEvent }) => {
+	const domain = JSON.parse(event.content).nip05.replace("_@", "");
+
+	return (
+		<Select.Item
+			value={event.id}
+			className="relative flex items-center pr-10 leading-none rounded-md select-none text-neutral-100 rounded-mg h-9 pl-7"
+		>
+			<Select.ItemText>@{domain}</Select.ItemText>
+			<Select.ItemIndicator className="absolute left-0 inline-flex items-center justify-center transform h-7">
+				<CheckIcon className="size-4" />
+			</Select.ItemIndicator>
+		</Select.Item>
+	);
+};
+
+export function CreateAccountScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+	const services = useLoaderData() as NDKEvent[];
+	const setOnboarding = useSetAtom(onboardingAtom);
+
+	const [serviceId, setServiceId] = useState(services?.[0]?.id);
+	const [loading, setIsLoading] = useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		formState: { isValid },
+	} = useForm();
+
+	const getDomainName = (id: string) => {
+		const event = services.find((ev) => ev.id === id);
+		return JSON.parse(event.content).nip05.replace("_@", "") as string;
+	};
+
+	const generateNostrKeys = async () => {
+		const signer = NDKPrivateKeySigner.generate();
+		const pubkey = getPublicKey(signer.privateKey);
+
+		const npub = nip19.npubEncode(pubkey);
+		const nsec = nip19.nsecEncode(signer.privateKey);
+
+		ark.updateNostrSigner({ signer });
+
+		const downloadPath = await downloadDir();
+		const fileName = `nostr_keys_${new Date().getTime().toString(36)}.txt`;
+		const filePath = await save({
+			defaultPath: `${downloadPath}/${fileName}`,
+		});
+
+		if (filePath) {
+			await writeTextFile(
+				filePath,
+				`Nostr account, generated by Lume (lume.nu)\nPublic key: ${npub}\nPrivate key: ${nsec}`,
+			);
+		} // else { user cancel action }
+
+		await storage.createAccount({
+			pubkey: pubkey,
+			privkey: signer.privateKey,
+		});
+
+		setOnboarding(true);
+
+		return navigate("/auth/onboarding", { replace: true });
+	};
+
+	const onSubmit = async (data: { username: string; email: string }) => {
+		try {
+			setIsLoading(true);
+
+			const domain = getDomainName(serviceId);
+			const service = services.find((ev) => ev.id === serviceId);
+
+			// generate ndk for nsecbunker
+			const localSigner = NDKPrivateKeySigner.generate();
+			const bunker = new NDK({
+				explicitRelayUrls: [
+					"wss://relay.nsecbunker.com/",
+					"wss://nostr.vulpem.com/",
+				],
+			});
+			await bunker.connect(2000);
+
+			// generate tmp remote singer for create account
+			const remoteSigner = new NDKNip46Signer(
+				bunker,
+				service.pubkey,
+				localSigner,
+			);
+
+			// handle auth url request
+			let authWindow: Window;
+			remoteSigner.addListener("authUrl", (authUrl: string) => {
+				authWindow = new Window(`auth-${serviceId}`, {
+					url: authUrl,
+					title: domain,
+					titleBarStyle: "overlay",
+					width: 415,
+					height: 600,
+					center: true,
+					closable: false,
+				});
+			});
+
+			// create new account
+			const account = await remoteSigner.createAccount(
+				data.username,
+				domain,
+				data.email,
+			);
+
+			if (!account) {
+				authWindow.close();
+				setIsLoading(false);
+
+				return toast.error("Failed to create new account, try again later");
+			}
+
+			authWindow.close();
+
+			// add account to storage
+			await storage.createSetting("nsecbunker", "1");
+			const dbAccount = await storage.createAccount({
+				pubkey: account,
+				privkey: localSigner.privateKey,
+			});
+			ark.account = dbAccount;
+
+			// get final signer with newly created account
+			const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
+			await finalSigner.blockUntilReady();
+
+			// update main ndk instance signer
+			ark.updateNostrSigner({ signer: finalSigner });
+
+			// remove default nsecbunker profile and contact list
+			await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
+			await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
+
+			setOnboarding(true);
+			setIsLoading(false);
+
+			return navigate("/auth/onboarding", { replace: true });
+		} catch (e) {
+			setIsLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	return (
+		<div className="relative flex items-center justify-center w-full h-full">
+			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">
+						Let's get you set up on Nostr.
+					</h1>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						With an account on Nostr, you'll be able to travel across all nostr
+						clients, all your data are synced.
+					</p>
+				</div>
+				{!services ? (
+					<div className="flex items-center justify-center w-full">
+						<LoaderIcon className="size-5 animate-spin" />
+					</div>
+				) : (
+					<div className="flex flex-col gap-6">
+						<form
+							onSubmit={handleSubmit(onSubmit)}
+							className="flex flex-col gap-3 mb-0"
+						>
+							<div className="flex flex-col gap-6 p-5 bg-neutral-950 rounded-2xl">
+								<div className="flex flex-col gap-2">
+									<label
+										htmlFor="username"
+										className="text-sm font-semibold uppercase text-neutral-600"
+									>
+										Username *
+									</label>
+									<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
+										<input
+											type={"text"}
+											{...register("username", {
+												required: true,
+												minLength: 1,
+											})}
+											spellCheck={false}
+											placeholder="satoshi"
+											className="flex-1 min-w-0 text-xl bg-transparent border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-14 ring-0 placeholder:text-neutral-600"
+										/>
+										<Select.Root value={serviceId} onValueChange={setServiceId}>
+											<Select.Trigger className="inline-flex items-center justify-end gap-2 pr-3 text-xl font-semibold text-blue-500 w-max shrink-0">
+												<Select.Value>@{getDomainName(serviceId)}</Select.Value>
+												<Select.Icon>
+													<ChevronDownIcon className="size-5" />
+												</Select.Icon>
+											</Select.Trigger>
+											<Select.Portal>
+												<Select.Content className="border rounded-lg bg-neutral-950 border-neutral-900">
+													<Select.Viewport className="p-3">
+														<Select.Group>
+															<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
+																Public handles
+															</Select.Label>
+															{services.map((service) => (
+																<Item key={service.id} event={service} />
+															))}
+														</Select.Group>
+													</Select.Viewport>
+												</Select.Content>
+											</Select.Portal>
+										</Select.Root>
+									</div>
+								</div>
+								<div className="flex flex-col gap-2">
+									<label
+										htmlFor="email"
+										className="text-sm font-semibold uppercase text-neutral-600"
+									>
+										Backup Email (Optional)
+									</label>
+									<input
+										type={"email"}
+										{...register("email", { required: false })}
+										spellCheck={false}
+										autoCapitalize="none"
+										autoCorrect="none"
+										className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
+									/>
+								</div>
+							</div>
+							<button
+								type="submit"
+								disabled={!isValid}
+								className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+							>
+								{loading ? (
+									<LoaderIcon className="size-5 animate-spin" />
+								) : (
+									"Create Account"
+								)}
+							</button>
+						</form>
+						<div className="flex flex-col gap-6">
+							<div className="relative">
+								<div className="absolute inset-0 flex items-center">
+									<div className="w-full border-t border-neutral-900" />
+								</div>
+								<div className="relative flex justify-center">
+									<span className="px-2 font-medium bg-black text-neutral-600">
+										Or
+									</span>
+								</div>
+							</div>
+							<div>
+								<button
+									type="button"
+									onClick={generateNostrKeys}
+									className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
+								>
+									Generate Nostr Keys
+								</button>
+								<p className="text-sm text-center text-neutral-500">
+									If you are using this option, please make sure keep your keys
+									in safe place. You{" "}
+									<span className="text-red-600">cannot recover</span> if it
+									lost, all your data will be{" "}
+									<span className="text-red-600">lost forever.</span>
+								</p>
+							</div>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/login-key.tsx
+++ b/apps/desktop/src/routes/auth/login-key.tsx
@@ -0,0 +1,118 @@
+import { useArk } from "@lume/ark";
+import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { getPublicKey, nip19 } from "nostr-tools";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+export function LoginWithKey() {
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+
+	const [showKey, setShowKey] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		formState: { errors, isValid },
+	} = useForm();
+
+	const onSubmit = async (data: { nsec: string }) => {
+		try {
+			if (!data.nsec.startsWith("nsec1"))
+				return toast.error("You need to enter a private key start with nsec1");
+
+			setLoading(true);
+
+			const privkey = nip19.decode(data.nsec).data as string;
+			const pubkey = getPublicKey(privkey);
+
+			const account = await storage.createAccount({
+				pubkey: pubkey,
+				privkey: privkey,
+			});
+			ark.account = account;
+
+			return navigate("/auth/onboarding", { replace: true });
+		} catch (e) {
+			setLoading(false);
+			setError("nsec", {
+				type: "manual",
+				message: String(e),
+			});
+		}
+	};
+
+	return (
+		<div className="relative flex items-center justify-center w-full h-full">
+			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">Enter your Private Key</h1>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Lume will put your private key to{" "}
+						<span className="text-teal-500">
+							{storage.platform === "macos"
+								? "Apple Keychain"
+								: storage.platform === "windows"
+								  ? "Credential Manager"
+								  : "Secret Service"}
+						</span>
+						.
+						<br />
+						It will be secured by your OS.
+					</p>
+				</div>
+				<div className="flex flex-col gap-6">
+					<form
+						onSubmit={handleSubmit(onSubmit)}
+						className="flex flex-col gap-4 mb-0"
+					>
+						<div className="relative flex flex-col gap-1">
+							<input
+								type={showKey ? "text" : "password"}
+								{...register("nsec", { required: false })}
+								spellCheck={false}
+								autoCapitalize="none"
+								autoCorrect="none"
+								placeholder="nsec1..."
+								className="pl-3 pr-11 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
+							/>
+							{errors.nsec && (
+								<p className="text-sm text-center text-red-600">
+									{errors.nsec.message as string}
+								</p>
+							)}
+							<button
+								type="button"
+								onClick={() => setShowKey((state) => !state)}
+								className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-900 hover:bg-neutral-800"
+							>
+								{showKey ? (
+									<EyeOnIcon className="size-5" />
+								) : (
+									<EyeOffIcon className="size-5" />
+								)}
+							</button>
+						</div>
+						<button
+							type="submit"
+							disabled={!isValid || loading}
+							className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+						>
+							{loading ? (
+								<LoaderIcon className="size-5 animate-spin" />
+							) : (
+								"Continue"
+							)}
+						</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/login-nsecbunker.tsx
+++ b/apps/desktop/src/routes/auth/login-nsecbunker.tsx
@@ -0,0 +1,112 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { nip19 } from "nostr-tools";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+export function LoginWithNsecbunker() {
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		formState: { errors, isValid },
+	} = useForm();
+
+	const onSubmit = async (data: { npub: string }) => {
+		try {
+			if (!data.npub.startsWith("npub1"))
+				return toast.info("You need to enter a token start with npub1");
+
+			if (!data.npub.includes("#"))
+				return toast.info("Token must include #secret");
+
+			setLoading(true);
+
+			const bunker = new NDK({
+				explicitRelayUrls: [
+					"wss://relay.nsecbunker.com",
+					"wss://nostr.vulpem.com",
+				],
+			});
+			await bunker.connect(2000);
+
+			const pubkey = nip19.decode(data.npub.split("#")[0]).data as string;
+			const localSigner = NDKPrivateKeySigner.generate();
+			const remoteSigner = new NDKNip46Signer(bunker, data.npub, localSigner);
+			await remoteSigner.blockUntilReady();
+
+			ark.updateNostrSigner({ signer: remoteSigner });
+
+			await storage.createSetting("nsecbunker", "1");
+			const account = await storage.createAccount({
+				pubkey: pubkey,
+				privkey: localSigner.privateKey,
+			});
+			ark.account = account;
+
+			return navigate("/auth/onboarding", { replace: true });
+		} catch (e) {
+			setLoading(false);
+			setError("npub", {
+				type: "manual",
+				message: String(e),
+			});
+		}
+	};
+
+	return (
+		<div className="relative flex items-center justify-center w-full h-full">
+			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">
+						Enter your nsecbunker token
+					</h1>
+				</div>
+				<div className="flex flex-col gap-6">
+					<form
+						onSubmit={handleSubmit(onSubmit)}
+						className="flex flex-col gap-4 mb-0"
+					>
+						<div className="relative flex flex-col gap-1">
+							<input
+								type="text"
+								{...register("npub", { required: false })}
+								spellCheck={false}
+								autoCapitalize="none"
+								autoCorrect="none"
+								placeholder="npub1...#..."
+								className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
+							/>
+							{errors.npub && (
+								<p className="text-sm text-center text-red-600">
+									{errors.npub.message as string}
+								</p>
+							)}
+						</div>
+						<button
+							type="submit"
+							disabled={!isValid || loading}
+							className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+						>
+							{loading ? (
+								<LoaderIcon className="size-5 animate-spin" />
+							) : (
+								"Continue"
+							)}
+						</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/login-oauth.tsx
+++ b/apps/desktop/src/routes/auth/login-oauth.tsx
@@ -0,0 +1,172 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { NIP05 } from "@lume/types";
+import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { Window } from "@tauri-apps/api/window";
+import { fetch } from "@tauri-apps/plugin-http";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+
+export function LoginWithOAuth() {
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		formState: { errors, isValid },
+	} = useForm();
+
+	const onSubmit = async (data: { nip05: string }) => {
+		try {
+			setLoading(true);
+
+			if (!emailRegex.test(data.nip05)) {
+				setLoading(false);
+				return toast.error(
+					"Cannot verify your NIP-05 address, please try again later.",
+				);
+			}
+
+			const localPath = data.nip05.split("@")[0];
+			const service = data.nip05.split("@")[1];
+
+			const verifyURL = `https://${service}/.well-known/nostr.json?name=${localPath}`;
+
+			const req = await fetch(verifyURL, {
+				method: "GET",
+				headers: {
+					"Content-Type": "application/json; charset=utf-8",
+				},
+			});
+
+			if (!req.ok) {
+				setLoading(false);
+				return toast.error(
+					"Cannot verify your NIP-05 address, please try again later.",
+				);
+			}
+
+			const res: NIP05 = await req.json();
+
+			if (!res.names[localPath.toLowerCase()] || !res.names[localPath]) {
+				setLoading(false);
+				return toast.error(
+					"Cannot verify your NIP-05 address, please try again later.",
+				);
+			}
+
+			const pubkey =
+				(res.names[localPath] as string) ||
+				(res.names[localPath.toLowerCase()] as string);
+
+			if (!res.nip46[pubkey]) {
+				setLoading(false);
+				return toast.error("Cannot found NIP-46 with this address");
+			}
+
+			const nip46Relays = res.nip46[pubkey] as unknown as string[];
+
+			const bunker = new NDK({
+				explicitRelayUrls: nip46Relays || [
+					"wss://relay.nsecbunker.com",
+					"wss://nostr.vulpem.com",
+				],
+			});
+			await bunker.connect(2000);
+
+			const localSigner = NDKPrivateKeySigner.generate();
+			const remoteSigner = new NDKNip46Signer(bunker, pubkey, localSigner);
+
+			// handle auth url request
+			let authWindow: Window;
+			remoteSigner.addListener("authUrl", (authUrl: string) => {
+				authWindow = new Window(`auth-${pubkey}`, {
+					url: authUrl,
+					title: "Login",
+					titleBarStyle: "overlay",
+					width: 415,
+					height: 600,
+					center: true,
+					closable: false,
+				});
+			});
+
+			const remoteUser = await remoteSigner.blockUntilReady();
+
+			if (remoteUser) {
+				authWindow.close();
+
+				ark.updateNostrSigner({ signer: remoteSigner });
+
+				await storage.createSetting("nsecbunker", "1");
+				const account = await storage.createAccount({
+					pubkey,
+					privkey: localSigner.privateKey,
+				});
+				ark.account = account;
+
+				return navigate("/auth/onboarding", { replace: true });
+			}
+		} catch (e) {
+			setLoading(false);
+			setError("nip05", {
+				type: "manual",
+				message: String(e),
+			});
+		}
+	};
+
+	return (
+		<div className="relative flex items-center justify-center w-full h-full">
+			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">Enter your NIP-05 address</h1>
+				</div>
+				<div className="flex flex-col gap-6">
+					<form
+						onSubmit={handleSubmit(onSubmit)}
+						className="flex flex-col gap-4 mb-0"
+					>
+						<div className="relative flex flex-col gap-1">
+							<input
+								type="email"
+								{...register("nip05", { required: false })}
+								spellCheck={false}
+								autoCapitalize="none"
+								autoCorrect="none"
+								placeholder="satoshi@nostr.me"
+								className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
+							/>
+							{errors.nip05 && (
+								<p className="text-sm text-center text-red-600">
+									{errors.nip05.message as string}
+								</p>
+							)}
+						</div>
+						<button
+							type="submit"
+							disabled={!isValid || loading}
+							className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+						>
+							{loading ? (
+								<LoaderIcon className="size-5 animate-spin" />
+							) : (
+								"Continue"
+							)}
+						</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/login.tsx
+++ b/apps/desktop/src/routes/auth/login.tsx
@@ -0,0 +1,55 @@
+import { Link } from "react-router-dom";
+
+export function LoginScreen() {
+	return (
+		<div className="relative flex items-center justify-center w-full h-full">
+			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">
+						Continue your experience on Nostr
+					</h1>
+				</div>
+				<div className="flex flex-col gap-6">
+					<div className="flex flex-col gap-2">
+						<Link
+							to="/auth/login-oauth"
+							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
+						>
+							Login with address
+						</Link>
+						<Link
+							to="/auth/login-nsecbunker"
+							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
+						>
+							Login with nsecbunker
+						</Link>
+					</div>
+					<div className="flex flex-col gap-6">
+						<div className="relative">
+							<div className="absolute inset-0 flex items-center">
+								<div className="w-full border-t border-neutral-900" />
+							</div>
+							<div className="relative flex justify-center">
+								<span className="px-2 font-medium bg-black text-neutral-600">
+									Or (Not recommend)
+								</span>
+							</div>
+						</div>
+						<div>
+							<Link
+								to="/auth/login-key"
+								className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
+							>
+								Login with Private Key
+							</Link>
+							<p className="text-sm text-center text-neutral-500">
+								Lume will store your Private Key in{" "}
+								<span className="text-teal-600">OS Secure Storage</span>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/onboarding.tsx
+++ b/apps/desktop/src/routes/auth/onboarding.tsx
@@ -0,0 +1,227 @@
+import { useArk } from "@lume/ark";
+import { InfoIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { TranslateRegisterModal } from "@lume/ui";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import * as Switch from "@radix-ui/react-switch";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+	isPermissionGranted,
+	requestPermission,
+} from "@tauri-apps/plugin-notification";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+export function OnboardingScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+	const [apiKey, setAPIKey] = useState("");
+	const [settings, setSettings] = useState({
+		notification: false,
+		lowPower: false,
+		translation: false,
+	});
+
+	const toggleLowPower = async () => {
+		await storage.createSetting("lowPower", String(+!settings.lowPower));
+		setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
+	};
+
+	const toggleTranslation = async () => {
+		await storage.createSetting("translation", String(+!settings.translation));
+		setSettings((state) => ({ ...state, translation: !settings.translation }));
+	};
+
+	const toggleNofitication = async () => {
+		await requestPermission();
+		setSettings((state) => ({
+			...state,
+			notification: !settings.notification,
+		}));
+	};
+
+	const completeAuth = async () => {
+		if (settings.translation) {
+			if (!apiKey.length)
+				return toast.warning(
+					"You need to provide Translate API if enable translation",
+				);
+
+			await storage.createSetting("translateApiKey", apiKey);
+		}
+
+		setLoading(true);
+
+		// get account contacts
+		await ark.getUserContacts();
+
+		// refetch newsfeed
+		await queryClient.prefetchInfiniteQuery({
+			queryKey: ["timeline-9999"],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const events = await ark.getInfiniteEvents({
+					filter: {
+						kinds: [NDKKind.Text, NDKKind.Repost],
+						authors: ark.account.contacts,
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+		});
+
+		navigate("/");
+	};
+
+	useEffect(() => {
+		async function loadSettings() {
+			// get notification permission
+			const permissionGranted = await isPermissionGranted();
+			setSettings((prev) => ({ ...prev, notification: permissionGranted }));
+
+			// get other settings
+			const data = await storage.getAllSettings();
+			for (const item of data) {
+				if (item.key === "lowPower")
+					setSettings((prev) => ({
+						...prev,
+						lowPower: !!parseInt(item.value),
+					}));
+
+				if (item.key === "translation")
+					setSettings((prev) => ({
+						...prev,
+						translation: !!parseInt(item.value),
+					}));
+			}
+		}
+
+		loadSettings();
+	}, []);
+
+	return (
+		<div className="relative flex h-full w-full items-center justify-center">
+			<div className="mx-auto flex w-full max-w-md flex-col gap-10">
+				<div className="flex flex-col gap-1 text-center items-center">
+					<h1 className="text-2xl font-semibold">
+						You&apos;re almost ready to use Lume.
+					</h1>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Let&apos;s start personalizing your experience.
+					</p>
+				</div>
+				<div className="flex flex-col gap-3">
+					<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
+						<Switch.Root
+							checked={settings.notification}
+							onClick={() => toggleNofitication()}
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
+						>
+							<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+						</Switch.Root>
+						<div>
+							<h3 className="font-semibold text-lg">Push notification</h3>
+							<p className="text-neutral-500">
+								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-xl px-5 py-4 bg-neutral-950">
+						<Switch.Root
+							checked={settings.lowPower}
+							onClick={() => toggleLowPower()}
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
+						>
+							<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+						</Switch.Root>
+						<div>
+							<h3 className="font-semibold text-lg">Low Power Mode</h3>
+							<p className="text-neutral-500">
+								Limited relay connection and hide all media, sustainable for low
+								network environment.
+							</p>
+						</div>
+					</div>
+					<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
+						<Switch.Root
+							checked={settings.translation}
+							onClick={() => toggleTranslation()}
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
+						>
+							<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+						</Switch.Root>
+						<div>
+							<h3 className="font-semibold text-lg">
+								Translation (nostr.wine)
+							</h3>
+							<p className="text-neutral-500">
+								Translate text to your preferred language, powered by Nostr
+								Wine.
+							</p>
+						</div>
+					</div>
+					{settings.translation ? (
+						<div className="flex flex-col w-full items-start justify-between gap-2 rounded-xl px-5 py-4 bg-neutral-950">
+							<h3 className="font-semibold">Translate API Key</h3>
+							<input
+								type="password"
+								spellCheck={false}
+								value={apiKey}
+								onChange={(e) => setAPIKey(e.target.value)}
+								className="w-full text-xl border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-11 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-900"
+							/>
+							<div className="w-full mt-1">
+								<div className="relative">
+									<div className="absolute inset-0 flex items-center">
+										<div className="w-full border-t border-neutral-900" />
+									</div>
+									<div className="relative flex justify-center">
+										<span className="px-2 text-sm font-medium bg-neutral-950 text-neutral-600">
+											Not have API ?
+										</span>
+									</div>
+								</div>
+								<TranslateRegisterModal setAPIKey={setAPIKey} />
+							</div>
+						</div>
+					) : null}
+					<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
+						<InfoIcon className="size-8" />
+						<p>
+							There are many more settings you can configure from the
+							&quot;Settings&quot; screen. Be sure to visit it later.
+						</p>
+					</div>
+					<button
+						type="button"
+						onClick={completeAuth}
+						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? (
+							<LoaderIcon className="size-5 animate-spin" />
+						) : (
+							"Continue"
+						)}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/tutorials/finish.tsx
+++ b/apps/desktop/src/routes/auth/tutorials/finish.tsx
@@ -0,0 +1,46 @@
+import { Link } from "react-router-dom";
+
+export function TutorialFinishScreen() {
+	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-10">
+				<div className="text-center">
+					<img
+						src="/icon.png"
+						alt="Lume's logo"
+						className="mx-auto mb-1 h-auto w-16"
+					/>
+					<h1 className="text-2xl font-light">
+						Yo, you&apos;ve understood basic features 🎉
+					</h1>
+				</div>
+				<div className="flex flex-col gap-2">
+					<Link
+						to="/"
+						className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+					>
+						Start using Lume
+					</Link>
+					<Link
+						to="https://nostr.how/"
+						target="_blank"
+						className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+					>
+						Learn more about Nostr
+					</Link>
+					<p className="text-center text-sm font-medium text-neutral-500 dark:text-neutral-600">
+						If you&apos;ve trouble when user Lume, you can report the issue{" "}
+						<a
+							href="github.com/luminous-devs/lume"
+							target="_blank"
+							className="text-blue-500 !underline"
+							rel="noreferrer"
+						>
+							here
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/tutorials/note.tsx
+++ b/apps/desktop/src/routes/auth/tutorials/note.tsx
@@ -0,0 +1,102 @@
+import { TextNote } from "@lume/ark";
+import {
+	EditIcon,
+	ReactionIcon,
+	ReplyIcon,
+	RepostIcon,
+	ZapIcon,
+} from "@lume/icons";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function TutorialNoteScreen() {
+	const exampleEvent = new NDKEvent(undefined, {
+		id: "a3527670dd9b178bf7c2a9ea673b63bc8bfe774942b196691145343623c45821",
+		pubkey: "04c915daefee38317fa734444acee390a8269fe5810b2241e5e6dd343dfbecc9",
+		created_at: 1701355223,
+		kind: 1,
+		tags: [],
+		content: "good morning nostr, stay humble and stack sats 🫡",
+		sig: "9e0bd67ec25598744f20bff0fe360fdf190c4240edb9eea260e50f77e07f94ea767ececcc6270819b7f64e5e7ca1fe20b4971f46dc120e6db43114557f3a6dae",
+	});
+
+	return (
+		<div className="flex h-full w-full select-text items-center justify-center">
+			<div className="mx-auto flex w-full max-w-md flex-col gap-10">
+				<div className="flex flex-col items-center gap-3">
+					<div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+						<EditIcon className="h-5 w-5" />
+					</div>
+					<h1 className="text-2xl font-light">
+						What is a <span className="font-bold">Note?</span>
+					</h1>
+				</div>
+				<div className="flex flex-col gap-2">
+					<p className="px-3">
+						Posts on Nostr based Social Network client are usually called
+						&apos;Notes.&apos; Notes are arranged chronologically on the
+						timeline and are updated in real-time.
+					</p>
+					<p className="px-3 font-semibold">Here is one example:</p>
+					<TextNote event={exampleEvent} />
+					<p className="px-3 font-semibold">
+						Here are how you can interact with a note:
+					</p>
+					<div className="flex flex-col gap-2 px-3">
+						<div className="inline-flex gap-3">
+							<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+								<ReplyIcon className="h-5 w-5 text-blue-500" />
+							</div>
+							<p>
+								Reply - Click on this button to reply to a note. It&apos;s also
+								possible to reply to replies, continuing the conversation like a
+								thread.
+							</p>
+						</div>
+						<div className="inline-flex gap-3">
+							<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+								<ReactionIcon className="h-5 w-5 text-red-500" />
+							</div>
+							<p>
+								Reaction - You can add reactions to the Note to express your
+								concern.
+							</p>
+						</div>
+						<div className="inline-flex gap-3">
+							<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+								<RepostIcon className="h-5 w-5 text-teal-500" />
+							</div>
+							<p>
+								Repost - You can share that note to your own timeline. You can
+								also quote them with your comments.
+							</p>
+						</div>
+						<div className="inline-flex gap-3">
+							<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+								<ZapIcon className="h-5 w-5 text-orange-500" />
+							</div>
+							<p>
+								Zap - You can send tip in Bitcoin to that note owner with
+								zero-fees
+							</p>
+						</div>
+					</div>
+					<div className="mt-5 flex gap-2 px-3">
+						<Link
+							to="/auth/finish"
+							className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						>
+							Back
+						</Link>
+						<Link
+							to="/auth/tutorials/widget"
+							className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+						>
+							Continue
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/tutorials/posting.tsx
+++ b/apps/desktop/src/routes/auth/tutorials/posting.tsx
@@ -0,0 +1,3 @@
+export function TutorialPostingScreen() {
+  return <div></div>;
+}
--- a/apps/desktop/src/routes/auth/tutorials/widget.tsx
+++ b/apps/desktop/src/routes/auth/tutorials/widget.tsx
@@ -0,0 +1,67 @@
+import { BellIcon, HomeIcon, PlusIcon } from "@lume/icons";
+import { Link } from "react-router-dom";
+
+export function TutorialWidgetScreen() {
+	return (
+		<div className="flex h-full w-full select-text items-center justify-center">
+			<div className="mx-auto flex w-full max-w-md flex-col gap-10">
+				<div className="flex flex-col items-center gap-3">
+					<div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+						<HomeIcon className="h-5 w-5" />
+					</div>
+					<h1 className="text-2xl font-light">
+						The concept of <span className="font-bold">Widgets</span>
+					</h1>
+				</div>
+				<div className="flex flex-col gap-2 px-3">
+					<p>
+						Lume provides multiple widgets based on usage. You always can
+						control what you need to show on your Home.
+					</p>
+					<p className="font-semibold">Default widgets:</p>
+					<div className="inline-flex gap-3">
+						<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+							<HomeIcon className="h-5 w-5" />
+						</div>
+						<p>Newsfeed - You can view notes from accounts you follow.</p>
+					</div>
+					<div className="inline-flex gap-3">
+						<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+							<BellIcon className="h-5 w-5" />
+						</div>
+						<p>
+							Notification - You can view all notifications related to your
+							account.
+						</p>
+					</div>
+					<p>
+						If you want to add more widget, you can click to this button on Home
+						Screen.
+					</p>
+					<div className="flex h-24 w-full items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+						<button
+							type="button"
+							className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+						>
+							<PlusIcon className="h-5 w-5" />
+						</button>
+					</div>
+					<div className="mt-5 flex gap-2">
+						<Link
+							to="/auth/tutorials/note"
+							className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						>
+							Back
+						</Link>
+						<Link
+							to="/auth/tutorials/finish"
+							className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+						>
+							Continue
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/auth/welcome.tsx
+++ b/apps/desktop/src/routes/auth/welcome.tsx
@@ -0,0 +1,65 @@
+import { LoaderIcon } from "@lume/icons";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+export function WelcomeScreen() {
+	const navigate = useNavigate();
+	const [loading, setLoading] = useState(false);
+
+	const gotoCreateAccount = () => {
+		setLoading(true);
+		navigate("/auth/create");
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-between w-full h-full">
+			<div />
+			<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
+				<div className="flex flex-col items-center text-center">
+					<img
+						src="/heading.png"
+						srcSet="/heading@2x.png 2x"
+						alt="lume"
+						className="w-2/3"
+					/>
+					<p className="mt-5 text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Lume is your safe Nostr client to meet, explore and
+						<br />
+						freely sharing your though to everyone in nostrverse
+					</p>
+				</div>
+				<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
+					<button
+						type="button"
+						onClick={gotoCreateAccount}
+						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
+					>
+						{loading ? (
+							<LoaderIcon className="size-5 animate-spin" />
+						) : (
+							"Create New Account"
+						)}
+					</button>
+					<Link
+						to="/auth/login"
+						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
+					>
+						Login
+					</Link>
+				</div>
+			</div>
+			<div className="flex items-center justify-center h-11">
+				<p className="text-neutral-800">
+					Before joining Nostr, you can take time to learn more about Nostr{" "}
+					<Link
+						to="https://nostr.com"
+						target="_blank"
+						className="text-blue-500"
+					>
+						here
+					</Link>
+				</p>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/depot/components/contact.tsx
+++ b/apps/desktop/src/routes/depot/components/contact.tsx
@@ -0,0 +1,72 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon, RunIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { User } from "@lume/ui";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function DepotContactCard() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [status, setStatus] = useState(false);
+
+	const backupContact = async () => {
+		try {
+			setStatus(true);
+
+			const event = await ark.getEventByFilter({
+				filter: {
+					authors: [ark.account.pubkey],
+					kinds: [NDKKind.Contacts],
+				},
+			});
+
+			// broadcast to depot
+			const publish = await event.publish();
+
+			if (publish) {
+				setStatus(false);
+				toast.success("Backup contact list successfully.");
+			}
+		} catch (e) {
+			setStatus(false);
+			toast.error(e);
+		}
+	};
+
+	return (
+		<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
+			<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
+				<div className="isolate flex -space-x-2">
+					{ark.account.contacts?.slice(0, 8).map((item) => (
+						<User key={item} pubkey={item} variant="ministacked" />
+					))}
+					{ark.account.contacts?.length > 8 ? (
+						<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-neutral-900 ring-1 ring-white dark:bg-neutral-700 dark:text-neutral-100 dark:ring-black">
+							<span className="text-[8px] font-medium">
+								+{ark.account.contacts?.length - 8}
+							</span>
+						</div>
+					) : null}
+				</div>
+			</div>
+			<div className="inline-flex shrink-0 items-center justify-between">
+				<div className="text-sm font-medium">Contacts</div>
+				<button
+					type="button"
+					onClick={backupContact}
+					className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
+				>
+					{status ? (
+						<LoaderIcon className="size-4 animate-spin" />
+					) : (
+						<RunIcon className="size-4" />
+					)}
+					Backup
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/depot/components/members.tsx
+++ b/apps/desktop/src/routes/depot/components/members.tsx
@@ -0,0 +1,150 @@
+import { CancelIcon, PlusIcon, UserAddIcon, UserRemoveIcon } from "@lume/icons";
+import { User } from "@lume/ui";
+import * as Dialog from "@radix-ui/react-dialog";
+import { resolveResource } from "@tauri-apps/api/path";
+import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
+import { nip19 } from "nostr-tools";
+import { useEffect, useState } from "react";
+import { parse, stringify } from "smol-toml";
+import { toast } from "sonner";
+
+export function DepotMembers() {
+	const [members, setMembers] = useState<Set<string>>(null);
+	const [tmpMembers, setTmpMembers] = useState<Array<string>>([]);
+	const [newMember, setNewMember] = useState("");
+
+	const addMember = async () => {
+		if (!newMember.startsWith("npub1"))
+			return toast.error("You need to enter a valid npub");
+
+		try {
+			const pubkey = nip19.decode(newMember).data as string;
+			setTmpMembers((prev) => [...prev, pubkey]);
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	const removeMember = (member: string) => {
+		setTmpMembers((prev) => prev.filter((item) => item !== member));
+	};
+
+	const updateMembers = async () => {
+		setMembers(new Set(tmpMembers));
+
+		const defaultConfig = await resolveResource("resources/config.toml");
+		const config = await readTextFile(defaultConfig);
+		const configContent = parse(config);
+
+		// biome-ignore lint/complexity/useLiteralKeys: <explanation>
+		configContent.authorization["pubkey_whitelist"] = [...members];
+
+		const newConfig = stringify(configContent);
+
+		return await writeTextFile(defaultConfig, newConfig);
+	};
+
+	useEffect(() => {
+		async function loadConfig() {
+			const defaultConfig = await resolveResource("resources/config.toml");
+			const config = await readTextFile(defaultConfig);
+			const configContent = parse(config);
+			setTmpMembers(
+				// biome-ignore lint/complexity/useLiteralKeys: <explanation>
+				Array.from(configContent.authorization["pubkey_whitelist"]),
+			);
+		}
+
+		loadConfig();
+	}, []);
+
+	return (
+		<Dialog.Root>
+			<div className="flex items-center justify-between rounded-lg bg-neutral-50 p-5 dark:bg-neutral-950">
+				<div className="flex flex-col items-start">
+					<h3 className="text-lg font-semibold">Members</h3>
+					<p className="text-neutral-700 dark:text-neutral-300">
+						Only allowed users can publish event to your Depot
+					</p>
+				</div>
+				<div className="inline-flex items-center gap-2">
+					<div className="isolate flex -space-x-2">
+						{tmpMembers.slice(0, 5).map((item) => (
+							<User key={item} pubkey={item} variant="stacked" />
+						))}
+						{tmpMembers.length > 5 ? (
+							<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
+								<span className="text-xs font-medium">
+									+{tmpMembers.length}
+								</span>
+							</div>
+						) : null}
+					</div>
+					<Dialog.Trigger className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-lg bg-blue-500 px-3 text-white hover:bg-blue-600">
+						<UserAddIcon className="size-4" />
+						Manage
+					</Dialog.Trigger>
+				</div>
+			</div>
+			<Dialog.Portal>
+				<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-black/10" />
+				<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+					<div className="relative h-min w-full max-w-xl overflow-hidden rounded-xl bg-white dark:bg-black">
+						<div className="inline-flex h-14 w-full shrink-0 items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-900">
+							<Dialog.Title className="text-center font-semibold">
+								Manage member
+							</Dialog.Title>
+							<div className="inline-flex items-center gap-2">
+								<button
+									type="button"
+									onClick={updateMembers}
+									className="inline-flex h-8 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 text-sm font-medium text-white hover:bg-blue-600"
+								>
+									Update
+								</button>
+								<Dialog.Close className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+									<CancelIcon className="size-4" />
+								</Dialog.Close>
+							</div>
+						</div>
+						<div className="pb-3">
+							<div className="relative mb-2 mt-4 w-full px-5">
+								<input
+									type="text"
+									spellCheck={false}
+									value={newMember}
+									onChange={(e) => setNewMember(e.target.value)}
+									placeholder="npub1..."
+									className="h-11 w-full rounded-lg border-transparent bg-neutral-100 pl-3 pr-20 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+								/>
+								<button
+									type="button"
+									onClick={addMember}
+									className="absolute right-7 top-1/2 inline-flex h-7 w-max -translate-y-1/2 transform items-center justify-center gap-1 rounded-md bg-neutral-200 px-2.5 text-sm font-medium text-blue-500 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
+								>
+									<PlusIcon className="size-4" />
+									Add
+								</button>
+							</div>
+							{tmpMembers.map((member) => (
+								<div
+									key={member}
+									className="group flex items-center justify-between px-5 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900"
+								>
+									<User pubkey={member} variant="simple" />
+									<button
+										type="button"
+										onClick={() => removeMember(member)}
+										className="hidden size-6 items-center justify-center rounded-md bg-neutral-200 group-hover:inline-flex hover:bg-red-200 dark:bg-neutral-800 dark:hover:bg-red-800 dark:hover:text-red-200"
+									>
+										<UserRemoveIcon className="size-4 text-red-500" />
+									</button>
+								</div>
+							))}
+						</div>
+					</div>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
--- a/apps/desktop/src/routes/depot/components/profile.tsx
+++ b/apps/desktop/src/routes/depot/components/profile.tsx
@@ -0,0 +1,61 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon, RunIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { User } from "@lume/ui";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function DepotProfileCard() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [status, setStatus] = useState(false);
+
+	const backupProfile = async () => {
+		try {
+			setStatus(true);
+
+			const event = await ark.getEventByFilter({
+				filter: {
+					authors: [ark.account.pubkey],
+					kinds: [NDKKind.Metadata],
+				},
+			});
+
+			// broadcast to depot
+			const publish = await event.publish();
+
+			if (publish) {
+				setStatus(false);
+				toast.success("Backup profile successfully.");
+			}
+		} catch (e) {
+			setStatus(false);
+			toast.error(JSON.stringify(e));
+		}
+	};
+
+	return (
+		<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
+			<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
+				<User pubkey={ark.account.pubkey} variant="simple" />
+			</div>
+			<div className="inline-flex shrink-0 items-center justify-between">
+				<div className="text-sm font-medium">Profile</div>
+				<button
+					type="button"
+					onClick={backupProfile}
+					className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
+				>
+					{status ? (
+						<LoaderIcon className="size-4 animate-spin" />
+					) : (
+						<RunIcon className="size-4" />
+					)}
+					Backup
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/depot/components/relays.tsx
+++ b/apps/desktop/src/routes/depot/components/relays.tsx
@@ -0,0 +1,75 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon, RunIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+export function DepotRelaysCard() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [status, setStatus] = useState(false);
+	const [relaySize, setRelaySize] = useState(0);
+
+	const backupRelays = async () => {
+		try {
+			setStatus(true);
+
+			const event = await ark.getEventByFilter({
+				filter: {
+					authors: [ark.account.pubkey],
+					kinds: [NDKKind.RelayList],
+				},
+			});
+
+			// broadcast to depot
+			const publish = await event.publish();
+
+			if (publish) {
+				setStatus(false);
+				toast.success("Backup profile successfully.");
+			}
+		} catch (e) {
+			setStatus(false);
+			toast.error(JSON.stringify(e));
+		}
+	};
+
+	useEffect(() => {
+		async function loadRelays() {
+			const event = await ark.getEventByFilter({
+				filter: {
+					authors: [ark.account.pubkey],
+					kinds: [NDKKind.RelayList],
+				},
+			});
+			if (event) setRelaySize(event.tags.length);
+		}
+
+		loadRelays();
+	}, []);
+
+	return (
+		<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
+			<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
+				<p className="text-lg font-semibold">{relaySize} relays</p>
+			</div>
+			<div className="inline-flex shrink-0 items-center justify-between">
+				<div className="text-sm font-medium">Relay List</div>
+				<button
+					type="button"
+					onClick={backupRelays}
+					className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
+				>
+					{status ? (
+						<LoaderIcon className="size-4 animate-spin" />
+					) : (
+						<RunIcon className="size-4" />
+					)}
+					Backup
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/depot/index.tsx
+++ b/apps/desktop/src/routes/depot/index.tsx
@@ -0,0 +1,222 @@
+import { useArk } from "@lume/ark";
+import { ChevronDownIcon, DepotIcon, GossipIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { invoke } from "@tauri-apps/api/core";
+import { appConfigDir } from "@tauri-apps/api/path";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { DepotContactCard } from "./components/contact";
+import { DepotMembers } from "./components/members";
+import { DepotProfileCard } from "./components/profile";
+import { DepotRelaysCard } from "./components/relays";
+
+export function DepotScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [dataPath, setDataPath] = useState("");
+	const [tunnelUrl, setTunnelUrl] = useState("");
+
+	const openFolder = async () => {
+		await invoke("show_in_folder", {
+			path: `${dataPath}/nostr.db`,
+		});
+	};
+
+	const updateRelayList = async () => {
+		try {
+			if (tunnelUrl.length < 1)
+				return toast.info("Please enter a valid relay url");
+			if (!tunnelUrl.startsWith("ws"))
+				return toast.info("Please enter a valid relay url");
+
+			const relayUrl = new URL(tunnelUrl.replace(/\s/g, ""));
+			if (!/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(relayUrl.host)) return;
+
+			const relayEvent = await ark.getEventByFilter({
+				filter: {
+					authors: [ark.account.pubkey],
+					kinds: [NDKKind.RelayList],
+				},
+			});
+
+			let publish: { id: string; seens: string[] };
+
+			if (!relayEvent) {
+				publish = await ark.createEvent({
+					kind: NDKKind.RelayList,
+					tags: [["r", tunnelUrl, ""]],
+				});
+			}
+
+			const newTags = relayEvent.tags ?? [];
+			newTags.push(["r", tunnelUrl, ""]);
+
+			publish = await ark.createEvent({
+				kind: NDKKind.RelayList,
+				tags: newTags,
+			});
+
+			if (publish) {
+				await storage.createSetting("tunnel_url", tunnelUrl);
+				toast.success("Update relay list successfully.");
+
+				setTunnelUrl("");
+			}
+		} catch (e) {
+			console.error(e);
+			toast.error("Error");
+		}
+	};
+
+	useEffect(() => {
+		async function loadConfig() {
+			const appDir = await appConfigDir();
+			setDataPath(appDir);
+		}
+
+		loadConfig();
+	}, []);
+
+	return (
+		<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
+			<div className="h-full w-72 shrink-0 rounded-l-xl bg-white/50 px-8 pt-8 backdrop-blur-xl dark:bg-black/50">
+				<div className="flex flex-col justify-center gap-4">
+					<div className="size-16 rounded-xl bg-gradient-to-bl from-teal-300 to-teal-600 p-1">
+						<div className="relative inline-flex h-full w-full items-center justify-center overflow-hidden rounded-lg bg-gradient-to-bl from-teal-400 to-teal-700 shadow-sm shadow-white/20">
+							<DepotIcon className="size-8 text-white" />
+						</div>
+					</div>
+					<h1 className="text-xl font-semibold">Depot is running</h1>
+				</div>
+				<div className="mt-8 flex flex-col gap-4">
+					<div className="flex flex-col gap-1.5">
+						<div className="text-sm font-medium">Relay URL</div>
+						<div className="inline-flex h-10 w-full select-text items-center rounded-lg bg-black/10 px-3 text-sm backdrop-blur-xl dark:bg-white/10">
+							ws://localhost:6090
+						</div>
+					</div>
+					<div className="flex flex-col gap-1.5">
+						<div className="text-sm font-medium">Database</div>
+						<div className="inline-flex h-10 w-full items-center gap-2 truncate rounded-lg bg-black/10 p-1 backdrop-blur-xl dark:bg-white/10">
+							<p className="shrink-0 pl-2 text-sm">nostr.db (SQLite)</p>
+							<button
+								type="button"
+								onClick={openFolder}
+								className="inline-flex h-full w-full items-center justify-center rounded-md bg-white text-sm font-medium shadow hover:bg-blue-500 hover:text-white dark:bg-black"
+							>
+								Open
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="flex-1 overflow-y-auto rounded-r-xl bg-white pb-20 dark:bg-black">
+				<div className="mb-5 flex h-12 items-center border-b border-neutral-100 px-5 dark:border-neutral-900">
+					<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+						Actions
+					</h3>
+				</div>
+				<div className="flex flex-col gap-5 px-5">
+					<Collapsible.Root
+						defaultOpen
+						className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950"
+					>
+						<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
+							<div className="flex flex-col items-start">
+								<h3 className="text-lg font-semibold">Expose</h3>
+								<p className="text-neutral-700 dark:text-neutral-300">
+									Make your Depot visible in the Internet, everyone can connect
+									into it.
+								</p>
+							</div>
+							<ChevronDownIcon className="size-5 shrink-0" />
+						</Collapsible.Trigger>
+						<Collapsible.Content>
+							<div className="flex w-full flex-col gap-4 p-5">
+								<div>
+									<p className="mb-1 font-medium">ngrok</p>
+									<input
+										readOnly
+										value="ngrok http --domain=<your_domain> 6090"
+										className="h-11 w-full 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-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+									/>
+								</div>
+								<div>
+									<p className="mb-1 font-medium">Cloudflare Tunnel</p>
+									<input
+										readOnly
+										value="cloudflared tunnel --url localhost:6090"
+										className="h-11 w-full 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-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+									/>
+								</div>
+								<div>
+									<p className="mb-1 font-medium">Local Tunnel</p>
+									<input
+										readOnly
+										value="lt --port 6090"
+										className="h-11 w-full 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-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+									/>
+								</div>
+								<div className="mt-4 border-t border-neutral-100 pt-4 dark:border-neutral-900">
+									<div className="inline-flex items-center gap-2">
+										<GossipIcon className="size-5 text-blue-500" />
+										<h3 className="mb-1 font-semibold">
+											Support Gossip Model (Recommended)
+										</h3>
+									</div>
+
+									<div className="w-full max-w-xl">
+										<p className=" text-balance">
+											By adding to Relay List, other Nostr Client which support
+											Gossip Model will automatically connect to your Depot and
+											improve the discoverability.
+										</p>
+										<div className="mt-2 inline-flex w-full items-center gap-2">
+											<input
+												type="text"
+												value={tunnelUrl}
+												onChange={(e) => setTunnelUrl(e.target.value)}
+												spellCheck={false}
+												placeholder="wss://"
+												className="h-10 flex-1 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-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+											/>
+											<button
+												type="button"
+												onClick={updateRelayList}
+												className="inline-flex h-10 w-max shrink-0 items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
+											>
+												Update
+											</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+					<Collapsible.Root className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950">
+						<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
+							<div className="flex flex-col items-start">
+								<h3 className="text-lg font-semibold">Backup (Recommended)</h3>
+								<p className="text-neutral-700 dark:text-neutral-300">
+									Backup all your data to Depot, it always live on your machine.
+								</p>
+							</div>
+							<ChevronDownIcon className="size-5 shrink-0" />
+						</Collapsible.Trigger>
+						<Collapsible.Content>
+							<div className="grid grid-cols-3 gap-4 px-5 py-5">
+								<DepotProfileCard />
+								<DepotContactCard />
+								<DepotRelaysCard />
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+					<DepotMembers />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/depot/onboarding.tsx
+++ b/apps/desktop/src/routes/depot/onboarding.tsx
@@ -0,0 +1,98 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { delay } from "@lume/utils";
+import { resolveResource } from "@tauri-apps/api/path";
+import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { parse, stringify } from "smol-toml";
+import { toast } from "sonner";
+
+export function DepotOnboardingScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+
+	const launchDepot = async () => {
+		try {
+			setLoading(true);
+
+			// get default config
+			const defaultConfig = await resolveResource("resources/config.toml");
+			const config = await readTextFile(defaultConfig);
+			const parsedConfig = parse(config);
+
+			// add current user to whitelist
+			// biome-ignore lint/complexity/useLiteralKeys: <explanation>
+			parsedConfig.authorization["pubkey_whitelist"].push(ark.account.pubkey);
+
+			// update new config
+			const newConfig = stringify(parsedConfig);
+			await writeTextFile(defaultConfig, newConfig);
+
+			// launch depot
+			await storage.launchDepot();
+			await storage.createSetting("depot", "1");
+			await delay(2000); // delay 2s to make sure depot is running
+
+			// default depot url: ws://localhost:6090
+			// #TODO: user can custom depot url
+			const connect = await ark.connectDepot();
+
+			if (connect) {
+				toast.success("Your Depot is successfully launch.");
+				setLoading(false);
+
+				navigate("/depot/");
+			}
+		} catch (e) {
+			toast.error(e);
+		}
+	};
+
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center gap-10 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-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
+			<div className="flex flex-col items-center gap-8">
+				<div className="text-center">
+					<h1 className="mb-1 text-3xl font-semibold text-neutral-400 dark:text-neutral-600">
+						Run your Personal Nostr Relay inside Lume
+					</h1>
+					<h2 className="text-4xl font-semibold">Your Relay, Your Control.</h2>
+				</div>
+				<div className="rounded-xl bg-blue-100 p-1.5 dark:bg-blue-900">
+					<button
+						type="button"
+						onClick={launchDepot}
+						className="inline-flex h-11 w-36 transform items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white active:translate-y-1"
+					>
+						{loading ? (
+							<>
+								<LoaderIcon className="h-5 w-5 animate-spin" />
+								Launching...
+							</>
+						) : (
+							<>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									className="h-5 w-5"
+								>
+									<path
+										fillRule="evenodd"
+										d="M12 2.25a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM6.166 5.106a.75.75 0 0 1 0 1.06 8.25 8.25 0 1 0 11.668 0 .75.75 0 1 1 1.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 0 1 1.06 0Z"
+										clipRule="evenodd"
+									/>
+								</svg>
+								Launch
+							</>
+						)}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/error.tsx
+++ b/apps/desktop/src/routes/error.tsx
@@ -0,0 +1,157 @@
+import { useStorage } from "@lume/storage";
+import { downloadDir } from "@tauri-apps/api/path";
+import { message, save } from "@tauri-apps/plugin-dialog";
+import { writeTextFile } from "@tauri-apps/plugin-fs";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { useRouteError } from "react-router-dom";
+
+interface RouteError {
+	statusText: string;
+	message: string;
+}
+
+export function ErrorScreen() {
+	const storage = useStorage();
+	const error = useRouteError() as RouteError;
+
+	const restart = async () => {
+		await relaunch();
+	};
+
+	const download = async () => {
+		try {
+			const downloadPath = await downloadDir();
+			const fileName = `nostr_keys_${new Date().toISOString()}.txt`;
+			const filePath = await save({
+				defaultPath: `${downloadPath}/${fileName}`,
+			});
+			const nsec = await storage.loadPrivkey(ark.account.pubkey);
+
+			if (filePath) {
+				if (nsec) {
+					await writeTextFile(
+						filePath,
+						`Nostr account, generated by Lume (lume.nu)\nPublic key: ${ark.account.id}\nPrivate key: ${nsec}`,
+					);
+				} else {
+					await writeTextFile(
+						filePath,
+						`Nostr account, generated by Lume (lume.nu)\nPublic key: ${ark.account.id}`,
+					);
+				}
+			} // else { user cancel action }
+		} catch (e) {
+			await message(e, {
+				title: "Cannot download account keys",
+				type: "error",
+			});
+		}
+	};
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="relative flex h-screen w-screen items-center justify-center bg-blue-600 overflow-hidden rounded-t-xl"
+		>
+			<div className="flex w-full max-w-2xl flex-col items-start gap-8">
+				<div className="flex flex-col">
+					<h1 className="mb-3 text-4xl font-semibold text-blue-400">
+						Sorry, an unexpected error has occurred.
+					</h1>
+					<h3 className="text-3xl font-semibold leading-snug text-white">
+						Don&apos;t panic, your account is safe.
+						<br />
+						Here are what things you can do:
+					</h3>
+				</div>
+				<div className="flex w-full flex-col gap-3">
+					<div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
+						<div className="text-xl font-semibold text-white">
+							1. Try to close and re-open the app
+						</div>
+						<button
+							type="button"
+							onClick={() => restart()}
+							className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+						>
+							Restart
+						</button>
+					</div>
+					<div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
+						<div className="text-xl font-semibold text-white">
+							2. Backup Nostr account
+						</div>
+						<button
+							type="button"
+							onClick={() => download()}
+							className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+						>
+							Download
+						</button>
+					</div>
+					<div className="rounded-xl bg-blue-700 px-3 py-4">
+						<div className="flex w-full flex-col gap-2">
+							<div className="flex w-full items-center justify-between">
+								<div className="text-xl font-semibold text-white">
+									3. Report this issue to Lume&apos;s Devs
+								</div>
+								<a
+									href="https://github.com/luminous-devs/lume/issues/new"
+									target="_blank"
+									rel="noreferrer"
+									className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
+								>
+									Report
+								</a>
+							</div>
+							<div className="inline-flex h-16 items-center justify-center overflow-y-auto rounded-lg border border-dashed border-red-300 bg-blue-800 px-5">
+								<p className="select-text break-all text-red-400">
+									{error.statusText || error.message}
+								</p>
+							</div>
+						</div>
+					</div>
+					<div className="rounded-xl bg-blue-700 px-3 py-4">
+						<div className="flex w-full flex-col gap-1.5">
+							<div className="text-xl font-semibold text-white">
+								4. Use another Nostr client
+							</div>
+							<div className="select-text text-lg font-medium text-blue-300">
+								<p>
+									While waiting for Lume&apos;s Devs to release the bug fixes,
+									you always can use other Nostr clients with your account:
+								</p>
+								<div className="mt-2 flex flex-col gap-1 text-white">
+									<a
+										className="hover:!underline"
+										href="https://snort.social"
+										target="_blank"
+										rel="noreferrer"
+									>
+										snort.social
+									</a>
+									<a
+										className="hover:!underline"
+										href="https://primal.net"
+										target="_blank"
+										rel="noreferrer"
+									>
+										primal.net
+									</a>
+									<a
+										className="hover:!underline"
+										href="https://nostrudel.ninja"
+										target="_blank"
+										rel="noreferrer"
+									>
+										nostrudel.ninja
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/home/index.tsx
+++ b/apps/desktop/src/routes/home/index.tsx
@@ -0,0 +1,133 @@
+import { Antenas } from "@columns/antenas";
+import { Default } from "@columns/default";
+import { Group } from "@columns/group";
+import { Hashtag } from "@columns/hashtag";
+import { Thread } from "@columns/thread";
+import { Timeline } from "@columns/timeline";
+import { User } from "@columns/user";
+import { useColumnContext } from "@lume/ark";
+import { ArrowLeftIcon, ArrowRightIcon, PlusSquareIcon } from "@lume/icons";
+import { IColumn } from "@lume/types";
+import { TutorialModal } from "@lume/ui/src/tutorial/modal";
+import { COL_TYPES } from "@lume/utils";
+import { useRef, useState } from "react";
+import { VList, VListHandle } from "virtua";
+
+export function HomeScreen() {
+	const ref = useRef<VListHandle>(null);
+	const { addColumn, columns } = useColumnContext();
+	const [selectedIndex, setSelectedIndex] = useState(-1);
+
+	const renderItem = (column: IColumn) => {
+		switch (column.kind) {
+			case COL_TYPES.default:
+				return <Default key={column.id} column={column} />;
+			case COL_TYPES.newsfeed:
+				return <Timeline key={column.id} column={column} />;
+			case COL_TYPES.thread:
+				return <Thread key={column.id} column={column} />;
+			case COL_TYPES.user:
+				return <User key={column.id} column={column} />;
+			case COL_TYPES.hashtag:
+				return <Hashtag key={column.id} column={column} />;
+			case COL_TYPES.group:
+				return <Group key={column.id} column={column} />;
+			case COL_TYPES.antenas:
+				return <Antenas key={column.id} column={column} />;
+			default:
+				return <Default key={column.id} column={column} />;
+		}
+	};
+
+	return (
+		<div className="relative w-full h-full">
+			<VList
+				id="timeline"
+				ref={ref}
+				className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
+				itemSize={420}
+				tabIndex={0}
+				horizontal
+				onKeyDown={(e) => {
+					if (!ref.current) return;
+					switch (e.code) {
+						case "ArrowUp":
+						case "ArrowLeft": {
+							e.preventDefault();
+							const prevIndex = Math.max(selectedIndex - 1, 0);
+							setSelectedIndex(prevIndex);
+							ref.current.scrollToIndex(prevIndex, {
+								align: "center",
+								smooth: true,
+							});
+							break;
+						}
+						case "ArrowDown":
+						case "ArrowRight": {
+							e.preventDefault();
+							const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
+							setSelectedIndex(nextIndex);
+							ref.current.scrollToIndex(nextIndex, {
+								align: "center",
+								smooth: true,
+							});
+							break;
+						}
+						default:
+							break;
+					}
+				}}
+			>
+				{columns.map((column) => renderItem(column))}
+				<div className="w-[420px]" />
+			</VList>
+			<div className="absolute bottom-3 right-3">
+				<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
+					<button
+						type="button"
+						onClick={() => {
+							const prevIndex = Math.max(selectedIndex - 1, 0);
+							setSelectedIndex(prevIndex);
+							ref.current.scrollToIndex(prevIndex, {
+								align: "center",
+								smooth: true,
+							});
+						}}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
+					>
+						<ArrowLeftIcon className="size-5" />
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
+							setSelectedIndex(nextIndex);
+							ref.current.scrollToIndex(nextIndex, {
+								align: "center",
+								smooth: true,
+							});
+						}}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
+					>
+						<ArrowRightIcon className="size-5" />
+					</button>
+					<button
+						type="button"
+						onClick={async () =>
+							await addColumn({
+								kind: COL_TYPES.default,
+								title: "",
+								content: "",
+							})
+						}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
+					>
+						<PlusSquareIcon className="size-5" />
+					</button>
+					<div className="w-px h-6 bg-white/10" />
+					<TutorialModal />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/components/relayEventList.tsx
+++ b/apps/desktop/src/routes/relays/components/relayEventList.tsx
@@ -0,0 +1,90 @@
+import { NoteSkeleton, RepostNote, TextNote, useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { VList } from "virtua";
+
+export function RelayEventList({ relayUrl }: { relayUrl: string }) {
+	const ark = useArk();
+	const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: ["relay-events", relayUrl],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const url = `wss://${relayUrl}`;
+				const events = await ark.getRelayEvents({
+					relayUrl: url,
+					filter: {
+						kinds: [NDKKind.Text, NDKKind.Repost],
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			refetchOnWindowFocus: false,
+		});
+
+	const allEvents = useMemo(
+		() => (data ? data.pages.flatMap((page) => page) : []),
+		[data],
+	);
+
+	const renderItem = useCallback(
+		(event: NDKEvent) => {
+			switch (event.kind) {
+				case NDKKind.Text:
+					return <TextNote key={event.id} event={event} className="mt-3" />;
+				case NDKKind.Repost:
+					return <RepostNote key={event.id} event={event} className="mt-3" />;
+				default:
+					return <TextNote key={event.id} event={event} className="mt-3" />;
+			}
+		},
+		[data],
+	);
+
+	return (
+		<VList className="mx-auto h-full w-full max-w-[500px] px-3 scrollbar-none">
+			{status === "pending" ? (
+				<NoteSkeleton />
+			) : (
+				allEvents.map((item) => renderItem(item))
+			)}
+			<div className="flex h-16 items-center justify-center px-3 pb-3">
+				{hasNextPage ? (
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={!hasNextPage || isFetchingNextPage}
+						className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
+					>
+						{isFetchingNextPage ? (
+							<LoaderIcon className="h-4 w-4 animate-spin" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="h-5 w-5" />
+								Load more
+							</>
+						)}
+					</button>
+				) : null}
+			</div>
+		</VList>
+	);
+}
--- a/apps/desktop/src/routes/relays/components/relayForm.tsx
+++ b/apps/desktop/src/routes/relays/components/relayForm.tsx
@@ -0,0 +1,59 @@
+import { useRelaylist } from "@lume/ark";
+import { PlusIcon } from "@lume/icons";
+import { NDKRelayUrl } from "@nostr-dev-kit/ndk";
+import { normalizeRelayUrl } from "nostr-fetch";
+import { useState } from "react";
+import { toast } from "sonner";
+
+const domainRegex = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;
+
+export function RelayForm() {
+	const { connectRelay } = useRelaylist();
+
+	const [relay, setRelay] = useState<{
+		url: NDKRelayUrl;
+		purpose: "read" | "write" | undefined;
+	}>({ url: "", purpose: undefined });
+
+	const create = () => {
+		if (relay.url.length < 1) return toast.info("Please enter relay url");
+		try {
+			const relayUrl = new URL(relay.url.replace(/\s/g, ""));
+			if (
+				domainRegex.test(relayUrl.host) &&
+				(relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:")
+			) {
+				connectRelay.mutate(normalizeRelayUrl(relay.url));
+				setRelay({ url: "", purpose: undefined });
+			} else {
+				return toast.error(
+					"URL is invalid, a relay must use websocket protocol (start with wss:// or ws://). Please check again",
+				);
+			}
+		} catch {
+			return toast.error("Relay URL is not valid. Please check again");
+		}
+	};
+
+	return (
+		<div className="flex gap-2">
+			<input
+				className="h-11 w-full rounded-lg border-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 bg-white/50 dark:bg-black/50 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+				placeholder="wss://"
+				spellCheck={false}
+				autoComplete="off"
+				autoCorrect="off"
+				autoCapitalize="off"
+				value={relay.url}
+				onChange={(e) => setRelay((prev) => ({ ...prev, url: e.target.value }))}
+			/>
+			<button
+				type="button"
+				onClick={() => create()}
+				className="inline-flex size-11 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white hover:bg-blue-600"
+			>
+				<PlusIcon className="size-5" />
+			</button>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/components/relayItem.tsx
+++ b/apps/desktop/src/routes/relays/components/relayItem.tsx
@@ -0,0 +1,38 @@
+import { useRelaylist } from "@lume/ark";
+import { PlusIcon, ShareIcon } from "@lume/icons";
+import { normalizeRelayUrl } from "nostr-fetch";
+import { Link } from "react-router-dom";
+
+export function RelayItem({ url }: { url: string }) {
+	const domain = new URL(url).hostname;
+	const { connectRelay } = useRelaylist();
+
+	return (
+		<div className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-950">
+			<div className="inline-flex items-center gap-2">
+				<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
+					Relay:{" "}
+				</span>
+				<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
+					{url}
+				</span>
+			</div>
+			<div className="inline-flex items-center gap-2">
+				<Link
+					to={`/relays/${domain}/`}
+					className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-100 px-1.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+				>
+					<ShareIcon className="h-3 w-3" />
+					Inspect
+				</Link>
+				<button
+					type="button"
+					onClick={() => connectRelay.mutate(normalizeRelayUrl(url))}
+					className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 hover:dark:bg-blue-800"
+				>
+					<PlusIcon className="size-4" />
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/components/relayList.tsx
+++ b/apps/desktop/src/routes/relays/components/relayList.tsx
@@ -0,0 +1,91 @@
+import { useArk, useRelay } from "@lume/ark";
+import { LoaderIcon, PlusIcon, ShareIcon } from "@lume/icons";
+import { User } from "@lume/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { VList } from "virtua";
+
+export function RelayList() {
+	const ark = useArk();
+	const { connectRelay } = useRelay();
+	const { status, data } = useQuery({
+		queryKey: ["relays"],
+		queryFn: async () => {
+			return await ark.getAllRelaysFromContacts();
+		},
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+	});
+
+	const navigate = useNavigate();
+
+	const inspectRelay = (relayUrl: string) => {
+		const url = new URL(relayUrl);
+		navigate(`/relays/${url.hostname}`);
+	};
+
+	return (
+		<div className="col-span-2 bg-white">
+			{status === "pending" ? (
+				<div className="flex h-full w-full items-center justify-center pb-10">
+					<div className="inline-flex flex-col items-center justify-center gap-2">
+						<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
+						<p>Loading relay...</p>
+					</div>
+				</div>
+			) : (
+				<VList className="h-full">
+					<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
+						<h3 className="font-semibold">Relay discovery</h3>
+					</div>
+					{[...data].map(([key, value]) => (
+						<div
+							key={key}
+							className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
+						>
+							<div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
+								<div className="inline-flex items-center gap-2">
+									<button
+										type="button"
+										onClick={() => inspectRelay(key)}
+										className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+									>
+										<ShareIcon className="h-3 w-3" />
+										Inspect
+									</button>
+									<button
+										type="button"
+										onClick={() => connectRelay.mutate(key)}
+										className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
+									>
+										<PlusIcon className="h-3 w-3" />
+									</button>
+								</div>
+								<div className="inline-flex items-center gap-2 pl-3">
+									<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
+										Relay:{" "}
+									</span>
+									<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
+										{key}
+									</span>
+								</div>
+							</div>
+							<div className="isolate flex -space-x-2">
+								{value.slice(0, 4).map((item) => (
+									<User key={item} pubkey={item} variant="stacked" />
+								))}
+								{value.length > 4 ? (
+									<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
+										<span className="text-xs font-medium">+{value.length}</span>
+									</div>
+								) : null}
+							</div>
+						</div>
+					))}
+				</VList>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/components/sidebar.tsx
+++ b/apps/desktop/src/routes/relays/components/sidebar.tsx
@@ -0,0 +1,99 @@
+import { useArk } from "@lume/ark";
+import { CancelIcon, RefreshIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useQuery } from "@tanstack/react-query";
+import { RelayForm } from "./relayForm";
+
+export function RelaySidebar({ className }: { className?: string }) {
+	const ark = useArk();
+
+	const { status, data, refetch } = useQuery({
+		queryKey: ["relay-personal"],
+		queryFn: async () => {
+			const event = await ark.getEventByFilter({
+				filter: {
+					kinds: [NDKKind.RelayList],
+					authors: [ark.account.pubkey],
+				},
+			});
+
+			if (!event) return [];
+			return event.tags.filter((tag) => tag[0] === "r");
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	const currentRelays = new Set(
+		ark.ndk.pool.connectedRelays().map((item) => item.url),
+	);
+
+	return (
+		<div
+			className={cn(
+				"rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50",
+				className,
+			)}
+		>
+			<div className="inline-flex items-center justify-between w-full h-14 px-3 border-b border-black/10 dark:border-white/10">
+				<h3 className="font-semibold">Connected relays</h3>
+				<button
+					type="button"
+					onClick={() => refetch()}
+					className="inline-flex items-center justify-center w-6 h-6 rounded-md shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-900"
+				>
+					<RefreshIcon className="w-4 h-4" />
+				</button>
+			</div>
+			<div className="flex flex-col gap-2 px-3 mt-3">
+				{status === "pending" ? (
+					<p>Loading...</p>
+				) : !data.length ? (
+					<div className="flex items-center justify-center w-full h-20 rounded-xl bg-neutral-50 dark:bg-neutral-950">
+						<p className="text-sm font-medium">
+							You not have personal relay list yet
+						</p>
+					</div>
+				) : (
+					data.map((item) => (
+						<div
+							key={item[1]}
+							className="flex items-center justify-between px-3 rounded-lg group h-11 bg-white/50 dark:bg-black/50"
+						>
+							<div className="inline-flex items-baseline gap-2">
+								{currentRelays.has(item[1]) ? (
+									<span className="relative flex w-2 h-2">
+										<span className="absolute inline-flex w-full h-full bg-green-400 rounded-full opacity-75 animate-ping" />
+										<span className="relative inline-flex w-2 h-2 bg-teal-500 rounded-full" />
+									</span>
+								) : (
+									<span className="relative flex w-2 h-2">
+										<span className="absolute inline-flex w-full h-full bg-red-400 rounded-full opacity-75 animate-ping" />
+										<span className="relative inline-flex w-2 h-2 bg-red-500 rounded-full" />
+									</span>
+								)}
+								<p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
+									{item[1].replace("wss://", "").replace("ws://", "")}
+								</p>
+							</div>
+							<div className="inline-flex items-center gap-2">
+								{item[2]?.length ? (
+									<div className="inline-flex items-center justify-center h-6 px-2 text-xs font-medium capitalize rounded w-max bg-neutral-200 dark:bg-neutral-800">
+										{item[2]}
+									</div>
+								) : null}
+								<button
+									type="button"
+									className="items-center justify-center hidden w-6 h-6 rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
+								>
+									<CancelIcon className="w-4 h-4 text-neutral-900 dark:text-neutral-100" />
+								</button>
+							</div>
+						</div>
+					))
+				)}
+				<RelayForm />
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/follows.tsx
+++ b/apps/desktop/src/routes/relays/follows.tsx
@@ -0,0 +1,33 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon, PlusIcon, ShareIcon } from "@lume/icons";
+import { useQuery } from "@tanstack/react-query";
+import { VList } from "virtua";
+import { RelayItem } from "./components/relayItem";
+
+export function RelayFollowsScreen() {
+	const ark = useArk();
+	const { isLoading, data: relays } = useQuery({
+		queryKey: ["relay-follows"],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			return await ark.getAllRelaysFromContacts();
+		},
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	});
+
+	if (isLoading) {
+		return (
+			<div className="flex h-full w-full items-center justify-center">
+				<LoaderIcon className="size-5 animate-spin" />
+			</div>
+		);
+	}
+
+	return (
+		<VList itemSize={49}>
+			{relays.map((item: string) => (
+				<RelayItem key={item} url={item} />
+			))}
+		</VList>
+	);
+}
--- a/apps/desktop/src/routes/relays/global.tsx
+++ b/apps/desktop/src/routes/relays/global.tsx
@@ -0,0 +1,34 @@
+import { LoaderIcon } from "@lume/icons";
+import { useQuery } from "@tanstack/react-query";
+import { fetch } from "@tauri-apps/plugin-http";
+import { VList } from "virtua";
+import { RelayItem } from "./components/relayItem";
+
+export function RelayGlobalScreen() {
+	const { isLoading, data: relays } = useQuery({
+		queryKey: ["relay-global"],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const res = await fetch("https://api.nostr.watch/v1/online", { signal });
+			if (!res.ok) throw new Error("Failed to get online relays");
+			return (await res.json()) as string[];
+		},
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+	});
+
+	if (isLoading) {
+		return (
+			<div className="flex h-full w-full items-center justify-center">
+				<LoaderIcon className="size-5 animate-spin" />
+			</div>
+		);
+	}
+
+	return (
+		<VList itemSize={49}>
+			{relays.map((item: string) => (
+				<RelayItem key={item} url={item} />
+			))}
+		</VList>
+	);
+}
--- a/apps/desktop/src/routes/relays/index.tsx
+++ b/apps/desktop/src/routes/relays/index.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@lume/utils";
+import { NavLink, Outlet } from "react-router-dom";
+import { RelaySidebar } from "./components/sidebar";
+
+export function RelaysScreen() {
+	return (
+		<div className="grid h-full w-full lg:grid-cols-4 xl:grid-cols-5 rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
+			<RelaySidebar className="col-span-1" />
+			<div className="col-span-3 xl:col-span-4 flex flex-col rounded-r-xl bg-white dark:bg-black">
+				<div className="h-14 shrink-0 flex px-5 items-center gap-6 border-b border-neutral-100 dark:border-neutral-950">
+					<NavLink
+						end
+						to={"/relays/"}
+						className={({ isActive }) =>
+							cn(
+								"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
+								isActive
+									? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+									: "",
+							)
+						}
+					>
+						Global
+					</NavLink>
+					<NavLink
+						to={"/relays/follows/"}
+						className={({ isActive }) =>
+							cn(
+								"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
+								isActive
+									? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+									: "",
+							)
+						}
+					>
+						Follows
+					</NavLink>
+				</div>
+				<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+					<Outlet />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/relays/url.tsx
+++ b/apps/desktop/src/routes/relays/url.tsx
@@ -0,0 +1,161 @@
+import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
+import { NIP11 } from "@lume/types";
+import { User } from "@lume/ui";
+import { Suspense } from "react";
+import { Await, useLoaderData, useNavigate, useParams } from "react-router-dom";
+import { RelayEventList } from "./components/relayEventList";
+
+export function RelayUrlScreen() {
+	const { url } = useParams();
+
+	const data: { relay?: { [key: string]: string } } = useLoaderData();
+	const navigate = useNavigate();
+
+	const getSoftwareName = (url: string) => {
+		const filename = url.substring(url.lastIndexOf("/") + 1);
+		return filename.replace(".git", "");
+	};
+
+	const titleCase = (s: string) => {
+		return s
+			.replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
+			.replace(/[-_]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
+	};
+
+	return (
+		<div className="grid h-full w-full grid-cols-3">
+			<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
+				<RelayEventList relayUrl={url} />
+			</div>
+			<div className="col-span-1 px-3 py-3">
+				<Suspense
+					fallback={
+						<div className="flex items-center gap-2 text-sm font-medium text-neutral-900 dark:text-neutral-100">
+							<LoaderIcon className="h-4 w-4 animate-spin" />
+							Loading...
+						</div>
+					}
+				>
+					<Await
+						resolve={data.relay}
+						errorElement={
+							<div className="text-sm font-medium">
+								<p>Could not load relay information 😬</p>
+							</div>
+						}
+					>
+						{(resolvedRelay: NIP11) => (
+							<div className="flex flex-col gap-5">
+								<div>
+									<h3 className="font-semibold">{resolvedRelay.name}</h3>
+									<p className="text-sm text-neutral-600 dark:text-neutral-500">
+										{resolvedRelay.description}
+									</p>
+								</div>
+								{resolvedRelay.pubkey ? (
+									<div className="flex flex-col gap-1">
+										<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+											Owner:
+										</h5>
+										<div className="w-full rounded-lg bg-neutral-100 px-2 py-2 dark:bg-neutral-900">
+											<User pubkey={resolvedRelay.pubkey} variant="simple" />
+										</div>
+									</div>
+								) : null}
+								{resolvedRelay.contact ? (
+									<div>
+										<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+											Contact:
+										</h5>
+										<a
+											href={`mailto:${resolvedRelay.contact}`}
+											target="_blank"
+											className="truncate underline after:content-['_↗'] hover:text-blue-500"
+											rel="noreferrer"
+										>
+											{resolvedRelay.contact}
+										</a>
+									</div>
+								) : null}
+								<div>
+									<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+										Software:
+									</h5>
+									<a
+										href={resolvedRelay.software}
+										target="_blank"
+										rel="noreferrer"
+										className="underline after:content-['_↗'] hover:text-blue-500"
+									>
+										{`${getSoftwareName(resolvedRelay.software)} - ${
+											resolvedRelay.version
+										}`}
+									</a>
+								</div>
+								<div>
+									<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+										Supported NIPs:
+									</h5>
+									<div className="mt-2 grid grid-cols-7 gap-2">
+										{resolvedRelay.supported_nips.map((item) => (
+											<a
+												key={item}
+												href={`https://nips.be/${item}`}
+												target="_blank"
+												rel="noreferrer"
+												className="inline-flex aspect-square h-auto w-full items-center justify-center rounded bg-neutral-100 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
+											>
+												{item}
+											</a>
+										))}
+									</div>
+								</div>
+								{resolvedRelay.limitation ? (
+									<div>
+										<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+											Limitation
+										</h5>
+										<div className="flex flex-col gap-2 divide-y divide-white/5">
+											{Object.keys(resolvedRelay.limitation).map(
+												(key, index) => {
+													return (
+														<div
+															key={key + index}
+															className="flex items-baseline justify-between pt-2"
+														>
+															<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
+																{titleCase(key)}:
+															</p>
+															<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+																{resolvedRelay.limitation[key].toString()}
+															</p>
+														</div>
+													);
+												},
+											)}
+										</div>
+									</div>
+								) : null}
+								{resolvedRelay.payments_url ? (
+									<div className="flex flex-col gap-1">
+										<a
+											href={resolvedRelay.payments_url}
+											target="_blank"
+											rel="noreferrer"
+											className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600"
+										>
+											Open payment website
+										</a>
+										<span className="text-center text-xs text-neutral-600 dark:text-neutral-400">
+											You need to make a payment to connect this relay
+										</span>
+									</div>
+								) : null}
+							</div>
+						)}
+					</Await>
+				</Suspense>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/about.tsx
+++ b/apps/desktop/src/routes/settings/about.tsx
--- a/apps/desktop/src/routes/settings/advanced.tsx
+++ b/apps/desktop/src/routes/settings/advanced.tsx
@@ -0,0 +1,31 @@
+import { useStorage } from "@lume/storage";
+
+export function AdvancedSettingScreen() {
+	const storage = useStorage();
+
+	const clearCache = async () => {
+		await storage.clearCache();
+	};
+
+	return (
+		<div className="mx-auto w-full max-w-lg">
+			<div className="flex flex-col gap-6">
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Cache
+						</div>
+						<div className="text-sm">Use for boost up nostr connection</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => clearCache()}
+						className="h-8 w-max rounded-lg px-3 text-sm font-semibold text-blue-500 bg-blue-100 hover:bg-blue-200"
+					>
+						Clear
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/backup.tsx
+++ b/apps/desktop/src/routes/settings/backup.tsx
@@ -0,0 +1,62 @@
+import { EyeOffIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { nip19 } from "nostr-tools";
+import { useEffect, useState } from "react";
+
+export function BackupSettingScreen() {
+	const storage = useStorage();
+
+	const [privkey, setPrivkey] = useState(null);
+	const [showPassword, setShowPassword] = useState(false);
+
+	const removePrivkey = async () => {
+		await storage.removePrivkey(ark.account.pubkey);
+	};
+
+	useEffect(() => {
+		async function loadPrivkey() {
+			const key = await storage.loadPrivkey(ark.account.pubkey);
+			if (key) setPrivkey(key);
+		}
+
+		loadPrivkey();
+	}, []);
+
+	return (
+		<div className="mx-auto w-full max-w-lg">
+			<div className="mb-2 text-sm font-semibold">Private key</div>
+			<div>
+				{!privkey ? (
+					<div className="inline-flex h-24 w-full items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+						You&apos;ve stored private key on Lume
+					</div>
+				) : (
+					<>
+						<div className="relative">
+							<input
+								readOnly
+								type={showPassword ? "text" : "password"}
+								value={nip19.nsecEncode(privkey)}
+								className="relative h-11 w-full resize-none rounded-lg border-none bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+							/>
+							<button
+								type="button"
+								onClick={() => setShowPassword(!showPassword)}
+								className="absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-lg bg-neutral-50 dark:bg-neutral-950"
+							>
+								<EyeOffIcon className="h-4 w-4" />
+							</button>
+						</div>
+						<button
+							type="button"
+							onClick={() => removePrivkey()}
+							className="mt-2 inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-red-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
+						>
+							Remove private key
+						</button>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/contactCard.tsx
+++ b/apps/desktop/src/routes/settings/components/contactCard.tsx
@@ -0,0 +1,45 @@
+import { useArk } from "@lume/ark";
+import { EditIcon, LoaderIcon } from "@lume/icons";
+import { compactNumber } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+
+export function ContactCard() {
+	const ark = useArk();
+	const { status, data } = useQuery({
+		queryKey: ["contacts"],
+		queryFn: async () => {
+			const contacts = await ark.getUserContacts();
+			return contacts;
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+			{status === "pending" ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				<div className="flex h-full w-full flex-col justify-between p-4">
+					<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
+						{compactNumber.format(data.length)}
+					</h3>
+					<div className="mt-auto flex h-6 w-full items-center justify-between">
+						<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
+							Contacts
+						</p>
+						<Link
+							to="/settings/edit-contact"
+							className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+						>
+							<EditIcon className="h-3 w-3" />
+							Edit
+						</Link>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/postCard.tsx
+++ b/apps/desktop/src/routes/settings/components/postCard.tsx
@@ -0,0 +1,60 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { compactNumber } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { fetch } from "@tauri-apps/plugin-http";
+import { Link } from "react-router-dom";
+
+export function PostCard() {
+	const ark = useArk();
+	const { status, data } = useQuery({
+		queryKey: ["user-stats", ark.account.pubkey],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const res = await fetch(
+				`https://api.nostr.band/v0/stats/profile/${ark.account.pubkey}`,
+				{
+					signal,
+				},
+			);
+
+			if (!res.ok) {
+				throw new Error("Error");
+			}
+
+			return await res.json();
+		},
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+	});
+
+	return (
+		<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+			{status === "pending" ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				<div className="flex h-full w-full flex-col justify-between p-4">
+					<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
+						{compactNumber.format(
+							data.stats[ark.account.pubkey].pub_note_count,
+						)}
+					</h3>
+					<div className="mt-auto flex h-6 w-full items-center justify-between">
+						<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
+							Posts
+						</p>
+						<Link
+							to={`/users/${ark.account.pubkey}`}
+							className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+						>
+							View
+						</Link>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/profileCard.tsx
+++ b/apps/desktop/src/routes/settings/components/profileCard.tsx
@@ -0,0 +1,77 @@
+import { useArk, useProfile } from "@lume/ark";
+import { EditIcon, LoaderIcon } from "@lume/icons";
+import { displayNpub } from "@lume/utils";
+import * as Avatar from "@radix-ui/react-avatar";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { minidenticon } from "minidenticons";
+import { nip19 } from "nostr-tools";
+import { Link } from "react-router-dom";
+
+export function ProfileCard() {
+	const ark = useArk();
+	const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
+		minidenticon(ark.account.pubkey, 90, 50),
+	)}`;
+
+	const { isLoading, user } = useProfile(ark.account.pubkey);
+
+	const copyNpub = async () => {
+		return await writeText(nip19.npubEncode(ark.account.pubkey));
+	};
+
+	return (
+		<div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+			{isLoading ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				<div className="flex h-full w-full flex-col justify-between p-4">
+					<div className="flex h-10 w-full justify-end gap-3">
+						<button
+							type="button"
+							onClick={copyNpub}
+							className="inline-flex h-8 w-28 transform items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 active:translate-y-1 dark:bg-neutral-800 dark:hover:bg-neutral-600"
+						>
+							Copy NPUB
+						</button>
+						<Link
+							to="/settings/edit-profile"
+							className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
+						>
+							<EditIcon className="h-4 w-4" />
+							Edit
+						</Link>
+					</div>
+					<div className="flex flex-col gap-2.5">
+						<Avatar.Root className="shrink-0">
+							<Avatar.Image
+								src={user?.picture || user?.image}
+								alt={ark.account.pubkey}
+								loading="lazy"
+								decoding="async"
+								style={{ contentVisibility: "auto" }}
+								className="h-16 w-16 rounded-xl border border-neutral-200/50 shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] dark:border-neutral-800/50"
+							/>
+							<Avatar.Fallback delayMs={300}>
+								<img
+									src={svgURI}
+									alt={ark.account.pubkey}
+									className="h-16 w-16 rounded-xl bg-black dark:bg-white"
+								/>
+							</Avatar.Fallback>
+						</Avatar.Root>
+						<div>
+							<h3 className="text-3xl font-semibold leading-8 text-neutral-900 dark:text-neutral-100">
+								{user?.display_name || user?.name}
+							</h3>
+							<p className="text-lg text-neutral-700 dark:text-neutral-300">
+								{user?.nip05 || displayNpub(ark.account.pubkey, 16)}
+							</p>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/relayCard.tsx
+++ b/apps/desktop/src/routes/settings/components/relayCard.tsx
@@ -0,0 +1,46 @@
+import { useArk } from "@lume/ark";
+import { EditIcon, LoaderIcon } from "@lume/icons";
+import { compactNumber } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+
+export function RelayCard() {
+	const ark = useArk();
+
+	const { status, data } = useQuery({
+		queryKey: ["relays", ark.account.pubkey],
+		queryFn: async () => {
+			const relays = await ark.getUserRelays({});
+			return relays;
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+			{status === "pending" ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				<div className="flex h-full w-full flex-col justify-between p-4">
+					<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
+						{compactNumber.format(data?.relays?.length || 0)}
+					</h3>
+					<div className="mt-auto flex h-6 w-full items-center justify-between">
+						<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
+							Relays
+						</p>
+						<Link
+							to="/relays"
+							className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+						>
+							<EditIcon className="h-3 w-3" />
+							Edit
+						</Link>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/walletConnectForm.tsx
+++ b/apps/desktop/src/routes/settings/components/walletConnectForm.tsx
@@ -0,0 +1,62 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function NWCForm({ setWalletConnectURL }) {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [uri, setUri] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const submit = async () => {
+		try {
+			setLoading(true);
+
+			if (!uri.startsWith("nostr+walletconnect:")) {
+				toast.error(
+					"Connect URI is required and must start with format nostr+walletconnect:, please check again",
+				);
+				setLoading(false);
+				return;
+			}
+
+			const uriObj = new URL(uri);
+			const params = new URLSearchParams(uriObj.search);
+
+			if (params.has("relay") && params.has("secret")) {
+				await storage.createPrivkey(`${ark.account.pubkey}-nwc`, uri);
+				setWalletConnectURL(uri);
+				setLoading(false);
+			} else {
+				setLoading(false);
+				toast.error("Connect URI is not valid, please check again");
+				return;
+			}
+		} catch (e) {
+			setLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+			<textarea
+				name="walletConnectURL"
+				value={uri}
+				onChange={(e) => setUri(e.target.value)}
+				placeholder="nostr+walletconnect://"
+				className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-800 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+			/>
+			<button
+				type="button"
+				onClick={submit}
+				className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+			>
+				{loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : "Connect"}
+			</button>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/components/zapCard.tsx
+++ b/apps/desktop/src/routes/settings/components/zapCard.tsx
@@ -0,0 +1,51 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { compactNumber } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { fetch } from "@tauri-apps/plugin-http";
+
+export function ZapCard() {
+	const ark = useArk();
+	const { status, data } = useQuery({
+		queryKey: ["user-stats", ark.account.pubkey],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const res = await fetch(
+				`https://api.nostr.band/v0/stats/profile/${ark.account.pubkey}`,
+				{
+					signal,
+				},
+			);
+
+			if (!res.ok) {
+				throw new Error("Error");
+			}
+
+			return await res.json();
+		},
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+	});
+
+	return (
+		<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+			{status === "pending" ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				<div className="flex h-full w-full flex-col justify-between p-4">
+					<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
+						{compactNumber.format(
+							data?.stats[ark.account.pubkey]?.zaps_received?.msats / 1000 || 0,
+						)}
+					</h3>
+					<div className="mt-auto flex h-6 items-center text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
+						Sats received
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/editContact.tsx
+++ b/apps/desktop/src/routes/settings/editContact.tsx
@@ -0,0 +1,34 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { User } from "@lume/ui";
+import { useQuery } from "@tanstack/react-query";
+
+export function EditContactScreen() {
+	const ark = useArk();
+	const { status, data } = useQuery({
+		queryKey: ["contacts"],
+		queryFn: async () => {
+			return await ark.getUserContacts();
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="mx-auto flex w-full max-w-xl flex-col gap-3">
+			{status === "pending" ? (
+				<div className="flex h-10 w-full items-center justify-center">
+					<LoaderIcon className="h-4 w-4 animate-spin" />
+				</div>
+			) : (
+				data.map((item) => (
+					<div
+						key={item}
+						className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
+					>
+						<User pubkey={item} variant="simple" />
+					</div>
+				))
+			)}
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/editProfile.tsx
+++ b/apps/desktop/src/routes/settings/editProfile.tsx
@@ -0,0 +1,307 @@
+import { useArk } from "@lume/ark";
+import {
+	CheckCircleIcon,
+	LoaderIcon,
+	PlusIcon,
+	UnverifiedIcon,
+} from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
+import { useQueryClient } from "@tanstack/react-query";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+
+export function EditProfileScreen() {
+	const [loading, setLoading] = useState(false);
+	const [picture, setPicture] = useState("");
+	const [banner, setBanner] = useState("");
+	const [nip05, setNIP05] = useState({ verified: true, text: "" });
+
+	const ark = useArk();
+	const storage = useStorage();
+
+	const {
+		register,
+		handleSubmit,
+		reset,
+		setError,
+		formState: { isValid, errors },
+	} = useForm({
+		defaultValues: async () => {
+			const res: NDKUserProfile = queryClient.getQueryData([
+				"user",
+				ark.account.pubkey,
+			]);
+			if (res.image) {
+				setPicture(res.image);
+			}
+			if (res.banner) {
+				setBanner(res.banner);
+			}
+			if (res.nip05) {
+				setNIP05((prev) => ({ ...prev, text: res.nip05 }));
+			}
+			return res;
+		},
+	});
+
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+
+	const uploadAvatar = async () => {
+		try {
+			if (!ark.ndk.signer) return navigate("/new/privkey");
+
+			setLoading(true);
+
+			const image = await ark.upload({});
+			if (image) {
+				setPicture(image);
+				setLoading(false);
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(`Upload failed, error: ${e}`, {
+				title: "Lume",
+				type: "error",
+			});
+		}
+	};
+
+	const uploadBanner = async () => {
+		try {
+			setLoading(true);
+
+			const image = await ark.upload({});
+
+			if (image) {
+				setBanner(image);
+				setLoading(false);
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(`Upload failed, error: ${e}`, {
+				title: "Lume",
+				type: "error",
+			});
+		}
+	};
+
+	const onSubmit = async (data: NDKUserProfile) => {
+		// start loading
+		setLoading(true);
+
+		let content = {
+			...data,
+			username: data.name,
+			display_name: data.name,
+			bio: data.about,
+			image: data.picture,
+		};
+
+		if (data.nip05) {
+			const verify = ark.validateNIP05({
+				pubkey: ark.account.pubkey,
+				nip05: data.nip05,
+			});
+			if (verify) {
+				content = { ...content, nip05: data.nip05 };
+			} else {
+				setNIP05((prev) => ({ ...prev, verified: false }));
+				setError("nip05", {
+					type: "manual",
+					message: "Can't verify your Lume ID / NIP-05, please check again",
+				});
+			}
+		}
+
+		const publish = await ark.createEvent({
+			kind: NDKKind.Metadata,
+			tags: [],
+			content: JSON.stringify(content),
+		});
+
+		if (publish) {
+			// invalid cache
+			queryClient.invalidateQueries({
+				queryKey: ["user", ark.account.pubkey],
+			});
+			// reset form
+			reset();
+			// reset state
+			setLoading(false);
+			setPicture(null);
+			setBanner(null);
+		} else {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div className="mx-auto w-full max-w-md">
+			<form onSubmit={handleSubmit(onSubmit)} className="mb-0">
+				<input type={"hidden"} {...register("picture")} value={picture} />
+				<input type={"hidden"} {...register("banner")} value={banner} />
+				<div className="flex flex-col items-center justify-center">
+					<div className="relative h-36 w-full">
+						{banner ? (
+							<img
+								src={banner}
+								alt="user's banner"
+								className="h-full w-full rounded-xl object-cover"
+							/>
+						) : (
+							<div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
+						)}
+						<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
+							<button
+								type="button"
+								onClick={() => uploadBanner()}
+								className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
+							>
+								<PlusIcon className="h-5 w-5" />
+							</button>
+						</div>
+					</div>
+					<div className="mb-5 px-4">
+						<div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
+							<img
+								src={picture}
+								alt="user's avatar"
+								className="h-14 w-14 rounded-xl object-cover"
+							/>
+							<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
+								<button
+									type="button"
+									onClick={() => uploadAvatar()}
+									className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
+								>
+									<PlusIcon className="h-5 w-5" />
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="display_name"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							Display Name
+						</label>
+						<input
+							type={"text"}
+							{...register("display_name")}
+							spellCheck={false}
+							className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="name"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							Name
+						</label>
+						<input
+							type={"text"}
+							{...register("name")}
+							spellCheck={false}
+							className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="nip05"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							NIP-05
+						</label>
+						<div className="relative">
+							<input
+								{...register("nip05")}
+								spellCheck={false}
+								className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+							/>
+							<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
+								{nip05.verified ? (
+									<span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
+										<CheckCircleIcon className="h-4 w-4" />
+										Verified
+									</span>
+								) : (
+									<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
+										<UnverifiedIcon className="h-4 w-4" />
+										Unverified
+									</span>
+								)}
+							</div>
+							{errors.nip05 && (
+								<p className="mt-1 text-sm text-red-400">
+									{errors.nip05.message.toString()}
+								</p>
+							)}
+						</div>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="website"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							Website
+						</label>
+						<input
+							type={"text"}
+							{...register("website", { required: false })}
+							spellCheck={false}
+							className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="website"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							Lightning address
+						</label>
+						<input
+							type={"text"}
+							{...register("lud16", { required: false })}
+							spellCheck={false}
+							className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="about"
+							className="text-sm font-semibold uppercase tracking-wider"
+						>
+							Bio
+						</label>
+						<textarea
+							{...register("about")}
+							spellCheck={false}
+							className="relative h-20 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
+						/>
+					</div>
+					<div>
+						<button
+							type="submit"
+							disabled={!isValid}
+							className="mx-auto inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+						>
+							{loading ? (
+								<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
+							) : (
+								"Update"
+							)}
+						</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/general.tsx
+++ b/apps/desktop/src/routes/settings/general.tsx
@@ -0,0 +1,352 @@
+import { CheckIcon, DarkIcon, LightIcon, SystemModeIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import * as Switch from "@radix-ui/react-switch";
+import { invoke } from "@tauri-apps/api/core";
+import { getCurrent } from "@tauri-apps/api/window";
+import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
+import {
+	isPermissionGranted,
+	requestPermission,
+} from "@tauri-apps/plugin-notification";
+import { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function GeneralSettingScreen() {
+	const storage = useStorage();
+
+	const [apiKey, setAPIKey] = useState("");
+	const [settings, setSettings] = useState({
+		lowPower: false,
+		autoupdate: false,
+		autolaunch: false,
+		outbox: false,
+		media: true,
+		hashtag: true,
+		notification: true,
+		translation: false,
+		appearance: "system",
+	});
+
+	const changeTheme = async (theme: "light" | "dark" | "auto") => {
+		await invoke("plugin:theme|set_theme", { theme });
+		// update state
+		setSettings((prev) => ({ ...prev, appearance: theme }));
+	};
+
+	const toggleLowPower = async () => {
+		await storage.createSetting("lowPower", String(+!settings.lowPower));
+		setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
+	};
+
+	const toggleAutolaunch = async () => {
+		if (!settings.autolaunch) {
+			await enable();
+			// update state
+			setSettings((prev) => ({ ...prev, autolaunch: true }));
+		} else {
+			await disable();
+			// update state
+			setSettings((prev) => ({ ...prev, autolaunch: false }));
+		}
+	};
+
+	const toggleMedia = async () => {
+		await storage.createSetting("media", String(+!settings.media));
+		storage.settings.media = !settings.media;
+		// update state
+		setSettings((prev) => ({ ...prev, media: !settings.media }));
+	};
+
+	const toggleHashtag = async () => {
+		await storage.createSetting("hashtag", String(+!settings.hashtag));
+		storage.settings.hashtag = !settings.hashtag;
+		// update state
+		setSettings((prev) => ({ ...prev, hashtag: !settings.hashtag }));
+	};
+
+	const toggleAutoupdate = async () => {
+		await storage.createSetting("autoupdate", String(+!settings.autoupdate));
+		storage.settings.autoupdate = !settings.autoupdate;
+		// update state
+		setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
+	};
+
+	const toggleNofitication = async () => {
+		if (settings.notification) return;
+
+		await requestPermission();
+		// update state
+		setSettings((prev) => ({ ...prev, notification: !settings.notification }));
+	};
+
+	const toggleTranslation = async () => {
+		await storage.createSetting("translation", String(+!settings.translation));
+		storage.settings.translation = !settings.translation;
+		// update state
+		setSettings((prev) => ({ ...prev, translation: !settings.translation }));
+	};
+
+	const saveApi = async () => {
+		await storage.createSetting("translateApiKey", apiKey);
+	};
+
+	useEffect(() => {
+		async function loadSettings() {
+			const theme = await getCurrent().theme();
+			setSettings((prev) => ({ ...prev, appearance: theme }));
+
+			const autostart = await isEnabled();
+			setSettings((prev) => ({ ...prev, autolaunch: autostart }));
+
+			const permissionGranted = await isPermissionGranted();
+			setSettings((prev) => ({ ...prev, notification: permissionGranted }));
+
+			const data = await storage.getAllSettings();
+			if (!data) return;
+
+			for (const item of data) {
+				if (item.key === "autoupdate")
+					setSettings((prev) => ({
+						...prev,
+						autoupdate: !!parseInt(item.value),
+					}));
+
+				if (item.key === "lowPower")
+					setSettings((prev) => ({
+						...prev,
+						lowPower: !!parseInt(item.value),
+					}));
+
+				if (item.key === "outbox")
+					setSettings((prev) => ({
+						...prev,
+						outbox: !!parseInt(item.value),
+					}));
+
+				if (item.key === "media")
+					setSettings((prev) => ({
+						...prev,
+						media: !!parseInt(item.value),
+					}));
+
+				if (item.key === "hashtag")
+					setSettings((prev) => ({
+						...prev,
+						hashtag: !!parseInt(item.value),
+					}));
+
+				if (item.key === "translation")
+					setSettings((prev) => ({
+						...prev,
+						translation: !!parseInt(item.value),
+					}));
+			}
+		}
+
+		loadSettings();
+	}, []);
+
+	return (
+		<div className="mx-auto w-full max-w-lg">
+			<div className="flex flex-col gap-6">
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Update
+						</div>
+						<div className="text-sm">Automatically download new update</div>
+					</div>
+					<Switch.Root
+						checked={settings.autoupdate}
+						onClick={() => toggleAutoupdate()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Low Power
+						</div>
+						<div className="text-sm">
+							Sustainable for low network environment.
+						</div>
+					</div>
+					<Switch.Root
+						checked={settings.lowPower}
+						onClick={() => toggleLowPower()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Startup
+						</div>
+						<div className="text-sm">Launch Lume at Login</div>
+					</div>
+					<Switch.Root
+						checked={settings.autolaunch}
+						onClick={() => toggleAutolaunch()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Media
+						</div>
+						<div className="text-sm">Automatically load media</div>
+					</div>
+					<Switch.Root
+						checked={settings.media}
+						onClick={() => toggleMedia()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Hashtag
+						</div>
+						<div className="text-sm">Show all hashtags in content</div>
+					</div>
+					<Switch.Root
+						checked={settings.hashtag}
+						onClick={() => toggleHashtag()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Notification
+						</div>
+						<div className="text-sm">Automatically send notification</div>
+					</div>
+					<Switch.Root
+						checked={settings.notification}
+						disabled={settings.notification}
+						onClick={() => toggleNofitication()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+					</Switch.Root>
+				</div>
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							Translation
+						</div>
+						<div className="text-sm">Translate text to your language</div>
+					</div>
+					<Switch.Root
+						checked={settings.translation}
+						onClick={() => toggleTranslation()}
+						className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+					>
+						<Switch.Thumb className="block h-6 w-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>
+				{settings.translation ? (
+					<div className="flex w-full items-center gap-8">
+						<div className="w-24 shrink-0 text-end text-sm font-semibold">
+							API Key
+						</div>
+						<div className="relative w-full">
+							<input
+								type="password"
+								spellCheck={false}
+								value={apiKey}
+								onChange={(e) => setAPIKey(e.target.value)}
+								className="w-full border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-9 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
+							/>
+							<div className="h-9 absolute right-0 top-0 inline-flex items-center justify-center">
+								<button
+									type="button"
+									onClick={saveApi}
+									className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+								>
+									Save
+								</button>
+							</div>
+						</div>
+					</div>
+				) : null}
+				<div className="flex w-full items-start gap-8">
+					<div className="w-24 shrink-0 text-end text-sm font-semibold">
+						Appearance
+					</div>
+					<div className="flex flex-1 gap-6">
+						<button
+							type="button"
+							onClick={() => changeTheme("light")}
+							className="flex flex-col items-center justify-center gap-0.5"
+						>
+							<div
+								className={twMerge(
+									"inline-flex h-11 w-11 items-center justify-center rounded-lg",
+									settings.appearance === "light"
+										? "bg-blue-500 text-white"
+										: "bg-neutral-100 dark:bg-neutral-900",
+								)}
+							>
+								<LightIcon className="h-5 w-5" />
+							</div>
+							<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+								Light
+							</p>
+						</button>
+						<button
+							type="button"
+							onClick={() => changeTheme("dark")}
+							className="flex flex-col items-center justify-center gap-0.5"
+						>
+							<div
+								className={twMerge(
+									"inline-flex h-11 w-11 items-center justify-center rounded-lg",
+									settings.appearance === "dark"
+										? "bg-blue-500 text-white"
+										: "bg-neutral-100 dark:bg-neutral-900",
+								)}
+							>
+								<DarkIcon className="h-5 w-5" />
+							</div>
+							<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+								Dark
+							</p>
+						</button>
+						<button
+							type="button"
+							onClick={() => changeTheme("auto")}
+							className="flex flex-col items-center justify-center gap-0.5"
+						>
+							<div
+								className={twMerge(
+									"inline-flex h-11 w-11 items-center justify-center rounded-lg",
+									settings.appearance === "auto"
+										? "bg-blue-500 text-white"
+										: "bg-neutral-100 dark:bg-neutral-900",
+								)}
+							>
+								<SystemModeIcon className="h-5 w-5" />
+							</div>
+							<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+								System
+							</p>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/index.tsx
+++ b/apps/desktop/src/routes/settings/index.tsx
@@ -0,0 +1,19 @@
+import { ContactCard } from "./components/contactCard";
+import { PostCard } from "./components/postCard";
+import { ProfileCard } from "./components/profileCard";
+import { RelayCard } from "./components/relayCard";
+import { ZapCard } from "./components/zapCard";
+
+export function UserSettingScreen() {
+	return (
+		<div className="mx-auto w-full max-w-xl">
+			<ProfileCard />
+			<div className="grid grid-cols-2 gap-4">
+				<ContactCard />
+				<RelayCard />
+				<PostCard />
+				<ZapCard />
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/settings/nwc.tsx
+++ b/apps/desktop/src/routes/settings/nwc.tsx
@@ -0,0 +1,154 @@
+import { webln } from "@getalby/sdk";
+import { useArk } from "@lume/ark";
+import { CheckCircleIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { useEffect, useState } from "react";
+import { NWCForm } from "./components/walletConnectForm";
+
+export function NWCScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
+	const [balance, setBalance] = useState(0);
+
+	const remove = async () => {
+		await storage.removePrivkey(`${ark.account.pubkey}-nwc`);
+		setWalletConnectURL(null);
+	};
+
+	const loadBalance = async () => {
+		const nwc = new webln.NostrWebLNProvider({
+			nostrWalletConnectUrl: walletConnectURL,
+		});
+		await nwc.enable();
+
+		const balanceResponse = await nwc.getBalance();
+		setBalance(balanceResponse.balance);
+
+		nwc.close();
+	};
+
+	useEffect(() => {
+		if (walletConnectURL) loadBalance();
+	}, [walletConnectURL]);
+
+	useEffect(() => {
+		async function getNWC() {
+			const nwc = await storage.loadPrivkey(`${ark.account.pubkey}-nwc`);
+			if (nwc) setWalletConnectURL(nwc);
+		}
+		getNWC();
+	}, []);
+
+	return (
+		<div>
+			<div className="flex w-full flex-col gap-5">
+				<div className="text-center">
+					<h3 className="text-2xl font-semibold leading-tight">
+						Nostr Wallet Connect
+					</h3>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Sending zap easily via Bitcoin Lightning.
+					</p>
+				</div>
+				<div className="mx-auto w-full max-w-lg">
+					{!walletConnectURL ? (
+						<NWCForm setWalletConnectURL={setWalletConnectURL} />
+					) : (
+						<div className="flex w-full flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+							<div className="flex items-center justify-center gap-1.5 text-sm text-teal-500">
+								<CheckCircleIcon className="h-4 w-4" />
+								<div>You&apos;re using nostr wallet connect</div>
+							</div>
+							<div className="flex flex-col gap-3">
+								<textarea
+									readOnly
+									value={`${walletConnectURL.substring(0, 120)}****`}
+									className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-800 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+								/>
+								<button
+									type="button"
+									onClick={() => remove()}
+									className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
+								>
+									Remove connection
+								</button>
+							</div>
+						</div>
+					)}
+					{walletConnectURL ? (
+						<div className="mt-5 flex flex-col">
+							<h3 className="font-medium text-neutral-600 dark:text-neutral-400">
+								Current balance
+							</h3>
+							<p className="text-2xl font-semibold">
+								{new Intl.NumberFormat().format(balance)} sats
+							</p>
+						</div>
+					) : (
+						<div className="mt-5 flex flex-col gap-4">
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									Introduction
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									Nostr Wallet Connect (NWC) is a way for applications like
+									Nostr clients to access a remote Lightning wallet through a
+									standardized protocol.
+								</p>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									To learn more about the details have a look at{" "}
+									<a
+										href="https://github.com/nostr-protocol/nips/blob/master/47.md"
+										target="_blank"
+										className="text-blue-500"
+										rel="noreferrer"
+									>
+										the specs (NIP47)
+									</a>
+								</p>
+							</div>
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									About zapping
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									Lume doesn&apos;t take any commission or platform fees when
+									you zap someone. Lume doesn&apos;t hold your Bitcoin
+								</p>
+							</div>
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									Recommend wallet that support NWC
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									- Mutiny Wallet:{" "}
+									<a
+										href="https://www.mutinywallet.com/"
+										target="_blank"
+										rel="noreferrer"
+										className="text-blue-500"
+									>
+										website
+									</a>
+								</p>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									- Self hosted NWC on Umbrel :{" "}
+									<a
+										href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
+										target="_blank"
+										rel="noreferrer"
+										className="text-blue-500"
+									>
+										website
+									</a>
+								</p>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/users/components/profile.tsx
+++ b/apps/desktop/src/routes/users/components/profile.tsx
@@ -0,0 +1,153 @@
+import { useArk, useProfile } from "@lume/ark";
+import { useStorage } from "@lume/storage";
+import { NIP05 } from "@lume/ui";
+import { displayNpub } from "@lume/utils";
+import * as Avatar from "@radix-ui/react-avatar";
+import { minidenticon } from "minidenticons";
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { UserStats } from "./stats";
+
+export function UserProfile({ pubkey }: { pubkey: string }) {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const { user } = useProfile(pubkey);
+
+	const [followed, setFollowed] = useState(false);
+
+	const navigate = useNavigate();
+	const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
+		minidenticon(pubkey, 90, 50),
+	)}`;
+
+	const follow = async () => {
+		try {
+			if (!ark.ndk.signer) return navigate("/new/privkey");
+			setFollowed(true);
+
+			const add = await ark.createContact({ pubkey });
+
+			if (!add) {
+				toast.success("You already follow this user");
+				setFollowed(false);
+			}
+		} catch (e) {
+			toast.error(e);
+			setFollowed(false);
+		}
+	};
+
+	const unfollow = async () => {
+		try {
+			if (!ark.ndk.signer) return navigate("/new/privkey");
+			setFollowed(false);
+
+			await ark.deleteContact({ pubkey });
+		} catch (e) {
+			toast.error(e);
+		}
+	};
+
+	useEffect(() => {
+		if (ark.account.contacts.includes(pubkey)) {
+			setFollowed(true);
+		}
+	}, []);
+
+	if (!user) return <p>Loading...</p>;
+
+	return (
+		<>
+			<div className="h-56 w-full overflow-hidden rounded-tl-lg">
+				{user?.banner ? (
+					<img
+						src={user?.banner}
+						alt="user banner"
+						className="h-full w-full rounded-tl-lg object-cover"
+					/>
+				) : (
+					<div className="h-full w-full rounded-tl-lg bg-neutral-100 dark:bg-neutral-900" />
+				)}
+			</div>
+			<div className="-mt-7 flex w-full flex-col items-center px-5">
+				<Avatar.Root className="shrink-0">
+					<Avatar.Image
+						src={user?.picture || user?.image}
+						alt={pubkey}
+						loading="lazy"
+						decoding="async"
+						style={{ contentVisibility: "auto" }}
+						className="h-14 w-14 rounded-lg bg-white object-cover ring-2 ring-neutral-100 dark:ring-neutral-900"
+					/>
+					<Avatar.Fallback delayMs={300}>
+						<img
+							src={svgURI}
+							alt={pubkey}
+							className="h-14 w-14 rounded-lg bg-black dark:bg-white"
+						/>
+					</Avatar.Fallback>
+				</Avatar.Root>
+				<div className="mt-2 flex flex-1 flex-col gap-6">
+					<div className="flex flex-col items-center gap-1">
+						<div className="inline-flex flex-col items-center">
+							<h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+								{user?.name ||
+									user?.display_name ||
+									user?.displayName ||
+									"No name"}
+							</h5>
+							{user?.nip05 ? (
+								<NIP05
+									pubkey={pubkey}
+									nip05={user.nip05}
+									className="text-neutral-600 dark:text-neutral-400"
+								/>
+							) : (
+								<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
+									{displayNpub(pubkey, 16)}
+								</span>
+							)}
+						</div>
+						<div className="flex flex-col gap-6">
+							{user?.about || user?.bio ? (
+								<p className="mt-2 max-w-[500px] select-text break-words text-center text-neutral-900 dark:text-neutral-100">
+									{user.about || user.bio}
+								</p>
+							) : (
+								<div />
+							)}
+							<UserStats pubkey={pubkey} />
+						</div>
+					</div>
+					<div className="inline-flex items-center justify-center gap-2">
+						{followed ? (
+							<button
+								type="button"
+								onClick={unfollow}
+								className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+							>
+								Unfollow
+							</button>
+						) : (
+							<button
+								type="button"
+								onClick={follow}
+								className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+							>
+								Follow
+							</button>
+						)}
+						<Link
+							to={`/chats/${pubkey}`}
+							className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-500 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
+						>
+							Message
+						</Link>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
--- a/apps/desktop/src/routes/users/components/stats.tsx
+++ b/apps/desktop/src/routes/users/components/stats.tsx
@@ -0,0 +1,84 @@
+import { LoaderIcon } from "@lume/icons";
+import { compactNumber } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { fetch } from "@tauri-apps/plugin-http";
+
+export function UserStats({ pubkey }: { pubkey: string }) {
+	const { status, data } = useQuery({
+		queryKey: ["user-stats", pubkey],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			const res = await fetch(
+				`https://api.nostr.band/v0/stats/profile/${pubkey}`,
+				{
+					signal,
+				},
+			);
+
+			if (!res.ok) {
+				throw new Error("Error");
+			}
+
+			return await res.json();
+		},
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+	});
+
+	if (status === "pending") {
+		return (
+			<div className="flex w-full items-center justify-center">
+				<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
+			</div>
+		);
+	}
+
+	if (status === "error") {
+		return <div className="flex w-full items-center justify-center" />;
+	}
+
+	return (
+		<div className="flex w-full items-center justify-center gap-10">
+			<div className="inline-flex flex-col items-center gap-1">
+				<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+					{compactNumber.format(data?.stats[pubkey]?.followers_pubkey_count) ??
+						0}
+				</span>
+				<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
+					Followers
+				</span>
+			</div>
+			<div className="inline-flex flex-col items-center gap-1">
+				<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+					{compactNumber.format(
+						data?.stats[pubkey]?.pub_following_pubkey_count,
+					) ?? 0}
+				</span>
+				<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
+					Following
+				</span>
+			</div>
+			<div className="inline-flex flex-col items-center gap-1">
+				<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+					{compactNumber.format(
+						data?.stats[pubkey]?.zaps_received?.msats / 1000 ?? 0,
+					)}
+				</span>
+				<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
+					Zaps received
+				</span>
+			</div>
+			<div className="inline-flex flex-col items-center gap-1">
+				<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+					{compactNumber.format(
+						data?.stats[pubkey]?.zaps_sent?.msats / 1000 ?? 0,
+					)}
+				</span>
+				<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
+					Zaps sent
+				</span>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/src/routes/users/index.tsx
+++ b/apps/desktop/src/routes/users/index.tsx
@@ -0,0 +1,97 @@
+import { NoteSkeleton, RepostNote, TextNote, useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { UserProfile } from "./components/profile";
+
+export function UserScreen() {
+	const { pubkey } = useParams();
+	const ark = useArk();
+	const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: ["user-posts", pubkey],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const events = await ark.getInfiniteEvents({
+					filter: {
+						kinds: [NDKKind.Text, NDKKind.Repost],
+						authors: [pubkey],
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			refetchOnWindowFocus: false,
+		});
+
+	const allEvents = useMemo(
+		() => (data ? data.pages.flatMap((page) => page) : []),
+		[data],
+	);
+
+	// render event match event kind
+	const renderItem = (event: NDKEvent) => {
+		switch (event.kind) {
+			case NDKKind.Text:
+				return <TextNote key={event.id} event={event} />;
+			case NDKKind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default:
+				return <TextNote key={event.id} event={event} />;
+		}
+	};
+
+	return (
+		<div className="relative h-full w-full overflow-y-auto">
+			<UserProfile pubkey={pubkey} />
+			<div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
+				<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+					Latest posts
+				</h3>
+				<div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
+					{status === "pending" ? (
+						<NoteSkeleton />
+					) : (
+						allEvents.map((item) => renderItem(item))
+					)}
+					<div className="flex h-16 items-center justify-center px-3 pb-3">
+						{hasNextPage ? (
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={!hasNextPage || isFetchingNextPage}
+								className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
+							>
+								{isFetchingNextPage ? (
+									<LoaderIcon className="size-5 animate-spin" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						) : null}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop/tailwind.config.js
+++ b/apps/desktop/tailwind.config.js
@@ -0,0 +1,14 @@
+import sharedConfig from "@lume/tailwindcss";
+
+const config = {
+	content: [
+		"./src/**/*.{js,ts,jsx,tsx}",
+		"../../packages/@columns/**/*{.js,.ts,.jsx,.tsx}",
+		"../../packages/ark/**/*{.js,.ts,.jsx,.tsx}",
+		"../../packages/ui/**/*{.js,.ts,.jsx,.tsx}",
+		"index.html",
+	],
+	presets: [sharedConfig],
+};
+
+export default config;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
reya	7744a5e17c	feat: update translation	2024-01-15 20:01:06 +07:00
reya	3301af5cbb	feat: move nwc to settings	2024-01-15 15:33:05 +07:00
reya	3f1218e7bc	feat: add tutorial	2024-01-15 14:06:11 +07:00
reya	fbcb3ae6dc	feat: add register translate api	2024-01-15 09:51:49 +07:00
reya	e93aedb703	feat: update default column list	2024-01-15 08:36:23 +07:00
reya	dae4b1d52b	feat: redesign relay screen	2024-01-14 18:05:36 +07:00
reya	f908c46a19	feat: polish	2024-01-14 09:39:56 +07:00
reya	ab27bd5f44	feat: polish	2024-01-13 20:24:52 +07:00
reya	72870bb131	feat: add activity screen	2024-01-13 17:12:44 +07:00
reya	1822eac488	feat(ark): add user component	2024-01-13 08:21:49 +07:00
reya	0487b8a801	feat: refactor	2024-01-12 20:32:45 +07:00
reya	67c6177291	chore: update	2024-01-12 15:14:49 +07:00
reya	ad6ae6745d	chore: fixed circular import	2024-01-12 14:46:50 +07:00
reya	a9d10ff93b	feat: polish note component	2024-01-12 13:56:20 +07:00
reya	e0d4c53098	feat: update onboarding flow	2024-01-12 10:12:06 +07:00
reya	2c8571ecc7	wip: new activity sidebar	2024-01-11 21:00:42 +07:00
reya	a8cd34d998	chore: small fixes	2024-01-11 07:56:28 +07:00
reya	a5ad4fe05c	feat: redesign navigation bar	2024-01-10 13:57:44 +07:00
reya	f2504071cd	feat: update login flow	2024-01-10 09:22:13 +07:00
reya	73f90ebaf9	chore: minor fixes and updates	2024-01-09 08:35:30 +07:00
reya	c172c0f80f	feat: add onboarding modal	2024-01-08 20:18:07 +07:00
reya	aa80301778	refactor: add event and user routes to default ui	2024-01-08 09:30:04 +07:00
reya	c04ca3a1ab	fix: migarate to virtua 0.2.0	2024-01-08 08:03:19 +07:00
reya	3eae38e1cb	chore: update dependencies	2024-01-07 20:47:48 +07:00
reya	87099c6388	feat: update create account flow	2024-01-07 16:39:05 +07:00
reya	7554a35c31	chore: update config	2024-01-07 07:44:37 +07:00
reya	70707f69c8	feat: update create account screen	2024-01-07 07:42:08 +07:00
reya	8e8e6fe244	chore: restructure	2024-01-05 07:31:08 +07:00
reya	2726bfd595	feat: support nip 89	2024-01-04 15:10:52 +07:00
reya	542b6033c2	refactor(note): only support kind 1	2024-01-04 12:35:21 +07:00
reya	fcde669685	feat(editor): add hot key and update function	2024-01-04 10:44:00 +07:00
reya	f4cbcee8b4	feat: add editor	2024-01-04 08:52:45 +07:00
reya	ba13ac7535	chore: restructure packages	2024-01-03 11:12:36 +07:00
reya	9f27d68533	chore: clean up	2024-01-03 11:03:56 +07:00
reya	698f5a5d6d	feat(columns): add default column	2024-01-02 12:28:48 +07:00
reya	7856d6d49d	feat(columns): add antenas column	2024-01-02 09:02:11 +07:00
reya	a52fb3c437	feat(columns): add group column	2024-01-01 17:32:57 +07:00
reya	499765c10a	chore: update dependencies	2024-01-01 08:19:43 +07:00
reya	56fab1dda6	feat: the last commit of year	2023-12-31 20:53:51 +07:00
reya	b1d2496f8e	feat(column): add hashtag column	2023-12-30 17:33:04 +07:00
reya	ddbbcf41b5	chore: polish some components	2023-12-30 09:02:39 +07:00
reya	55d6318614	refactor(ark): update note component	2023-12-29 14:14:39 +07:00
reya	be333260f2	refactor(column): use context for manage column	2023-12-29 13:12:37 +07:00
reya	e1edba8a78	chore: update dependencies	2023-12-29 08:26:13 +07:00
reya	4fc3cc8a80	feat(column): add thread and user columns	2023-12-28 11:31:47 +07:00
reya	893f3f7181	feat(icon): update navigation icons	2023-12-28 09:38:59 +07:00
reya	4103b509d4	feat(parser): improve media parser	2023-12-28 08:44:55 +07:00
reya	ed538c91c6	feat(columns): update timeline column	2023-12-27 15:01:40 +07:00
reya	b4dac2d477	refactor(ark): add note provider	2023-12-27 10:52:13 +07:00
reya	3956ed622d	chore: fix build	2023-12-26 15:21:51 +07:00
reya	e1db873bd5	refactor(ark): rename widget to column	2023-12-26 13:44:38 +07:00
reya	227c2ddefa	chore: monorepo	2023-12-25 14:28:39 +07:00
reya	a6da07cd3f	refactor: everything	2023-12-24 19:14:46 +07:00
reya	9591d8626d	chore: update dependencies	2023-12-23 09:05:52 +07:00
reya	ee4e6b1ee6	chore: remove signal	2023-12-22 14:49:00 +07:00
reya	a882ead649	chore: update icon	2023-12-22 14:10:23 +07:00
reya	0522611669	feat(icon): update app and tray icons	2023-12-22 10:13:21 +07:00
reya	2536630ff7	update dependencies	2023-12-22 07:52:24 +07:00
reya	4670778181	feat(depot): update screens	2023-12-21 15:29:07 +07:00
reya	a6ca2589ab	feat(depot): update onboarding screen	2023-12-19 15:43:32 +07:00
reya	d9e8d05db7	feat(ui): update ui consistent	2023-12-19 10:13:52 +07:00
reya	ec2ac2dce3	feat(ark): add note component to ark	2023-12-19 08:06:10 +07:00
reya	55298515af	refactor(widget): migrate widget component to ark lib	2023-12-18 13:39:03 +07:00
reya	344bdc0c66	feat(depot): add setting run depot at launch	2023-12-17 08:07:44 +07:00
reya	ba88a4e0f2	feat(ark): update screen	2023-12-16 10:53:16 +07:00
reya	17c64ee357	feat(ark): refactor	2023-12-16 07:47:00 +07:00
reya	ba93bdbb91	feat(depot): initial work for depot	2023-12-15 09:15:30 +07:00
reya	591373fd52	fix(layout): fix flickering on home layout	2023-12-14 14:30:49 +07:00
reya	2fcc4dead1	feat(router): restructure	2023-12-14 13:22:03 +07:00
reya	d9ab7893e0	feat: update format	2023-12-14 13:11:21 +07:00
Ren Amamiya	a93ebd3861	Merge pull request #132 from luminous-devs/feat/universal-titlebar feat: add window titlebar	2023-12-11 08:57:31 +07:00
reya	7c4ec71089	feat: add window titlebar	2023-12-11 08:56:00 +07:00
Ren Amamiya	e9d845cf25	Merge pull request #131 from luminous-devs/wip/cleanup Clean up	2023-12-11 07:34:24 +07:00
reya	8883be7ed6	upgrade to vite 5	2023-12-10 17:00:04 +07:00
reya	132ea7f887	clean up	2023-12-10 16:53:07 +07:00
Ren Amamiya	f9402f5c4f	Merge pull request #130 from luminous-devs/feat/ark Introduction Ark	2023-12-10 11:19:04 +07:00
reya	72a38e3aa7	polish	2023-12-10 08:39:40 +07:00
reya	38e82a4feb	prefetch data	2023-12-09 18:11:02 +07:00
reya	6440680898	fix ark	2023-12-09 09:34:20 +07:00
reya	e507187044	wip: fully migrate to ark	2023-12-08 12:39:15 +07:00
Ren Amamiya	feeb92b6ef	Merge pull request #129 from vivganes/patch-2 Grammar touch-up + 1 more tip 🚀	2023-12-08 11:20:04 +07:00
Vivek Ganesan	2d4a77e8ed	Grammar touch-up + 1 more tip 🚀	2023-12-08 08:47:54 +05:30
reya	6f5ea1229d	Merge branch 'main' into feat/ark	2023-12-08 09:43:35 +07:00
reya	68886ad584	wip: migrate to ark	2023-12-08 09:32:48 +07:00
reya	5f90bd0d22	update dependencies	2023-12-08 08:18:47 +07:00
reya	8b434d577f	fix nip-05 verification	2023-12-08 08:01:06 +07:00
reya	f2b1458bd2	bump version & fix using nsecbunker with token	2023-12-07 18:49:55 +07:00
reya	7507cd9ba1	wip: migrate to ark	2023-12-07 18:09:00 +07:00
reya	0d43c13928	bump version	2023-12-07 11:55:49 +07:00
reya	95124e5ded	wip: ark	2023-12-07 11:50:25 +07:00
reya	a42a2788ea	fix nip-05	2023-12-06 10:15:41 +07:00
reya	e30274dab3	fix typo	2023-12-06 09:07:32 +07:00
Ren Amamiya	740b7588bc	Merge pull request #127 from luminous-devs/hotfix/2.2.1 v2.2.1	2023-12-06 08:09:44 +07:00
reya	24c2ed4eb2	update	2023-12-06 08:08:11 +07:00
reya	4006c0010e	polish	2023-12-05 15:31:45 +07:00
reya	7decf264d7	polish nsecbunker	2023-12-05 14:25:44 +07:00
reya	482b218f74	improve error handling for useevent hook	2023-12-05 09:42:08 +07:00
reya	e06b760e41	bump version	2023-12-04 14:14:50 +07:00
reya	7efc35f622	replace media chrome with vidstack	2023-12-04 14:02:07 +07:00
reya	8795923443	update	2023-12-04 13:36:16 +07:00
reya	4093821fd0	clean up	2023-12-04 12:47:29 +07:00
reya	b19637bdb7	remove misconfigure in react query	2023-12-04 12:17:16 +07:00
reya	21e758ec13	update user component	2023-12-04 11:49:52 +07:00
reya	48ab123850	improve relay screen	2023-12-04 09:26:19 +07:00
reya	a401070031	update dependencies	2023-12-04 08:46:42 +07:00
reya	e5e4109e79	bump version	2023-12-03 08:38:32 +07:00
Ren Amamiya	d62c814f33	Merge pull request #125 from luminous-devs/next Lume v2.2.0	2023-12-03 08:37:37 +07:00
reya	2a92b7c202	polish	2023-12-03 08:34:44 +07:00
reya	255dcb43fe	improve relay form	2023-12-02 17:53:45 +07:00
reya	a528b646e3	add finish step to tutorial	2023-12-02 08:33:23 +07:00
reya	fc35745c0d	wip: tutorial	2023-12-01 15:45:43 +07:00
reya	9ddf3471ce	fix nsecbunker	2023-12-01 08:23:46 +07:00
reya	8355ad6863	auto connect user relays	2023-11-30 20:15:54 +07:00
reya	217ac490b1	fix outbox	2023-11-30 19:22:00 +07:00
reya	092cf49227	improve relay connection	2023-11-30 18:19:24 +07:00
reya	5318f6c4cb	clean up	2023-11-30 17:24:07 +07:00
reya	80f675cb54	improve notification and performance	2023-11-30 16:02:28 +07:00
reya	6f68c2762b	add prefetch data	2023-11-30 10:35:08 +07:00
reya	f4390b29e2	revamp onboarding and launching process	2023-11-30 09:38:58 +07:00
reya	00e4f9d357	clean up dependencies	2023-11-28 15:36:57 +07:00
reya	d28d183620	Merge branch 'main' into next	2023-11-28 09:07:14 +07:00
reya	3c6c9c86d1	2.1.7	2023-11-28 09:00:46 +07:00
reya	bcd079c88e	update dependencies	2023-11-28 08:34:21 +07:00
Ren Amamiya	d989d6ffad	Merge pull request #123 from luminous-devs/feat/v2.1.6 Feat/v2.1.6	2023-11-27 12:01:25 +07:00
reya	5229458746	bump version	2023-11-27 09:56:43 +07:00
reya	2bfa1db816	update	2023-11-27 09:48:51 +07:00