diff --git a/apps/web/components/ContentSearch.tsx b/apps/web/components/ContentSearch.tsx
index b8f8261d..fa120e61 100644
--- a/apps/web/components/ContentSearch.tsx
+++ b/apps/web/components/ContentSearch.tsx
@@ -7,6 +7,7 @@ import { Dialog, DialogClose, DialogContent, Input, Card, CardDescription, CardH
 import Image from "next/image"; */
 import Fuse from "fuse.js";
 import { TrackPros } from "./Tracks";
+import { div } from "framer-motion/client";
 
 type Payload = {
   problemId: string;
@@ -21,6 +22,7 @@ interface DataItem {
 }
 
 export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
+  const [startedSearching, setStartedSearching] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [input, setInput] = useState("");
   const [searchTracks, setSearchTracks] = useState<any[]>([]);
@@ -28,6 +30,7 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
   const scrollableContainerRef = useRef<HTMLDivElement>(null);
   const deferredInput = useDeferredValue(input);
   const [allTracks, setAllTracks] = useState<DataItem[]>([]);
+  const [suggestedTracks, setSuggestedTracks] = useState<DataItem[]>([]);
   useEffect(() => {
     const updatedTracks: DataItem[] = [];
     tracks.map((t) => {
@@ -43,6 +46,7 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
         });
       });
     });
