diff --git a/BFF/ipfs/unpin.ts b/BFF/ipfs/unpin.ts
new file mode 100644
index 0000000..d855c76
--- /dev/null
+++ b/BFF/ipfs/unpin.ts
@@ -0,0 +1,20 @@
+import pinataSDK from "@pinata/sdk";
+
+import dotenv from "dotenv";
+dotenv.config();
+
+export async function unpin({ hash }: { hash: string }) {
+  console.log("hash", hash);
+  const PINATA_KEY = process.env.PINATA_KEY;
+  const PINATA_SECRET_KEY = process.env.PINATA_SECRET_KEY;
+
+  const pinata = new pinataSDK(PINATA_KEY, PINATA_SECRET_KEY);
+
+  try {
+    const result = await pinata.unpin(hash);
+    return result;
+  } catch (error) {
+    console.error("Error unpinning file on IPFS:", error);
+    return { mediaError: "Internal Server Error" };
+  }
+}
diff --git a/components/AvatarSelection.tsx b/components/AvatarSelection.tsx
index 63ede7a..f684bad 100644
--- a/components/AvatarSelection.tsx
+++ b/components/AvatarSelection.tsx
@@ -35,6 +35,8 @@ export const AvatarSelection = ({
   //=============================================================================
   const fileInputRef = useRef(null);
 
+  console.log("familyDetails - on load", familyDetails);
+
   const openFileInput = () => {
     fileInputRef.current.click();
   };
@@ -79,6 +81,19 @@ export const AvatarSelection = ({
     }
   };
 
+  const unpinFromIpfs = async (ipfsHash: string) => {
+    try {
+      // send as query param
+      const result = await axios.get(
+        `/api/ipfs/unpin-from-ipfs?ipfsHash=${ipfsHash}`
+      );
+      console.log(result.data);
+      return result.data.success;
+    } catch (e) {
+      console.error(e as Error);
+    }
+  };
+
   const handleSubmit = async () => {
     console.log("selectedFile", selectedFile);
     setIsLoading(true);
@@ -101,11 +116,40 @@ export const AvatarSelection = ({
         return;
       }
 
-      setActiveStep(1);
-
       const avatar = `https://ipfs.io/ipfs/${ifpsHash}`;
       console.log(avatar);
 
+      // delete old avatar from ipfs
+      console.log("familyDetails?.avatarURI", familyDetails?.avatarURI);
+      console.log("avatar", avatar);
+      console.log(
+        "familyDetails?.avatarURI.includes(ipfs)",
+        familyDetails?.avatarURI.includes("ipfs")
+      );
+      console.log(
+        "familyDetails?.avatarURI !== avatar",
+        familyDetails?.avatarURI !== avatar
+      );
+      if (
+        familyDetails?.avatarURI &&
+        familyDetails?.avatarURI.includes("ipfs") &&
+        familyDetails?.avatarURI !== avatar
+      ) {
+        const oldIpfsHash = familyDetails?.avatarURI.split("/")[4];
+        const result = await unpinFromIpfs(oldIpfsHash);
+        if (result.success === false) {
+          toast({
+            title: "Error",
+            description: "Failed to delete old avatar from IPFS",
+            status: "error",
+          });
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      setActiveStep(1);
+
       const body = {
         ...familyDetails,
         avatarURI: avatar,
@@ -116,6 +160,8 @@ export const AvatarSelection = ({
         value: body,
       };
 
+      console.log("payload", payload);
+
       await axios.post(`/api/vercel/set-json`, payload);
       setUserDetails(body);
       fetchFamilyDetails();
diff --git a/components/ComingSoon.tsx b/components/ComingSoon.tsx
new file mode 100644
index 0000000..6ec1ef8
--- /dev/null
+++ b/components/ComingSoon.tsx
@@ -0,0 +1,28 @@
+import { Box, Flex, Heading, Text, Image } from "@chakra-ui/react";
+
+const ComingSoon = () => {
+  const Logo = () => {
+    return (
+      <Flex align="center" ml={5} mt={5}>
+        <Image src={"/pig_logo.png"} alt="Loader" width="50" height="50" />
+        <Heading size="lg" ml={5}>
+          Defikids
+        </Heading>
+      </Flex>
+    );
+  };
+
+  return (
+    <Box h="100vh">
+      {Logo()}
+      <Flex direction="column" align="center" justify="center" h="90vh">
+        <Heading size={"lg"}>Coming Soon</Heading>
+        <Text my={5} color="gray" fontSize="lg">
+          We are working hard to bring you the best experience.
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ComingSoon;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 45695a4..0f2382b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -16,6 +16,7 @@ import { chains, wagmiConfig } from "@/services/wagmi/wagmiConfig";
 import "@rainbow-me/rainbowkit/styles.css";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { WagmiConfig } from "wagmi";
+import ComingSoon from "../components/ComingSoon";
 
 function MyApp({ Component, pageProps }) {
   const [hasCheckedUserType, setHasCheckedUserType] = useState(false);
diff --git a/pages/api/ipfs/unpin-from-ipfs.ts b/pages/api/ipfs/unpin-from-ipfs.ts
new file mode 100644
index 0000000..2b894c5
--- /dev/null
+++ b/pages/api/ipfs/unpin-from-ipfs.ts
@@ -0,0 +1,22 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { unpin } from "@/BFF/ipfs/unpin";
+
+export default async function unpinFromIpfsRoute(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { ipfsHash } = req.query as { ipfsHash: string };
+  console.log("ipfsHash - req.query", ipfsHash);
+
+  try {
+    const result = await unpin({ hash: ipfsHash });
+    return res.status(200).json({ success: true });
+  } catch (error) {
+    if (error.reason === "CURRENT_USER_HAS_NOT_PINNED_CID") {
+      return res.status(200).json({ success: true });
+    } else {
+      console.error("Error unpinning file on IPFS:", error);
+      return { mediaError: "Internal Server Error" };
+    }
+  }
+}