diff --git a/app/(app)/(profile)/[npub]/_components/FollowButton.tsx b/app/(app)/(profile)/[npub]/_components/FollowButton.tsx
new file mode 100644
index 0000000..c0ad6fa
--- /dev/null
+++ b/app/(app)/(profile)/[npub]/_components/FollowButton.tsx
@@ -0,0 +1,44 @@
+"use client";
+import { useState } from "react";
+import { useNDK } from "@/app/_providers/ndk";
+import useCurrentUser from "@/lib/hooks/useCurrentUser";
+import { Button } from "@/components/ui/button";
+import { follow } from "@/lib/actions/create";
+import { toast } from "sonner";
+import { NDKUser } from "@nostr-dev-kit/ndk";
+
+type FollowButtonProps = {
+  pubkey: string;
+  follows: Set<NDKUser>;
+};
+
+export default function FollowButton({ pubkey, follows }: FollowButtonProps) {
+  const { currentUser } = useCurrentUser();
+  const { ndk } = useNDK();
+  const [loading, setLoading] = useState(false);
+
+  async function handleFollow() {
+    if (!ndk || !currentUser) return;
+    setLoading(true);
+    try {
+      await follow(ndk, currentUser, pubkey);
+      toast.success("Payment Sent!");
+    } catch (err) {
+      console.log("Error", err);
+    }
+    setLoading(false);
+  }
+  if (Array.from(follows).find((i) => i.pubkey === pubkey)) {
+    return (
+      <Button
+        onClick={handleFollow}
+        loading={loading}
+        variant={"default"}
+        className="rounded-sm px-5 max-sm:h-8 max-sm:text-xs"
+      >
+        Follow
+      </Button>
+    );
+  }
+  return null;
+}
diff --git a/app/(app)/(profile)/[npub]/page.tsx b/app/(app)/(profile)/[npub]/page.tsx
index 4087a3b..0745c9c 100644
--- a/app/(app)/(profile)/[npub]/page.tsx
+++ b/app/(app)/(profile)/[npub]/page.tsx
@@ -27,6 +27,9 @@ const CreateSubecriptionTierModal = dynamic(
     ssr: false,
   },
 );
+const FollowButton = dynamic(() => import("./_components/FollowButton"), {
+  ssr: false,
+});
 
 export default function ProfilePage({
   params: { npub },
@@ -104,22 +107,7 @@ export default function ProfilePage({
                 Edit
               </Button>
             )}
-            {currentUser &&
-              !Array.from(follows).find((i) => i.pubkey === pubkey) && (
-                <Button
-                  onClick={() =>
-                    void currentUser.follow(
-                      new NDKUser({
-                        hexpubkey: pubkey,
-                      }),
-                    )
-                  }
-                  variant={"default"}
-                  className="rounded-sm px-5 max-sm:h-8 max-sm:text-xs"
-                >
-                  Follow
-                </Button>
-              )}
+            {currentUser && <FollowButton pubkey={pubkey} follows={follows} />}
           </div>
         </div>
         <div className="mx-auto max-w-[800px] space-y-1 px-4">