+    const suggestions: DataItem[] = [];
     setAllTracks(updatedTracks);
   }, []);
   useEffect(() => {
@@ -115,27 +119,27 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
   return (
     <Dialog open={dialogOpen} onOpenChange={handleClose}>
       <div
-        className="md:max-w-screen border border-primary/15 p-3 rounded-lg cursor-text w-full mx-auto"
+        className="md:max-w-screen border-primary/15 mx-auto w-full cursor-text rounded-lg border p-3"
         onClick={() => setDialogOpen(true)}
       >
-        <div className="md:flex gap-2 items-center hidden justify-between ">
-          <div className="flex gap-2 items-center">
+        <div className="hidden items-center justify-between gap-2 md:flex">
+          <div className="flex items-center gap-2">
             <MagnifyingGlassIcon className="size-4" />
             Search
           </div>
-          <kbd className="bg-white/15 p-2 rounded-sm text-sm leading-3">Ctrl + K</kbd>
+          <kbd className="rounded-sm bg-white/15 p-2 text-sm leading-3">Ctrl + K</kbd>
         </div>
         <div className="block md:hidden">
           <MagnifyingGlassIcon className="size-4" />
         </div>
       </div>
-      <DialogContent className="p-0 gap-0 max-w-2xl">
-        <div className="flex items-center px-6 py-4 border-b">
+      <DialogContent className="max-w-2xl gap-0 p-0">
+        <div className="flex items-center border-b px-6 py-4">
           <MagnifyingGlassIcon className="size-4" />
           <Input
             type="text"
             placeholder="Search"
-            className="border-none focus-visible:outline-none focus-visible:ring-0 text-base shadow-none"
+            className="border-none text-base shadow-none focus-visible:outline-none focus-visible:ring-0"
             value={input}
             onChange={(e) => setInput(e.target.value)}
           />
@@ -144,37 +148,76 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
             <span className="sr-only">Close</span>
           </DialogClose>
         </div>
-        <div className="h-[500px] py-4 space-y-4 overflow-y-scroll" ref={scrollableContainerRef}>
-          {searchTracks.length > 0 &&
-            searchTracks.map((track, index) => (
-              <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
-                <Link
-                  className="flex"
-                  href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
-                  target="_blank"
-                  passHref
-                >
-                  <Card className="p-2 w-full mx-2">
-                    <div className="flex items-center gap-4 py-1 sm:py-2">
-                      <div className="w-16 h-16 sm:w-20 sm:h-20 flex-shrink-0 overflow-hidden rounded-xl">
-                        <img
-                          alt={track.payload.problemTitle}
-                          src={track.payload.image}
-                          className="w-full h-full object-cover"
-                        />
+
+        {searchTracks.length === 0 ? (
+          <div className="max-h-[500px] space-y-4 overflow-y-scroll py-4" ref={scrollableContainerRef}>
+            <p className="pl-4"> Suggestions : </p>
+            {allTracks.map((track, index) => {
+              return (
+                <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
+                  <Link
+                    className="flex"
+                    href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
+                    target="_blank"
+                    passHref
+                  >
+                    <Card className="mx-2 w-full p-2">
+                      <div className="flex items-center gap-4 py-1 sm:py-2">
+                        <div className="min-w-0 flex-1">
+                          <CardHeader className="p-0">
+                            <CardTitle className="text-base sm:text-lg md:text-xl">
+                              {track.payload.problemTitle}
+                            </CardTitle>
+                            <CardDescription className="truncate text-sm">
+                              {" "}
+                              Track : {track.payload.trackTitle}
+                            </CardDescription>
+                          </CardHeader>
+                        </div>
                       </div>
-                      <div className="flex-1 min-w-0">
-                        <CardHeader className="p-0">
-                          <CardTitle className="text-base sm:text-lg md:text-xl">{track.payload.problemTitle}</CardTitle>
-                          <CardDescription className="text-sm truncate">Track: {track.payload.trackTitle}</CardDescription>
-                        </CardHeader>
+                    </Card>
+                  </Link>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="h-[500px] space-y-4 overflow-y-scroll py-4" ref={scrollableContainerRef}>
+            {searchTracks.length > 0 &&
+              searchTracks.map((track, index) => (
+                <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
+                  <Link
+                    className="flex"
+                    href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
+                    target="_blank"
+                    passHref
+                  >
+                    <Card className="mx-2 w-full p-2">
+                      <div className="flex items-center gap-4 py-1 sm:py-2">
+                        <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl sm:h-20 sm:w-20">
+                          <img
+                            alt={track.payload.problemTitle}
+                            src={track.payload.image}
+                            className="h-full w-full object-cover"
+                          />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <CardHeader className="p-0">
+                            <CardTitle className="text-base sm:text-lg md:text-xl">
+                              {track.payload.problemTitle}
+                            </CardTitle>
+                            <CardDescription className="truncate text-sm">
+                              Track: {track.payload.trackTitle}
+                            </CardDescription>
+                          </CardHeader>
+                        </div>
                       </div>
-                    </div>
-                  </Card>
-                </Link>
-              </div>
-            ))}
-        </div>
+                    </Card>
+                  </Link>
+                </div>
+              ))}
+          </div>
+        )}
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/web/components/TrackPreview.tsx b/apps/web/components/TrackPreview.tsx
index d3b85e0d..199ce654 100644
--- a/apps/web/components/TrackPreview.tsx
+++ b/apps/web/components/TrackPreview.tsx
@@ -41,37 +41,37 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
   return (
     <Dialog open={showPreview} onOpenChange={() => setShowPreview(false)}>
       <DialogContent className="flex items-center gap-4">
-        <div className="flex flex-col gap-4 w-full">
-          <img src={track.image} className="h-[25vh] w-full object-cover rounded-lg" />
-          <div className="flex flex-col gap-4 bg-primary/5 rounded-lg p-4">
+        <div className="flex w-full flex-col gap-4">
+          <img src={track.image} className="h-[25vh] w-full rounded-lg object-contain" />
+          <div className="bg-primary/5 flex flex-col gap-4 rounded-lg p-4">
             <div className="flex flex-col gap-4">
-              <h3 className="text-xl md:text-2xl font-semibold w-full tracking-tight">{track.title}</h3>
+              <h3 className="w-full text-xl font-semibold tracking-tight md:text-2xl">{track.title}</h3>
               <div className="flex items-center gap-4">
                 {track.categories.map((item: any, idx: number) => (
                   <p
                     key={item.category.id}
-                    className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
+                    className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
                   >
                     {item.category.category}{" "}
                   </p>
                 ))}
               </div>
             </div>
-            <p className="md:text-lg tracking-tighter line-clamp-3 text-primary/60">{truncatedDescription}</p>
+            <p className="text-primary/60 line-clamp-3 tracking-tighter md:text-lg">{truncatedDescription}</p>
           </div>
-          <div className="flex flex-col gap-4 w-full">
-            <div className="flex gap-2 items-center">
-              <p className="flex tracking-tighter gap-2 text-primary text-lg md:text-xl font-semibold">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <p className="text-primary flex gap-2 text-lg font-semibold tracking-tighter md:text-xl">
                 {track.problems.length} Chapters
               </p>
-              <p className="flex tracking-tight gap-2 text-primary/60 md:text-lg">
+              <p className="text-primary/60 flex gap-2 tracking-tight md:text-lg">
                 {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
               </p>
             </div>
-            <div className="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2">
+            <div className="flex max-h-[25vh] w-full flex-col gap-3 overflow-y-auto py-2">
               {track.problems.map((topic: any, idx: number) => (
                 <Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
-                  <div className="cursor-pointer hover:-translate-y-1 flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 hover:bg-primary/10 transition-all duration-300 scroll-smooth w-full">
+                  <div className="bg-primary/5 hover:bg-primary/10 flex w-full cursor-pointer items-center justify-between scroll-smooth rounded-lg px-4 py-3 transition-all duration-300 hover:-translate-y-1">
                     {topic.title}
                     <ArrowRight className="size-4" />
                   </div>
@@ -82,7 +82,7 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
           <Link href={track.problems.length ? `/tracks/${track.id}/${track.problems[0]?.id}` : ""}>
             <Button
               size={"lg"}
-              className="flex items-center justify-center bg-blue-600 text-white hover:bg-blue-500 transition-all duration-300"
+              className="flex items-center justify-center bg-blue-600 text-white transition-all duration-300 hover:bg-blue-500"
               onClick={(e) => e.stopPropagation()}
             >
               Start