diff --git a/src/app/users/components/modal.tsx b/src/app/users/components/modal.tsx
deleted file mode 100644
index 4765ae11..00000000
--- a/src/app/users/components/modal.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
-import * as Dialog from '@radix-ui/react-dialog';
-import { useQueryClient } from '@tanstack/react-query';
-import { message, open } from '@tauri-apps/plugin-dialog';
-import { readBinaryFile } from '@tauri-apps/plugin-fs';
-import { fetch } from '@tauri-apps/plugin-http';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import {
-  CancelIcon,
-  CheckCircleIcon,
-  LoaderIcon,
-  PlusIcon,
-  UnverifiedIcon,
-} from '@shared/icons';
-
-interface NIP05 {
-  names: {
-    [key: string]: string;
-  };
-}
-
-export function EditProfileModal() {
-  const queryClient = useQueryClient();
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [picture, setPicture] = useState('');
-  const [banner, setBanner] = useState('');
-  const [nip05, setNIP05] = useState({ verified: false, text: '' });
-
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const {
-    register,
-    handleSubmit,
-    reset,
-    setError,
-    formState: { isValid, errors },
-  } = useForm({
-    defaultValues: async () => {
-      const res: NDKUserProfile = queryClient.getQueryData(['user', db.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 verifyNIP05 = async (nip05: string) => {
-    const localPath = nip05.split('@')[0];
-    const service = nip05.split('@')[1];
-    const verifyURL = `https://${service}/.well-known/nostr.json?name=${localPath}`;
-
-    const res = await fetch(verifyURL, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-      },
-    });
-
-    if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
-
-    const data: NIP05 = await res.json();
-    if (data.names) {
-      if (data.names[localPath] !== db.account.pubkey) return false;
-      return true;
-    }
-    return false;
-  };
-
-  const uploadAvatar = async () => {
-    try {
-      // start loading
-      setLoading(true);
-
-      const selected = await open({
-        multiple: false,
-        filters: [
-          {
-            name: 'Image',
-            extensions: ['png', 'jpeg', 'jpg', 'gif'],
-          },
-        ],
-      });
-
-      if (!selected) {
-        setLoading(false);
-        return;
-      }
-
-      const file = await readBinaryFile(selected.path);
-      const blob = new Blob([file]);
-
-      const data = new FormData();
-      data.append('fileToUpload', blob);
-      data.append('submit', 'Upload Image');
-
-      const res = await fetch('https://nostr.build/api/v2/upload/files', {
-        method: 'POST',
-        body: data,
-      });
-
-      if (res.ok) {
-        const json = await res.json();
-        const content = json.data[0];
-
-        setPicture(content.url);
-
-        // stop loading
-        setLoading(false);
-      }
-    } catch (e) {
-      // stop loading
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  const uploadBanner = async () => {
-    try {
-      // start loading
-      setLoading(true);
-
-      const selected = await open({
-        multiple: false,
-        filters: [
-          {
-            name: 'Image',
-            extensions: ['png', 'jpeg', 'jpg', 'gif'],
-          },
-        ],
-      });
-
-      if (!selected) {
-        setLoading(false);
-        return;
-      }
-
-      const file = await readBinaryFile(selected.path);
-      const blob = new Blob([file]);
-
-      const data = new FormData();
-      data.append('fileToUpload', blob);
-      data.append('submit', 'Upload Image');
-
-      const res = await fetch('https://nostr.build/api/v2/upload/files', {
-        method: 'POST',
-        body: data,
-      });
-
-      if (res.ok) {
-        const json = await res.json();
-        const content = json.data[0];
-
-        setBanner(content.url);
-
-        // stop loading
-        setLoading(false);
-      }
-    } catch (e) {
-      // stop loading
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  const onSubmit = async (data: NDKUserProfile) => {
-    // start loading
-    setLoading(true);
-
-    const content = {
-      ...data,
-      username: data.name,
-      display_name: data.name,
-      bio: data.about,
-      image: data.picture,
-    };
-
-    const event = new NDKEvent(ndk);
-    event.kind = NDKKind.Metadata;
-    event.tags = [];
-
-    if (data.nip05) {
-      const nip05IsVerified = await verifyNIP05(data.nip05);
-      if (nip05IsVerified) {
-        event.content = JSON.stringify({ ...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",
-        });
-      }
-    } else {
-      event.content = JSON.stringify(content);
-    }
-
-    const publishedRelays = await event.publish();
-
-    if (publishedRelays) {
-      // invalid cache
-      queryClient.invalidateQueries({
-        queryKey: ['user', db.account.pubkey]
-      });
-      // reset form
-      reset();
-      // reset state
-      setLoading(false);
-      setIsOpen(false);
-      setPicture('https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih');
-      setBanner(null);
-    } else {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!nip05.verified && /\S+@\S+\.\S+/.test(nip05.text)) {
-      verifyNIP05(nip05.text);
-    }
-  }, [nip05.text]);
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Trigger asChild>
-        <button
-          type="button"
-          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-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
-        >
-          Edit profile
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
-        <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 rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            <div className="h-min w-full shrink-0 rounded-t-xl border-b border-neutral-200 px-5 py-5 dark:border-neutral-800">
-              <div className="flex items-center justify-between">
-                <Dialog.Title className="text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
-                  Edit profile
-                </Dialog.Title>
-                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800">
-                  <CancelIcon className="h-4 w-4" />
-                </Dialog.Close>
-              </div>
-            </div>
-            <div className="flex h-full w-full flex-col overflow-y-auto">
-              <form onSubmit={handleSubmit(onSubmit)} className="mb-0">
-                <input type={'hidden'} {...register('picture')} value={picture} />
-                <input type={'hidden'} {...register('banner')} value={banner} />
-                <div className="relative">
-                  <div className="relative h-44 w-full">
-                    {banner ? (
-                      <img
-                        src={banner}
-                        alt="user's banner"
-                        className="h-full w-full object-cover"
-                      />
-                    ) : (
-                      <div className="h-full w-full bg-black dark:bg-white" />
-                    )}
-                    <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={() => uploadBanner()}
-                        className="inline-flex h-full w-full items-center justify-center bg-black/50"
-                      >
-                        <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-neutral-900">
-                      <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"
-                        >
-                          <PlusIcon className="h-5 w-5" />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4 px-4 pb-4">
-                  <div className="flex flex-col gap-1">
-                    <label
-                      htmlFor="name"
-                      className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
-                    >
-                      Name
-                    </label>
-                    <input
-                      type={'text'}
-                      {...register('name', {
-                        required: true,
-                        minLength: 4,
-                      })}
-                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <label
-                      htmlFor="nip05"
-                      className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
-                    >
-                      NIP-05
-                    </label>
-                    <div className="relative">
-                      <input
-                        {...register('nip05', {
-                          required: true,
-                          minLength: 4,
-                        })}
-                        spellCheck={false}
-                        className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 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 bg-green-500 px-2 text-sm font-medium text-white">
-                            <CheckCircleIcon className="h-4 w-4 text-black dark:text-white" />
-                            Verified
-                          </span>
-                        ) : (
-                          <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium text-white">
-                            <UnverifiedIcon className="h-4 w-4 text-black dark:text-white" />
-                            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="about"
-                      className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
-                    >
-                      Bio
-                    </label>
-                    <textarea
-                      {...register('about')}
-                      spellCheck={false}
-                      className="relative h-20 w-full resize-none rounded-lg bg-neutral-200 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <label
-                      htmlFor="website"
-                      className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
-                    >
-                      Website
-                    </label>
-                    <input
-                      type={'text'}
-                      {...register('website', { required: false })}
-                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
-                    />
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <label
-                      htmlFor="website"
-                      className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
-                    >
-                      Lightning address
-                    </label>
-                    <input
-                      type={'text'}
-                      {...register('lud16', { required: false })}
-                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
-                    />
-                  </div>
-                  <div>
-                    <button
-                      type="submit"
-                      disabled={!isValid}
-                      className="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>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index af411544..520b605b 100644
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 
-import { EditProfileModal } from '@app/users/components/modal';
 import { UserStats } from '@app/users/components/stats';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -157,12 +156,6 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             >
               Message
             </Link>
-            {db.account.pubkey === pubkey && (
-              <>
-                <span className="mx-2 inline-flex h-4 w-px bg-neutral-200 dark:bg-neutral-800" />
-                <EditProfileModal />
-              </>
-            )}
           </div>
         </div>
       </div>
diff --git a/src/shared/widgets/article.tsx b/src/shared/widgets/article.tsx
index 2432e275..06163dd7 100644
--- a/src/shared/widgets/article.tsx
+++ b/src/shared/widgets/article.tsx
@@ -21,7 +21,7 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
   const { ndk, relayUrls, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
-      queryKey: ['widget-' + widget.id],
+      queryKey: ['widget-article'],
       initialPageParam: 0,
       queryFn: async ({
         signal,
diff --git a/src/shared/widgets/file.tsx b/src/shared/widgets/file.tsx
index ce65f5ab..a5e19e85 100644
--- a/src/shared/widgets/file.tsx
+++ b/src/shared/widgets/file.tsx
@@ -21,7 +21,7 @@ export function FileWidget({ widget }: { widget: Widget }) {
   const { ndk, relayUrls, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
-      queryKey: ['widget-' + widget.id],
+      queryKey: ['widget-media'],
       initialPageParam: 0,
       queryFn: async ({
         signal,
diff --git a/src/shared/widgets/group.tsx b/src/shared/widgets/group.tsx
index 704a9afd..286390e1 100644
--- a/src/shared/widgets/group.tsx
+++ b/src/shared/widgets/group.tsx
@@ -23,7 +23,7 @@ export function GroupWidget({ widget }: { widget: Widget }) {
   const { relayUrls, ndk, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
-      queryKey: ['widget-' + widget.id],
+      queryKey: [`widget-${widget.id}`],
       initialPageParam: 0,
       queryFn: async ({
         signal,
diff --git a/src/shared/widgets/hashtag.tsx b/src/shared/widgets/hashtag.tsx
index 1255ab8f..d62760c2 100644
--- a/src/shared/widgets/hashtag.tsx
+++ b/src/shared/widgets/hashtag.tsx
@@ -18,7 +18,7 @@ export function HashtagWidget({ widget }: { widget: Widget }) {
   const { ndk, relayUrls, fetcher } = useNDK();
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
-      queryKey: ['widget-' + widget.id],
+      queryKey: [`widget-${widget.content}`],
       initialPageParam: 0,
       queryFn: async ({
         signal,
diff --git a/src/shared/widgets/index.ts b/src/shared/widgets/index.ts
index e6499a24..cbef4a5b 100644
--- a/src/shared/widgets/index.ts
+++ b/src/shared/widgets/index.ts
@@ -13,3 +13,5 @@ export * from './other/wrapper';
 export * from './other/liveUpdater';
 export * from './other/toggleWidgetList';
 export * from './other/widgetList';
+export * from './other/addGroupFeeds';
+export * from './other/addHashtagFeeds';
diff --git a/src/shared/widgets/other/addGroupFeeds.tsx b/src/shared/widgets/other/addGroupFeeds.tsx
new file mode 100644
index 00000000..1b35be93
--- /dev/null
+++ b/src/shared/widgets/other/addGroupFeeds.tsx
@@ -0,0 +1,132 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState } from 'react';
+
+import { useStorage } from '@libs/storage/provider';
+
+import {
+  ArrowRightCircleIcon,
+  CancelIcon,
+  CheckCircleIcon,
+  GroupFeedsIcon,
+  PlusIcon,
+} from '@shared/icons';
+import { User } from '@shared/user';
+
+import { WIDGET_KIND } from '@stores/constants';
+
+import { useWidget } from '@utils/hooks/useWidget';
+
+export function AddGroupFeeds({ currentWidgetId }: { currentWidgetId: string }) {
+  const { db } = useStorage();
+  const { replaceWidget } = useWidget();
+
+  const [title, setTitle] = useState<string>('');
+  const [users, setUsers] = useState<Array<string>>([]);
+
+  // toggle follow state
+  const toggleUser = (pubkey: string) => {
+    const arr = users.includes(pubkey)
+      ? users.filter((i) => i !== pubkey)
+      : [...users, pubkey];
+    setUsers(arr);
+  };
+
+  const submit = async () => {
+    replaceWidget.mutate({
+      currentId: currentWidgetId,
+      widget: {
+        kind: WIDGET_KIND.group,
+        title: title || 'Group',
+        content: JSON.stringify(users),
+      },
+    });
+  };
+
+  return (
+    <Dialog.Root>
+      <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
+        <div className="inline-flex items-center gap-2.5">
+          <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
+            <GroupFeedsIcon className="h-4 w-4" />
+          </div>
+          <p className="font-medium">Group feeds</p>
+        </div>
+        <Dialog.Trigger asChild>
+          <button
+            type="button"
+            className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
+          >
+            <PlusIcon className="h-3 w-3" />
+            Add
+          </button>
+        </Dialog.Trigger>
+      </div>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
+        <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 rounded-xl bg-neutral-50 dark:bg-neutral-950">
+            <div className="w-full shrink-0 rounded-t-xl border-b border-neutral-100 px-3 py-5 dark:border-neutral-900">
+              <div className="flex items-center justify-between">
+                <Dialog.Title className="text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+                  Adding group feeds
+                </Dialog.Title>
+                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800">
+                  <CancelIcon className="h-4 w-4" />
+                </Dialog.Close>
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-3 px-3">
+              <div className="flex flex-col gap-1 pt-2">
+                <label
+                  htmlFor="name"
+                  className="font-medium text-neutral-700 dark:text-neutral-300"
+                >
+                  Name
+                </label>
+                <input
+                  name="name"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  placeholder="Nostrichs..."
+                  className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="font-medium text-neutral-700 dark:text-neutral-300">
+                  Users
+                </span>
+                <div className="flex h-[420px] flex-col overflow-y-auto rounded-xl bg-neutral-100 py-2 dark:bg-neutral-900">
+                  {db.account.circles.map((item: string) => (
+                    <button
+                      key={item}
+                      type="button"
+                      onClick={() => toggleUser(item)}
+                      className="inline-flex transform items-center justify-between px-3 py-2 hover:bg-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                      <User pubkey={item} variant="simple" />
+                      {users.includes(item) ? (
+                        <CheckCircleIcon className="h-5 w-5 text-teal-500" />
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="mt-2 px-3 py-3">
+              <button
+                type="submit"
+                disabled={users.length < 1}
+                onClick={submit}
+                className="inline-flex h-9 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
+              >
+                <span className="w-5" />
+                <span>Add {users.length} user to group feeds</span>
+                <ArrowRightCircleIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/src/shared/widgets/other/addHashtagFeeds.tsx b/src/shared/widgets/other/addHashtagFeeds.tsx
new file mode 100644
index 00000000..c205ad1a
--- /dev/null
+++ b/src/shared/widgets/other/addHashtagFeeds.tsx
@@ -0,0 +1,136 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { Resolver, useForm } from 'react-hook-form';
+
+import { CancelIcon, GroupFeedsIcon, PlusIcon } from '@shared/icons';
+
+import { HASHTAGS, WIDGET_KIND } from '@stores/constants';
+
+import { useWidget } from '@utils/hooks/useWidget';
+
+type FormValues = {
+  hashtag: string;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.hashtag ? values : {},
+    errors: !values.hashtag
+      ? {
+          hashtag: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function AddHashtagFeeds({ currentWidgetId }: { currentWidgetId: string }) {
+  const { replaceWidget } = useWidget();
+  const {
+    register,
+    setValue,
+    setError,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      replaceWidget.mutate({
+        currentId: currentWidgetId,
+        widget: {
+          kind: WIDGET_KIND.hashtag,
+          title: data.hashtag,
+          content: data.hashtag.replace('#', ''),
+        },
+      });
+    } catch (e) {
+      setError('hashtag', {
+        type: 'custom',
+        message: e,
+      });
+    }
+  };
+
+  return (
+    <Dialog.Root>
+      <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
+        <div className="inline-flex items-center gap-2.5">
+          <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
+            <GroupFeedsIcon className="h-4 w-4" />
+          </div>
+          <p className="font-medium">Hashtag</p>
+        </div>
+        <Dialog.Trigger asChild>
+          <button
+            type="button"
+            className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
+          >
+            <PlusIcon className="h-3 w-3" />
+            Add
+          </button>
+        </Dialog.Trigger>
+      </div>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
+        <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 rounded-xl bg-neutral-50 dark:bg-neutral-950">
+            <div className="w-full shrink-0 rounded-t-xl border-b border-neutral-100 px-3 py-5 dark:border-neutral-900">
+              <div className="flex items-center justify-between">
+                <Dialog.Title className="text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
+                  Adding hashtag feeds
+                </Dialog.Title>
+                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800">
+                  <CancelIcon className="h-4 w-4" />
+                </Dialog.Close>
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-3 px-3 py-3">
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="mb-0 flex flex-col gap-2"
+              >
+                <div className="flex flex-col gap-1">
+                  <input
+                    {...register('hashtag', { required: true, minLength: 1 })}
+                    placeholder="Enter a hashtag"
+                    className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
+                  />
+                  <span className="text-sm text-red-400">
+                    {errors.hashtag && <p>{errors.hashtag.message}</p>}
+                  </span>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+                    Suggestions:
+                  </span>
+                  <div className="flex flex-wrap items-center justify-start gap-2">
+                    {HASHTAGS.map((item) => (
+                      <button
+                        key={item.hashtag}
+                        type="button"
+                        onClick={() => setValue('hashtag', item.hashtag)}
+                        className="inline-flex h-6 w-min items-center justify-center rounded-md bg-neutral-100 px-2 text-sm hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                      >
+                        {item.hashtag}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className="mt-2 flex flex-col items-center justify-center gap-2">
+                  <button
+                    type="submit"
+                    className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
+                  >
+                    Add
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/src/shared/widgets/other/nostrBandUserProfile.tsx b/src/shared/widgets/other/nostrBandUserProfile.tsx
index 2cab6431..a4eca17d 100644
--- a/src/shared/widgets/other/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/other/nostrBandUserProfile.tsx
@@ -1,5 +1,4 @@
 import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -8,7 +7,6 @@ import { useStorage } from '@libs/storage/provider';
 
 import { FollowIcon, UnfollowIcon } from '@shared/icons';
 
-import { compactNumber } from '@utils/number';
 import { shortenKey } from '@utils/shortenKey';
 
 export interface Profile {
@@ -17,23 +15,12 @@ export interface Profile {
 }
 
 export function NostrBandUserProfile({ data }: { data: Profile }) {
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { status, data: userStats } = useQuery({
-    queryKey: ['user-stats', data.pubkey],
-    queryFn: async () => {
-      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${data.pubkey}`);
-      return res.json();
-    },
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-    staleTime: Infinity,
-  });
-
   const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
   const profile = embedProfile;
 
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
   const [followed, setFollowed] = useState(false);
 
   const follow = async (pubkey: string) => {
@@ -90,8 +77,8 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
   }
 
   return (
-    <div className="h-min w-full px-3 pb-3">
-      <div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
+    <div className="mb-3 h-min w-full px-3">
+      <div className="rounded-xl bg-neutral-50 px-5 py-5 dark:bg-neutral-950">
         <div className="flex items-center justify-between">
           <div className="inline-flex items-center gap-2">
             <img
@@ -128,45 +115,9 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
             )}
           </div>
         </div>
-        <div className="mt-2 whitespace-pre-line break-words text-neutral-900 dark:text-neutral-100">
+        <div className="mt-2 line-clamp-5 whitespace-pre-line break-all text-neutral-900 dark:text-neutral-100">
           {profile.about || profile.bio}
         </div>
-        <div className="mt-5">
-          {status === 'pending' ? (
-            <p>Loading...</p>
-          ) : (
-            <div className="flex w-full items-center gap-8">
-              <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
-                  {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
-                </span>
-                <span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
-                  Followers
-                </span>
-              </div>
-              <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
-                  {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
-                </span>
-                <span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
-                  Following
-                </span>
-              </div>
-              <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
-                  {userStats.stats[data.pubkey].zaps_received
-                    ? compactNumber.format(
-                        userStats.stats[data.pubkey].zaps_received.msats / 1000
-                      )
-                    : 0}
-                </span>
-                <span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
-                  Zaps received
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     </div>
   );
diff --git a/src/shared/widgets/other/widgetList.tsx b/src/shared/widgets/other/widgetList.tsx
index 8394791a..856b3f16 100644
--- a/src/shared/widgets/other/widgetList.tsx
+++ b/src/shared/widgets/other/widgetList.tsx
@@ -1,14 +1,6 @@
-import {
-  ArticleIcon,
-  BellIcon,
-  GroupFeedsIcon,
-  HashtagIcon,
-  MediaIcon,
-  PlusIcon,
-  TrendingIcon,
-} from '@shared/icons';
+import { ArticleIcon, BellIcon, MediaIcon, PlusIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
-import { WidgetWrapper } from '@shared/widgets';
+import { AddGroupFeeds, AddHashtagFeeds, WidgetWrapper } from '@shared/widgets';
 
 import { TOPICS, WIDGET_KIND } from '@stores/constants';
 
@@ -32,7 +24,7 @@ export function WidgetList({ widget }: { widget: Widget }) {
                 (topic, index) => (
                   <div
                     key={index}
-                    className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50"
+                    className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-neutral-50 px-3 ring-1 ring-transparent hover:ring-neutral-200 dark:bg-neutral-950 dark:hover:ring-neutral-800"
                   >
                     <div className="inline-flex items-center gap-2.5">
                       <div className="h-9 w-9 shrink-0 rounded-md">
@@ -71,15 +63,27 @@ export function WidgetList({ widget }: { widget: Widget }) {
               Newsfeed
             </h3>
             <div className="flex flex-col gap-3">
+              <AddGroupFeeds currentWidgetId={widget.id} />
+              <AddHashtagFeeds currentWidgetId={widget.id} />
               <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
                 <div className="inline-flex items-center gap-2.5">
                   <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
                     <ArticleIcon className="h-4 w-4" />
                   </div>
-                  <p className="font-medium">Article</p>
+                  <p className="font-medium">Articles</p>
                 </div>
                 <button
                   type="button"
+                  onClick={() =>
+                    replaceWidget.mutate({
+                      currentId: widget.id,
+                      widget: {
+                        kind: WIDGET_KIND.article,
+                        title: 'Articles',
+                        content: JSON.stringify({ global: true }),
+                      },
+                    })
+                  }
                   className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
                 >
                   <PlusIcon className="h-3 w-3" />
@@ -95,73 +99,16 @@ export function WidgetList({ widget }: { widget: Widget }) {
                 </div>
                 <button
                   type="button"
-                  className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add
-                </button>
-              </div>
-              <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
-                <div className="inline-flex items-center gap-2.5">
-                  <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
-                    <GroupFeedsIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Group feeds</p>
-                </div>
-                <button
-                  type="button"
-                  className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add
-                </button>
-              </div>
-              <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
-                <div className="inline-flex items-center gap-2.5">
-                  <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
-                    <HashtagIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Hashtag</p>
-                </div>
-                <button
-                  type="button"
-                  className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add
-                </button>
-              </div>
-            </div>
-          </div>
-          <div className="rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-            <h3 className="mb-2.5 text-sm font-semibold uppercase text-neutral-700 dark:text-neutral-300">
-              Nostr Band
-            </h3>
-            <div className="flex flex-col gap-3">
-              <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
-                <div className="inline-flex items-center gap-2.5">
-                  <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
-                    <TrendingIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Trending posts</p>
-                </div>
-                <button
-                  type="button"
-                  className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add
-                </button>
-              </div>
-              <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
-                <div className="inline-flex items-center gap-2.5">
-                  <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
-                    <TrendingIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Trending users</p>
-                </div>
-                <button
-                  type="button"
+                  onClick={() =>
+                    replaceWidget.mutate({
+                      currentId: widget.id,
+                      widget: {
+                        kind: WIDGET_KIND.file,
+                        title: 'Media',
+                        content: JSON.stringify({ global: true }),
+                      },
+                    })
+                  }
                   className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
                 >
                   <PlusIcon className="h-3 w-3" />
@@ -184,6 +131,16 @@ export function WidgetList({ widget }: { widget: Widget }) {
                 </div>
                 <button
                   type="button"
+                  onClick={() =>
+                    replaceWidget.mutate({
+                      currentId: widget.id,
+                      widget: {
+                        kind: WIDGET_KIND.notification,
+                        title: 'Notification',
+                        content: '',
+                      },
+                    })
+                  }
                   className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
                 >
                   <PlusIcon className="h-3 w-3" />