diff --git a/README.md b/README.md
index 9fb01bd..e902446 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,45 @@ Just a quick interaction with Nostr3, and you are all set.
 What's more, it links your Nostr accounts to your EVM accounts, making tipping a breeze for all Nostr accounts set up through Nostr3.
 While Nostr3 isn't a full-fledged Nostr protocol client, it's a super handy tool that covers the basics.
 But hey, for the best Nostr experience, we suggest pairing it with open-source clients. Happy Nostring!
+
+Nostr3 build from Frens Client:
+<https://github.com/antonio-hickey/Frens>
+
+Nostr3 use the Nostr Band API:
+<https://api.nostr.band>
+
+Nost3 aims to extend the capabilities of the Nostr protocol by incorporating Web3 payment functionalities. This integration allows users to generate a Nostr keypair by signing a signature through their wallet. Along with this keypair, an Ethereum Virtual Machine (EVM) address will be created.
+
+## Key Features
+
+- **Keypair and EVM Address Generation:** Users can generate a Nostr keypair and an associated EVM address through their wallet.
+  
+- **Database Registration:** The generated EVM address can be registered in the Nostr3 database. This process links it to the user's public key within the Nostr protocol.
+  
+- **Sending and Receiving Tips:** Users can send and receive tips to and from all public keys associated with Nostr users who have registered their addresses on Nostr3.
+
+## NIPS
+
+    - NIP-02
+    - NIP-04
+    - NIP-07
+    - NIP-10 
+    - NIP-18 
+    - NIP-25
+    - NIP-111
+
+## How It Works
+
+1. **Signature Signing:** Users sign a signature using their wallet to initiate the keypair generation process.
+
+2. **Keypair Generation:** A Nostr keypair is generated, alongside an EVM address.
+
+3. **Database Registration:** Users register their EVM address in the Nostr3 database, linking it to their Nostr protocol public key.
+
+4. **Tip Transactions:** Once registered, users can engage in tip transactions with other Nostr users who have also registered on Nostr3.
+
+## Benefits
+
+- **Enhanced Functionality:** By bridging Nostr with Web3, users enjoy a broader range of payment options and interactions.
+  
+- **User-Friendly:** The process is designed to be straightforward, catering to both beginners and experienced users in the blockchain space.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index 60e435f..703836a 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -45,7 +45,7 @@ export const Footer = () => {
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
-              <a href="https://github.com/scobru/nostr3" target="_blank" rel="noreferrer" className="link">
+              <a href="https://github.com/scobru/nostr3-monorepo" target="_blank" rel="noreferrer" className="link">
                 Fork me
               </a>
             </div>
@@ -65,8 +65,8 @@ export const Footer = () => {
             </div>
             <span>·</span>
             <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Support
+              <a href="https://t.me/nostr3" target="_blank" rel="noreferrer" className="link">
+                Telegram
               </a>
             </div>
           </div>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index a7c59b1..f4752d4 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveBoxIcon, Bars3Icon, BugAntIcon, HomeIcon, KeyIcon } from "@heroicons/react/24/outline";
+import { ArchiveBoxIcon, Bars3Icon, DocumentIcon, HomeIcon, KeyIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
@@ -27,9 +27,9 @@ export const menuLinks: HeaderMenuLink[] = [
     icon: <ArchiveBoxIcon className="h-4 w-4" />,
   },
   {
-    label: "Debug Contracts",
-    href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
+    label: "Docs",
+    href: "https://github.com/dostr-eth/nips/blob/ethkeygen/111.md",
+    icon: <DocumentIcon className="h-4 w-4" />,
   },
 ];
 
diff --git a/packages/nextjs/components/client/createPostCard.tsx b/packages/nextjs/components/client/createPostCard.tsx
index 5f37930..8f717a0 100644
--- a/packages/nextjs/components/client/createPostCard.tsx
+++ b/packages/nextjs/components/client/createPostCard.tsx
@@ -4,6 +4,7 @@ import { Nostr3 } from "@scobru/nostr3/dist/nostr3";
 import { Filter, Relay, UnsignedEvent } from "nostr-tools";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { useGlobalState } from "~~/services/store/store";
+import { notification } from "~~/utils/scaffold-eth";
 
 interface CreatePostCardProps {
   posterPK: string;
@@ -12,6 +13,7 @@ interface CreatePostCardProps {
   publishEvent: (event: UnsignedEvent) => void;
   getEvents: (filters: Filter[]) => void;
   setEthTipAmount: (amount: string) => void;
+  handleFollowFilter: any;
 }
 
 export default function CreatePostCard(props: CreatePostCardProps) {
@@ -23,11 +25,12 @@ export default function CreatePostCard(props: CreatePostCardProps) {
   const [toMe, setToMe] = useState<boolean>(false);
   const [isDM, setIsDM] = useState<boolean>(false);
   const nostr3 = new Nostr3(privateKey);
-  const setEventId = useGlobalState(state => state.setEventId);
-  const [proposedEventId, setProposedEventId] = useState<string>("");
-  const eventId = useGlobalState(state => state.eventId);
+  const setEvent = useGlobalState(state => state.setEvent);
+  const [proposedEventId, setProposedEventId] = useState<any>("");
+  const [proposedPubkey, setProposedPubkey] = useState<any>("");
+  const event = useGlobalState(state => state.event);
 
-  /* const extractHashtags = (str: string) => {
+  const extractHashtags = (str: string) => {
     const regex = /#(\w+)/g;
     let matches;
     const hashtags = [];
@@ -41,25 +44,30 @@ export default function CreatePostCard(props: CreatePostCardProps) {
     }
 
     // Return the hashtags array in the desired format
-    return ["t", ...hashtags];
+    return [...hashtags];
   };
- */
+
   useEffect(() => {
-    if (eventId) {
-      setProposedEventId(eventId);
+    if (event) {
+      setProposedEventId(event.id);
+      setProposedPubkey(event?.pubkey);
       setIsEncrypted(false);
       setIsDM(false);
     }
-  }, [eventId, proposedEventId]);
+  }, [event, proposedEventId]);
+
+  useEffect(() => {
+    props.handleFollowFilter();
+  }, []);
 
   return (
     <div
-      className={`divide-y divide-white overflow-hidden rounded-lgshadow border ${
-        proposedEventId ? "border-success border-2 shadow-lg shadow-success" : "border-dashed"
+      className={`divide-y divide-white rounded-lg shadow border-collapse border bg-base-300   ${
+        proposedEventId ? "border-success border-2 shadow-lg shadow-success" : " border-dashed"
       }`}
     >
       <div
-        className="px-4 py-5 sm:px-6 text-lg hover:dark:bg-base-300/25 hover:!text-xl hover:cursor-pointer hover:underline hover:decoration-green-300"
+        className="  px-4 py-2 sm:px-6  text-lg hover:dark:bg-base-300/25 hover:!text-xl hover:cursor-pointer hover:underline hover:decoration-green-300"
         onClick={() => {
           const filter: Filter[] = [
             {
@@ -81,6 +89,7 @@ export default function CreatePostCard(props: CreatePostCardProps) {
           </span>
         </div>
       </div>
+
       <div className="px-4 py-5 sm:p-6">
         <div className="mt-2">
           <div className="flex items-center my-4">
@@ -99,6 +108,7 @@ export default function CreatePostCard(props: CreatePostCardProps) {
               placeholder="Encrypt"
               onChange={e => {
                 setToMe(e.target.checked);
+                setPubKeyReceiver(props.posterPK);
               }}
             />
             <span>To me</span>
@@ -125,10 +135,32 @@ export default function CreatePostCard(props: CreatePostCardProps) {
             ) : null}
           </div>
 
+          <div>
+            {proposedEventId ? (
+              <div className="my-2">
+                Answer to event {""}
+                <span className="inline-flex items-center gap-x-1.5 rounded-md bg-base-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                  <svg className="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
+                    <circle cx="3" cy="3" r="3" />
+                  </svg>
+                  {proposedEventId.slice(proposedEventId.length - 6)}
+                </span>
+              </div>
+            ) : null}
+          </div>
+          <button
+            onClick={() => {
+              setProposedEventId("");
+              setEvent("");
+            }}
+            className="btn btn-ghost btn-sm my-5"
+          >
+            reset
+          </button>
           <textarea
             name="post"
             id="post"
-            className="block w-full h-32 bg-gray-900/25 dark:bg-white/25 rounded-lg p-1.5 text-gray-900 text-xl shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-300 sm:leading-6 dark:text-white  dark:placeholder:text-gray-200"
+            className="block w-full h-32  bg-gray-900/25 dark:bg-white/25 rounded-lg p-1.5 text-gray-900 text-base shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-300 sm:leading-6 dark:text-white  dark:placeholder:text-gray-200"
             placeholder="Type your post..."
             ref={textArea}
           ></textarea>
@@ -139,23 +171,53 @@ export default function CreatePostCard(props: CreatePostCardProps) {
                 const newEvent = {
                   kind: 1,
                   created_at: Math.floor(Date.now() / 1000),
-                  tags: [],
+                  tags: [] as string[][],
                   content: textArea?.current?.value,
                   pubkey: props.posterPK,
                 };
 
+                const hashtags = extractHashtags(String(textArea?.current?.value));
+
+                if (hashtags) {
+                  newEvent.tags = hashtags.map(hashtag => ["t", hashtag]);
+                }
                 props.publishEvent(newEvent as UnsignedEvent);
               } else if (proposedEventId) {
                 const newEvent = {
                   kind: 1,
                   created_at: Math.floor(Date.now() / 1000),
-                  tags: [["e", proposedEventId]],
+                  tags: [
+                    ["e", proposedEventId],
+                    ["p", proposedPubkey],
+                  ],
                   content: textArea?.current?.value,
                   pubkey: props.posterPK,
                 };
 
                 props.publishEvent(newEvent as UnsignedEvent);
-              } else {
+              } else if (toMe && isEncrypted) {
+                const ciphertext = await nostr3.encryptDM(textArea?.current?.value, props.posterPK);
+                const newEvent = {
+                  kind: 4,
+                  created_at: Math.floor(Date.now() / 1000),
+                  tags: [["p", props.posterPK]],
+                  content: ciphertext,
+                  pubkey: props.posterPK,
+                };
+
+                props.publishEvent(newEvent as UnsignedEvent);
+              } else if (isDM) {
+                const ciphertext = await nostr3.encryptDM(textArea?.current?.value, pubKeyReceiver);
+                const newEvent = {
+                  kind: 4,
+                  created_at: Math.floor(Date.now() / 1000),
+                  tags: [["p", pubKeyReceiver]],
+                  content: ciphertext,
+                  pubkey: props.posterPK,
+                };
+
+                props.publishEvent(newEvent as UnsignedEvent);
+              } else if (isDM && isEncrypted) {
                 const ciphertext = await nostr3.encryptDM(textArea?.current?.value, pubKeyReceiver);
                 const newEvent = {
                   kind: 4,
@@ -169,16 +231,17 @@ export default function CreatePostCard(props: CreatePostCardProps) {
               }
 
               setProposedEventId("");
-              setEventId("");
+              setEvent("");
+              notification.success("Posted");
             }}
           >
             Publish
           </button>
         </div>
         <div className="my-5">
-          <span className="text-gray-800 dark:text-gray-200">Tip with ETH</span>
+          <span className=" dark:text-gray-200">Tip with ETH</span>
           <input
-            className="input input-ghost w-full my-2"
+            className="input input-primary w-full my-2"
             placeholder="Amount to tip"
             onChange={e => {
               props.setEthTipAmount(e.target.value);
diff --git a/packages/nextjs/components/client/displayEventCard.tsx b/packages/nextjs/components/client/displayEventCard.tsx
index a254bcd..fa2210f 100644
--- a/packages/nextjs/components/client/displayEventCard.tsx
+++ b/packages/nextjs/components/client/displayEventCard.tsx
@@ -24,6 +24,7 @@ interface DisplayEventCardProps {
   getEvents: (filters: Filter[]) => void;
   getEvent: (filter: Filter) => Promise<Event | null | undefined>;
   publishEvent: (event: UnsignedEvent, _sk?: string) => void;
+  handleFollowFilter: any;
 }
 
 interface ReactionStats {
@@ -32,6 +33,7 @@ interface ReactionStats {
   userLiked: boolean;
   userDisliked: boolean;
   userReposted: boolean;
+  userFollow: boolean;
 }
 
 export default function DisplayEventCard(props: DisplayEventCardProps) {
@@ -39,9 +41,11 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
   const publicKey = useGlobalState(state => state.nostrKeys.pub);
   const nostr3 = new Nostr3(privateKey);
   const nostr3List = useGlobalState(state => state.nostr3List);
-  const setEventId = useGlobalState(state => state.setEventId);
+  const setEvent = useGlobalState(state => state.setEvent);
   const [nevent, setNevent] = useState<Event | null>(null);
   const [isNostr3Account, setIsNostr3Account] = useState<boolean>(false);
+  const followerAuthors = useGlobalState(state => state.followerAuthors);
+  const setFollowerAuthors = useGlobalState(state => state.setFollowerAuthors);
 
   function getReactionStats(reactions: Event[]): ReactionStats {
     const stats: ReactionStats = {
@@ -50,18 +54,23 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
       userLiked: false,
       userDisliked: false,
       userReposted: false,
+      userFollow: false,
     };
     for (let i = 0; i < reactions.length; i++) {
       const { content, pubkey, kind } = reactions[i];
-      if (["+", "🤙", "👍", "🤍"].includes(content)) {
+      if (["+", "🤙", "👍", "🤍", "🖤", "💔", "🖖"].includes(content)) {
         stats.nLikes++;
         if (pubkey === props.pk) stats.userLiked = true;
       } else if (["-", "👎"].includes(content)) {
         stats.nDislikes++;
         if (pubkey === props.pk) stats.userDisliked = true;
-      } else if (kind == 6) stats.userReposted = true;
+      } else if (kind == 6) {
+        stats.userReposted = true;
+      }
     }
 
+    stats.userFollow = followerAuthors.includes(String(props.event.pubkey));
+
     return stats;
   }
 
@@ -115,14 +124,31 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
     }
   }, [content]);
 
+  const [evmAddress, setEvmAddress] = useState<string | undefined>(undefined);
+
   useEffect(() => {
     if (!nostr3List) return;
     // check if the props.event.pubkey is contained in nostr3List.pubkey index
     const isNostr3Account = nostr3List.some((item: { pubkey: string }) => item.pubkey === props.event.pubkey);
+    // fetch evmAddress from nostr3List  when item.pubkey === props.event.pubkey
+    const evmAddress = nostr3List.find((item: { pubkey: string }) => item.pubkey === props.event.pubkey)?.evmAddress;
+    setEvmAddress(evmAddress);
     setIsNostr3Account(isNostr3Account);
   }, [nostr3List, props.event.pubkey]);
 
-  let { nLikes, nDislikes, userLiked, userDisliked, userReposted }: ReactionStats = getReactionStats(reactionEvents);
+  const [reactionStats, setReactionStats] = useState({
+    nLikes: 0,
+    nDislikes: 0,
+    userLiked: false,
+    userDisliked: false,
+    userReposted: false,
+    userFollow: false,
+  });
+
+  useEffect(() => {
+    const stats = getReactionStats(reactionEvents);
+    setReactionStats(stats);
+  }, [reactionEvents]);
 
   useEffect(() => {
     const run = async () => {
@@ -130,21 +156,23 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
       setNevent(_nevent as any);
     };
     run();
-  }, [props.event.sig]);
+  }, [props.event]);
 
   // If event is a simple repost
   if (props.event.kind == 6) {
     return (
-      <RepostEventCard
-        relay={props.relay}
-        event={props.event}
-        pk={props.pk}
-        publishEvent={props.publishEvent}
-        getEvents={props.getEvents}
-        getEvent={props.getEvent}
-        showEvent={props.showEvent}
-        isQuotedRepost={false}
-      />
+      <div className="divider-white divide-y-2">
+        <RepostEventCard
+          relay={props.relay}
+          event={props.event}
+          pk={props.pk}
+          publishEvent={props.publishEvent}
+          getEvents={props.getEvents}
+          getEvent={props.getEvent}
+          showEvent={props.showEvent}
+          isQuotedRepost={false}
+        />
+      </div>
     );
   }
 
@@ -166,16 +194,17 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
 
   return (
     <div
-      className={`overflow-hidden shadow border border-base ${
-        isNostr3Account ? "bg-slate-800 border-dashed shadow-success shadow-sm" : "bg-inherit  border-dashed"
+      className={`overflow-hidden shadow  ${
+        isNostr3Account ? "bg-slate-800 border-dashed shadow-success shadow-sm" : "bg-inherit "
       }`}
       hidden={props.showEvent ? true : false}
     >
       {isNostr3Account && (
         <div className="badge-success">
-          <span className="font-semibold mx-2 my-2">Nostr3 Account</span>
+          <span className="font-semibold mx-2 my-2">Nostr3 Account: {evmAddress}</span>
         </div>
       )}
+
       <div
         className="px-4 py-5 sm:px-6 text-lg hover:!text-xl hover:cursor-pointer hover:underline hover:decoration-green-300"
         onClick={() => {
@@ -183,14 +212,16 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
             {
               kinds: [1],
               authors: [props.event.pubkey],
+              limit: 100,
             },
           ];
+
           props.getEvents(filter);
         }}
       >
-        <div className="flex flex-row justify-between">
-          <LazyLoadImage className="inline-block h-8 w-8 rounded-full" src={userData?.picture} alt="Profile" />
-          <span className="font-bold">{userData?.name}</span>
+        <div className="flex flex-row justify-between  p-3">
+          <LazyLoadImage className="inline-block h-16 w-16 rounded-full" src={userData?.picture} alt="Profile" />
+          <span className="font-bold my-auto">{userData?.name}</span>
           <span className="inline-flex items-center gap-x-1.5 rounded-md  px-1.5 py-0.5 text-xs font-medium">
             <svg className="h-1.5 w-1.5" viewBox="0 0 6 6" aria-hidden="true">
               <circle cx="3" cy="3" r="3" />
@@ -239,12 +270,14 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
         <div className="flex flex-row justify-between">
           <div className="flex flex-row justify-start space-x-1">
             <button
-              className={userDisliked ? "hover:bg-success p-2" : "hover:bg-success hover:dark::bg-primary p-2"}
+              className={
+                reactionStats.userDisliked ? "hover:bg-success p-2" : "hover:bg-success hover:dark::bg-primary p-2"
+              }
               onClick={async () => {
                 if (!props.pk) return;
 
-                if (userLiked) userLiked = false;
-                userDisliked = userDisliked ? false : true;
+                if (reactionStats.userLiked) reactionStats.userLiked = false;
+                reactionStats.userDisliked = reactionStats.userDisliked ? false : true;
 
                 props.publishEvent({
                   kind: 7,
@@ -256,23 +289,36 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
                   ],
                   pubkey: props.pk,
                 });
+                await props.handleFollowFilter();
+
                 await fetchReactionEvents();
+
+                setReactionStats(prevStats => ({
+                  ...prevStats,
+                  nDislikes: prevStats.nDislikes + 1,
+                }));
               }}
             >
               <div className="flex flex-row items-center space-x-2">
                 <FcDislike className="h-5 w-5 hover:cursor-pointer" />
-                <span className={userDisliked ? "hover:bg-red p-1" : "hover:bg-red hover:dark::bg-primary p-1"}>
-                  {nDislikes}
+                <span
+                  className={
+                    reactionStats.userDisliked ? "hover:bg-red p-1" : "hover:bg-red hover:dark::bg-primary p-1"
+                  }
+                >
+                  {reactionStats.nDislikes}
                 </span>
               </div>
             </button>
             <button
-              className={userLiked ? "hover:bg-success p-1" : "hover:bg-success hover:dark::bg-primary p-1"}
+              className={
+                reactionStats.userLiked ? "hover:bg-success p-1" : "hover:bg-success hover:dark::bg-primary p-1"
+              }
               onClick={async () => {
                 if (!props.pk) return;
 
-                if (userDisliked) userDisliked = false;
-                userLiked = userLiked ? false : true;
+                if (reactionStats.userDisliked) reactionStats.userDisliked = false;
+                reactionStats.userLiked = reactionStats.userLiked ? false : true;
 
                 props.publishEvent({
                   kind: 7,
@@ -284,21 +330,85 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
                   ],
                   pubkey: props.pk,
                 });
-
-                await fetchReactionEvents();
+                await props.handleFollowFilter();
+                setReactionStats(prevStats => ({
+                  ...prevStats,
+                  nLikes: prevStats.nLikes + 1,
+                }));
               }}
             >
               <div className="flex flex-row items-center space-x-2">
                 <FcLike className="h-5 w-5 hover:cursor-pointer" />
-                <span className={userLiked ? "text-primary dark:text-white" : "text-white"}>{nLikes}</span>
+                <span className={reactionStats.userLiked ? "text-primary dark:text-white" : "text-white"}>
+                  {reactionStats.nLikes}
+                </span>
               </div>
             </button>
+            {reactionStats.userFollow == false ? (
+              <button
+                className={reactionStats.userFollow ? "p-1" : "p-1"}
+                onClick={async () => {
+                  if (!props.pk) return;
+
+                  // If props.event.pubkey is not in followAuthors, add it
+                  if (props.event.pubkey && !followerAuthors.includes(props.event.pubkey)) {
+                    followerAuthors.push(props.event.pubkey);
+                  }
+
+                  const tags = followerAuthors.map((author: any) => ["p", author]);
+
+                  props.publishEvent({
+                    kind: 3,
+                    content: "{}",
+                    created_at: Math.floor(Date.now() / 1000),
+                    tags: tags,
+                    pubkey: props.pk,
+                  });
+
+                  setFollowerAuthors(followerAuthors);
+                  setReactionStats(prevStats => ({
+                    ...prevStats,
+                    userFollow: true,
+                  }));
+                }}
+              >
+                <div className="flex flex-row items-center space-x-2"></div>
+                <button className="btn btn-sm hover:btn-success">FOLLOW</button>
+              </button>
+            ) : (
+              <button
+                className="btn btn-sm hover:btn-danger my-auto"
+                onClick={async () => {
+                  const index = followerAuthors.indexOf(props.event.pubkey);
+                  if (index > -1) {
+                    followerAuthors.splice(index, 1);
+                  }
+
+                  const tags = followerAuthors.map((author: any) => ["p", author]);
+
+                  props.publishEvent({
+                    kind: 3,
+                    content: "{}",
+                    created_at: Math.floor(Date.now() / 1000),
+                    tags: tags,
+                    pubkey: props.pk!,
+                  });
+
+                  setReactionStats(prevStats => ({
+                    ...prevStats,
+                    userFollow: false,
+                  }));
+                }}
+              >
+                UNFOLLOW
+              </button>
+            )}
           </div>
           <div className="flex flex-row justify-start space-x-1">
             <button
               className="hover:bg-success hover:dark::bg-primary p-1"
               onClick={() => {
-                setEventId(props.event.id);
+                setEvent(props.event);
               }}
             >
               <div className="flex flex-row items-center">
@@ -306,7 +416,9 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
               </div>
             </button>
             <button
-              className={userReposted ? "hover:bg-success p-1" : "hover:bg-success hover:dark::bg-primary p-1"}
+              className={
+                reactionStats.userReposted ? "hover:bg-success p-1" : "hover:bg-success hover:dark::bg-primary p-1"
+              }
               onClick={() => {
                 if (!props.pk) return;
 
@@ -320,6 +432,8 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
                     ["p", props.event.pubkey],
                   ],
                 });
+
+                notification.success("Reposted");
               }}
             >
               <div className="flex flex-row items-center">
