diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
index 43c3dbb..ac5dc7a 100644
--- a/components/header/Navbar.tsx
+++ b/components/header/Navbar.tsx
@@ -8,6 +8,8 @@ import Image from "next/image";
 // import { useState } from "react";
 import { usePathname } from "next/navigation";
 import { Button } from "../ui/button";
+import { useEffect, useRef, useState } from "react";
+import NotificationDropdown from "../notifications/NotificationDropdown";
 
 // const navItems = ["Dashboard", "Convert"];
 
@@ -20,11 +22,26 @@ const pageNames: Record<string, string> = {
 };
 
 export default function Navbar() {
+  const [notifOpen, setNotifOpen] = useState(false);
+  const notifRef = useRef<HTMLDivElement>(null);
   const pathname = usePathname();
-
   const currentPageName = pageNames[pathname] || "Dashboard";
   const { toggleMobile, isCollapsed, isMobileOpen } = useSidebarStore();
 
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        notifRef.current &&
+        !notifRef.current.contains(event.target as Node)
+      ) {
+        setNotifOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   return (
     <nav
       className={`flex fixed z-40 top-0 px-4 py-6 justify-between items-center self-stretch backdrop-blur-2xl transition-all duration-300 left-0 right-0 
@@ -57,8 +74,16 @@ export default function Navbar() {
       {/* Right section */}
       <div className="flex items-center space-x-4">
         {/* Notification/Settings Icon */}
-        <div className="md:w-9 md:h-9 w-7 h-7 bg-gray-50 rounded-full flex items-center justify-center">
-          <BellDot className="w-5 h-5 text-black" />
+        <div className="relative" ref={notifRef}>
+          <button
+            aria-label="Notifications"
+            onClick={() => setNotifOpen((prev) => !prev)}
+            className="md:w-9 md:h-9 w-7 h-7 bg-gray-50 rounded-full flex items-center justify-center"
+          >
+            <BellDot className="w-5 h-5 text-black" />
+          </button>
+
+          {notifOpen && <NotificationDropdown setIsOpen={setNotifOpen} />}
         </div>
 
         {/* Avatar */}
diff --git a/components/notifications/NotificationDropdown.tsx b/components/notifications/NotificationDropdown.tsx
new file mode 100644
index 0000000..6fd0aa7
--- /dev/null
+++ b/components/notifications/NotificationDropdown.tsx
@@ -0,0 +1,119 @@
+import {
+  useMarkAllAsRead,
+  useNotifications,
+} from "@/hooks/notification/useNotifications";
+import {
+  ArrowLeft,
+  CalendarDays,
+  CircleUserRound,
+  Download,
+  RefreshCw,
+  Settings,
+} from "lucide-react";
+import { useState } from "react";
+
+interface NotificationDropdownProps {
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+const notifications = [
+  {
+    id: 1,
+    icon: <CircleUserRound className="text-gray-600" />,
+    message: "Your KYC documents have been submitted for review.",
+    createdAt: "3 mins ago",
+    type: "info",
+  },
+  {
+    id: 2,
+    icon: <Download className="text-[#009411]" />,
+    message: "Deposit of ₦50,000 received successfully.",
+    createdAt: "1 hr ago",
+    type: "success",
+  },
+  {
+    id: 3,
+    icon: <RefreshCw className="text-[#E58600]" />,
+    message: "Swap from BNB to ETH was successful.",
+    createdAt: "5 hr ago",
+    type: "swap",
+  },
+];
+
+export default function NotificationDropdown({
+  setIsOpen,
+}: NotificationDropdownProps) {
+  // For now, I will use the dummy data for notifications because the userId is not available yet. But eventually, the userId will be passed into this custom hook and the data will be looped over.
+  const { data } = useNotifications("123e4567-e89b-12d3-a456-426614174000");
+
+  const { mutate: markAllAsRead, isPending } = useMarkAllAsRead();
+  const [checked, setChecked] = useState(false);
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    setChecked(isChecked);
+
+    if (isChecked) {
+      // This userId should be replaced with the real one
+      markAllAsRead("123e4567-e89b-12d3-a456-426614174000");
+    }
+  };
+
+  console.log(data);
+
+  return (
+    <div className="max-sm:fixed max-sm:inset-0 max-sm:h-screen md:absolute right-0 top-12 w-[400px] bg-white border border-gray-200 rounded-lg shadow-lg z-50">
+      <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <ArrowLeft
+            className="cursor-pointer md:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <h2 className="text-xl font-semibold text-gray-900">Notifications</h2>
+        </div>
+        <div className="flex items-center space-x-4">
+          <label className="flex items-center space-x-2 text-sm text-gray-600 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={checked}
+              onChange={handleCheckboxChange}
+              disabled={isPending}
+              className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            />
+            <span>Mark all as read</span>
+          </label>
+          <button className="p-1 hover:bg-gray-100 rounded-full transition-colors">
+            <Settings className="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+      <div className="md:max-h-64 overflow-y-auto p-4 space-y-3">
+        {notifications.map((notification) => (
+          <div
+            key={notification.id}
+            className="flex items-start space-x-3 p-4 hover:bg-gray-50 transition-colors border border-gray-200 rounded-xl"
+          >
+            <div className="flex-shrink-0 mt-0.5">{notification?.icon}</div>
+
+            <div className="flex-1 min-w-0">
+              <p className="text-gray-900 text-sm leading-relaxed">
+                {notification.message}
+              </p>
+
+              <div className="flex items-center mt-2 text-xs text-teal-600">
+                <CalendarDays className="w-3 h-3 mr-1" />
+                {notification.createdAt}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* Change this later to the data coming from the useNotifications hook */}
+      {notifications.length === 0 && (
+        <div className="p-4 text-center text-gray-500">
+          No new notifications
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/hooks/notification/useNotifications.ts b/hooks/notification/useNotifications.ts
new file mode 100644
index 0000000..4f8b2f4
--- /dev/null
+++ b/hooks/notification/useNotifications.ts
@@ -0,0 +1,32 @@
+import { notificationService } from "@/services/api/notificationService";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export function useNotifications(userId: string) {
+  return useQuery({
+    queryKey: ["notifications"],
+    queryFn: () => notificationService.getNotifications(userId),
+  });
+}
+
+export function useMarkNotificationRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (notificationId: string) =>
+      notificationService.markAsRead(notificationId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    },
+  });
+}
+
+export function useMarkAllAsRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) => notificationService.markAllAsRead(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    },
+  });
+}
diff --git a/services/api/config.ts b/services/api/config.ts
index 6f49895..0bf728b 100644
--- a/services/api/config.ts
+++ b/services/api/config.ts
@@ -25,7 +25,6 @@ export const API_ENDPOINTS = {
     REFRESH: "/auth/refresh",
   },
 
-
   // Transactions endpoints
   TRANSACTIONS: {
     ALL: "/transactions",
@@ -34,4 +33,12 @@ export const API_ENDPOINTS = {
     GET: (id: string) => `/transactions/${id}`,
     UPDATE: (id: string) => `/transactions/${id}`,
   },
+
+  // Notification endpoints
+  NOTIFICATIONS: {
+    CREATE: "/notifications",
+    GET: (userId: string) => `/notifications/unread/${userId}`,
+    MARK_READ: (notifId: string) => `/notifications/mark-read/${notifId}`,
+    MARK_ALL_READ: (userId: string) => `/notifications/mark-all-read/${userId}`,
+  },
 };
diff --git a/services/api/notificationService.ts b/services/api/notificationService.ts
new file mode 100644
index 0000000..2c13fb1
--- /dev/null
+++ b/services/api/notificationService.ts
@@ -0,0 +1,86 @@
+import axiosClient from "./axiosClient";
+import { API_ENDPOINTS } from "./config";
+
+export interface Notification {
+  id: string;
+  userId: string;
+  type: NotificationType;
+  category: NotificationCategory;
+  title: string;
+  message: string;
+  isRead: boolean;
+  priority: NotificationPriority;
+  relatedEntityType?: string;
+  relatedEntityId?: string;
+  channel: NotificationChannel;
+  expirationDate?: string;
+  actionUrl?: string;
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export enum NotificationCategory {
+  INFO = "INFO",
+  WARNING = "WARNING",
+  SUCCESS = "SUCCESS",
+  ERROR = "ERROR",
+  CRITICAL = "CRITICAL",
+}
+
+export enum NotificationChannel {
+  IN_APP = "IN_APP",
+  EMAIL = "EMAIL",
+  SMS = "SMS",
+  PUSH_NOTIFICATION = "PUSH_NOTIFICATION",
+  BOTH = "both",
+}
+
+export enum NotificationPriority {
+  LOW = "LOW",
+  MEDIUM = "MEDIUM",
+  HIGH = "HIGH",
+  URGENT = "URGENT",
+}
+
+export enum NotificationType {
+  SYSTEM = "SYSTEM",
+  PROJECT = "PROJECT",
+  TRANSACTION = "TRANSACTION",
+  MESSAGING = "MESSAGING",
+  CONTRIBUTION = "CONTRIBUTION",
+  INVITATION = "INVITATION",
+  SWAP_COMPLETED = "swap_completed",
+  WALLET_UPDATED = "wallet_updated",
+  TRANSACTION_FAILED = "transaction_failed",
+  DEPOSIT_CONFIRMED = "deposit_confirmed",
+  WITHDRAWAL_PROCESSED = "withdrawal_processed",
+  DEPOSIT_PENDING = "deposit_pending",
+}
+
+const getNotifications = async (userId: string): Promise<Notification[]> => {
+  const response = await axiosClient.get(
+    API_ENDPOINTS.NOTIFICATIONS.GET(userId)
+  );
+  return response.data;
+};
+
+const markAsRead = async (notifId: string): Promise<{ message: string }> => {
+  const response = await axiosClient.patch(
+    API_ENDPOINTS.NOTIFICATIONS.MARK_READ(notifId)
+  );
+  return response.data;
+};
+
+const markAllAsRead = async (userId: string): Promise<{ message: string }> => {
+  const response = await axiosClient.patch(
+    API_ENDPOINTS.NOTIFICATIONS.MARK_ALL_READ(userId)
+  );
+  return response.data;
+};
+
+export const notificationService = {
+  getNotifications,
+  markAsRead,
+  markAllAsRead,
+};