diff --git a/packages/nextjs/app/builders/_components/BuilderCard.tsx b/packages/nextjs/app/builders/_components/BuilderCard.tsx
index 1062e57..ea4bebd 100644
--- a/packages/nextjs/app/builders/_components/BuilderCard.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderCard.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { normalize } from "path";
 import { getAddress, isAddress } from "viem";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import Arrow_Icon from "~~/components/Arrow_Icon";
 import { Address, BlockieAvatar } from "~~/components/scaffold-eth";
+import useBuilderExist from "~~/hooks/user/useBuilderExist";
 import { Builder, Mentor } from "~~/types/builders";
 
 type Props = {
@@ -32,6 +32,7 @@ const BuilderCard = ({ mentor, builder }: Props) => {
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const checkSumAddress = builder?.address ? getAddress(builder.address) : undefined;
   const [banner, setBanner] = useState<string>("");
+  const builderPageExists = useBuilderExist({ address: checkSumAddress });
 
   useEffect(() => {
     setBanner(getRandomBanner());
@@ -99,16 +100,29 @@ const BuilderCard = ({ mentor, builder }: Props) => {
 
       <hr className="border-t dark:border-zinc-700 border-zinc-400" />
 
-      <div className="hover:bg-st_cyan/10 rounded-b-xl duration-75 transition-all dark:border-zinc-700 border-zinc-400 flex-grow">
-        <Link
-          href={mentor ? mentor.profileLink : builder ? builder.profileLink : ""}
-          target="_blank"
-          className="flex items-center justify-between h-full px-4"
+      <div
+        className={`${
+          (mentor || builderPageExists) && "hover:bg-st_cyan/10"
+        } " rounded-b-xl duration-75 transition-all dark:border-zinc-700 border-zinc-400 flex-grow"`}
+      >
+        <div
+          className={`${
+            mentor || builderPageExists ? "cursor-pointer" : "cursor-not-allowed"
+          } flex items-center justify-between h-full px-4`}
+          onClick={() => {
+            if (mentor) {
+              window.open(mentor.profileLink, "_blank");
+            } else if (builder && builderPageExists) {
+              window.open(`/builders/${builder.address}`, "_blank");
+            } else {
+              alert("Builder page does not exist..");
+            }
+          }}
         >
           <p className="font-medium flex flex-col items-center justify-center">View Profile</p>
 
           <Arrow_Icon />
-        </Link>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 54a5fac..1c6bd8d 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { ShootingStars } from "./builders/0x5D56b71abE6cA1Dc208Ed85926178f9758fa879c/_components/shooting-stars";
@@ -9,11 +8,16 @@ import type { NextPage } from "next";
 import { useAccount } from "wagmi";
 import Card from "~~/components/Card";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import useBuilderExist from "~~/hooks/user/useBuilderExist";
 
 const Home: NextPage = () => {
   const { address: connectedAddress } = useAccount();
   const zeroAddress = "0x0000000000000000000000000000000000000000";
-  const [builderPageExists, setBuilderPageExists] = useState<boolean>(false);
+  const builderPageExists = useBuilderExist({ address: connectedAddress });
+
+  console.log({
+    builderPageExists,
+  });
 
   const { data: isAllowed } = useScaffoldReadContract({
     contractName: "BatchRegistry",
@@ -36,23 +40,6 @@ const Home: NextPage = () => {
     console.log("Error fetching checkedInCounter", error);
   }
 
-  useEffect(() => {
-    const verifyBuilderPage = async (address: string) => {
-      try {
-        const response = await fetch(`/builders/${address}`);
-        setBuilderPageExists(response.status === 200);
-      } catch (error) {
-        setBuilderPageExists(false);
-      }
-    };
-
-    if (connectedAddress) {
-      verifyBuilderPage(connectedAddress);
-    } else {
-      setBuilderPageExists(false);
-    }
-  }, [connectedAddress]);
-
   return (
     <div className="dark:bg-zinc-950 bg-zinc-200 dark:text-st_white text-st_background min-h-screen h-fit relative overflow-clip flex items-center justify-center">
       <div className="absolute w-full h-full pointer-events-none">
diff --git a/packages/nextjs/hooks/user/useBuilderExist.ts b/packages/nextjs/hooks/user/useBuilderExist.ts
new file mode 100644
index 0000000..36b2c12
--- /dev/null
+++ b/packages/nextjs/hooks/user/useBuilderExist.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const useBuilderExist = ({ address }: { address: string | undefined }) => {
+  const [builderPageExists, setBuilderPageExists] = useState<boolean>(false);
+
+  useEffect(() => {
+    const verifyBuilderPage = async (address: string) => {
+      try {
+        const response = await fetch(`/builders/${address}`);
+        setBuilderPageExists(response.status === 200);
+      } catch (error) {
+        setBuilderPageExists(false);
+      }
+    };
+
+    if (address) {
+      verifyBuilderPage(address);
+    } else {
+      setBuilderPageExists(false);
+    }
+  }, [address]);
+
+  return builderPageExists;
+};
+
+export default useBuilderExist;