diff --git a/app/components/headbar/index.tsx b/app/components/headbar/index.tsx
index 4f9af528..cc6f3d70 100644
--- a/app/components/headbar/index.tsx
+++ b/app/components/headbar/index.tsx
@@ -4,7 +4,7 @@ import { CiLogin } from "react-icons/ci";
 import { GoPlus } from "react-icons/go";
 import { User as UserType } from "@/types";
 import { logoutAction } from "@lib/actions";
-import Notifications from "../Notifications";
+import Notifications from "../notifications";
 
 type HeadbarProps = {
   user: UserType;
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 2314f60d..3720c2b2 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -2,16 +2,14 @@ import BrandLogo from "./brandlogo";
 import Carousel from "./carousel";
 import ErrorBoundary from "./error-boundary";
 import Headbar from "./headbar";
-// import Notifications from "./Notifications";
 import OtpSection from "./otp";
-import SpinnerLoader from "./SpinnerLoader";
+import SpinnerLoader from "./spinnerloader";
 
 export {
   BrandLogo,
   Carousel,
   ErrorBoundary,
   Headbar,
-  // Notifications,
   OtpSection,
   SpinnerLoader,
 };
diff --git a/app/components/notifications/index.tsx b/app/components/notifications/index.tsx
new file mode 100644
index 00000000..db2dae15
--- /dev/null
+++ b/app/components/notifications/index.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { CiBellOn } from "react-icons/ci";
+import {
+  NovuProvider,
+  PopoverNotificationCenter,
+} from "@novu/notification-center";
+
+export default function Notifications({ userId }: { userId: string }) {
+  return (
+    <NovuProvider
+      subscriberId={userId}
+      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_IDENTIFIER || ""}
+    >
+      <PopoverNotificationCenter colorScheme={"light"}>
+        {({ unseenCount }) => <CustomBellIcon unseenCount={unseenCount} />}
+      </PopoverNotificationCenter>
+    </NovuProvider>
+  );
+}
+
+const CustomBellIcon = ({
+  unseenCount = 0,
+}: {
+  unseenCount: number | undefined;
+}) => {
+  return (
+    <CiBellOn
+      size={25}
+      color={unseenCount > 0 ? "red" : "black"}
+      style={{
+        cursor: "pointer",
+      }}
+    >
+      {unseenCount > 0 && (
+        <span
+          style={{
+            position: "absolute",
+            top: "50%",
+            right: "5px",
+            transform: "translateY(-50%)",
+            fontSize: "12px",
+            color: "white",
+            backgroundColor: "red",
+            borderRadius: "50%",
+            padding: "2px",
+          }}
+        >
+          {unseenCount}
+        </span>
+      )}
+    </CiBellOn>
+  );
+};
diff --git a/app/components/spinnerloader/index.tsx b/app/components/spinnerloader/index.tsx
new file mode 100644
index 00000000..0a934f3c
--- /dev/null
+++ b/app/components/spinnerloader/index.tsx
@@ -0,0 +1,78 @@
+"use client";
+import { motion, useAnimate } from "framer-motion";
+import { useEffect } from "react";
+
+const SpinnerLoader: React.FC = () => {
+  const text: string = "Loading in progress. please wait";
+  const characters: string[] = text.split("");
+
+  const radius: number = 80;
+  const fontSize: string = "15px";
+  const letterSpacing: number = 10.5;
+  type AnimationStep = [
+    string,
+    { opacity: number },
+    { duration: number; at: string }
+  ];
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    const animateLoader = async () => {
+      const letterAnimation: AnimationStep[] = [];
+      characters.forEach((_, i) => {
+        letterAnimation.push([
+          `.letter-${i}`,
+          { opacity: 0 },
+          { duration: 0.3, at: i === 0 ? "+0.8" : "-0.28" },
+        ]);
+      });
+      characters.forEach((_, i) => {
+        letterAnimation.push([
+          `.letter-${i}`,
+          { opacity: 1 },
+          { duration: 0.3, at: i === 0 ? "+0.8" : "-0.28" },
+        ]);
+      });
+      animate(letterAnimation, {
+        repeat: Number.POSITIVE_INFINITY,
+      });
+      animate(
+        scope.current,
+        { rotate: 360 },
+        { duration: 4, repeat: Number.POSITIVE_INFINITY }
+      );
+    };
+    animateLoader();
+  }, [animate, scope, characters]);
+
+  const letter = "absolute top-0 left-[50%] text-black";
+  return (
+    <section className="h-full w-full flex justify-center items-center ">
+      <motion.div
+        ref={scope}
+        className="relative aspect-square"
+        style={{ width: radius * 2 }}
+      >
+        <p aria-label={text} />
+        <p aria-hidden="true">
+          {characters.map((ch, i) => (
+            <motion.span
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              key={i}
+              className={`${letter} letter-${i}`}
+              style={{
+                transformOrigin: `0 ${radius}px`,
+                transform: `rotate(${i * letterSpacing}deg)`,
+                fontSize,
+              }}
+            >
+              {ch}
+            </motion.span>
+          ))}
+        </p>
+      </motion.div>
+    </section>
+  );
+};
+
+export default SpinnerLoader;