diff --git a/src/app/whishper/page.tsx b/src/app/whishper/page.tsx
index 401095a..a757f36 100644
--- a/src/app/whishper/page.tsx
+++ b/src/app/whishper/page.tsx
@@ -3,7 +3,7 @@
 import { SignedIn, SignedOut } from "@clerk/nextjs";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { array, z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -24,7 +24,11 @@ import {
 } from "@tanstack/react-query";
 import { getUserData } from "../actions";
 import LoadingSpinner from "@/components/loading-spinner";
-import { WhishperRecordingsType } from "@/types";
+import type { WhishperRecordingsType } from "@/types";
+import OpenInternalLink from "@/components/internal-link";
+import OpenExternalLInk from "@/components/external-link";
+
+const queryClient = new QueryClient();
 
 async function getWhishperRecordings(query: string) {
   const userData = await getUserData();
@@ -34,14 +38,14 @@ async function getWhishperRecordings(query: string) {
   const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
 
   const data = (await response.json()) as WhishperRecordingsType;
-
-  console.log(data);
-
-  return data;
+  const lowerCaseQuery = query.toLowerCase();
+  return data.filter(
+    (item) =>
+      item.fileName.toLowerCase().includes(lowerCaseQuery) ||
+      item.result.text.toLowerCase().includes(lowerCaseQuery),
+  );
 }
 
-const queryClient = new QueryClient();
-
 function SearchForm() {
   const formSchema = z.object({
     query: z.string().min(3).max(256),
@@ -121,6 +125,10 @@ function RecordingsList() {
     },
   });
 
+  if (!query) {
+    return <h1 className="text-2xl font-bold">Start Searching!</h1>;
+  }
+
   if (!userData.data?.whishperURL) {
     return (
       <h1 className="text-2xl font-bold">
@@ -130,10 +138,6 @@ function RecordingsList() {
     );
   }
 
-  if (!query) {
-    return <h1 className="text-2xl font-bold">Start Searching!</h1>;
-  }
-
   if (WhishperRecordings.isLoading || userData.isLoading) {
     return <LoadingSpinner>Loading...</LoadingSpinner>;
   }
@@ -159,12 +163,12 @@ function RecordingsList() {
       <ul className="list-disc">
         {WhishperRecordingsMap.map((recording, index) => (
           <li className="underline" key={index}>
-            <a
+            <OpenExternalLInk
               className="underline hover:text-slate-300"
               href={`${userData.data?.whishperURL}/editor/${recording.id}`}
             >
               {recording.fileName.split("_WHSHPR_")[1]}
-            </a>
+            </OpenExternalLInk>
           </li>
         ))}
       </ul>
@@ -177,8 +181,8 @@ export default function WhishperPage() {
     <main className="">
       <div className="flex flex-col items-center justify-center">
         <SignedOut>
-          <div className="flex flex-col text-center text-2xl">
-            Please <Link href="/sign-in">sign in</Link>
+          <div className="text-center text-2xl">
+            Please <OpenInternalLink href="/sign-in">sign in</OpenInternalLink>
           </div>
         </SignedOut>
         <SignedIn>
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index a86fbf5..d5cfeac 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -3,12 +3,11 @@
 import { useState, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
-import { getAdvice, getUserData } from "@/app/actions";
+import { getUserData } from "@/app/actions";
 import {
   useQuery,
   QueryClientProvider,
   QueryClient,
-  useQueryClient,
 } from "@tanstack/react-query";
 import type { AdviceAPIType } from "@/types";
 import OpenInternalLink from "./internal-link";