diff --git a/src/app/api/deleteWhishperRecordingByName/route.ts b/src/app/api/whishperRecording/route.ts
similarity index 95%
rename from src/app/api/deleteWhishperRecordingByName/route.ts
rename to src/app/api/whishperRecording/route.ts
index 6c79ab6..f213a39 100644
--- a/src/app/api/deleteWhishperRecordingByName/route.ts
+++ b/src/app/api/whishperRecording/route.ts
@@ -15,8 +15,6 @@ export async function DELETE(req: Request) {
     return new Response("Unauthorized", { status: 401 });
   }
 
-  console.log(getWhishperRecordings(name));
-
   const response = await fetch(
     `${userData.whishperURL}/api/transcriptions/${name}`,
     {
diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
index 100b5ed..1a7d118 100644
--- a/src/components/audio-preview.tsx
+++ b/src/components/audio-preview.tsx
@@ -16,6 +16,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useState } from "react";
+import { getWhishperRecordings } from "@/app/whishper/page";
 
 const queryClient = new QueryClient();
 
@@ -57,6 +58,8 @@ function AudioInfo(props: { name: string }) {
   const router = useRouter();
   const [isPlaying, setIsPlaying] = useState(false);
 
+  console.log(getWhishperRecordings(props.name));
+
   const {
     data: userData,
     isLoading: isUserDataLoading,
@@ -143,7 +146,15 @@ function AudioInfo(props: { name: string }) {
                     tabIndex={-1}
                     className="cursor-not-allowed opacity-50"
                   >
-                    <Button className="w-24" variant="destructive">
+                    <Button
+                      className="w-24"
+                      variant="destructive"
+                      onClick={() => {
+                        fetch("/api/deleteWhishperRecording" + id, {
+                          method: "DELETE",
+                        });
+                      }}
+                    >
                       Delete
                     </Button>
                   </TooltipTrigger>
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index 44dd3c4..b3e3c26 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -195,6 +195,9 @@ function DocumentViewer(props: { id: number }) {
             >
               Open
             </OpenExternalLink>
+            <Button className="mr-2 w-24" variant="destructive">
+              Delete
+            </Button>
           </div>
         </div>
       </div>