diff --git a/src/app/actions.ts b/src/app/actions.ts
index 90b49c5..28ef27d 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -4,7 +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, clerkMiddleware } from "@clerk/nextjs/server";
+import { auth } from "@clerk/nextjs/server";
+import type { WhishperRecordingType } from "@/types";
+
 
 /*
 Clerk helpers
@@ -79,7 +81,36 @@ export async function getPaperlessDocuments(query: string) {
   return data;
 }
 
-export async function formatWhishperName(name: string) {
-  const frontPart = name.split("_WHSHPR_")[1] ?? name;
-  return frontPart.replace(".m4a", "") ?? name;
+export async function getWhishperRecordings(
+  query: string,
+): Promise<WhishperRecordingType[] | null> {
+  const userData = await getUserData();
+
+  if (!query || query == "null" || query.length < 3 || !userData) return null;
+
+  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
+
+  const data = (await response.json()) as WhishperRecordingType[];
+  const lowerCaseQuery = query.toLowerCase();
+  const filteredAndScored = data
+    .filter(
+      (item) =>
+        item.fileName.toLowerCase().includes(lowerCaseQuery) ||
+        item.result.text.toLowerCase().includes(lowerCaseQuery),
+    )
+    .map((item) => {
+      const fileNameOccurrences = (
+        item.fileName.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ?? []
+      ).length;
+      const textOccurrences = (
+        item.result.text.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ??
+        []
+      ).length;
+      const score = fileNameOccurrences + textOccurrences;
+      return { ...item, score };
+    });
+  const sortedByScore = filteredAndScored.sort((a, b) => b.score - a.score);
+
+  // Step 4: Return the sorted array without the score
+  return sortedByScore.map(({ ...item }) => item);
 }
diff --git a/src/app/whishper/page.tsx b/src/app/whishper/page.tsx
index 13baf2c..91d2f6a 100644
--- a/src/app/whishper/page.tsx
+++ b/src/app/whishper/page.tsx
@@ -22,9 +22,8 @@ import {
   QueryClientProvider,
   QueryClient,
 } from "@tanstack/react-query";
-import { formatWhishperName, getUserData } from "../actions";
+import { getUserData, getWhishperRecordings } from "../actions";
 import LoadingSpinner from "@/components/loading-spinner";
-import type { WhishperRecordingType } from "@/types";
 import OpenInternalLink from "@/components/internal-link";
 import {
   type ColumnDef,
@@ -46,39 +45,7 @@ import { BadgeCheck, Badge, BadgeAlert } from "lucide-react";
 
 const queryClient = new QueryClient();
 
-async function getWhishperRecordings(
-  query: string,
-): Promise<WhishperRecordingType[] | null> {
-  const userData = await getUserData();
 
-  if (!query || query == "null" || query.length < 3 || !userData) return null;
-
-  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
-
-  const data = (await response.json()) as WhishperRecordingType[];
-  const lowerCaseQuery = query.toLowerCase();
-  const filteredAndScored = data
-    .filter(
-      (item) =>
-        item.fileName.toLowerCase().includes(lowerCaseQuery) ||
-        item.result.text.toLowerCase().includes(lowerCaseQuery),
-    )
-    .map((item) => {
-      const fileNameOccurrences = (
-        item.fileName.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ?? []
-      ).length;
-      const textOccurrences = (
-        item.result.text.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ??
-        []
-      ).length;
-      const score = fileNameOccurrences + textOccurrences;
-      return { ...item, score };
-    });
-  const sortedByScore = filteredAndScored.sort((a, b) => b.score - a.score);
-
-  // Step 4: Return the sorted array without the score
-  return sortedByScore.map(({ ...item }) => item);
-}
 
 function SearchForm() {
   const formSchema = z.object({
@@ -193,7 +160,7 @@ function RecordingsList() {
 
   return (
     <>
-      <h1 className="text-2xl font-bold">Search Results</h1>
+      <h1 className="text-2xl font-bold mb-4">Search Results</h1>
       <DataTable
         data={WhishperRecordingsMap}
         userData={userData.data}
diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
index bee2729..8448e73 100644
--- a/src/components/audio-preview.tsx
+++ b/src/components/audio-preview.tsx
@@ -7,7 +7,9 @@ import {
 } from "@tanstack/react-query";
 import type { UsersTableType } from "@/server/db/schema";
 import { Button } from "@/components/ui/button";
-import { formatWhishperName } from "@/app/actions";
+import { useRouter } from "next/navigation";
+import { ChevronLeft, ExternalLink } from "lucide-react";
+import { getWhishperRecordings } from "@/app/actions";
 
 const queryClient = new QueryClient();
 
@@ -22,21 +24,21 @@ const fetchUserData = async (): Promise<UsersTableType> => {
 
 function SkeletonLoader() {
   return (
-    <div className="flex h-1/5 w-full justify-center">
+    <div className="flex w-full justify-center">
       <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">
+          <div className="m-4 flex h-full flex-grow flex-col justify-center gap-9">
             {/* Title Skeleton */}