@@ -341,6 +455,8 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
                     ["p", props.event.pubkey],
                   ],
                 });
+
+                notification.success("Quoted");
               }}
             >
               <div className="flex flex-row items-center">
@@ -351,19 +467,13 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
               <button
                 className="hover:bg-success hover:dark::bg-primary p-1"
                 onClick={async () => {
-                  console.log("tip");
-                  const result = await props.getEvent({
-                    kinds: [30078],
-                    authors: [props.event.pubkey],
-                  });
-
-                  if (props?.ethTipAmount && props?.signer && result && result.content.startsWith("0x")) {
+                  if (props?.ethTipAmount && props?.signer && evmAddress) {
                     await props?.signer?.sendTransaction({
-                      to: String(result?.content),
+                      to: String(evmAddress),
                       value: parseEther(String(props?.ethTipAmount)),
                     });
                   } else {
-                    notification.error("Nostr3 account not found");
+                    notification.error("Nostr3 account not found or tip amount not set");
                   }
                 }}
               >
diff --git a/packages/nextjs/components/client/relayCtrlCard.tsx b/packages/nextjs/components/client/relayCtrlCard.tsx
index f253f35..b2d5f35 100644
--- a/packages/nextjs/components/client/relayCtrlCard.tsx
+++ b/packages/nextjs/components/client/relayCtrlCard.tsx
@@ -18,7 +18,7 @@ export default function RelayCtrlCard(props: RelayCtrlCardProps) {
   }, [selectedRelay]);
 
   return (
-    <div className="divide-y divide-white h-3/6 overflow-hidden rounded-lg shadow border border-dashed border-green-300">
+    <div className="h-4/6 divide-y divide-white overflow-scroll scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary-content  border bg-base-300 rounded-lg">
       <div className="px-4 py-5 sm:px-6 text-lg hover:dark:bg-base-300/25 hover:!text-xl hover:underline hover:decoration-green-300">
         <div className="flex flex-row justify-center">
           <span className="text-lg font-semibold">
diff --git a/packages/nextjs/components/client/repostEventCard.tsx b/packages/nextjs/components/client/repostEventCard.tsx
index 91daaf3..0d7dc73 100644
--- a/packages/nextjs/components/client/repostEventCard.tsx
+++ b/packages/nextjs/components/client/repostEventCard.tsx
@@ -2,12 +2,13 @@ import { useEffect, useState } from "react";
 import { useProfile } from "../../hooks/scaffold-eth";
 import { extractImageLinks } from "../../utils/parsing";
 import RepostedEventCard from "./repostedEventCard";
-import { useNostrEvents } from "nostr-react";
 import { type Event, Filter, Relay, UnsignedEvent } from "nostr-tools";
 import { BsChatRightQuote } from "react-icons/bs";
 import { FaRetweet } from "react-icons/fa";
 import { FcDislike, FcLike } from "react-icons/fc";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 import { useGlobalState } from "~~/services/store/store";
+import { notification } from "~~/utils/scaffold-eth";
 
 interface RepostEventCardProps {
   pk: string | null;
@@ -19,7 +20,6 @@ interface RepostEventCardProps {
   publishEvent: (event: UnsignedEvent, _sk?: string) => void;
   isQuotedRepost: boolean;
 }
-
 interface ReactionStats {
   nLikes: number;
   nDislikes: number;
@@ -39,13 +39,15 @@ export default function RepostEventCard(props: RepostEventCardProps) {
     };
     for (let i = 0; i < reactions.length; i++) {
       const { content, pubkey, kind } = reactions[i];
-      if (["+", "🤙", "👍"].includes(content)) {
+      if (["+", "🤙", "👍", "🤍", "🖤", "💔", "🖖"].includes(content)) {
         stats.nLikes++;
         if (pubkey === props.pk) stats.userLiked = true;
       } else if (["-", "👎"].includes(content)) {
         stats.nDislikes++;
         if (pubkey === props.pk) stats.userDisliked = true;
-      } else if (kind == 6) stats.userReposted = true;
+      } else if (kind == 6) {
+        stats.userReposted = true;
+      }
     }
 
     return stats;
@@ -54,6 +56,14 @@ export default function RepostEventCard(props: RepostEventCardProps) {
   const [isNostr3Account, setIsNostr3Account] = useState<boolean>(false);
   const nostr3List = useGlobalState(state => state.nostr3List);
 
+  const [selectedRelay, setSelectedRelay] = useState<Relay>(props.relay as Relay);
+  const [reactionEvents, setReactionEvents] = useState([]);
+
+  useEffect(() => {
+    if (!props.relay) return;
+    setSelectedRelay(props.relay);
+  }, [props.relay]);
+
   useEffect(() => {
     if (!nostr3List) return;
     // check if the props.event.pubkey is contained in nostr3List.pubkey index
@@ -65,15 +75,20 @@ export default function RepostEventCard(props: RepostEventCardProps) {
   const { txtContent, imgLinks } = extractImageLinks(props.event.content);
 
   const { data: userData } = useProfile({ pubkey: props.event.pubkey, relay: props.relay as Relay });
-  const reactionEvents = useNostrEvents({
-    filter: {
-      "#e": [props.event.id],
-      kinds: [6, 7],
-    },
-  }).events;
 
-  // eslint-disable-next-line prefer-const
-  let { nLikes, nDislikes, userLiked, userDisliked, userReposted }: ReactionStats = getReactionStats(reactionEvents);
+  const [reactionStats, setReactionStats] = useState({
+    nLikes: 0,
+    nDislikes: 0,
+    userLiked: false,
+    userDisliked: false,
+    userReposted: false,
+    userFollow: false,
+  });
+
+  useEffect(() => {
+    const stats = getReactionStats(reactionEvents);
+    setReactionStats(stats as any);
+  }, [reactionEvents]);
 
   useEffect(() => {
     if (props.isQuotedRepost) {
@@ -89,8 +104,22 @@ export default function RepostEventCard(props: RepostEventCardProps) {
     }
   }, [props.isQuotedRepost]);
 
+  const fetchReactionEvents = async () => {
+    const events = await selectedRelay.list([
+      {
+        "#e": [props.event.id],
+        kinds: [6, 7],
+      },
+    ]);
+    setReactionEvents(events as any);
+  };
+
+  useEffect(() => {
+    fetchReactionEvents();
+  }, [selectedRelay, props.event.id]);
+
   return (
-    <div className="overflow-hidden bg-base-100 shadow border border-dashed" hidden={props.showEvent ? true : false}>
+    <div className="overflow-hidden bg-base-100 shadow  " hidden={props.showEvent ? true : false}>
       {isNostr3Account && (
         <div className="badge-success">
           <span className="font-semibold mx-2 my-2">Nostr3 Account</span>
@@ -109,7 +138,7 @@ export default function RepostEventCard(props: RepostEventCardProps) {
         }}
       >
         <div className="flex flex-row justify-between">
-          <img className="inline-block h-8 w-8 rounded-full" src={userData?.picture} alt="" />
+          <LazyLoadImage className="inline-block h-8 w-8 rounded-full" src={userData?.picture} alt="" />
           <span className="font-bold text-gray-800 dark:text-gray-200">{userData?.name}</span>
           <span className="inline-flex items-center gap-x-1.5 rounded-md bg-secondary-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
             <svg className="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
@@ -120,7 +149,7 @@ export default function RepostEventCard(props: RepostEventCardProps) {
         </div>
       </div>
       <div className="px-4 py-5 sm:p-6 w-full">
-        <div className="mt-2 w-full">
+        <div className="mt-2 w-full divider-white divider-y-2">
           <span className="inline-block w-full text-lg text-gray-800 dark:text-gray-200 text-start pl-2 pb-2">
             {props.event.kind == 6 ? (
               <>
@@ -133,7 +162,7 @@ export default function RepostEventCard(props: RepostEventCardProps) {
                 {txtContent}
                 {imgLinks
                   ? imgLinks.map((imgLink, i) => {
-                      return <img src={imgLink} key={i}></img>;
+                      return <LazyLoadImage src={imgLink} key={i}></LazyLoadImage>;
                     })
                   : null}
               </>
@@ -142,7 +171,7 @@ export default function RepostEventCard(props: RepostEventCardProps) {
 
           {relevantEvent && (
             <RepostedEventCard
-              relay={props.relay}
+              relay={selectedRelay}
               pk={props.pk}
               event={relevantEvent}
               getEvents={props.getEvents}
@@ -159,15 +188,13 @@ export default function RepostEventCard(props: RepostEventCardProps) {
           <div className="flex flex-row justify-start space-x-1">
             <button
               className={
-                userDisliked
-                  ? "bg-secondary-300/25 border border-white hover:bg-secondary-300/25"
-                  : "bg-black/25 dark:bg-white/25 border border-white hover:bg-secondary-300/25"
+                reactionStats.userDisliked ? "hover:bg-success p-2" : "hover:bg-success hover:dark::bg-primary p-2"
               }
               onClick={() => {
                 if (!props.pk) return;
 
-                if (userLiked) userLiked = false;
-                userDisliked = userDisliked ? false : true;
+                if (reactionStats.userLiked) reactionStats.userLiked = false;
+                reactionStats.userDisliked = reactionStats.userDisliked ? false : true;
 
                 props.publishEvent({
                   kind: 7,
@@ -179,24 +206,33 @@ export default function RepostEventCard(props: RepostEventCardProps) {
                   ],
                   pubkey: props.pk,
                 });
+
+                setReactionStats(prevStats => ({
+                  ...prevStats,
+                  nDislikes: prevStats.nDislikes + 1,
+                }));
               }}
             >
               <div className="flex flex-row items-center space-x-2">
                 <FcDislike className="h-5 w-5 hover:cursor-pointer" />
-                <span className={userDisliked ? "text-green-700 dark:text-white" : "text-white"}>{nDislikes}</span>
+                <span
+                  className={
+                    reactionStats.userDisliked ? "hover:bg-red p-1" : "hover:bg-red hover:dark::bg-primary p-1"
+                  }
+                >
+                  {reactionStats.nDislikes}
+                </span>
               </div>
             </button>
             <button
               className={
-                userLiked
-                  ? "bg-secondary-300/25 border border-white hover:bg-secondary-300/25"
-                  : "bg-black/25 dark:bg-white/25 border border-white hover:bg-secondary-300/25"
+                reactionStats.userLiked ? "hover:bg-success p-2" : "hover:bg-success hover:dark::bg-primary p-2"
               }
               onClick={() => {
                 if (!props.pk) return;
 
-                if (userDisliked) userDisliked = false;
-                userLiked = userLiked ? false : true;
+                if (reactionStats.userDisliked) reactionStats.userDisliked = false;
+                reactionStats.userLiked = reactionStats.userLiked ? false : true;
 
                 props.publishEvent({
                   kind: 7,
@@ -208,21 +244,28 @@ export default function RepostEventCard(props: RepostEventCardProps) {
                   ],
                   pubkey: props.pk,
                 });
+
+                setReactionStats(prevStats => ({
+                  ...prevStats,
+                  nLikes: prevStats.nLikes + 1,
+                }));
               }}
             >
               <div className="flex flex-row items-center space-x-2">
                 <FcLike className="h-5 w-5 hover:cursor-pointer" />
-                <span className={userLiked ? "text-green-700 dark:text-white" : "text-white"}>{nLikes}</span>
+                <span
+                  className={
+                    reactionStats.userLiked ? "hover:bg-success p-1" : "hover:bg-red hover:dark::bg-primary p-1"
+                  }
+                >
+                  {reactionStats.nLikes}
+                </span>
               </div>
             </button>
           </div>
           <div className="flex flex-row justify-start space-x-1">
             <button
-              className={
-                userReposted
-                  ? "bg-secondary-300/25 border border-white hover:bg-secondary-300/25"
-                  : "bg-black/25 dark:bg-white/25 border border-white hover:bg-secondary-300/25"
-              }
+              className={reactionStats.userReposted ? "hover:bg-red p-1" : "hover:bg-red hover:dark::bg-primary p-1"}
               onClick={() => {
                 if (!props.pk) return;
 
@@ -236,6 +279,13 @@ export default function RepostEventCard(props: RepostEventCardProps) {
                     ["p", props.event.pubkey],
                   ],
                 });
+
+                setReactionStats(prevStats => ({
+                  ...prevStats,
+                  userReposted: true,
+                }));
+
+                notification.success("Reposted");
               }}
             >
               <div className="flex flex-row items-center">
@@ -243,7 +293,7 @@ export default function RepostEventCard(props: RepostEventCardProps) {
               </div>
             </button>
             <button
-              className="bg-black/25 dark:bg-white/25 border border-white hover:bg-secondary-300/25"
+              className="hover:bg-red p-1"
               onClick={() => {
                 if (!props.pk) return;
 
@@ -257,6 +307,8 @@ export default function RepostEventCard(props: RepostEventCardProps) {
                     ["p", props.event.pubkey],
                   ],
                 });
+
+                notification.success("Quoted");
               }}
             >
               <div className="flex flex-row items-center">
diff --git a/packages/nextjs/components/client/repostedEventCard.tsx b/packages/nextjs/components/client/repostedEventCard.tsx
index 1b598fe..0689eae 100644
--- a/packages/nextjs/components/client/repostedEventCard.tsx
+++ b/packages/nextjs/components/client/repostedEventCard.tsx
@@ -31,7 +31,7 @@ export default function RepostedEventCard(props: RepostedEventCardProps) {
 
   return (
     <div
-      className=" overflow-hidden shadow border border-dashed hover:cursor-pointer bg-base-300 hover:dark:bg-base-200 hover:underline hover:dark:decoration-green-300"
+      className=" overflow-hidden shadow hover:cursor-pointer bg-base-300 hover:dark:bg-base-200 hover:underline hover:dark:decoration-green-300"
       hidden={props.showEvent ? true : false}
       onClick={() => {
         // Filter events to the refrenced event
diff --git a/packages/nextjs/components/client/trendingProfiles.tsx b/packages/nextjs/components/client/trendingProfiles.tsx
new file mode 100644
index 0000000..a03323f
--- /dev/null
+++ b/packages/nextjs/components/client/trendingProfiles.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Filter } from "nostr-tools";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+interface TrendingProfilesProps {
+  getEvents: (filters: Filter[]) => void;
+}
+
+const TrendingProfiles = (props: TrendingProfilesProps) => {
+  const [profiles, setProfiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [notes, setNotes] = useState([]);
+
+  useEffect(() => {
+    const fetchTrendingProfiles = async () => {
+      setIsLoading(true);
+      try {
+        // Hypothetical endpoint - replace with the actual endpoint if available
+        const response = await axios.get("https://api.nostr.band/v0/trending/profiles");
+        setProfiles(response.data.profiles);
+        const response2 = await axios.get("https://api.nostr.band/v0/trending/notes");
+        setNotes(response2.data.notes);
+        setError(null);
+      } catch (err: any) {
+        setError(err.message);
+        setProfiles([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchTrendingProfiles();
+  }, []);
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  return (
+    <div className="flex flex-col w-64 p-4 shadow-lg overflow-y-scroll overflow-x-hidden">
+      <h2 className="text-lg font-semibold mb-4">Trending Profiles</h2>
+      <div>
+        {profiles.length > 0 &&
+          profiles.slice(0, 10).map((profile: any) => {
+            const profileData = JSON.parse(profile?.profile?.content);
+            const name = profileData?.name || "Unnamed Profile";
+            const picture = profileData?.picture || "default-picture-url";
+
+            return (
+              <button
+                key={profile?.pubkey}
+                className="flex items-center mb-3"
+                onClick={() => {
+                  props.getEvents([
+                    {
+                      authors: [profile.pubkey],
+                      kinds: [1],
+                      limit: 10,
+                    },
+                  ]);
+                }}
+              >
+                <LazyLoadImage src={picture} alt={name} className="w-10 h-10 rounded-full mr-3" />
+                <h3 className="text-md font-medium">{name}</h3>
+              </button>
+            );
+          })}
+      </div>
+      <h2 className="text-lg font-semibold mb-4">Trending Notes</h2>
+      <div>
+        {notes.length > 0 &&
+          notes.slice(0, 10).map((note: any) => {
+            const name = JSON.parse(note.author.content).name || "Unnamed Profile";
+            const picture = JSON.parse(note.author.content).picture || "default-picture-url";
+            const content = note.event.content;
+            return (
+              <button
+                key={note.pubkey}
+                className="flex items-center mb-3"
+                onClick={() => {
+                  const filter: Filter[] = [
+                    {
+                      ids: [note.id],
+                    },
+                  ];
+                  props.getEvents(filter);
+                }}
+              >
+                <LazyLoadImage src={picture} alt={name} className="w-10 h-10 rounded-full mr-3" />
+                <h3 className="text-md font-medium">{content.slice(0, 50)}</h3>
+              </button>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default TrendingProfiles;
diff --git a/packages/nextjs/declaration.d.ts b/packages/nextjs/declaration.d.ts
index 8975adb..d2d428a 100644
--- a/packages/nextjs/declaration.d.ts
+++ b/packages/nextjs/declaration.d.ts
@@ -1,3 +1,3 @@
 declare module "@scobru/crypto-ipfs";
-declare module "@scobru/nostr3/";
+declare module "@scobru/nostr3/dist/nostr3";
 declare module "@fs-extra";
diff --git a/packages/nextjs/events.json b/packages/nextjs/events.json
index 3a6053b..5420b59 100644
--- a/packages/nextjs/events.json
+++ b/packages/nextjs/events.json
@@ -38,15 +38,10 @@
   {
     "kind": 1,
     "created_at": 1700671691,
-    "tags": [
-      [
-        "t",
-        "bitcoin"
-      ]
-    ],
+    "tags": [["t", "bitcoin"]],
     "content": "hello",
     "pubkey": "cb3bd81921c8b329967d7445debc8711f517ce238bb2b5d725cb472df088ac2b",
     "id": "c2aa06fbec93089ca26cf98fa5da41c7994618fc73863e9441a51790e1202116",
     "sig": "f813e4776ead7e1474f832690b1166acd1eae9b2344efc0225a055b489265da675a13a8a8846fe19692eba6ed575eda16b5ca903b6727f10296a067acac9665a"
   }
-]
\ No newline at end of file
+]
diff --git a/packages/nextjs/hooks/scaffold-eth/useProfile.ts b/packages/nextjs/hooks/scaffold-eth/useProfile.ts
index 851d74e..f50bbb4 100644
--- a/packages/nextjs/hooks/scaffold-eth/useProfile.ts
+++ b/packages/nextjs/hooks/scaffold-eth/useProfile.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { atom, useAtom } from "jotai";
 import { Relay } from "nostr-tools";
-import {nip19} from "nostr-tools";
+import { nip19 } from "nostr-tools";
 
 const uniqValues = (value: string, index: number, self: string[]) => {
   return self.indexOf(value) === index;
@@ -114,13 +114,8 @@ export function useProfile({
   const loadProfile = async (pubkey: string) => {
     try {
       const result = await relay.list([{ kinds: [0], authors: [pubkey] }]);
-      const parsedResult = JSON.parse(result[0].content);
-      if (result && result[0] && result[0].content) {
-        return parsedResult;
-      } else {
-        console.warn("Nessun profilo trovato o dati non validi per la chiave:", pubkey);
-        return null; // Restituisci null se non ci sono dati validi
-      }
+      console.log(result);
+      return JSON.parse(result[0].content);
     } catch (error) {
       console.error("Errore nel caricamento del profilo:", error);
       return null; // Gestisci l'errore restituendo null o un valore di default
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index f56c66d..2b61949 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -18,6 +18,8 @@
     "@ethersproject/providers": "^5.7.2",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.11",
+    "@noble/hashes": "^1.3.2",
+    "@noble/secp256k1": "^2.0.0",
     "@rainbow-me/rainbowkit": "1.1.2",
     "@scobru/crypto-ipfs": "^1.1.11",
     "@scobru/mogu": "^1.2.7",
@@ -36,6 +38,7 @@
     "js-sha3": "^0.9.2",
     "next": "^13.1.6",
     "nextjs-progressbar": "^0.0.16",
+    "noble": "^1.9.1",
     "nostr-hooks": "^1.8.1",
     "nostr-react": "^0.7.0",
     "nostr-tools": "^1.10.1",
@@ -49,7 +52,9 @@
     "react-icons": "^4.8.0",
     "react-lazy-load-image-component": "^1.6.0",
     "react-toggle-dark-mode": "^1.1.1",
+    "secp256k1": "^5.0.0",
     "spinners-react": "^1.0.7",
+    "tailwind-scrollbar": "^3.0.5",
     "url": "^0.11.3",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.7.2",
diff --git a/packages/nextjs/pages/api/cids.json b/packages/nextjs/pages/api/cids.json
index 2a57567..d461a34 100644
--- a/packages/nextjs/pages/api/cids.json
+++ b/packages/nextjs/pages/api/cids.json
@@ -1 +1 @@
-"QmTd97vti34tYJ7VoLtmkijmaPxsBWPEgUeqgEADB4KZ3c"
\ No newline at end of file
+"QmefWPXfGhHrrcz4zz7S2w5aawPSSsXmpsdB7bXEUUJ9pV"
\ No newline at end of file
diff --git a/packages/nextjs/pages/client.tsx b/packages/nextjs/pages/client.tsx
index 1c895c8..303d67c 100644
--- a/packages/nextjs/pages/client.tsx
+++ b/packages/nextjs/pages/client.tsx
@@ -5,12 +5,14 @@ import CreatedAccModal from "../components/client/createdAccModal";
 import DisplayEventCard from "../components/client/displayEventCard";
 import EventLoader from "../components/client/eventLoader";
 import RelayCtrlCard from "../components/client/relayCtrlCard";
+import TrendingProfiles from "../components/client/trendingProfiles";
 import { RELAYS } from "../utils/constants";
 import { NextPage } from "next";
-import { Event, Filter, Relay, UnsignedEvent, getEventHash, getPublicKey, relayInit, signEvent } from "nostr-tools";
+import { Event, Filter, Relay, UnsignedEvent, getEventHash, getPublicKey, nip19, relayInit, signEvent } from "nostr-tools";
 import { useWalletClient } from "wagmi";
 import { useGlobalState } from "~~/services/store/store";
 
+
 type QuotedEvent = Event & {
   quotedEvent: Event;
 };
@@ -20,13 +22,40 @@ const Client: NextPage = () => {
   const [showEventsLoader, setShowEventsLoader] = useState<boolean>(true);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [events, setEvents] = useState<Event[] | QuotedEvent[]>([]);
-  const [curRelayName, setCurRelayName] = useState<string>("wss://relay.primal.net");
+  const [curRelayName, setCurRelayName] = useState<string>("wss://relay.damus.io");
   const [relay, setRelay] = useState<Relay | null>(null);
   const [sk, setSk] = useState<string | null>(null);
   const [pk, setPk] = useState<string | null>(sk ? getPublicKey(sk) : null);
   const privateKey = useGlobalState(state => state.nostrKeys.sec);
+
   const { data: signer } = useWalletClient();
   const [ethTipAmount, setEthTipAmount] = useState<string>("");
+  const [eventData, setEventData] = useState([]);
+  const setFollowerAuthors = useGlobalState(state => state.setFollowerAuthors);
+
+  const fetchEvents = async () => {
+    const newEventData = await Promise.all(
+      events.map(async event => {
+        const result = await relay?.list([{ kinds: [0], authors: [event.pubkey] }]);
+        if (
+          result &&
+          result[0] &&
+          result[0]?.content &&
+          JSON.parse(result[0].content).name != "" &&
+          JSON.parse(result[0].content).picture != ""
+        ) {
+          return event;
+        }
+        return event;
+      }),
+    );
+
+    setEventData(newEventData.filter(Boolean) as any); // filter out undefined values
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, [events]);
 
   useEffect(() => {
     const connectRelay = async () => {
@@ -37,7 +66,10 @@ const Client: NextPage = () => {
       relay.on("connect", async () => {
         setRelay(relay);
         const events: Event[] = await relay.list([{ kinds: [1], limit: 100 }]);
-        setEvents(events);
+
+        if (events) setEvents(events);
+
+        await fetchEvents();
 
         setTimeout(() => {
           setShowEventsLoader(false);
@@ -73,7 +105,6 @@ const Client: NextPage = () => {
 
   const getEvents = async (filters: Filter[]) => {
     const events = await relay?.list(filters);
-    console.log(events);
     if (events) setEvents(events);
   };
 
@@ -82,8 +113,37 @@ const Client: NextPage = () => {
     return e;
   };
 
+  function handleFollowFilter() {
+    // let followedAuthors: Set<string> = new Set();
+    let _followedAuthors: string[];
+
+    if (relay) {
+      const sub = relay.sub([
+        {
+          authors: [pk ? pk : ""],
+          kinds: [3],
+          limit: 10,
+        },
+      ]);
+      sub.on("event", async (event: Event) => {
+        _followedAuthors = event.tags.map((pair: string[]) => pair[1]);
+        await getEvents([
+          {
+            authors: _followedAuthors,
+            kinds: [1],
+            limit: 10,
+          },
+        ]);
+        setFollowerAuthors(_followedAuthors);
+      });
+    }
+  }
+
+  const [tagToFind, setTagToFind] = useState("");
+  const [searchType, setSearchType] = useState("");
+
   return (
-    <div className="w-screen h-screen mb-5">
+    <div className="flex items-center w-screen h-screen ">
       <div className="flex flex-col w-screen">
         <div className="flex flex-row w-screen h-10">
           <div className="flex w-full flex-col items-center justify-center">
@@ -94,21 +154,21 @@ const Client: NextPage = () => {
               }}
             ></div>
           </div>
-          {/* <div className="flex w-1/6 flex-col items-end mr-10">
-            <ThemeSwitcher />
-          </div> */}
         </div>
         <div className="flex flex-row h-screen">
           <div className="flex flex-col w-2/6 h-screen p-5 space-y-4">
             {relay && sk && pk ? (
-              <CreatePostCard
-                setEthTipAmount={setEthTipAmount}
-                relay={relay}
-                posterPK={pk}
-                posterSK={sk}
-                publishEvent={publishEvent}
-                getEvents={getEvents}
-              />
+              <div>
+                <CreatePostCard
+                  setEthTipAmount={setEthTipAmount}
+                  relay={relay}
+                  posterPK={pk}
+                  posterSK={sk}
+                  publishEvent={publishEvent}
+                  getEvents={getEvents}
+                  handleFollowFilter={handleFollowFilter}
+                />
+              </div>
             ) : relay && !sk ? (
               <AuthCard
                 privateKey={privateKey}
@@ -122,40 +182,153 @@ const Client: NextPage = () => {
 
             <RelayCtrlCard relays={RELAYS} curRelayName={curRelayName} setRelay={setCurRelayName} />
           </div>
+
           <div
-            className="flex flex-col w-4/6 p-5 max-h-full overflow-scroll space-y-4"
+            className="flex flex-col w-4/6 p-5 max-h-full overflow-y-scroll space-y-4"
             onScroll={() => {
               // TODO: Implement fetching new/older events while scrolling ("infinite" content scroll)
             }}
           >
+            <nav className={`flex flex-row gap-2 ${showEventsLoader ? "hidden" : "flex"}`}>
+              <button
+                className="px-4 py-2 sm:px-6 btn-ghost text-white rounded-md hover:secondary"
+                onClick={handleFollowFilter}
+              >
+                Following
+              </button>
+              <button
+                className="px-4 py-2 sm:px-6 btn-ghost text-white rounded-md hover:bg-secondary"
+                onClick={async () => {
+                  getEvents([{ kinds: [1], limit: 100 }]);
+                }}
+              >
+                General
+              </button>
+
+              <button
+                className="px-4 py-2 sm:px-6 btn-ghost text-white rounded-md hover:secondary"
+                onClick={async () => {
+                  const events = await relay?.list([{ kinds: [4] }]);
+                  const filteredEvents = events?.filter(event => {
+                    if (event.tags && event.tags[0][0] == "p" && event.tags[0][1] == pk) {
+                      return event;
+                    }
+                  });
+                  setEvents(filteredEvents as any);
+                }}
+              >
+                Messages
+              </button>
+              <select
+                name="searchType"
+                id="searchType"
+                onChange={e => {
+                  setSearchType(e.target.value);
+                }}
+              >
+                <option value="hashtag">HashTag</option>
+                <option value="pubkey">Public Key</option>
+                <option value="event">Event</option>
+              </select>
+              <input
+                className="input input-sm my-auto"
+                placeholder="HashTag"
+                type="text"
+                onChange={async e => {
+                  setTagToFind(e.target.value);
+                }}
+              />
+              <button
+                className="my-auto btn btn-sm btn-ghost"
+                onClick={async () => {
+                  if (searchType == "hashtag") {
+                    const _events = await relay?.list([{ kinds: [1] }]);
+                    const filterEvents = _events?.filter((event: any) => {
+                      return event.tags.some((tag: any) => tag.length === 2 && tag[0] === "t" && tag[1] === tagToFind);
+                    });
+                    setEvents(filterEvents as Event[]);
+                  } else if (searchType == "pubkey") {
+                    if (tagToFind.startsWith("npub")) {
+                      const newTagToFind = nip19.decode(tagToFind);
+                      const _events = await relay?.list([{ kinds: [1], authors: [String(newTagToFind)] }]);
+                      setEvents(_events as Event[]);
+                    } else {
+                      const _events = await relay?.list([{ kinds: [1], authors: [tagToFind] }]);
+                      setEvents(_events as Event[]);
+                    }
+                  } else if (searchType == "event") {
+                    const _events = await relay?.list([{ kinds: [1] }]);
+                    if (tagToFind.startsWith("nevent")) {
+                      const newTagToFind = nip19.decode(tagToFind);
+                      const filterEvents = _events?.filter((event: any) => {
+                        return event.id == newTagToFind.data;
+                      });
+                      setEvents(filterEvents as Event[]);
+                    } else {
+                      const filterEvents = _events?.filter((event: any) => {
+                        return event.id == tagToFind;
+                      });
+                      setEvents(filterEvents as Event[]);
+                    }
+                  }
+                }}
+              >
+                search
+              </button>
+            </nav>
             {showEventsLoader && <EventLoader />}
 
-            {events && (
-              <div className="flex flex-col space-y-4">
-                {events.map(event => {
-                  return (
-                    <DisplayEventCard
-                      ethTipAmount={ethTipAmount}
-                      signer={signer}
-                      relay={relay}
-                      pk={pk ? pk : null}
-                      event={event}
-                      getEvents={getEvents}
-                      getEvent={getQuotedEvent}
-                      key={event.id}
-                      showEvent={showEventsLoader}
-                      publishEvent={publishEvent}
-                    />
-                  );
-                })}
+            {eventData && (
+              <div className="flex flex-col space-y-4 divider-white divide-y-2 ">
+                {eventData.map((event: Event) => (
+                  <DisplayEventCard
+                    ethTipAmount={ethTipAmount}
+                    signer={signer}
+                    relay={relay}
+                    pk={pk ? pk : null}
+                    event={event}
+                    getEvents={getEvents}
+                    getEvent={getQuotedEvent}
+                    key={event.id}
+                    showEvent={showEventsLoader}
+                    publishEvent={publishEvent}
+                    handleFollowFilter={handleFollowFilter}
+                  />
+                ))}
               </div>
             )}
           </div>
           {sk && pk && showKeysModal ? <CreatedAccModal sk={sk} pk={pk} setShowKeysModal={setShowKeysModal} /> : <></>}
+          <div className="parent-container">
+            <div className="absolute-bottom-right">
+              <button
+                className="btn btn-circle btn-outline opacity-60"
+                onClick={async () => {
+                  getEvents([{ kinds: [1], limit: 100 }]);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <TrendingProfiles getEvents={getEvents} />
         </div>
       </div>
     </div>
   );
 };
 
-export default Client;
+export default Client;
\ No newline at end of file
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 1d61964..f947ee2 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -11,7 +11,7 @@ const Home: NextPage = () => {
           <div className="m-5  mx-auto w-5/6">
             <h1 className="text-8xl mb-10 font-semibold shadow-inner">NOSTR3</h1>
             <h1 className="text-xl mb-5">generate programmatically key for nostr protocol with your web3 address</h1>
-            <p className="text-base justify-start">
+            <p className="text-xl justify-start">
               {" "}
               <strong> Nostr3 </strong>
               is here to make your life easier when dealing with the Nostr protocol! It cleverly generates private keys
@@ -21,37 +21,17 @@ const Home: NextPage = () => {
               full-fledged Nostr protocol client, it&apos;s a super handy tool that covers the basics. But hey, for the
               best Nostr experience, we suggest pairing it with open-source clients. Happy Nostring!
             </p>
-
-            <div className="my-2 break-all text-2xl bg-base-100 p-5">
-              <div className="font-mono">
-                <p>
-                  NOSTR3 CUSTOM EVENT
-                  <br />
-                  <p className="break-all">
-                    This is the event emitted by nostr3 when you link your evm account
-                    <br />
-                    with your nostr pubkey.
-                  </p>
-                </p>
-                {"const messageEvent: any = {"}
-                <p className="ml-5">
-                  kind: 30078 <br />
-                  created_at: Date.now(),
-                  <br />
-                  {'  tags: [["d", "nostr3"]],'}
-                  <br />
-                  {"  content: evmAddress,"}
-                  <br />
-                  {"  pubkey: pubkey,"}
-                  <br />
-                </p>
-
-                {"};"}
-              </div>
-            </div>
             <div className="bg-success text-success-content rounded-md mb-4 p-10">
-              <h2 className="text-2xl mb-5">🎉 Exciting Updates</h2>
+              <h2 className="text-2xl mb-5">🎉Updates</h2>
               <ul className="list-disc">
+                <li className="text-lg font-medium">
+                  <span className="font-bold">NIP-111</span>: Implementation of NIP-111, which allows for the
+                  association of an EVM address with a Nostr3 public key. This allows for the easy transfer of tips
+                  between EVM and Nostr3 accounts.
+                </li>
+                <li className="text-lg font-medium">
+                  <span className="font-bold">Implemented NIPS</span>: NIP-02,NIP-04,NIP-07,NIP-10,NIP-18,NIP-25
+                </li>
                 <li className="text-lg font-medium">
                   <span className="font-bold">Encryption/Decryption Made Easy</span>: Send notes in plain text or
                   encrypted using a recipient&aposs publicKey (or your own). Decryption is simple with the
@@ -76,6 +56,33 @@ const Home: NextPage = () => {
                 </li>
               </ul>
             </div>
+            <div className="my-2 break-all text-lg bg-base-100 p-5">
+              <div className="font-mono">
+                <p>
+                  NOSTR3 CUSTOM EVENT
+                  <br />
+                  <p className="break-all">
+                    This is the event emitted by nostr3 when you link your evm account
+                    <br />
+                    with your nostr pubkey.
+                  </p>
+                </p>
+                {"const messageEvent: any = {"}
+                <p className="ml-5">
+                  kind: 30078 <br />
+                  created_at: Date.now(),
+                  <br />
+                  {'  tags: [["d", "nostr3"]],'}
+                  <br />
+                  {"  content: evmAddress,"}
+                  <br />
+                  {"  pubkey: pubkey,"}
+                  <br />
+                </p>
+
+                {"};"}
+              </div>
+            </div>
           </div>
         ) : (
           <div className="font-black m-5">Connect your wallet</div>
diff --git a/packages/nextjs/pages/login.tsx b/packages/nextjs/pages/login.tsx
index b47d26c..14c5d57 100644
--- a/packages/nextjs/pages/login.tsx
+++ b/packages/nextjs/pages/login.tsx
@@ -1,21 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import MecenateHelper from "@scobru/crypto-ipfs";
+import { hkdf } from "@noble/hashes/hkdf";
+import { sha256 } from "@noble/hashes/sha256";
+import * as secp256k1 from "@noble/secp256k1";
 import { Nostr3 } from "@scobru/nostr3/dist/nostr3";
+import sha3 from "js-sha3";
 import type { NextPage } from "next";
-import { finishEvent, getPublicKey, relayInit } from "nostr-tools";
+import { finishEvent, generatePrivateKey, getPublicKey, relayInit } from "nostr-tools";
 import { nip19 } from "nostr-tools";
+import { nip05 } from "nostr-tools";
+import { ProfilePointer } from "nostr-tools/lib/types/nip19";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import "react-lazy-load-image-component/src/effects/blur.css";
-import { createWalletClient, http, parseEther, toBytes } from "viem";
+import { createWalletClient, http, isAddress, parseEther } from "viem";
 import { toHex } from "viem";
-import { keccak256 } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 import { optimism } from "viem/chains";
-import { useWalletClient } from "wagmi";
+import { useEnsName, useWalletClient } from "wagmi";
+import { AddressInput } from "~~/components/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { notification } from "~~/utils/scaffold-eth";
 
+//import MecenateHelper from "@scobru/crypto-ipfs";
+//import { keccak256 ,toBytes} from "viem";
+
 declare global {
   interface Window {
     nostr: {
@@ -32,7 +41,7 @@ const Login: NextPage = () => {
   const [publicKey, setPublicKey] = useState("");
   const [nostrPublicKey, setNostrPublicKey] = useState("");
   const [event, setEvent] = useState<any>(null);
-  const [relayURL, setRelayURL] = useState("wss://relay.primal.net"); // Replace with a real relay URL
+  const [relayURL, setRelayURL] = useState("wss://relay.damus.io"); // Replace with a real relay URL
   const [relay, setRelay] = useState<any>(null);
   const [showKeys, setShowKeys] = useState(false);
   const [wallet, setWallet] = useState<any>(null);
@@ -72,7 +81,6 @@ const Login: NextPage = () => {
   const [pubKeyEthAddressList, setPubKeyEthAddressList] = useState<any[]>([]);
   const [isExtension, setIsExtension] = useState(false);
   const [evmAddress, setEvmAddress] = useState("");
-  const setNostr3List = useGlobalState(state => state.setNostr3List);
 
   const openTipModal = () => {
     const tip_modal = document.getElementById("tip_modal") as HTMLDialogElement;
@@ -81,9 +89,87 @@ const Login: NextPage = () => {
     }
   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // load Profile //////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
+  function getAddress() {
+    if (signer) {
+      return signer?.account?.address;
+    }
+  }
+  const address = getAddress();
+
+  const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 });
+
+  //::Profile
+
+  const ProfileDetailsBox = () => {
+    return (
+      <div className="profile-details-box bg-base rounded-ms p-5 my-10 flex flex-col items-center text-center w-3/8">
+        {profileDetails && profileDetails.display_name && (
+          <div>
+            {profileDetails.picture && (
+              <LazyLoadImage src={profileDetails.picture} className="rounded-full w-24 mx-auto" alt="Profile" />
+            )}
+            <h3 className="font-bold text-lg mb-4">{profileDetails.display_name}</h3>
+            <p className="text-md">{profileDetails.about}</p>
+          </div>
+        )}
+        <button className="btn text-left mb-5" onClick={() => setShowKeys(!showKeys)}>
+          {showKeys ? "Hide Keys" : "Show Keys"}
+        </button>
+        {showKeys && (
+          <div className="w-fit bg-base-100 text-base-content rounded-lg p-5 text-left break-all mt-4">
+            <ul className="space-y-2">
+              {publicKey && (
+                <li className="font-bold border-b border-primary-content p-2">
+                  Public Key: <span className="font-normal">{publicKey}</span>
+                </li>
+              )}
+              {privateKey && (
+                <li className="font-bold border-b border-primary-content p-2">
+                  Private Key: <span className="font-normal">{privateKey}</span>
+                </li>
+              )}
+              {nostrPublicKey && (
+                <li className="font-bold border-b border-primary-content p-2">
+                  NIP19 Public Key: <span className="font-normal">{nostrPublicKey}</span>
+                </li>
+              )}
+              {nostrPrivateKey && (
+                <li className="font-bold border-b border-primary-content p-2">
+                  NIP19 Private Key: <span className="font-normal">{nostrPrivateKey}</span>
+                </li>
+              )}
+              {nProfile && (
+                <li className="font-bold p-2">
+                  NIP19 Nostr Profile: <span className="font-normal">{nProfile}</span>
+                </li>
+              )}
+              {wallet && (
+                <li className="font-bold p-2">
+                  EVM Address: <span className="font-normal">{wallet?.account?.address}</span>
+                </li>
+              )}
+            </ul>
+          </div>
+        )}
+        <span className="block my-4 text-xl">
+          {" "}
+          Link an EVM address to your Nostr account. You can change it any time.
+        </span>
+        {/* <input
+          type="text"
+          className="input input-primary my-5"
+          id="EvmAddress"
+          placeholder="Set Evm address"
+          value={evmAddress}
+          onChange={e => setEvmAddress(e.target.value)}
+        /> */}
+        <AddressInput onChange={e => setEvmAddress(e)} value={evmAddress} />
+        <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6 mt-5" onClick={handleSignIn}>
+          REGISTER
+        </label>
+      </div>
+    );
+  };
 
   const loadProfile = async (loadedPubKey: any) => {
     try {
@@ -116,9 +202,7 @@ const Login: NextPage = () => {
   //     }
   //   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Tipping ///////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
+  //::Tip
 
   const handleTip = async (receiver: any) => {
     await signer?.sendTransaction({
@@ -132,69 +216,9 @@ const Login: NextPage = () => {
     }
   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Search ////////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
-
-  // IPFS
-  // const handleSearchFromEVMIPFS = async accountEvm => {
-  //   const url = `/api/store?evmAddress=${accountEvm}`;
-  //   // Esegui la richiesta fetch
-  //   const verifiedResult = await fetch(url, {
-  //     method: "GET",
-  //     headers: {
-  //       "Content-Type": "application/json",
-  //     },
-  //   });
-
-  //   console.log("verifiedResult: ", verifiedResult);
-
-  //   // Converti la risposta in JSON
-  //   const resultJson = await verifiedResult.json();
-  //   const parsedResult = JSON.parse(resultJson.data);
-  //   const result = JSON.parse(JSON.stringify(parsedResult[0].content));
-  //   const profile = await loadEvmProfile(JSON.parse(result).pubKey);
-  //   setSearchPublicKey({ pubkey: JSON.parse(result).pubKey, profile: JSON.stringify(profile) });
-  //   return JSON.parse(result).pubKey;
-  // };
-
-  // const handleSearchFromPubkeyIPFS = async (pubkey: any) => {
-  //   try {
-  //     const url = `/api/get?pubkey=${pubkey}`;
-
-  //     // Esegui la richiesta fetch
-  //     const verifiedResult = await fetch(url, {
-  //       method: "GET",
-  //       headers: {
-  //         "Content-Type": "application/json",
-  //       },
-  //     });
-
-  //     // Verifica se la richiesta ha avuto successo
-  //     if (!verifiedResult.ok) {
-  //       throw new Error(`HTTP error! Status: ${verifiedResult.status}`);
-  //     }
+  //::Search
 
-  //     // Converti la risposta in JSON
-  //     const resultJson = await verifiedResult.json();
-
-  //     // Assicurati che i dati siano presenti nella risposta
-  //     if (!resultJson.data) {
-  //       throw new Error("No data found in the response");
-  //     }
-
-  //     const parsedResult = JSON.parse(resultJson.data);
-  //     const result = JSON.parse(JSON.stringify(parsedResult[0].name));
-  //     return result;
-  //   } catch (error) {
-  //     notification.error("Profile not registered");
-  //     console.error("Errore durante la ricerca della chiave pubblica:", error);
-  //     // Gestisci l'errore come preferisci, ad esempio mostrando un messaggio all'utente
-  //     // Potresti anche impostare uno stato per mostrare un messaggio di errore nell'interfaccia utente
-  //   }
-  // };
-
-  /* const handleGetList = async () => {
+  const handleGetList = async () => {
     try {
       const url = `/api/getAll`;
 
@@ -207,38 +231,41 @@ const Login: NextPage = () => {
 
       if (!verifiedResult.ok) {
         throw new Error(`HTTP error! Status: ${verifiedResult.status}`);
-      } else if (verifiedResult.status == 200) {
-        const resultJson = await verifiedResult.json();
-
-        if (!resultJson.data) {
-          throw new Error("No data found in the response");
-        }
+      }
 
-        // Logging for debugging purposes, consider removing in production
-        console.log("Parsed Result: ", resultJson.data);
+      const resultJson = await verifiedResult.json();
 
-        // create a json with id resultData.id and content JSON.parse(resultData.contet).pubkey
+      if (!resultJson.data) {
+        throw new Error("No data found in the response");
+      }
 
-        const result = await resultJson.data.map(async (resultData: any) => {
-          if (resultData.content.slice(0, 2) !== "") return null;
+      const resultPromises = resultJson.data.map(async (resultData: { content: string; id: any }) => {
+        try {
+          const content = JSON.parse(resultData.content);
           return {
             evmAddress: resultData.id,
-            pubkey: JSON.parse(resultData.content).pubKey,
-            npub: await nip19.npubEncode(JSON.parse(resultData.content)),
+            pubkey: content.pubKey,
+            npub: nip19 ? nip19.npubEncode(content.pubKey) : undefined,
           };
-        });
-        console.log(result);
-        setPubKeyEthAddressList(result);
+        } catch (error) {
+          console.error("Error processing resultData: ", error);
+          return null;
+        }
+      });
 
-        return result;
-      }
+      const result = (await Promise.all(resultPromises)).filter(item => item !== null);
+
+      setPubKeyEthAddressList(result);
+
+      //setNostr3List(result);
+      useGlobalState.setState({ nostr3List: result });
     } catch (error) {
       console.error("Error fetching public key:", error);
       // Ensure notification is a valid function/object in your context
-      notification.error(error);
+      notification.error("Error fetching public key");
       return null; // or appropriate fallback value
     }
-  }; */
+  };
 
   const handleSearchFromEVMtoRelay = async (pubKey: string) => {
     await handleConnectRelay();
@@ -247,6 +274,7 @@ const Login: NextPage = () => {
     setEvmAddressReceiver(events[0].content);
     return events[0].content;
   };
+
   interface Event {
     content: string;
     pubkey: string;
@@ -254,7 +282,8 @@ const Login: NextPage = () => {
   }
 
   const handleListAllPubkeyAndEthAddress = async () => {
-    const _events = await relay.list([{ kinds: [30078] }]);
+    const _events = await relay.list([{ kinds: [30078], tags: [["d", "nostr3"]] }]);
+    console.log("Events", _events);
     // sort event by date recent
     const _eventsSort = _events.sort(
       (a: { created_at: number }, b: { created_at: number }) => b.created_at - a.created_at,
@@ -271,48 +300,57 @@ const Login: NextPage = () => {
       // set global state
     });
 
-    setNostr3List(eventResult);
+    useGlobalState.setState({ nostr3List: eventResult });
     setPubKeyEthAddressList(eventResult);
     return eventResult;
   };
 
-  //   const handleSearchFromPubkey = async (pubKey: string) => {
-  //     const pkHex_a = "0x02" + pubKey;
-  //     const pkHex_b = "0x03" + pubKey;
+  function getPublicKeyFromSecret(
+    secretKey: WithImplicitCoercion<string> | { [Symbol.toPrimitive](hint: "string"): string },
+  ) {
+    const pk = secp256k1.getPublicKey(Buffer.from(secretKey, "hex"), false).slice(1);
+    return pk;
+  }
 
-  //     const addr_a = ethers.computeAddress(pkHex_a);
-  //     const addr_b = ethers.computeAddress(pkHex_b);
+  function doesNostrKeyCorrespondToEthereumAddress(
+    nostrPubKeyArray: WithImplicitCoercion<ArrayBuffer | SharedArrayBuffer>,
+    ethAddress: string,
+  ) {
+    // Convert decimal array to Buffer
+    const nostrPubKey = Buffer.from(nostrPubKeyArray);
 
-  //     console.log(addr_a);
-  //     console.log(addr_b);
+    ethAddress = ethAddress.toLowerCase().replace("0x", "");
 
-  //     let pub_a;
-  //     let pub_b;
+    for (const prefix of ["0x02", "0x03"]) {
+      const pkBytes = Buffer.concat([Buffer.from(prefix, "hex"), nostrPubKey]);
+      if (pkBytes.length !== 33) continue; // Ensure correct length for publicKeyConvert
 
-  //     try {
-  //       pub_a = await handleSearchFromPubkeytoRelay(addr_a);
-  //       console.log(String(pub_a));
-  //       if (String(pub_a) == pubKey) {
-  //         console.log(addr_a);
-  //         setEvmAddressReceiver(addr_a);
-  //         return addr_a;
-  //       }
-  //     } catch (error) {
-  //       console.log(error);
-  //     }
+      try {
+        const uncompressed = secp256k1.getPublicKey(pkBytes, false);
+        const hash = sha3.keccak256.array(uncompressed.slice(1));
+        const resH = Buffer.from(hash).toString("hex");
 
-  //     try {
-  //       pub_b = await handleSearchFromPubkeytoRelay(addr_b);
-  //       console.log(pub_b);
-  //       if (String(pub_b) == pubKey) {
-  //         console.log(addr_b);
-  //         setEvmAddressReceiver(addr_b);
-  //         return addr_b;
-  //       }
-  //     } catch (error) {
-  //       console.log(error);
-  //     }
-  //   };
+        if (resH.slice(24) === ethAddress) {
+          return true;
+        }
+      } catch (err) {
+        // Handle or log the error as needed
+        continue;
+      }
+    }
+    return false;
+  }
+
+  const handleSearchFromPubkey = async (pubKey: string) => {
+    const wallet = createWalletClient({
+      account: privateKeyToAccount(("0x" + privateKey) as any),
+      chain: optimism,
+      transport: http(),
+    });
+    const evmAddress = await wallet?.account?.address;
+    setWallet(wallet);
+    setEvmAddress(evmAddress);
+  };
 
   const handleRegisterEVM = async (keys: { pub: any; sec: string }) => {
     const messageEvent: any = {
@@ -352,9 +390,56 @@ const Login: NextPage = () => {
     setEvent({ created: signedEvent, all: events });
   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Events ////////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
+  //::Handlers
+
+  const handleChangeMetadata = async () => {
+    const data = {
+      name: metadata.name,
+      display_name: metadata.display_name,
+      website: metadata.website,
+      about: metadata.about,
+      picture: metadata.picture,
+      image: metadata.image,
+      banner: metadata.banner,
+      nip05: metadata.nip05,
+      lud06: metadata.lud06,
+      lud16: metadata.lud16,
+      mastodonUrl: metadata.mastodonUrl,
+    };
+    const newEvent = {
+      kind: 0,
+      created_at: Math.floor(Date.now() / 1000),
+      tags: [],
+      content: JSON.stringify(data),
+      pubkey: publicKey,
+    };
+
+    // Sign and finalize the event
+    const signedEvent = finishEvent(newEvent, privateKey);
+    console.log(signedEvent);
+    // Publish the signed event
+    await relay.publish(signedEvent);
+    // Retrieve events from the relay
+    const events = await relay.list([{ kinds: [1] }]);
+    // Set state with the latest event and all retrieved events
+    setEvent({ created: signedEvent, all: events });
+
+    //relay.close();
+  };
+
+  const handleConnectWithKeyPair = async () => {
+    //const _pubKey = await window.nostr.getPublicKey();
+    setIsExtension(true);
+    handleSearchFromPubkey(publicKey);
+    setNostrPublicKey(nip19.npubEncode(publicKey));
+    setNProfile(nip19.nprofileEncode({ pubkey: publicKey }));
+
+    useGlobalState.setState({ nostrKeys: "" });
+
+    setNostrPrivateKey("");
+    setEvmAddress("");
+    setWallet("");
+  };
 
   const handleConnectExtension = async () => {
     const _pubKey = await window.nostr.getPublicKey();
@@ -372,10 +457,10 @@ const Login: NextPage = () => {
   const reload = async () => {
     const id = notification.loading("Reload");
     await handleFetchEvents();
-    await handleListAllPubkeyAndEthAddress();
+    //await handleListAllPubkeyAndEthAddress();
     notification.remove(id);
     notification.success("Fetch Complete");
-    //await handleGetList();
+    await handleGetList();
   };
 
   const handleFetchEvents = async () => {
@@ -385,24 +470,21 @@ const Login: NextPage = () => {
       (a: { created_at: number }, b: { created_at: number }) => b.created_at - a.created_at,
     );
 
-    /* if (!tagToFind) {
-      setEvent({ all: _eventsSort });
-      const _loadedProfiles = await Promise.all(_eventsSort.map((e: { pubkey: any }) => loadProfile(e.pubkey)));
-      setProfiles(_loadedProfiles);
-      //setIsModalOpen(true);
-      return;
-    }
-    // filter events when hashtag is "bitcoin"
-    const filterEvents = _eventsSort.filter((event: any) => {
-      return event.tags.some((tag: any) => tag.length === 2 && tag[0] === "t" && tag[1] === tagToFind);
-    }); */
+    console.log(_events);
 
     setEvent(_eventsSort);
   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Use Effect ////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
+  //::UseEffect
+
+  useEffect(() => {
+    const run = async () => {
+      if (fetchedEns) {
+        setUsername(fetchedEns);
+      }
+    };
+    run();
+  }, [signer]);
 
   useEffect(() => {
     if (connected && pastEvents.length === 0) {
@@ -410,7 +492,8 @@ const Login: NextPage = () => {
         try {
           const profileData = await loadProfile(publicKey);
           setProfileDetails(profileData);
-          await handleListAllPubkeyAndEthAddress();
+          //await handleListAllPubkeyAndEthAddress();
+          await handleGetList();
         } catch (error) {
           notification.error("Error loading profile");
         }
@@ -419,6 +502,26 @@ const Login: NextPage = () => {
     }
   }, [connected, nostrKeys]);
 
+  useEffect(() => {
+    const globalNostrKeys = useGlobalState.getState().nostrKeys;
+    if (globalNostrKeys && globalNostrKeys.sec) {
+      setPrivateKey(globalNostrKeys.sec);
+      setNostrPrivateKey(globalNostrKeys.nsec);
+      setPublicKey(getPublicKey(globalNostrKeys.sec));
+      setNostrPublicKey(globalNostrKeys.npub);
+      setNProfile(globalNostrKeys.nprofile);
+      const pkHex = "0x" + globalNostrKeys.sec;
+      const newWallet = createWalletClient({
+        account: privateKeyToAccount(pkHex as any),
+        chain: optimism,
+        transport: http(),
+      });
+
+      setWallet(newWallet);
+      setEvmAddress(newWallet?.account?.address);
+    }
+  }, []);
+
   useEffect(() => {
     if (relay && relay.status == 3) {
       setConnected(false);
@@ -431,20 +534,99 @@ const Login: NextPage = () => {
     handleConnectRelay();
   }, []);
 
+  //::NIP-111
+  async function privateKeyFromX(
+    username: string,
+    caip10: string,
+    sig: string,
+    password: string | undefined,
+  ): Promise<string> {
+    if (sig.length < 64) throw new Error("Signature too short");
+    const inputKey = sha256(secp256k1.etc.hexToBytes(sig.toLowerCase().startsWith("0x") ? sig.slice(2) : sig));
+    const info = `${caip10}:${username}`;
+    const salt = sha256(`${info}:${password ? password : ""}:${sig.slice(-64)}`);
+    const hashKey = await hkdf(sha256, inputKey, salt, info, 42);
+    return secp256k1.etc.bytesToHex(secp256k1.etc.hashToPrivateKey(hashKey));
+  }
+
+  async function signInWithX(
+    username: string,
+    caip10: string,
+    sig: string,
+    password: string | undefined,
+  ): Promise<{
+    petname: string;
+    profile: ProfilePointer | null;
+    pubkey: string;
+    privkey: string;
+  }> {
+    let profile = null;
+    let petname = username;
+
+    if (username.includes(".")) {
+      try {
+        profile = await nip05.queryProfile(username);
+      } catch (e) {
+        console.log(e);
+        throw new Error("Nostr Profile Not Found");
+      }
+      if (profile == null) {
+        throw new Error("Nostr Profile Not Found");
+      }
+      petname = username.split("@").length == 2 ? username.split("@")[0] : username.split(".")[0];
+    }
+
+    const privkey = await privateKeyFromX(petname, caip10, sig, password);
+    const pubkey = getPublicKey(privkey);
+
+    if (profile?.pubkey && pubkey !== profile.pubkey) {
+      throw new Error("Invalid Signature/Password");
+    }
+
+    return {
+      petname,
+      profile,
+      pubkey,
+      privkey,
+    };
+  }
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
   const generateKeyPairFromSeed = async () => {
-    const baseMessage = "nostr3";
-    const formattedMessage = toHex(toBytes(baseMessage));
-    const signature = await signer?.signMessage({ message: formattedMessage });
-    const hashed = keccak256(signature as any);
-    const seed = toBytes(hashed);
-    const kp = MecenateHelper.crypto.asymmetric.generateKeyPairFromSeed(seed);
-    return kp;
+    const chainId = await signer?.getChainId();
+    const _address = await signer?.account?.address;
+    const petname = username.split("@").length == 2 ? username.split("@")[0] : username.split(".")[0];
+
+    try {
+      const info = `eip155:${chainId}:${_address}`;
+      const statement = `Log into Nostr client as '${petname}'\n\nIMPORTANT: Please verify the integrity and authenticity of connected Nostr client before signing this message\n\nSIGNED BY: ${info}`;
+      const signature = (await signer?.signMessage({ message: statement })) as string;
+
+      const siwe = await signInWithX(petname, info, signature, password);
+
+      console.log(siwe);
+
+      const kp = {
+        publicKey: siwe.pubkey,
+        secretKey: siwe.privkey,
+      };
+
+      return kp;
+    } catch (err) {
+      console.log("❌ Failed to Sign: " + err);
+      return {
+        data: "",
+        status: "❌ Failed to Sign: " + err,
+      };
+    }
   };
 
   const handleSignIn = async () => {
     const id = notification.loading("Process");
     if (!isExtension) {
-      /*  await fetch("/api/store", {
+      await fetch("/api/store", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -453,13 +635,13 @@ const Login: NextPage = () => {
           evmAddress: await wallet?.account?.address,
           pubKey: publicKey,
         }),
-      }); */
+      });
 
       await handleRegisterEVM(nostrKeys);
     } else {
       await handleRegisterEVMExtension();
 
-      /* await fetch("/api/store", {
+      await fetch("/api/store", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -468,19 +650,56 @@ const Login: NextPage = () => {
           evmAddress: evmAddress,
           pubKey: publicKey,
         }),
-      }); */
+      });
     }
     notification.remove(id);
     notification.success("Send");
   };
 
+  const handleGenerateRandomKeys = async () => {
+    const sk = generatePrivateKey();
+    const pk = getPublicKey(sk);
+
+    const pkSlice = toHex(sk).slice(2).slice(64);
+    const nostr3 = new Nostr3(pkSlice);
+    const nostrKeys = nostr3.generateNostrKeys();
+
+    setNostrPrivateKey(nostrKeys.nsec);
+    setPublicKey(getPublicKey(nostrKeys.sec));
+    setPrivateKey(nostrKeys.sec);
+    setNostrPublicKey(nostrKeys.npub);
+    setNProfile(nostrKeys.nprofile);
+    setNostr3(nostr3);
+    useGlobalState.setState({ nostrKeys: nostrKeys });
+    setNostrKeys(nostrKeys);
+
+    const pkHex = "0x" + nostrKeys.sec;
+
+    const newWallet = createWalletClient({
+      account: privateKeyToAccount(pkHex as any),
+      chain: optimism,
+      transport: http(),
+    });
+
+    setWallet(newWallet);
+    setEvmAddress(await newWallet?.account?.address);
+    setIsExtension(false);
+    try {
+      const profileData = await loadProfile(nostrKeys.pub);
+      setProfileDetails(profileData);
+    } catch (error) {
+      notification.error("Error loading profile");
+    }
+  };
+
   const handleGenerateKeys = async () => {
     //const sk = generatePrivateKey();
 
-    const kp = await generateKeyPairFromSeed();
+    const kp = (await generateKeyPairFromSeed()) as { publicKey: string; secretKey: string };
     const pkSlice = toHex(kp.secretKey).slice(2).slice(64);
     const nostr3 = new Nostr3(pkSlice);
     const nostrKeys = nostr3.generateNostrKeys();
+
     setNostrPrivateKey(nostrKeys.nsec);
     setPublicKey(getPublicKey(nostrKeys.sec));
     setPrivateKey(nostrKeys.sec);
@@ -488,7 +707,6 @@ const Login: NextPage = () => {
     setNProfile(nostrKeys.nprofile);
     setNostr3(nostr3);
     useGlobalState.setState({ nostrKeys: nostrKeys });
-
     setNostrKeys(nostrKeys);
 
     const pkHex = "0x" + nostrKeys.sec;
@@ -510,77 +728,7 @@ const Login: NextPage = () => {
     }
   };
 
-  const ProfileDetailsBox = () => {
-    return (
-      <div className="profile-details-box bg-base rounded-ms p-5 my-10 flex flex-col items-center text-center w-3/8">
-        {profileDetails && profileDetails.display_name && (
-          <div>
-            {profileDetails.picture && (
-              <LazyLoadImage src={profileDetails.picture} className="rounded-full w-24 mx-auto" alt="Profile" />
-            )}
-            <h3 className="font-bold text-lg mb-4">{profileDetails.display_name}</h3>
-            <p className="text-md">{profileDetails.about}</p>
-          </div>
-        )}
-        <button className="btn text-left mb-5" onClick={() => setShowKeys(!showKeys)}>
-          {showKeys ? "Hide Keys" : "Show Keys"}
-        </button>
-        {showKeys && (
-          <div className="w-fit bg-base-100 text-base-content rounded-lg p-5 text-left break-all mt-4">
-            <ul className="space-y-2">
-              {publicKey && (
-                <li className="font-bold border-b border-primary-content p-2">
-                  Public Key: <span className="font-normal">{publicKey}</span>
-                </li>
-              )}
-              {privateKey && (
-                <li className="font-bold border-b border-primary-content p-2">
-                  Private Key: <span className="font-normal">{privateKey}</span>
-                </li>
-              )}
-              {nostrPublicKey && (
-                <li className="font-bold border-b border-primary-content p-2">
-                  NIP19 Public Key: <span className="font-normal">{nostrPublicKey}</span>
-                </li>
-              )}
-              {nostrPrivateKey && (
-                <li className="font-bold border-b border-primary-content p-2">
-                  NIP19 Private Key: <span className="font-normal">{nostrPrivateKey}</span>
-                </li>
-              )}
-              {nProfile && (
-                <li className="font-bold p-2">
-                  NIP19 Nostr Profile: <span className="font-normal">{nProfile}</span>
-                </li>
-              )}
-              {wallet && (
-                <li className="font-bold p-2">
-                  EVM Address: <span className="font-normal">{wallet?.account?.address}</span>
-                </li>
-              )}
-            </ul>
-          </div>
-        )}
-        Link an EVM address to your Nostr account. You can change it any time.
-        <input
-          type="text"
-          className="input input-primary my-5"
-          id="EvmAddress"
-          placeholder="Set Evm address"
-          value={evmAddress}
-          onChange={e => setEvmAddress(e.target.value)}
-        />
-        <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6 mt-5" onClick={handleSignIn}>
-          REGISTER
-        </label>
-      </div>
-    );
-  };
-
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Relay /////////////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
-
+  //::Relay
   const handleConnectRelay = async () => {
     const relay = relayInit(relayURL);
     relay.on("connect", async () => {
@@ -612,60 +760,63 @@ const Login: NextPage = () => {
     return true;
   };
 
-  //////////////////////////////////////////////////////////////////////////////////////
-  // Update Profile ////////////////////////////////////////////////////////////////////
-  //////////////////////////////////////////////////////////////////////////////////////
-
   const updateMetadata = (key: string, value: string) => {
     setMetadata({ ...metadata, [key]: value });
   };
 
-  const handleChangeMetadata = async () => {
-    const data = {
-      name: metadata.name,
-      display_name: metadata.display_name,
-      website: metadata.website,
-      about: metadata.about,
-      picture: metadata.picture,
-      image: metadata.image,
-      banner: metadata.banner,
-      nip05: metadata.nip05,
-      lud06: metadata.lud06,
-      lud16: metadata.lud16,
-      mastodonUrl: metadata.mastodonUrl,
-    };
-    const newEvent = {
-      kind: 0,
-      created_at: Math.floor(Date.now() / 1000),
-      tags: [],
-      content: JSON.stringify(data),
-      pubkey: publicKey,
-    };
-
-    // Sign and finalize the event
-    const signedEvent = finishEvent(newEvent, privateKey);
-    // Publish the signed event
-    await relay.publish(signedEvent);
-    // Retrieve events from the relay
-    const events = await relay.list([{ kinds: [1] }]);
-    // Set state with the latest event and all retrieved events
-    setEvent({ created: signedEvent, all: events });
-
-    //relay.close();
-  };
-
   return (
     <div className="flex items-center flex-col flex-grow pt-10 ">
       <div className="w-full">
         {signer?.account ? (
           <div className="m-5  mx-auto w-5/6">
-            <nav className="flex flex-wrap p-4 text-center mx-auto w-auto">
+            <span className="block text-grey-800 font-semibold mx-5 my-2">LOGIN</span>
+            <nav className="flex flex-wrap p-4 text-center mx-auto w-auto bg-base-300 rounded-lg">
+              <input
+                type="text"
+                className="input input-primary mr-2 md:mr-4 lg:mr-6"
+                id="username"
+                placeholder="Username"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+              />
+              <input
+                type="password"
+                className="input input-primary  mr-2 md:mr-4 lg:mr-6"
+                id="password"
+                placeholder="Password"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
               <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6" onClick={handleGenerateKeys}>
                 Generate Keypair
               </label>
+            </nav>
+            <nav className="flex flex-wrap p-4 text-center mx-auto w-auto bg-base-300 rounded-lg my-2">
+              <input
+                type="text"
+                className="input input-primary mr-2 md:mr-4 lg:mr-6"
+                id="username"
+                placeholder="PublicKey"
+                value={publicKey}
+                onChange={e => setPublicKey(e.target.value)}
+              />
+              <input
+                type="password"
+                className="input input-primary  mr-2 md:mr-4 lg:mr-6"
+                id="password"
+                placeholder="PrivateKey"
+                value={privateKey}
+                onChange={e => setPrivateKey(e.target.value)}
+              />
+              <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6" onClick={handleConnectWithKeyPair}>
+                Login with keyPair
+              </label>
               <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6" onClick={handleConnectExtension}>
                 Login With extension
               </label>
+              <label className="btn btn-ghost mr-2 md:mr-4 lg:mr-6" onClick={handleGenerateRandomKeys}>
+                Generate Random
+              </label>
             </nav>
             {connected ? (
               <p className="mb-4 text-bold text-xl text-success">📡 Connected</p>
@@ -757,7 +908,7 @@ const Login: NextPage = () => {
                     onClick={() => {
                       const relay_modal = document.getElementById("relay_modal") as HTMLDialogElement;
                       if (relay_modal) relay_modal;
-                      setRelayURL("wss://relay.primal.net");
+                      setRelayURL("wss://relay.damus.io");
                       handleConnectRelay();
                     }}
                   >
@@ -895,6 +1046,14 @@ const Login: NextPage = () => {
                 </div>
               </dialog>
             </nav>
+            {event && event.created && (
+              <div className="bg-success p-5 text-black rounded-md mb-4">
+                <h2 className="text-2xl mb-2">🎉 Posted!</h2>
+                {/* <p className="mb-2">ID: {event.created.id}</p>
+				<p className="mb-2">From: {event.created.pubkey}</p> */}
+                <p className="mb-2 text-lg font-medium">{event.created.content}</p>
+              </div>
+            )}
             <div>
               {pubKeyEthAddressList && (
                 <div className="bg-base-100  text-base-content rounded-md mb-4 p-10 break-all">
@@ -923,14 +1082,6 @@ const Login: NextPage = () => {
                 </div>
               )}
             </div>
-            {event && event.created && (
-              <div className="bg-success p-5 text-black rounded-md mb-4">
-                <h2 className="text-2xl mb-2">🎉 Posted!</h2>
-                {/* <p className="mb-2">ID: {event.created.id}</p>
-				<p className="mb-2">From: {event.created.pubkey}</p> */}
-                <p className="mb-2 text-lg font-medium">{event.created.content}</p>
-              </div>
-            )}
           </div>
         ) : (
           <div className="font-black m-5">Connect your wallet</div>
diff --git a/packages/nextjs/services/store/store.ts b/packages/nextjs/services/store/store.ts
index 5eec6e7..7433a61 100644
--- a/packages/nextjs/services/store/store.ts
+++ b/packages/nextjs/services/store/store.ts
@@ -16,8 +16,10 @@ type TGlobalState = {
   setNostrKeys: (newNostrKeys: any) => void;
   nostr3List: any;
   setNostr3List: (newNostr3List: any) => void;
-  eventId: string;
-  setEventId: (newEventId: string) => void;
+  event: any;
+  setEvent: (newEvent: any) => void;
+  followerAuthors: string[];
+  setFollowerAuthors: (newFollowerAuthors: string[]) => void;
 };
 
 export const useGlobalState = create<TGlobalState>(set => ({
@@ -27,6 +29,8 @@ export const useGlobalState = create<TGlobalState>(set => ({
   setNostrKeys: (newNostrKeys: any): void => set(() => ({ nostrKeys: newNostrKeys })),
   nostr3List: "",
   setNostr3List: (newNostr3List: any): void => set(() => ({ nostr3List: newNostr3List })),
-  eventId: "",
-  setEventId: (newEventId: string): void => set(() => ({ eventId: newEventId })),
+  event: {},
+  setEvent: (newEvent: any): void => set(() => ({ event: newEvent })),
+  followerAuthors: [],
+  setFollowerAuthors: (newFollowerAuthors: any): void => set(() => ({ followerAuthors: newFollowerAuthors })),
 }));
diff --git a/packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts b/packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts
index 4baae15..29a4d7a 100644
--- a/packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts
+++ b/packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts
@@ -13,7 +13,7 @@ export const BurnerConnectorErrorList = {
 /**
  * A union of all the BurnerConnectorErrorList
  */
-export type BurnerConnectorErrorTypes = typeof BurnerConnectorErrorList[keyof typeof BurnerConnectorErrorList];
+export type BurnerConnectorErrorTypes = (typeof BurnerConnectorErrorList)[keyof typeof BurnerConnectorErrorList];
 
 export class BurnerConnectorError extends Error {
   constructor(errorType: BurnerConnectorErrorTypes, message?: string) {
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index c391ef3..fa368f3 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Raleway&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Raleway&display=swap");
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -72,3 +72,21 @@ p {
 .read-the-docs {
   color: #888;
 }
+
+.fixed-bottom-right {
+  position: fixed;
+  top: 10px; /* Adjust as needed */
+  right: 40px; /* Adjust as needed */
+  z-index: 1000; /* Ensure it's above other content */
+}
+
+.parent-container {
+  position: relative;
+  /* other styles */
+}
+
+.absolute-bottom-right {
+  position: absolute;
+  top: 10px; /* Adjust as needed */
+  right: 40px; /* Adjust as needed */
+}
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index df2dafe..af12acb 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
-  plugins: [require("daisyui")],
+  plugins: [require("daisyui"), require("tailwind-scrollbar")],
   darkTheme: "scaffoldEthDark",
   // DaisyUI theme colors
   daisyui: {
diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json
index 869cf92..9734ed6 100644
--- a/packages/nextjs/tsconfig.json
+++ b/packages/nextjs/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,17 +15,9 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "~~/*": [
-        "./*"
-      ]
+      "~~/*": ["./*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/nextjs/utils/constants.ts b/packages/nextjs/utils/constants.ts
index e04770c..1e42a31 100644
--- a/packages/nextjs/utils/constants.ts
+++ b/packages/nextjs/utils/constants.ts
@@ -1,7 +1,7 @@
 export const RELAYS = [
   "wss://relay.damus.io",
   "wss://relay.primal.net",
+  "wss://relay.nostr.band",
   "wss://nostr-pub.wellorder.net",
-  "wss://nostr.drss.io",
   "wss://nostr.swiss-enigma.ch",
 ];
diff --git a/packages/nextjs/utils/parsing.ts b/packages/nextjs/utils/parsing.ts
index ad19488..256fe36 100644
--- a/packages/nextjs/utils/parsing.ts
+++ b/packages/nextjs/utils/parsing.ts
@@ -1,33 +1,33 @@
 export interface ExtractedImgLinks {
-	txtContent: string,
-	imgLinks: string[],
+  txtContent: string;
+  imgLinks: string[];
 }
 
 export function extractImageLinks(textContent: string): ExtractedImgLinks {
-	/* F(x) to extract image links within text content data */
+  /* F(x) to extract image links within text content data */
 
-	const tmpTxtContent = textContent.replaceAll("\n", " ");
-	const imgExtensions = ["png", "jpg", "jpeg", "webp", "gif"];
-	const words = tmpTxtContent.split(" ");
-	let imgLinks: string[] = [];
+  const tmpTxtContent = textContent.replaceAll("\n", " ");
+  const imgExtensions = ["png", "jpg", "jpeg", "webp", "gif"];
+  const words = tmpTxtContent.split(" ");
+  let imgLinks: string[] = [];
 
-	for (let i = 0; i < words.length; i++) {
-		if (words[i].slice(0, 4) != "http") continue;
+  for (let i = 0; i < words.length; i++) {
+    if (words[i].slice(0, 4) != "http") continue;
 
-		const subWords = words[i].split(".");
-		const ext = subWords[subWords.length - 1];
+    const subWords = words[i].split(".");
+    const ext = subWords[subWords.length - 1];
 
-		if (imgExtensions.includes(ext)) {
-			imgLinks.push(words[i]);
-		} else {
-			continue
-		};
+    if (imgExtensions.includes(ext)) {
+      imgLinks.push(words[i]);
+    } else {
+      continue;
+    }
 
-		textContent = textContent.replaceAll(words[i], "");
-	}
+    textContent = textContent.replaceAll(words[i], "");
+  }
 
-	return {
-		txtContent: textContent,
-		imgLinks,
-	}
+  return {
+    txtContent: textContent,
+    imgLinks,
+  };
 }
diff --git a/packages/nextjs/utils/tailwind.ts b/packages/nextjs/utils/tailwind.ts
index b46d5de..605d2d5 100644
--- a/packages/nextjs/utils/tailwind.ts
+++ b/packages/nextjs/utils/tailwind.ts
@@ -1,3 +1,3 @@
 export default function classNames(...classes: string[]) {
-	return classes.filter(Boolean).join(" ");
+  return classes.filter(Boolean).join(" ");
 }
diff --git a/yarn.lock b/yarn.lock
index 7f9a258..eaff8b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1309,7 +1309,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/hashes@npm:1.3.2, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1, @noble/hashes@npm:~1.3.2":
+"@noble/hashes@npm:1.3.2, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1, @noble/hashes@npm:~1.3.2":
   version: 1.3.2
   resolution: "@noble/hashes@npm:1.3.2"
   checksum: fe23536b436539d13f90e4b9be843cc63b1b17666a07634a2b1259dded6f490be3d050249e6af98076ea8f2ea0d56f578773c2197f2aa0eeaa5fba5bc18ba474
@@ -2280,6 +2280,8 @@ __metadata:
     "@ethersproject/providers": ^5.7.2
     "@headlessui/react": ^1.7.14
     "@heroicons/react": ^2.0.11
+    "@noble/hashes": ^1.3.2
+    "@noble/secp256k1": ^2.0.0
     "@rainbow-me/rainbowkit": 1.1.2
     "@scobru/crypto-ipfs": ^1.1.11
     "@scobru/mogu": ^1.2.7
@@ -2311,6 +2313,7 @@ __metadata:
     js-sha3: ^0.9.2
     next: ^13.1.6
     nextjs-progressbar: ^0.0.16
+    noble: ^1.9.1
     nostr-hooks: ^1.8.1
     nostr-react: ^0.7.0
     nostr-tools: ^1.10.1
@@ -2326,7 +2329,9 @@ __metadata:
     react-icons: ^4.8.0
     react-lazy-load-image-component: ^1.6.0
     react-toggle-dark-mode: ^1.1.1
+    secp256k1: ^5.0.0
     spinners-react: ^1.0.7
+    tailwind-scrollbar: ^3.0.5
     tailwindcss: ^3.3.3
     type-fest: ^4.6.0
     typescript: ^5.1.6
@@ -5191,6 +5196,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bluetooth-hci-socket@npm:^0.5.1":
+  version: 0.5.1
+  resolution: "bluetooth-hci-socket@npm:0.5.1"
+  dependencies:
+    debug: ^2.2.0
+    nan: ^2.0.5
+    node-gyp: latest
+    usb: ^1.1.0
+  dependenciesMeta:
+    usb:
+      optional: true
+  conditions: (os=linux | os=android | os=win32)
+  languageName: node
+  linkType: hard
+
 "bn.js@npm:4.11.6":
   version: 4.11.6
   resolution: "bn.js@npm:4.11.6"
@@ -5247,6 +5267,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bplist-parser@npm:0.0.6":
+  version: 0.0.6
+  resolution: "bplist-parser@npm:0.0.6"
+  checksum: 1fa96720ea2d015788b75c3ca241ceac6cc32aeb06c8c07e1ea89b595a2daeb2db6adbe93cdc048b5d6e67db58cd6bb251901781181b3ddb6f8d4ebe622d53d4
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -6429,6 +6456,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:~2.2.0":
+  version: 2.2.0
+  resolution: "debug@npm:2.2.0"
+  dependencies:
+    ms: 0.7.1
+  checksum: 06a55becb91b82c8084a2d7d3f73809180596c8ebbddd373a58c544efd3d66885dc0d80f9cda7e0613b2883a19c2b1d91550dc5dab3e0d4ca6fd42dc61784aa5
+  languageName: node
+  linkType: hard
+
 "decamelize-keys@npm:^1.0.0":
   version: 1.1.1
   resolution: "decamelize-keys@npm:1.1.1"
@@ -11953,6 +11989,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ms@npm:0.7.1":
+  version: 0.7.1
+  resolution: "ms@npm:0.7.1"
+  checksum: 73b453879f26fe14ae41388cb3fb7483aa81e478950b3feff8433959a8e693b20797b0ed85e20fbe86ec65f094b283360987e05817979721513e7ec622dcde96
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -12129,7 +12172,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.1.0, nan@npm:^2.17.0":
+"nan@npm:^2.0.5, nan@npm:^2.1.0, nan@npm:^2.17.0":
   version: 2.18.0
   resolution: "nan@npm:2.18.0"
   dependencies:
@@ -12281,6 +12324,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"noble@npm:^1.9.1":
+  version: 1.9.1
+  resolution: "noble@npm:1.9.1"
+  dependencies:
+    bluetooth-hci-socket: ^0.5.1
+    bplist-parser: 0.0.6
+    debug: ~2.2.0
+    xpc-connection: ~0.1.4
+  dependenciesMeta:
+    bluetooth-hci-socket:
+      optional: true
+    bplist-parser:
+      optional: true
+    xpc-connection:
+      optional: true
+  checksum: 301b89fc89819d8a9496ed50a84e1893d97949f46e5692ea40b6510b40f56b987368af86e630d9f09c50d0029ac9a7929d228a68e7d0d01db1a4a078717e31f7
+  conditions: (os=darwin | os=linux | os=freebsd | os=win32)
+  languageName: node
+  linkType: hard
+
 "node-abi@npm:^2.2.0":
   version: 2.30.1
   resolution: "node-abi@npm:2.30.1"
@@ -12299,6 +12362,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "node-addon-api@npm:4.3.0"
+  dependencies:
+    node-gyp: latest
+  checksum: 3de396e23cc209f539c704583e8e99c148850226f6e389a641b92e8967953713228109f919765abc1f4355e801e8f41842f96210b8d61c7dcc10a477002dcf00
+  languageName: node
+  linkType: hard
+
+"node-addon-api@npm:^5.0.0":
+  version: 5.1.0
+  resolution: "node-addon-api@npm:5.1.0"
+  dependencies:
+    node-gyp: latest
+  checksum: 2508bd2d2981945406243a7bd31362fc7af8b70b8b4d65f869c61731800058fb818cc2fd36c8eac714ddd0e568cc85becf5e165cebbdf7b5024d5151bbc75ea1
+  languageName: node
+  linkType: hard
+
 "node-addon-api@npm:^7.0.0":
   version: 7.0.0
   resolution: "node-addon-api@npm:7.0.0"
@@ -14634,6 +14715,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"secp256k1@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "secp256k1@npm:5.0.0"
+  dependencies:
+    elliptic: ^6.5.4
+    node-addon-api: ^5.0.0
+    node-gyp: latest
+    node-gyp-build: ^4.2.0
+  checksum: a0719dff4687c38d385b5e0b7e811c51a4ea24893128be9d097aee99f879eb0ea52582590deb15a49da627a3db23c6b028ad5c9c6ac1fca92ce760153b8cf21c
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1, semver@npm:^5.5.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -15631,6 +15724,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-scrollbar@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "tailwind-scrollbar@npm:3.0.5"
+  peerDependencies:
+    tailwindcss: 3.x
+  checksum: 5bd7f36c90dce14f789d946fa37969d5951fd0282fdf0bac7ea38d7f252fc5d7acff942e21ccf1eca23cd6d31906dac08ef873530f296b5b75e01118d805cc91
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.1, tailwindcss@npm:^3.3.3":
   version: 3.3.5
   resolution: "tailwindcss@npm:3.3.5"
@@ -16605,6 +16707,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usb@npm:^1.1.0":
+  version: 1.9.2
+  resolution: "usb@npm:1.9.2"
+  dependencies:
+    node-addon-api: ^4.2.0
+    node-gyp: latest
+    node-gyp-build: ^4.3.0
+  checksum: 7aaf6669f02c6f4bebe571de1c364447ca44be4dc8c60fc3261f38660e04015099ebed3943935ad64755afccd11213245d697ea05571a2f142d912bb801bb54f
+  languageName: node
+  linkType: hard
+
 "use-callback-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-callback-ref@npm:1.3.0"
@@ -17490,6 +17603,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xpc-connection@npm:~0.1.4":
+  version: 0.1.4
+  resolution: "xpc-connection@npm:0.1.4"
+  dependencies:
+    nan: ^2.0.5
+    node-gyp: latest
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:^4.0.2, xtend@npm:~4.0.0":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"