diff --git a/src/client/pages/Settings/NotificationList.tsx b/src/client/pages/Settings/NotificationList.tsx
index 795c9be..6e642a6 100644
--- a/src/client/pages/Settings/NotificationList.tsx
+++ b/src/client/pages/Settings/NotificationList.tsx
@@ -1,5 +1,5 @@
-import { EditOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, List } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, List, Popconfirm } from 'antd';
 import React, { useState } from 'react';
 import { trpc } from '../../api/trpc';
 import {
@@ -21,10 +21,10 @@ export const NotificationList: React.FC = React.memo(() => {
     NotificationFormValues | undefined
   >(undefined);
 
-  const mutation = trpc.notification.upsert.useMutation();
+  const upsertMutation = trpc.notification.upsert.useMutation();
+  const deleteMutation = trpc.notification.delete.useMutation();
 
   const handleOpenModal = useEvent((initValues?: NotificationFormValues) => {
-    console.log('initValues', initValues);
     setEditingFormData(initValues);
     setOpen(true);
   });
@@ -35,7 +35,7 @@ export const NotificationList: React.FC = React.memo(() => {
   });
 
   const handleSubmit = useEvent(async (values: NotificationFormValues) => {
-    await mutation.mutateAsync({
+    await upsertMutation.mutateAsync({
       workspaceId: currentWorkspaceId!,
       ...values,
     });
@@ -43,6 +43,14 @@ export const NotificationList: React.FC = React.memo(() => {
     refetch();
   });
 
+  const handleDelete = useEvent(async (notificationId: string) => {
+    await deleteMutation.mutateAsync({
+      workspaceId: currentWorkspaceId!,
+      id: notificationId,
+    });
+    refetch();
+  });
+
   if (!currentWorkspaceId) {
     return <NoWorkspaceTip />;
   }
@@ -84,6 +92,17 @@ export const NotificationList: React.FC = React.memo(() => {
               >
                 Edit
               </Button>,
+              <Popconfirm
+                title="Is delete this item?"
+                okButtonProps={{
+                  danger: true,
+                }}
+                onConfirm={() => {
+                  handleDelete(item.id);
+                }}
+              >
+                <Button danger={true} icon={<DeleteOutlined />} />
+              </Popconfirm>,
             ]}
           >
             <List.Item.Meta title={item.name} />
diff --git a/src/server/trpc/routers/notification.ts b/src/server/trpc/routers/notification.ts
index ec96b27..46c6ae7 100644
--- a/src/server/trpc/routers/notification.ts
+++ b/src/server/trpc/routers/notification.ts
@@ -49,4 +49,20 @@ export const notificationRouter = router({
         });
       }
     }),
+  delete: workspaceOwnerProcedure
+    .input(
+      z.object({
+        id: z.string(),
+      })
+    )
+    .mutation(async ({ input }) => {
+      const { id, workspaceId } = input;
+
+      return await prisma.notification.delete({
+        where: {
+          workspaceId,
+          id,
+        },
+      });
+    }),
 });