-            <div className="h-6 w-3/4 animate-pulse rounded-md bg-gray-300"></div>
+            <div className="h-6 w-3/4 animate-pulse rounded-md bg-gray-300 px-2 py-1"></div>
             {/* Audio Skeleton */}
             <div className="my-2 flex w-full flex-grow justify-center">
               <div className="h-10 w-full animate-pulse rounded-md bg-gray-300 md:w-3/4"></div>
             </div>
             {/* Button Skeletons */}
-            <div className="flex w-full flex-shrink-0 justify-between">
-              <div className="h-10 w-24 animate-pulse rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 animate-pulse rounded-md bg-gray-300"></div>
-              <div className="h-10 w-24 animate-pulse rounded-md bg-gray-300"></div>
+            <div className="flex w-full flex-shrink-0 animate-pulse justify-between">
+              {Array.from({ length: 5 }, (_, index) => (
+                <Button className="w-24" key={index} />
+              ))}
             </div>
           </div>
         </div>
@@ -46,7 +48,7 @@ function SkeletonLoader() {
 }
 
 function AudioInfo(props: { name: string }) {
-  // Fetch user data using useQuery hook
+  const router = useRouter();
 
   const {
     data: userData,
@@ -72,10 +74,18 @@ function AudioInfo(props: { name: string }) {
     <div className="flex w-full justify-center">
       <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-4">
-            <h1 className="h-6 w-3/4 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 text-lg text-white">
+          <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">
               {formattedName}
-            </h1>
+              <Button
+                className="place-self-end rounded-full border-none bg-slate-500/60 hover:bg-slate-500/90"
+                variant="outline"
+                size="icon"
+                onClick={() => router.back()}
+              >
+                <ChevronLeft />
+              </Button>
+            </div>
             {/* Audio */}
             <div className="flex w-full flex-grow justify-center">
               <audio controls={true} className="w-full md:w-3/4">
@@ -85,10 +95,21 @@ function AudioInfo(props: { name: string }) {
                 />
               </audio>
             </div>
-            <div className="flex w-full flex-shrink-0 animate-pulse justify-between">
-              {Array.from({ length: 5 }, (_, index) => (
-                <Button key={index} />
-              ))}
+            <div className="flex w-full flex-shrink-0 justify-between">
+              <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>
             </div>
           </div>
         </div>
diff --git a/src/server/querys.ts b/src/server/querys.ts
new file mode 100644
index 0000000..b9b14cf
--- /dev/null
+++ b/src/server/querys.ts
@@ -0,0 +1,17 @@
+import "server-only";
+
+import { getUserData } from "@/app/actions";
+
+export async function deleteRecording(id: string) {
+  const userData = await getUserData();
+  if (!userData?.whishperURL) {
+    throw new Error("Can't do that");
+  }
+  const response = await fetch(`${userData.whishperURL}/api/transcriptions/${id}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    throw new Error("Network error");
+  }
+  return response.json();
+}
\ No newline at end of file