diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index fd7caa640..d7aba2236 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -20,6 +20,10 @@ import { usePlan } from "@/lib/swr/use-billing";
 import Image from "next/image";
 import SelectTeam from "./teams/select-team";
 import { TeamContextType, initialState, useTeam } from "@/context/team-context";
+import NotificationDropdown from "./notifications/notification-dropdown";
+import { Bell, Webhook } from "lucide-react";
+import useNotifications from "@/lib/swr/use-notifications";
+import { mutate } from "swr";
 
 export default function Sidebar() {
   const { data: session, status } = useSession();
@@ -31,6 +35,8 @@ export default function Sidebar() {
   const { currentTeam, teams, isLoading }: TeamContextType =
     useTeam() || initialState;
 
+  const { notifications } = useNotifications();
+
   const navigation = [
     // {
     //   name: "Overview",
@@ -53,6 +59,13 @@ export default function Sidebar() {
       current: router.pathname.includes("analytics"),
       disabled: true,
     },
+    {
+      name: "Webhooks",
+      href: "/webhooks",
+      icon: Webhook,
+      current: router.pathname.includes("webhooks"),
+      disabled: false,
+    },
     {
       name: "Settings",
       href: "/settings/general",
@@ -75,6 +88,16 @@ export default function Sidebar() {
 
   const userPlan = plan && plan.plan;
 
+  const getUnReadNotificationCount = () => {
+    let count = 0;
+    for (let notification of notifications || []) {
+      if (!notification.isRead) {
+        count++;
+      }
+    }
+    return count;
+  };
+
   return (
     <>
       <Transition.Root show={sidebarOpen} as={Fragment}>
@@ -186,7 +209,7 @@ export default function Sidebar() {
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
         {/* Sidebar component, swap this element with another sidebar if you like */}
         <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-50 dark:bg-black px-6">
-          <div className="flex h-16 shrink-0 items-center">
+          <div className="flex h-16 shrink-0 justify-between items-center">
             <p className="text-2xl font-bold tracking-tighter text-black dark:text-white flex items-center">
               Papermark{" "}
               {userPlan == "pro" ? (
@@ -195,6 +218,18 @@ export default function Sidebar() {
                 </span>
               ) : null}
             </p>
+            <NotificationDropdown notifications={notifications || []}>
+              <div className="relative bg-gray-200 text-secondary-foreground dark:bg-secondary p-2 rounded-full hover:cursor-pointer">
+                <Bell />
+                {getUnReadNotificationCount() !== 0 && (
+                  <strong className="absolute flex items-center justify-center -top-1 -right-3 text-xs bg-destructive/90 text-primary-foreground dark:text-secondary-foreground rounded-full p-1 h-6 w-6">
+                    {getUnReadNotificationCount() > 9
+                      ? "9+"
+                      : getUnReadNotificationCount()}
+                  </strong>
+                )}
+              </div>
+            </NotificationDropdown>
           </div>
           <nav className="flex flex-1 flex-col">
             <SelectTeam
diff --git a/components/notifications/notification-dropdown.tsx b/components/notifications/notification-dropdown.tsx
new file mode 100644
index 000000000..0270335ac
--- /dev/null
+++ b/components/notifications/notification-dropdown.tsx
@@ -0,0 +1,86 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Notifications } from "@/lib/types";
+import { Badge } from "@/components/ui/badge";
+import { Bell } from "lucide-react";
+import { mutate } from "swr";
+import { useRouter } from "next/router";
+import { timeAgo } from "@/lib/utils";
+import { useTeam } from "@/context/team-context";
+import { Notification } from "@prisma/client";
+
+export default function NotificationDropdown({
+  children,
+  notifications,
+}: {
+  children: React.ReactNode;
+  notifications: Notifications[];
+}) {
+  const router = useRouter();
+  const teamInfo = useTeam();
+
+  const markNotificationRead = async (
+    notificationId: string,
+    documentId: string,
+  ) => {
+    const response = await fetch(
+      `/api/teams/${teamInfo?.currentTeam?.id}/notifications/${notificationId}/mark-read`,
+      {
+        method: "POST",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const notification = (await response.json()) as Notification;
+    console.log(notification);
+    if (notification.event === "DOCUMENT_DELETED") return;
+
+    if (documentId) {
+      router.push(`/documents/${documentId}`);
+    }
+
+    mutate(`/api/teams/${teamInfo?.currentTeam?.id}/notifications`);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="outline-none">
+        {children}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-72 max-h-96 divide-y overflow-y-scroll no-scrollbar">
+        <DropdownMenuLabel>My Notifications</DropdownMenuLabel>
+        {notifications.length === 0 ? (
+          <div className="py-6 h-5/6 flex flex-col gap-3 items-center justify-center">
+            <Bell className="h-6 w-6" />
+            <p className="select-none">No Notifications</p>
+          </div>
+        ) : (
+          notifications.map((notification) => (
+            <DropdownMenuItem
+              className="relative py-4 pr-4 flex gap-3 hover:cursor-pointer"
+              onClick={() =>
+                markNotificationRead(notification.id, notification?.documentId)
+              }
+            >
+              {notification.message}
+              {!notification.isRead && (
+                <Badge className="absolute top-[45%] right-1 p-1 bg-green-500"></Badge>
+              )}
+              <span className="absolute bottom-0.5 right-0.5 text-xs text-foreground">
+                {timeAgo(notification.createdAt)}
+              </span>
+            </DropdownMenuItem>
+          ))
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index f000e3ef5..9ec9a1a04 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -21,7 +21,7 @@ const badgeVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/components/webhooks/add-webhook-modal.tsx b/components/webhooks/add-webhook-modal.tsx
new file mode 100644
index 000000000..afe4ef003
--- /dev/null
+++ b/components/webhooks/add-webhook-modal.tsx
@@ -0,0 +1,162 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { toast } from "sonner";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Event } from "@prisma/client";
+import { mutate } from "swr";
+import { useTeam } from "@/context/team-context";
+
+interface webhookProps {
+  eventType: Event;
+  displayText: string;
+}
+
+const webhooks: webhookProps[] = [
+  {
+    eventType: "DOCUMENT_ADDED",
+    displayText: "document.uploaded",
+  },
+  {
+    eventType: "DOCUMENT_VIEWED",
+    displayText: "document.viewed",
+  },
+  {
+    eventType: "DOCUMENT_DELETED",
+    displayText: "document.deleted",
+  },
+];
+
+export function AddWebhookModal({ children }: { children: React.ReactNode }) {
+  const [targetUrl, setTargetUrl] = useState<string>("");
+  const [creating, setCreating] = useState<boolean>(false);
+  const [events, setEvents] = useState<Event[]>([]);
+  const [urlError, setUrlError] = useState<string>("");
+  const [checkboxError, setCheckboxError] = useState<string>("");
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  const teamInfo = useTeam();
+
+  const handleWebhookCreation = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setCreating(true);
+
+    if (!targetUrl) {
+      setCreating(false);
+      setUrlError("please enter the endpoint url");
+      return;
+    }
+
+    if (events.length === 0) {
+      setCreating(false);
+      setCheckboxError("please select any one of the events");
+      return;
+    }
+
+    // create a document in the database with the blob url
+    const response = await fetch(
+      `/api/teams/${teamInfo?.currentTeam?.id}/webhooks`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          targetUrl,
+          events,
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      setCreating(false);
+      toast.error(`HTTP error! status: ${response.status}`);
+      setModalOpen(false);
+    }
+
+    setCreating(false);
+    mutate(`/api/teams/${teamInfo?.currentTeam?.id}/webhooks`);
+    toast.success("Webhook created successfully!");
+    setModalOpen(false);
+  };
+
+  const handleEventSelect = (value: Event) => {
+    console.log("selected");
+
+    if (events.includes(value)) {
+      setEvents(events.filter((event) => event !== value));
+    } else {
+      setEvents([...events, value]);
+    }
+  };
+
+  return (
+    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+      <DialogTrigger onClick={() => setModalOpen(true)} asChild>
+        {children}
+      </DialogTrigger>
+      <DialogContent className="text-foreground bg-background">
+        <DialogHeader>
+          <DialogTitle>Add Webhook</DialogTitle>
+          <DialogDescription>
+            <form
+              encType="multipart/form-data"
+              onSubmit={handleWebhookCreation}
+              className="flex flex-col gap-3"
+            >
+              <div className="my-4 space-y-2">
+                <Label htmlFor="endpoint">Endpoint URL</Label>
+                <Input
+                  id="enpoint"
+                  placeholder="https://"
+                  onChange={(e) => setTargetUrl(e.target.value)}
+                />
+                {urlError && !targetUrl && (
+                  <p className="text-xs text-red-500">{urlError}</p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label>Select events to listen</Label>
+
+                <div className="space-y-3">
+                  {webhooks.map((webhook, index) => (
+                    <div className="flex items-center gap-2" key={index}>
+                      <Checkbox
+                        id={`${index}`}
+                        onCheckedChange={() =>
+                          handleEventSelect(webhook.eventType)
+                        }
+                      />
+                      <Label htmlFor={`${index}`}>{webhook.displayText}</Label>
+                    </div>
+                  ))}
+
+                  {checkboxError && (
+                    <p className="text-xs text-red-500">{checkboxError}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex justify-start mt-3">
+                <Button type="submit" loading={creating}>
+                  {creating ? "Creating..." : "Create Webhook"}
+                </Button>
+              </div>
+            </form>
+          </DialogDescription>
+        </DialogHeader>
+        ∆
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/webhooks/webhook-table.tsx b/components/webhooks/webhook-table.tsx
new file mode 100644
index 000000000..edc508687
--- /dev/null
+++ b/components/webhooks/webhook-table.tsx
@@ -0,0 +1,107 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Webhook } from "@prisma/client";
+import MoreHorizontal from "@/components/shared/icons/more-horizontal";
+import { timeAgo } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { mutate } from "swr";
+import { useTeam } from "@/context/team-context";
+
+export function WebhookTable({ webhooks }: { webhooks: Webhook[] }) {
+  const teamInfo = useTeam();
+
+  const removeWebhook = async (webhookId: string) => {
+    const response = await fetch(
+      `/api/teams/${teamInfo?.currentTeam?.id}/webhooks/${webhookId}`,
+      {
+        method: "DELETE",
+      },
+    );
+
+    if (response.status !== 204) {
+      const error = await response.json();
+      toast.error(error);
+      return;
+    }
+    toast.success("Webhook deleted successfully!");
+    await mutate(`/api/teams/${teamInfo?.currentTeam?.id}/webhooks`);
+  };
+
+  return (
+    <div className="border rounded-lg">
+      <Table className="my-4">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Endpoints</TableHead>
+            {/* <TableHead className="text-right">Status</TableHead> */}
+            <TableHead className="text-center">Created</TableHead>
+            <TableHead className="w-6"></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {webhooks.length === 0 && (
+            <TableRow>
+              <TableCell className="font-medium">
+                <Skeleton className="h-6 w-72" />
+              </TableCell>
+              <TableCell className="text-right">
+                <Skeleton className="m-auto h-6 w-24" />
+              </TableCell>
+              {/* <TableCell className="text-right">
+                <Skeleton className="ml-auto h-6 w-24" />
+              </TableCell> */}
+              <TableCell>
+                <Skeleton className="h-6 w-6" />
+              </TableCell>
+            </TableRow>
+          )}
+          {webhooks.map((webhook) => (
+            <TableRow>
+              <TableCell className="font-medium">{webhook.targetUrl}</TableCell>
+              {/* <TableCell className="text-right">
+                <Badge variant={"secondary"}>Enabled</Badge>
+              </TableCell> */}
+              <TableCell className="text-center">
+                {timeAgo(webhook.createdAt)}
+              </TableCell>
+              <TableCell>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                      <span className="sr-only">Open menu</span>
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      className="text-red-500 focus:bg-destructive focus:text-destructive-foreground hover:cursor-pointer"
+                      onClick={() => removeWebhook(webhook.id)}
+                    >
+                      Remove Webhook
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/lib/notifications/notification-handlers.ts b/lib/notifications/notification-handlers.ts
new file mode 100644
index 000000000..72d6b5809
--- /dev/null
+++ b/lib/notifications/notification-handlers.ts
@@ -0,0 +1,101 @@
+import prisma from "@/lib/prisma";
+import {
+  DocumentDeletedData,
+  DocumentUploadedData,
+  DocumentViewdData,
+  EventData,
+} from "../webhooks/types";
+import { client } from "@/trigger";
+
+export async function handleDocumentViewed(eventData: DocumentViewdData) {
+  try {
+    const viewerEmail = eventData.viewerEmail;
+    const documentName = eventData.documentName;
+    const message = viewerEmail
+      ? `${viewerEmail} viewed your ${documentName}`
+      : `Someone viewed your ${documentName}`;
+
+    const notification = await prisma.notification.create({
+      data: {
+        teamId: eventData.teamId,
+        userId: eventData.ownerId,
+        event: "DOCUMENT_VIEWED",
+        message,
+        linkId: eventData.link.id,
+        documentId: eventData.documentId,
+      },
+    });
+
+    // notify the user (via email)
+    // TODO: check if user has allow email notification if yes then send the email notification
+    const user = await prisma.user.findUnique({
+      where: {
+        id: eventData.ownerId,
+      },
+    });
+
+    // check if user has enabled email notification, if yes then check if the link has enable email notification
+    if (user?.isEmailNotificationEnabled) {
+      // notify user via email
+      if (eventData.link.enableNotification) {
+        // trigger link viewed event to trigger send-notification job
+        console.time("sendemail");
+        await client.sendEvent({
+          name: "link.viewed",
+          payload: { viewId: eventData.viewId },
+        });
+        console.timeEnd("sendemail");
+      }
+    }
+
+    return notification;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function handleDocumentUploaded(eventData: DocumentUploadedData) {
+  try {
+    const documentName = eventData.documentName;
+    const documentOwnerName = eventData.ownerName;
+    const message = `A new document ${documentName} uploaded by ${documentOwnerName}`;
+
+    const notification = await prisma.notification.create({
+      data: {
+        teamId: eventData.teamId,
+        userId: eventData.ownerId,
+        event: "DOCUMENT_ADDED",
+        message,
+        documentId: eventData.documentId,
+      },
+    });
+
+    // TODO: send email notification on document upload
+
+    return notification;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function handleDocumentDeleted(eventData: DocumentDeletedData) {
+  try {
+    const documentName = eventData.documentName;
+    const documentOwnerName = eventData.ownerName;
+    const message = `Document ${documentName} is deleted by ${documentOwnerName}`;
+
+    const notification = await prisma.notification.create({
+      data: {
+        teamId: eventData.teamId,
+        userId: eventData.ownerId,
+        event: "DOCUMENT_DELETED",
+        message,
+        documentId: eventData.documentId,
+      },
+    });
+
+    return notification;
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/lib/swr/use-notifications.ts b/lib/swr/use-notifications.ts
new file mode 100644
index 000000000..6a6b77606
--- /dev/null
+++ b/lib/swr/use-notifications.ts
@@ -0,0 +1,24 @@
+import { Event } from "@prisma/client";
+import useSWR from "swr";
+import { fetcher } from "../utils";
+import { Notifications } from "@/lib/types";
+import { useTeam } from "@/context/team-context";
+
+export default function useNotifications() {
+  const teamInfo = useTeam();
+
+  const { data: notifications, isValidating } = useSWR<Notifications[]>(
+    `/api/teams/${teamInfo?.currentTeam?.id}/notifications`,
+    fetcher,
+    {
+      dedupingInterval: 30000,
+      revalidateOnFocus: true,
+    },
+  );
+
+  return {
+    notifications,
+    loading: notifications ? false : true,
+    isValidating,
+  };
+}
diff --git a/lib/swr/use-webhooks.ts b/lib/swr/use-webhooks.ts
new file mode 100644
index 000000000..a1792d96f
--- /dev/null
+++ b/lib/swr/use-webhooks.ts
@@ -0,0 +1,23 @@
+import { Webhook } from "@prisma/client";
+import useSWR from "swr";
+import { fetcher } from "../utils";
+import { useTeam } from "@/context/team-context";
+
+export default function useWebhooks() {
+  const teamInfo = useTeam();
+
+  const { data: webhooks, isValidating } = useSWR<Webhook[]>(
+    `/api/teams/${teamInfo?.currentTeam?.id}/webhooks`,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: 60000,
+    },
+  );
+
+  return {
+    webhooks,
+    loading: webhooks ? false : true,
+    isValidating,
+  };
+}
diff --git a/lib/team/helper.ts b/lib/team/helper.ts
index 63698732d..fc2addf91 100644
--- a/lib/team/helper.ts
+++ b/lib/team/helper.ts
@@ -23,6 +23,11 @@ interface IDocumentWithLink {
   options?: {};
 }
 
+interface ITeamWithUser {
+  teamId: string;
+  userId: string;
+}
+
 export async function getTeamWithUsersAndDocument({
   teamId,
   userId,
@@ -155,3 +160,31 @@ export async function getDocumentWithTeamAndUser({
 
   return { document };
 }
+
+export async function getTeamWithUser({ teamId, userId }: ITeamWithUser) {
+  const team = await prisma.team.findUnique({
+    where: {
+      id: teamId,
+    },
+    include: {
+      users: {
+        select: {
+          userId: true,
+        },
+      },
+    },
+  });
+
+  // check if the team exists
+  if (!team) {
+    throw new TeamError("Team doesn't exists");
+  }
+
+  // check if the user is part the team
+  const teamHasUser = team?.users.some((user) => user.userId === userId);
+  if (!teamHasUser) {
+    throw new TeamError("You are not a member of the team");
+  }
+
+  return { team };
+}
diff --git a/lib/types.ts b/lib/types.ts
index 17ad24104..40f37e41c 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -5,6 +5,7 @@ import {
   View,
   User as PrismaUser,
   DocumentVersion,
+  Event,
 } from "@prisma/client";
 
 export type CustomUser = NextAuthUser & PrismaUser;
@@ -189,3 +190,13 @@ export interface TeamDetail {
     userId: string;
   }[];
 }
+
+export interface Notifications {
+  id: string;
+  userId: string;
+  event: Event;
+  message: string;
+  documentId: string;
+  isRead: boolean;
+  createdAt: Date;
+}
diff --git a/lib/webhooks/index.ts b/lib/webhooks/index.ts
new file mode 100644
index 000000000..60cc64a4c
--- /dev/null
+++ b/lib/webhooks/index.ts
@@ -0,0 +1,76 @@
+import crypto from "crypto";
+import prisma from "@/lib/prisma";
+import { IWebhookTrigger } from "./types";
+
+export async function triggerWebhooks({
+  eventType,
+  eventData,
+}: IWebhookTrigger) {
+  try {
+    const webhooks = await prisma.webhook.findMany({
+      where: {
+        teamId: eventData.teamId,
+        events: {
+          has: eventType,
+        },
+      },
+      select: {
+        targetUrl: true,
+      },
+    });
+
+    for (let webhook of webhooks) {
+      // send the post request to the webhook's target url
+      await sendToWebhookEndpoint(webhook.targetUrl, {
+        eventType,
+        eventData,
+      });
+    }
+
+    // send data to internal webhook endpoint for notifications
+    const internalNotificationWebhook = `${process.env.NEXT_PUBLIC_BASE_URL}/api/teams/${eventData.teamId}/notifications/webhooks`;
+    await sendToWebhookEndpoint(internalNotificationWebhook, {
+      eventType,
+      eventData,
+    });
+  } catch (error) {
+    console.log(error as Error);
+  }
+}
+
+async function sendToWebhookEndpoint(url: string, data: any) {
+  const signature = generateSignature(JSON.stringify(data));
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-signature": signature,
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!res.ok) {
+    throw new Error(`HTTP error! status: ${res.status}`);
+  }
+
+  return res;
+}
+
+const SECRET_KEY = process.env.WEBHOOK_SECRET_KEY as string;
+
+export function generateSignature(data: string) {
+  return crypto.createHmac("sha256", SECRET_KEY).update(data).digest("hex");
+}
+
+export function verifySignature(body: string, signature: string) {
+  if (!body || !signature) {
+    return false;
+  }
+
+  const hash = crypto
+    .createHmac("sha256", SECRET_KEY)
+    .update(body)
+    .digest("hex");
+
+  return crypto.timingSafeEqual(Buffer.from(hash), Buffer.from(signature));
+}
diff --git a/lib/webhooks/types.ts b/lib/webhooks/types.ts
new file mode 100644
index 000000000..e1910dcda
--- /dev/null
+++ b/lib/webhooks/types.ts
@@ -0,0 +1,41 @@
+import { Event } from "@prisma/client";
+
+export interface DocumentViewdData {
+  ownerId: string;
+  ownerEmail: string;
+  ownerName: string;
+  teamId: string;
+  teamName: string;
+  documentId: string;
+  documentName: string;
+  viewerEmail: string;
+  link: {
+    id: string;
+    enableNotification: boolean;
+  };
+  viewId: string;
+}
+
+export interface DocumentUploadedData {
+  ownerId: string;
+  ownerEmail: string;
+  ownerName: string;
+  teamId: string;
+  teamName: string;
+  documentId: string;
+  documentName: string;
+  numPages: number;
+  type: string;
+  fileUrl: string;
+}
+
+export interface DocumentDeletedData extends DocumentUploadedData {}
+
+type EventType = Event;
+
+export type EventData = DocumentViewdData | DocumentUploadedData;
+
+export interface IWebhookTrigger {
+  eventType: EventType;
+  eventData: EventData;
+}
diff --git a/pages/api/stripe/webhook.ts b/pages/api/stripe/webhook.ts
index c596caf14..56449a4d1 100644
--- a/pages/api/stripe/webhook.ts
+++ b/pages/api/stripe/webhook.ts
@@ -138,7 +138,9 @@ export default async function webhookHandler(
           });
 
           if (!user) {
-            await log("User not found in Stripe webhook `customer.subscription.deleted` callback");
+            await log(
+              "User not found in Stripe webhook `customer.subscription.deleted` callback"
+            );
             return;
           }
 
diff --git a/pages/api/teams/[teamId]/documents/[id]/index.ts b/pages/api/teams/[teamId]/documents/[id]/index.ts
index f07ae1bdc..bdd42e451 100644
--- a/pages/api/teams/[teamId]/documents/[id]/index.ts
+++ b/pages/api/teams/[teamId]/documents/[id]/index.ts
@@ -6,10 +6,11 @@ import { CustomUser } from "@/lib/types";
 import { del } from "@vercel/blob";
 import { getTeamWithUsersAndDocument } from "@/lib/team/helper";
 import { errorhandler } from "@/lib/errorHandler";
+import { triggerWebhooks } from "@/lib/webhooks";
 
 export default async function handle(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   if (req.method === "GET") {
     // GET /api/teams/:teamId/documents/:id
@@ -61,7 +62,7 @@ export default async function handle(
     const userId = (session.user as CustomUser).id;
 
     try {
-      const { document } = await getTeamWithUsersAndDocument({
+      const { document, team } = await getTeamWithUsersAndDocument({
         teamId,
         userId,
         docId,
@@ -78,10 +79,30 @@ export default async function handle(
       // delete the document from vercel blob
       await del(document!.file);
       // delete the document from database
-      await prisma.document.delete({
+      const deletedDocument = await prisma.document.delete({
         where: {
           id: docId,
         },
+        include: {
+          owner: true,
+        },
+      });
+
+      // trigger webhook and notification
+      await triggerWebhooks({
+        eventType: "DOCUMENT_DELETED",
+        eventData: {
+          ownerId: deletedDocument.ownerId,
+          ownerEmail: deletedDocument.owner.email as string,
+          ownerName: deletedDocument.owner.name as string,
+          teamId: deletedDocument.teamId as string,
+          teamName: team.name,
+          documentId: deletedDocument.id,
+          documentName: deletedDocument.name,
+          numPages: deletedDocument.numPages as number,
+          type: deletedDocument.type as string,
+          fileUrl: deletedDocument.file,
+        },
       });
 
       return res.status(204).end(); // 204 No Content response for successful deletes
diff --git a/pages/api/teams/[teamId]/documents/index.ts b/pages/api/teams/[teamId]/documents/index.ts
index 5cc4b146a..e027ce8cd 100644
--- a/pages/api/teams/[teamId]/documents/index.ts
+++ b/pages/api/teams/[teamId]/documents/index.ts
@@ -8,6 +8,7 @@ import { identifyUser, trackAnalytics } from "@/lib/analytics";
 import { getTeamWithUsersAndDocument } from "@/lib/team/helper";
 import { errorhandler } from "@/lib/errorHandler";
 import { client } from "@/trigger";
+import { triggerWebhooks } from "@/lib/webhooks";
 
 export default async function handle(
   req: NextApiRequest,
@@ -76,7 +77,7 @@ export default async function handle(
     };
 
     try {
-      await getTeamWithUsersAndDocument({
+      const { team } = await getTeamWithUsersAndDocument({
         teamId,
         userId,
       });
@@ -111,6 +112,7 @@ export default async function handle(
         include: {
           links: true,
           versions: true,
+          owner: true,
         },
       });
 
@@ -146,6 +148,22 @@ export default async function handle(
         });
       }
 
+      // trigger webhook and notification
+      await triggerWebhooks({
+        eventType: "DOCUMENT_ADDED",
+        eventData: {
+          ownerId: document.ownerId,
+          ownerEmail: document.owner.email as string,
+          ownerName: document.owner.name as string,
+          teamId: document.teamId as string,
+          teamName: team.name,
+          documentId: document.id,
+          documentName: document.name,
+          numPages: document.numPages as number,
+          type: document.type as string,
+          fileUrl: document.file,
+        },
+      });
       return res.status(201).json(document);
     } catch (error) {
       log(
diff --git a/pages/api/teams/[teamId]/notifications/[notificationId]/mark-read.ts b/pages/api/teams/[teamId]/notifications/[notificationId]/mark-read.ts
new file mode 100644
index 000000000..62d17af97
--- /dev/null
+++ b/pages/api/teams/[teamId]/notifications/[notificationId]/mark-read.ts
@@ -0,0 +1,46 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../../../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+import prisma from "@/lib/prisma";
+import { errorhandler } from "@/lib/errorHandler";
+import { getTeamWithUser } from "@/lib/team/helper";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "POST") {
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const { teamId, notificationId } = req.query as {
+      notificationId: string;
+      teamId: string;
+    };
+
+    const userId = (session.user as CustomUser).id;
+
+    try {
+      await getTeamWithUser({ teamId, userId });
+
+      const notifications = await prisma.notification.update({
+        where: {
+          id: notificationId,
+        },
+        data: {
+          isRead: true,
+        },
+      });
+
+      return res.status(200).json(notifications);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    res.setHeader("Allow", ["POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/api/teams/[teamId]/notifications/index.ts b/pages/api/teams/[teamId]/notifications/index.ts
new file mode 100644
index 000000000..365b71ce5
--- /dev/null
+++ b/pages/api/teams/[teamId]/notifications/index.ts
@@ -0,0 +1,43 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+import prisma from "@/lib/prisma";
+import { errorhandler } from "@/lib/errorHandler";
+import { getTeamWithUser } from "@/lib/team/helper";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "GET") {
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const userId = (session.user as CustomUser).id;
+
+    const { teamId } = req.query as { teamId: string };
+
+    try {
+      await getTeamWithUser({ teamId, userId });
+
+      const notifications = await prisma.notification.findMany({
+        where: {
+          teamId,
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+      });
+
+      return res.status(200).json(notifications);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    res.setHeader("Allow", ["GET"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/api/teams/[teamId]/notifications/webhooks.ts b/pages/api/teams/[teamId]/notifications/webhooks.ts
new file mode 100644
index 000000000..5cba8aed1
--- /dev/null
+++ b/pages/api/teams/[teamId]/notifications/webhooks.ts
@@ -0,0 +1,66 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { Notification } from "@prisma/client";
+import {
+  handleDocumentViewed,
+  handleDocumentUploaded,
+  handleDocumentDeleted,
+} from "@/lib/notifications/notification-handlers";
+import { errorhandler } from "@/lib/errorHandler";
+import { verifySignature } from "@/lib/webhooks";
+import {
+  DocumentDeletedData,
+  DocumentUploadedData,
+  DocumentViewdData,
+  IWebhookTrigger,
+} from "@/lib/webhooks/types";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "POST") {
+    //signature verification
+    const signature = req.headers["x-signature"] as string;
+    if (!signature) {
+      return res.status(400).end("x-signature header missing from the request");
+    }
+
+    const body = JSON.stringify(req.body);
+    if (!verifySignature(body, signature)) {
+      return res.status(401).end("Invalid signature");
+    }
+
+    try {
+      const { eventType, eventData } = req.body as IWebhookTrigger;
+
+      // const userId = (session.user as CustomUser).id;
+      let notification: Notification | null = null;
+      switch (eventType) {
+        case "DOCUMENT_VIEWED":
+          notification = await handleDocumentViewed(
+            eventData as DocumentViewdData,
+          );
+          break;
+
+        case "DOCUMENT_ADDED":
+          notification = await handleDocumentUploaded(
+            eventData as DocumentUploadedData,
+          );
+          break;
+
+        case "DOCUMENT_DELETED":
+          notification = await handleDocumentDeleted(
+            eventData as DocumentDeletedData,
+          );
+      }
+
+      // since the internal webhook is for notification purpose we are returning the notification that is being created
+      return res.status(201).json(notification);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    res.setHeader("Allow", ["POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/api/teams/[teamId]/webhooks/[id]/index.ts b/pages/api/teams/[teamId]/webhooks/[id]/index.ts
new file mode 100644
index 000000000..314ff2849
--- /dev/null
+++ b/pages/api/teams/[teamId]/webhooks/[id]/index.ts
@@ -0,0 +1,52 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../../../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+import prisma from "@/lib/prisma";
+import { errorhandler } from "@/lib/errorHandler";
+import { getTeamWithUser } from "@/lib/team/helper";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "DELETE") {
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const userId = (session.user as CustomUser).id;
+
+    const { id } = req.query as { id: string };
+
+    const { teamId } = req.query as { teamId: string };
+
+    try {
+      await getTeamWithUser({ teamId, userId });
+
+      const webhook = await prisma.webhook.findUnique({
+        where: {
+          id,
+        },
+      });
+
+      if (webhook?.teamId !== teamId) {
+        return res.status(401).json("Webhook doesn't belong to this team");
+      }
+
+      await prisma.webhook.delete({
+        where: {
+          id,
+        },
+      });
+
+      return res.status(204).end();
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    res.setHeader("Allow", ["DELETE"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/api/teams/[teamId]/webhooks/index.ts b/pages/api/teams/[teamId]/webhooks/index.ts
new file mode 100644
index 000000000..32bc63b15
--- /dev/null
+++ b/pages/api/teams/[teamId]/webhooks/index.ts
@@ -0,0 +1,70 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+import prisma from "@/lib/prisma";
+import { errorhandler } from "@/lib/errorHandler";
+import { getTeamWithUser } from "@/lib/team/helper";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "POST") {
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const userId = (session.user as CustomUser).id;
+
+    const { teamId } = req.query as { teamId: string };
+
+    const { targetUrl, events } = req.body;
+
+    try {
+      await getTeamWithUser({ teamId, userId });
+
+      const webhook = await prisma.webhook.create({
+        data: {
+          teamId,
+          userId,
+          targetUrl,
+          events,
+        },
+      });
+
+      return res.status(201).json(webhook);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else if (req.method === "GET") {
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const userId = (session.user as CustomUser).id;
+
+    const { teamId } = req.query as { teamId: string };
+
+    try {
+      await getTeamWithUser({ teamId, userId });
+
+      const webhooks = await prisma.webhook.findMany({
+        where: {
+          teamId,
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+      });
+      return res.status(200).json(webhooks);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    res.setHeader("Allow", ["GET", "POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/api/views.ts b/pages/api/views.ts
index cd9dfd276..911532d87 100644
--- a/pages/api/views.ts
+++ b/pages/api/views.ts
@@ -2,7 +2,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 import prisma from "@/lib/prisma";
 import { checkPassword, log } from "@/lib/utils";
 import { trackAnalytics } from "@/lib/analytics";
-import { client } from "@/trigger";
+import { triggerWebhooks } from "@/lib/webhooks";
 
 export default async function handle(
   req: NextApiRequest,
@@ -25,6 +25,7 @@ export default async function handle(
       id: linkId,
     },
     select: {
+      id: true,
       emailProtected: true,
       enableNotification: true,
       password: true,
@@ -68,7 +69,15 @@ export default async function handle(
         viewerEmail: email,
         documentId: documentId,
       },
-      select: { id: true },
+      select: {
+        id: true,
+        document: {
+          include: {
+            owner: true,
+            team: true,
+          },
+        },
+      },
     });
     console.timeEnd("create-view");
 
@@ -119,15 +128,25 @@ export default async function handle(
     });
     console.timeEnd("track-analytics");
 
-    if (link.enableNotification) {
-      // trigger link viewed event to trigger send-notification job
-      console.time("sendemail");
-      await client.sendEvent({
-        name: "link.viewed",
-        payload: { viewId: newView.id },
-      });
-      console.timeEnd("sendemail");
-    }
+    // // this will trigger the webhook and also notification(both in-app and email)
+    await triggerWebhooks({
+      eventType: "DOCUMENT_VIEWED",
+      eventData: {
+        ownerId: newView.document.owner.id,
+        ownerEmail: newView.document.owner.email as string,
+        ownerName: newView.document.owner.name as string,
+        teamId: newView.document.teamId as string,
+        teamName: newView.document.team?.name as string,
+        documentId: documentId,
+        documentName: newView.document.name,
+        viewerEmail: email,
+        link: {
+          id: link.id,
+          enableNotification: link.enableNotification!,
+        },
+        viewId: newView.id,
+      },
+    });
 
     const returnObject = {
       message: "View recorded",
diff --git a/pages/webhooks/index.tsx b/pages/webhooks/index.tsx
new file mode 100644
index 000000000..5b3070a2b
--- /dev/null
+++ b/pages/webhooks/index.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { PlusIcon } from "@heroicons/react/24/solid";
+import { AddWebhookModal } from "@/components/webhooks/add-webhook-modal";
+import { Separator } from "@/components/ui/separator";
+import AppLayout from "@/components/layouts/app";
+import { Button } from "@/components/ui/button";
+import { Webhook } from "lucide-react";
+import useWebhooks from "@/lib/swr/use-webhooks";
+import { Skeleton } from "@/components/ui/skeleton";
+import { WebhookTable } from "@/components/webhooks/webhook-table";
+
+export default function Webhooks() {
+  const { webhooks } = useWebhooks();
+
+  return (
+    <AppLayout>
+      <div className="p-4 sm:p-4 sm:m-4">
+        <div className="flex items-center justify-between mb-4 md:mb-8 lg:mb-12">
+          <div className="space-y-1">
+            <h2 className="text-2xl text-foreground font-semibold tracking-tight">
+              Webhooks
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Manage your Webhooks
+            </p>
+          </div>
+          <ul className="flex items-center justify-between gap-4">
+            <AddWebhookModal>
+              <Button>Add New Webhook</Button>
+            </AddWebhookModal>
+          </ul>
+        </div>
+
+        <Separator className="my-6 bg-gray-200 dark:bg-gray-800" />
+
+        {webhooks && webhooks.length === 0 ? (
+          <div className="flex items-center justify-center h-96">
+            <EmptyWebhooks />
+          </div>
+        ) : (
+          <WebhookTable webhooks={webhooks || []} />
+        )}
+      </div>
+    </AppLayout>
+  );
+}
+
+export function EmptyWebhooks() {
+  const [openModal, setOpenModal] = useState<boolean>(false);
+
+  return (
+    <div className="flex flex-col items-center">
+      <Webhook className="h-16 w-16" />
+      <h3 className="mt-2 text-sm font-medium text-foreground">No webhooks</h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Get started by creating a new webhook.
+      </p>
+      <div className="mt-6">
+        <AddWebhookModal>
+          <Button onClick={() => setOpenModal(true)}>
+            <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+            New Webhook
+          </Button>
+        </AddWebhookModal>
+      </div>
+    </div>
+  );
+}
diff --git a/prisma/migrations/20231207194348_webhook_and_notification/migration.sql b/prisma/migrations/20231207194348_webhook_and_notification/migration.sql
new file mode 100644
index 000000000..c3bc9fea2
--- /dev/null
+++ b/prisma/migrations/20231207194348_webhook_and_notification/migration.sql
@@ -0,0 +1,40 @@
+-- CreateEnum
+CREATE TYPE "Event" AS ENUM ('LINK_SHARED', 'SUBSCRIPTION_RENEWAL', 'DOCUMENT_VIEWED', 'DOCUMENT_ADDED', 'DOCUMENT_UPDATED', 'DOCUMENT_DELETED', 'DOCUMENT_FEEDBACK', 'TEAM_CREATED', 'TEAM_UPDATED', 'TEAM_DELETED', 'TEAM_MEMBER_INVITED', 'TEAM_MEMBER_REMOVED', 'TEAM_MEMBER_PROMOTED', 'TEAM_MEMBER_DEMOTED', 'DOMAIN_ADDED', 'DOMAIN_REMOVED', 'ACCOUNT_ACTIVITY', 'SYSTEM_UPDATE', 'PROMOTION');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "isEmailNotificationEnabled" BOOLEAN NOT NULL DEFAULT true;
+
+-- CreateTable
+CREATE TABLE "Webhook" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "teamId" TEXT NOT NULL,
+    "targetUrl" TEXT NOT NULL,
+    "events" "Event"[],
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Webhook_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Notification" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "teamId" TEXT NOT NULL,
+    "event" "Event" NOT NULL,
+    "message" TEXT NOT NULL,
+    "documentId" TEXT,
+    "linkId" TEXT,
+    "isRead" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Notification_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Webhook" ADD CONSTRAINT "Webhook_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3ec594a0a..7e22d5abc 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -37,40 +37,43 @@ model Session {
 }
 
 model User {
-  id             String         @id @default(cuid())
-  name           String?
-  email          String?        @unique
-  emailVerified  DateTime?
-  image          String?
-  createdAt      DateTime       @default(now())
-  accounts       Account[]
-  sessions       Session[]
-  documents      Document[]
-  teams          UserTeam[]
-  domains        Domain[]
-  conversations  Conversation[]
-  plan           String         @default("free")
-  stripeId       String?        @unique // Stripe subscription / customer ID
-  subscriptionId String?        @unique // Stripe subscription ID
-  startsAt       DateTime? // Stripe subscription start date
-  endsAt         DateTime? // Stripe subscription end date
+  id                         String         @id @default(cuid())
+  name                       String?
+  email                      String?        @unique
+  emailVerified              DateTime?
+  image                      String?
+  isEmailNotificationEnabled Boolean        @default(true) // by default the user get email for all the events
+  createdAt                  DateTime       @default(now())
+  accounts                   Account[]
+  sessions                   Session[]
+  documents                  Document[]
+  teams                      UserTeam[]
+  domains                    Domain[]
+  conversations              Conversation[]
+  plan                       String         @default("free")
+  stripeId                   String?        @unique // Stripe subscription / customer ID
+  subscriptionId             String?        @unique // Stripe subscription ID
+  startsAt                   DateTime? // Stripe subscription start date
+  endsAt                     DateTime? // Stripe subscription end date
 }
 
 model Team {
-  id             String       @id @default(cuid())
+  id             String         @id @default(cuid())
   name           String
   users          UserTeam[]
   documents      Document[]
   domains        Domain[]
   invitations    Invitation[]
   sentEmails     SentEmail[]
-  plan           String       @default("free")
-  stripeId       String?      @unique // Stripe subscription / customer ID
-  subscriptionId String?      @unique // Stripe subscription ID
+  webhooks       Webhook[]
+  notifications  Notification[]
+  plan           String         @default("free")
+  stripeId       String?        @unique // Stripe subscription / customer ID
+  subscriptionId String?        @unique // Stripe subscription ID
   startsAt       DateTime? // Stripe subscription start date
   endsAt         DateTime? // Stripe subscription end date
-  createdAt      DateTime     @default(now())
-  updatedAt      DateTime     @updatedAt
+  createdAt      DateTime       @default(now())
+  updatedAt      DateTime       @updatedAt
 }
 
 enum Role {
@@ -98,7 +101,7 @@ model VerificationToken {
   @@unique([identifier, token])
 }
 
-model Document {  
+model Document {
   id               String            @id @default(cuid())
   name             String
   description      String?
@@ -219,6 +222,53 @@ model Invitation {
   @@unique([email, teamId])
 }
 
+model Webhook {
+  id        String   @id @default(cuid())
+  userId    String
+  teamId    String
+  team      Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  targetUrl String
+  events    Event[]
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Notification {
+  id         String   @id @default(cuid())
+  userId     String
+  teamId     String
+  team       Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  event      Event
+  message    String
+  documentId String?
+  linkId     String?
+  isRead     Boolean  @default(false)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+enum Event {
+  LINK_SHARED // When a user shares a document link with others.
+  SUBSCRIPTION_RENEWAL // notifications about upcoming subscription renewals or changes.
+  DOCUMENT_VIEWED // When a shared document link is viewed by someone.
+  DOCUMENT_ADDED // when a new document is added
+  DOCUMENT_UPDATED // when a document's detail changed such as Document Name, etc
+  DOCUMENT_DELETED // when a document is deleted
+  DOCUMENT_FEEDBACK // upvote / downvote, reactions, comments etc
+  TEAM_CREATED // when a team is created
+  TEAM_UPDATED // when team's detail changed such as Team Name, etc
+  TEAM_DELETED // when a team is deleted
+  TEAM_MEMBER_INVITED // when a new team member is invited
+  TEAM_MEMBER_REMOVED // when a team member is removed from the team
+  TEAM_MEMBER_PROMOTED // when a team member gets promoted to admin
+  TEAM_MEMBER_DEMOTED // when a team member gets demoted to member
+  DOMAIN_ADDED // when a new domain is added
+  DOMAIN_REMOVED // when a existing domain is removed
+  ACCOUNT_ACTIVITY // account-related activities, such as login from a new device.
+  SYSTEM_UPDATE // Notifications about system-wide updates or maintenance.
+  PROMOTION // announcement about promotions, discounts, or special offers
+}
+
 enum EmailType {
   FIRST_DAY_DOMAIN_REMINDER_EMAIL
   FIRST_DOMAIN_INVALID_EMAIL
@@ -250,7 +300,7 @@ model Conversation {
   createdAt     DateTime  @default(now())
   lastMessageAt DateTime? // This is the last time a message was sent in the thread
 
-  @@index([threadId])
   @@unique([userId, documentId])
   @@unique([threadId, documentId])
+  @@index([threadId])
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index ea6005d00..74e74ec0e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -202,5 +202,19 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+
+    function ({ addUtilities }) {
+      const newUtilities = {
+        ".no-scrollbar::-webkit-scrollbar": {
+          display: "none",
+        },
+        ".no-scrollbar": {
+          "-ms-overflow-style": "none",
+          "scrollbar-width": "none",
+        },
+      };
+
+      addUtilities(newUtilities);
+    },
   ],
-};
\ No newline at end of file
+};