diff --git a/app/src/app/admin/users/[id]/recordings/RecordingsPage.tsx b/app/src/app/admin/users/[id]/recordings/RecordingsPage.tsx
index 96fde19..7d86781 100644
--- a/app/src/app/admin/users/[id]/recordings/RecordingsPage.tsx
+++ b/app/src/app/admin/users/[id]/recordings/RecordingsPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/table";
 import { Trash2 } from "lucide-react";
 import { API } from "@/lib/axios";
+import { toast } from "sonner";
 
 interface Recording {
   id: string;
@@ -35,20 +36,36 @@ export default function RecordingsPage({ userId }: Props) {
   const page = searchParams.get("page") || "1";
   const limit = searchParams.get("limit") || "20";
 
-  useEffect(() => {
-    const fetchRecordings = async () => {
-      try {
-        const response = await API.get(
-          `/admin/users/transcriptions/${userId}?page=${page}&limit=${limit}`
-        );
-        setRecordings(response.data.data);
-      } catch (error) {
-        console.error("Failed to fetch recordings:", error);
-      }
-    };
+  const fetchRecordings = useCallback(async () => {
+    try {
+      const response = await API.get(
+        `/admin/users/transcriptions/${userId}?page=${page}&limit=${limit}`
+      );
+      setRecordings(response.data.data);
+    } catch (error) {
+      console.error("Failed to fetch recordings:", error);
+    }
+  }, [userId, page, limit]);
 
+  useEffect(() => {
     fetchRecordings();
-  }, [userId, page, limit]);
+  }, [fetchRecordings]);
+
+  const handleDeleteRecording = async (recordingId: String) => {
+    try {
+      const confirmDelete = confirm(
+        "Are you sure you want to delete this recording?"
+      );
+      if (!confirmDelete) return;
+
+      await API.delete(`/admin/transcriptions/${recordingId}`);
+      await fetchRecordings();
+      toast.success("Recording deleted successfully");
+    } catch (error) {
+      console.error("Failed to delete recording:", error);
+      toast.error("Failed to delete recording");
+    }
+  };
 
   return (
     <Card>
@@ -78,9 +95,7 @@ export default function RecordingsPage({ userId }: Props) {
                 <TableCell className="flex gap-2">
                   <div
                     className="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow-xl hover:bg-red-500 cursor-pointer hover:text-white"
-                    onClick={() => {
-                      // Add delete logic here
-                    }}
+                    onClick={() => handleDeleteRecording(audioFile.id)}
                   >
                     <Trash2 size={20} />
                   </div>