diff --git a/app/(base)/pcp/page.tsx b/app/(base)/pcp/page.tsx
index 40b86eb..fe9a7fe 100644
--- a/app/(base)/pcp/page.tsx
+++ b/app/(base)/pcp/page.tsx
@@ -21,6 +21,7 @@ import BookIcon from "@/components/icons/BookIcon";
 import ArticleIcon from "@/components/icons/ArticleIcon";
 import Link from "next/link";
 import ChevronRightIcon from "@/components/icons/ChevronRightIcon";
+import Loader from "@/components/Loader";
 
 const statusOptions = [
   { label: "Pending", color: "bg-red-500", value: "PENDING" },
@@ -96,7 +97,11 @@ const PCP = () => {
   }
 
   if (projectsQuery.isLoading) {
-    return <p>loading...</p>;
+    return (
+      <section className="mt-4 h-[80dvh] w-full">
+        <Loader />
+      </section>
+    );
   }
 
   return (
diff --git a/components/Notifications.tsx b/components/Notifications.tsx
index ff17afb..110c4b7 100644
--- a/components/Notifications.tsx
+++ b/components/Notifications.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Menu, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
 import NotificationIcon from "./icons/NotificationIcon";
 import NotificationCard from "./NotificationCard";
@@ -19,6 +19,19 @@ const Notifications = () => {
   const [showRulerModal, setShowRulerModal] = useState<boolean>(false);
   const [notificationId, setNotificationId] = useState<number>(0);
 
+  useEffect(() => {
+    const onClickOutsideButton = (e: MouseEvent) => {
+      const clickOnIcon =
+        (e.target as HTMLElement) ===
+        document.getElementById("user-profile-photo");
+      if (!clickOnIcon) setIsActive(false);
+      else if (clickOnIcon && isActive) setIsActive(true);
+      else setIsActive(false);
+    };
+    document.addEventListener("click", onClickOutsideButton);
+    return () => document.removeEventListener("click", onClickOutsideButton);
+  }, [isActive]);
+
   const notificationsQuery = useQuery({
     queryKey: ["notifications"],
     queryFn: () => getNotifications(),
diff --git a/components/UserIconNavbar.tsx b/components/UserIconNavbar.tsx
index d40678c..1160a7c 100644
--- a/components/UserIconNavbar.tsx
+++ b/components/UserIconNavbar.tsx
@@ -27,13 +27,16 @@ const UserIconNavbar = ({ path }: UserIconInterface) => {
 
   useEffect(() => {
     const onClickOutsideButton = (e: MouseEvent) => {
-      if (!(e.target as HTMLElement).closest(".group")) {
-        setIsClicked(false);
-      }
+      const clickOnIcon =
+        (e.target as HTMLElement) ===
+        document.getElementById("user-profile-photo");
+      if (!clickOnIcon) setIsClicked(false);
+      else if (clickOnIcon && isClicked) setIsClicked(true);
+      else setIsClicked(false);
     };
     document.addEventListener("click", onClickOutsideButton);
     return () => document.removeEventListener("click", onClickOutsideButton);
-  }, []);
+  }, [isClicked]);
 
   return (
     <>
@@ -46,7 +49,6 @@ const UserIconNavbar = ({ path }: UserIconInterface) => {
       <Menu as="div" className="relative inline-block text-left">
         <Menu.Button
           data-testid="user-icon-navbar"
-          as="div"
           onClick={() => setIsClicked(!isClicked)}
           className={`${onSite || isClicked ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} flex rounded-full drop-shadow-lg`}
         >
diff --git a/components/UserProfileButton.tsx b/components/UserProfileButton.tsx
index 6452bbf..7d08f2c 100644
--- a/components/UserProfileButton.tsx
+++ b/components/UserProfileButton.tsx
@@ -28,6 +28,7 @@ const UserProfileButton = ({
     >
       {photoUrl ? (
         <Image
+          id="user-profile-photo"
           src={photoUrl}
           alt={"User profile photo"}
           className={`rounded-full ${sizes[size]}`}
diff --git a/services/notifications.ts b/services/notifications.ts
index 9d97ca2..a7d17ae 100644
--- a/services/notifications.ts
+++ b/services/notifications.ts
@@ -17,7 +17,6 @@ import { Notification } from "@/types/types";
 export async function getNotifications() {
   const session = await auth();
   const userId = session?.user?.id;
-  console.log(userId);
   if (!userId) throw new Error("You must be signed in");
 
   const notifications = [];