diff --git a/app/actions/deleteMessage.js b/app/actions/deleteMessage.js
new file mode 100644
index 0000000..9b2fb68
--- /dev/null
+++ b/app/actions/deleteMessage.js
@@ -0,0 +1,34 @@
+'use server';
+
+import connectDB from '@/config/database';
+import Message from '@/models/Message';
+import { getSessionUser } from '@/utils/getSessionUser';
+import { revalidatePath } from 'next/cache';
+
+async function deleteMessage(messageId) {
+  await connectDB();
+
+  const sessionUser = await getSessionUser();
+
+  if (!sessionUser || !sessionUser.user) {
+    throw new Error('User ID is required');
+  }
+
+  const { userId } = sessionUser;
+
+  const message = await Message.findById(messageId);
+
+  if (!message) throw new Error('Message Not Found');
+
+  // Verify ownership
+  if (message.recipient.toString() !== userId) {
+    throw new Error('Unauthorized');
+  }
+
+  // revalidate cache
+  revalidatePath('/messages', 'page');
+
+  await message.deleteOne();
+}
+
+export default deleteMessage;
diff --git a/components/MessageCard.jsx b/components/MessageCard.jsx
index 7865030..493c84c 100644
--- a/components/MessageCard.jsx
+++ b/components/MessageCard.jsx
@@ -2,17 +2,28 @@
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import markMessageAsRead from '@/app/actions/markMessageAsRead';
+import deleteMessage from '@/app/actions/deleteMessage';
 
 const MessageCard = ({ message }) => {
   const [isRead, setIsRead] = useState(message.read);
+  const [isDeleted, setIsDeleted] = useState(false);
 
   const handleReadClick = async () => {
     const read = await markMessageAsRead(message._id);
-
     setIsRead(read);
     toast.success(`Marked as ${read ? 'read' : 'new'}`);
   };
 
+  const handleDeleteClick = async () => {
+    await deleteMessage(message._id);
+    setIsDeleted(true);
+    toast.success('Message Deleted');
+  };
+
+  if (isDeleted) {
+    return <p>Deleted message</p>;
+  }
+
   return (
     <div className='relative bg-white p-4 rounded-md shadow-md border border-gray-200'>
       {!isRead && (
@@ -52,7 +63,10 @@ const MessageCard = ({ message }) => {
       >
         {isRead ? 'Mark As New' : 'Mark As Read'}
       </button>
-      <button className='mt-4 bg-red-500 text-white py-1 px-3 rounded-md'>
+      <button
+        onClick={handleDeleteClick}
+        className='mt-4 bg-red-500 text-white py-1 px-3 rounded-md'
+      >
         Delete
       </button>
     </div>