diff --git a/src/app/actions.ts b/src/app/actions.ts
index 28ef27d..20bb719 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -4,10 +4,9 @@ import { db } from "@/server/db";
 import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
 import type { PaperlessDocumentsType } from "@/types";
-import { auth } from "@clerk/nextjs/server";
+import { auth, currentUser } from "@clerk/nextjs/server";
 import type { WhishperRecordingType } from "@/types";
 
-
 /*
 Clerk helpers
   ___| | ___ _ __| | __
@@ -113,4 +112,4 @@ export async function getWhishperRecordings(
 
   // Step 4: Return the sorted array without the score
   return sortedByScore.map(({ ...item }) => item);
-}
+}
\ No newline at end of file
diff --git a/src/app/api/deleteWhishperRecordingByName/route.ts b/src/app/api/deleteWhishperRecordingByName/route.ts
new file mode 100644
index 0000000..494da53
--- /dev/null
+++ b/src/app/api/deleteWhishperRecordingByName/route.ts
@@ -0,0 +1,37 @@
+import { getUserData, getWhishperRecordings } from "@/app/actions";
+
+export async function DELETE(req: Request) {
+  const url = new URL(req.url);
+  const name = url.searchParams.get("name");
+
+  if (!name) {
+    return new Response("Name parameter is missing", { status: 400 });
+  }
+
+  const userData = await getUserData();
+
+  if (!userData) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  console.log(getWhishperRecordings(name));
+
+  const response = await fetch(
+    `${userData.whishperURL}/api/transcriptions/${name}`,
+    {
+      method: "DELETE",
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error("Network error");
+  }
+
+  // Assuming the deletion is successful and you want to return a JSON response
+  return new Response(JSON.stringify({ success: true }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
diff --git a/src/app/whishper/page.tsx b/src/app/whishper/page.tsx
index 91d2f6a..0343912 100644
--- a/src/app/whishper/page.tsx
+++ b/src/app/whishper/page.tsx
@@ -42,11 +42,10 @@ import {
 import OpenExternalLink from "@/components/external-link";
 import type { UsersTableType } from "@/server/db/schema";
 import { BadgeCheck, Badge, BadgeAlert } from "lucide-react";
+import type { WhishperRecordingType } from "@/types";
 
 const queryClient = new QueryClient();
 
-
-
 function SearchForm() {
   const formSchema = z.object({
     query: z.string().min(3).max(256),
@@ -160,7 +159,7 @@ function RecordingsList() {
 
   return (
     <>
-      <h1 className="text-2xl font-bold mb-4">Search Results</h1>
+      <h1 className="mb-4 text-2xl font-bold">Search Results</h1>
       <DataTable
         data={WhishperRecordingsMap}
         userData={userData.data}
diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
index 8448e73..05ca4ef 100644
--- a/src/components/audio-preview.tsx
+++ b/src/components/audio-preview.tsx
@@ -9,7 +9,6 @@ import type { UsersTableType } from "@/server/db/schema";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { ChevronLeft, ExternalLink } from "lucide-react";
-import { getWhishperRecordings } from "@/app/actions";
 
 const queryClient = new QueryClient();
 
@@ -75,10 +74,10 @@ function AudioInfo(props: { name: string }) {
       <div className="flex h-full justify-center md:w-1/2">
         <div className="flex h-full w-full flex-col rounded-xl bg-slate-600/50">
           <div className="m-4 flex h-full flex-grow flex-col justify-center gap-9">
-            <div className="rounded-md bg-gradient-to-r from-indigo-900 to-purple-900 px-2 py-1 text-xl text-white">
+            <div className="flex flex-row items-center justify-between gap-2 rounded-md bg-gradient-to-r from-indigo-900 to-purple-900 px-2 py-1 text-xl text-white">
               {formattedName}
               <Button
-                className="place-self-end rounded-full border-none bg-slate-500/60 hover:bg-slate-500/90"
+                className="rounded-full border-none bg-slate-500/60 hover:bg-slate-500/90"
                 variant="outline"
                 size="icon"
                 onClick={() => router.back()}
@@ -95,21 +94,14 @@ function AudioInfo(props: { name: string }) {
                 />
               </audio>
             </div>
-            <div className="flex w-full flex-shrink-0 justify-between">
+            <div className="flex w-full flex-shrink-0 justify-center gap-12">
               <Button className="w-24">
                 <ExternalLink /> Open
               </Button>
               <Button className="w-24">Download</Button>
-              <form
-                action={async () => {
-                  "use server";
-                  await getWhishperRecordings(props.name);
-                }}
-              >
-                <Button className="w-24" variant="destructive">
-                  Delete
-                </Button>
-              </form>
+              <Button className="w-24" variant="destructive">
+                Delete
+              </Button>
             </div>
           </div>
         </div>