diff --git a/src/App.css b/src/App.css
index 0149620..aded000 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Raleway:wght@300&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body{
     overflow-x: hidden;
+    font-family: 'Raleway', sans-serif;
 }
\ No newline at end of file
diff --git a/src/Components/Features.jsx b/src/Components/Features.jsx
index a24fbdc..f77dc04 100644
--- a/src/Components/Features.jsx
+++ b/src/Components/Features.jsx
@@ -51,14 +51,14 @@ export default function Features() {
       >
         <div>
           <div>
-            <h1 className="flex font-josh font-bold justify-center text-7xl pt-20">
+            <h1 className="flex font-bold justify-center text-7xl pt-20">
               Ready to make some noise?
             </h1>
-            <div className="flex text-3xl justify-center items-center font-josh">
+            <div className="flex text-3xl justify-center items-center">
               Bringing Harmony to Your Ears.
             </div>
           </div>
-          <div className="flex gap-16 justify-center items-center font-josh">
+          <div className="flex gap-16 justify-center items-center">
             <motion.div
               initial="hidden"
               animate={sectionControls}
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 07ff8d5..13bd9cd 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -5,6 +5,7 @@ import PageThree from "./PageThree";
 import Features from "./Features";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import { Link } from "react-router-dom";
 
 export default function Home() {
   const animationControls = {
@@ -19,10 +20,8 @@ export default function Home() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            // When the section is in the viewport, trigger the animation
             animationControls.visible && sectionControls.start("visible");
           } else {
-            // When the section is out of the viewport, reset the animation
             animationControls.hidden && sectionControls.start("hidden");
           }
         });
@@ -30,7 +29,7 @@ export default function Home() {
       {
         root: null,
         rootMargin: "0px",
-        threshold: 0.5, // Adjust the threshold as needed
+        threshold: 0.5,
       }
     );
 
@@ -72,15 +71,17 @@ export default function Home() {
           <p className="text-8xl font-bold mt-1 tracking-tighter">
             Welcome to BeatBridge!
           </p>
-          <button className="rounded-full mt-20 font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
-            Explore
-          </button>
+          <Link to='/search'>
+            <button className="rounded-full mt-20 font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner hover:transition-all ease-in hover:duration-400 text-2xl text-[#9a3412] tracking-wide">
+              Explore
+            </button>
+          </Link>
         </motion.div>
       </div>
 
       <Features />
       <PageThree />
-      <Footer/>
+      <Footer />
     </>
   );
 }
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index 52237c1..0f60d83 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -1,10 +1,11 @@
 import { FaHome } from "react-icons/fa";
-import { GrGallery } from "react-icons/gr";
 import { BsFillPeopleFill } from "react-icons/bs";
 import { FaHashtag } from "react-icons/fa";
 import Hamburger from "/hamburger.png";
 import { useState, useEffect } from "react";
-import { BiImages } from "react-icons/bi";
+import { IoIosPlayCircle } from "react-icons/io";
+import { Link } from "react-router-dom";
+
 export default function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [navbarColor, setNavbarColor] = useState("transparent");
@@ -28,24 +29,22 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="inset-0 items-center text-center justify-center text-white fixed top-0 z-50 w-full h-16">
+      <div className="font-bold inset-0 items-center text-center justify-center text-white fixed top-0 z-50 w-full h-16">
         <div
           className={`pt-1 pb-1 flex flex-row justify-between  backdrop-blur-md ${navbarColor}`}
         >
           <div className="mx-auto flex flex-row mb-2">
             <h1
-              className={`font-normal text-4xl inline mt-1 ml-24 pr-2 ${
-                navbarColor === "black" ? "text-black" : "text-white"
-              }`}
+              className={`text-4xl inline mt-1 ml-24 pr-2 ${navbarColor === "black" ? "text-black" : "text-white"
+                }`}
             >
               BEAT{" "}
             </h1>
             <h1
-              className={`inline border-b-4 pt-2 font-serif tracking-tight  text-2xl ${
-                navbarColor === "black"
+              className={`inline border-b-4 pt-2  tracking-tight  text-2xl ${navbarColor === "black"
                   ? "text-black border-black"
                   : "text-white border-white"
-              }`}
+                }`}
             >
               Bridge
             </h1>
@@ -59,7 +58,6 @@ export default function Navbar() {
             />
           </div>
         </div>
-        {/* <hr className="border-y-[1px]" /> */}
       </div>
       {menuOpen && (
         <div
@@ -68,20 +66,17 @@ export default function Navbar() {
         ></div>
       )}
       <div
-        className={`fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform ${
-          menuOpen ? "translate-x-0" : "translate-x-full"
-        } transition-transform ease-in-out duration-300 z-50 ${
-          navbarColor === "black"
+        className={`fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform ${menuOpen ? "translate-x-0" : "translate-x-full"
+          } transition-transform ease-in-out duration-300 z-50 ${navbarColor === "black"
             ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
             : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
-        }`}
+          }`}
       >
         <div
-          className={`flex justify-end p-2 z-[60]  ${
-            navbarColor === "black"
+          className={`flex justify-end p-2 z-[60]  ${navbarColor === "black"
               ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
               : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
-          }`}
+            }`}
         >
           <button
             className="text-gray-500 hover:text-gray-700"
@@ -104,43 +99,43 @@ export default function Navbar() {
           </button>
         </div>
 
-        <ul className="p-4 font-serif text-xl mb-4">
+        <ul className="p-4  text-xl mb-4">
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-            }`}
+              }`}
           >
             <FaHome className="mr-2" />
-            Discover
+            <Link to='/search'>
+              Discover
+            </Link>
           </li>
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-            }`}
+              }`}
           >
-            <BiImages className="mr-2" />
-            Around You
+            <IoIosPlayCircle className="mr-2" />
+            <Link to='/player'>
+            Music Player
+            </Link>
           </li>
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-            }`}
+              }`}
           >
             <BsFillPeopleFill className="mr-2" />
             Top Artists
           </li>
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-            }`}
+              }`}
           >
             {" "}
             <FaHashtag className="mr-2" />
diff --git a/src/Components/PageThree.jsx b/src/Components/PageThree.jsx
index 15f95bb..94f8b16 100644
--- a/src/Components/PageThree.jsx
+++ b/src/Components/PageThree.jsx
@@ -15,10 +15,8 @@ export default function PageThree() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            // When the section is in the viewport, trigger the animation
             animationControls.visible && sectionControls.start("visible");
           } else {
-            // When the section is out of the viewport, reset the animation
             animationControls.hidden && sectionControls.start("hidden");
           }
         });
@@ -26,7 +24,7 @@ export default function PageThree() {
       {
         root: null,
         rootMargin: "0px",
-        threshold: 0.5, // Adjust the threshold as needed
+        threshold: 0.5,
       }
     );
 
@@ -45,7 +43,7 @@ export default function PageThree() {
 
   return (
     <div
-      className="relative h-[800px] font-josh"
+      className="relative h-[800px] "
       style={{ overflow: "hidden" }}
       ref={sectionRef}
     >
diff --git a/src/main.jsx b/src/main.jsx
index 0f3f1a0..c8826e2 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import App from "./App.jsx";
 import Home from "./Components/Home.jsx";
 import ReactDOM from "react-dom/client";
+import SongSearch from "./Components/SongSearch.jsx";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import "./App.css";
@@ -15,6 +16,10 @@ const MyApp = createBrowserRouter([
     path: "/player",
     element: <App />,
   },
+  {
+    path: "/search",
+    element: <SongSearch />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")).render(
diff --git a/src/tailwindcss/output.css b/src/tailwindcss/output.css
index eb08161..ccdf294 100644
--- a/src/tailwindcss/output.css
+++ b/src/tailwindcss/output.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Raleway:wght@300&display=swap');
 
 /*
 ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
@@ -536,6 +536,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.visible{
+  visibility: visible;
+}
+
 .fixed{
   position: fixed;
 }
@@ -580,8 +584,22 @@ video {
   z-index: 50;
 }
 
-.m-2{
-  margin: 0.5rem;
+.z-\[60\]{
+  z-index: 60;
+}
+
+.m-10{
+  margin: 2.5rem;
+}
+
+.mx-2{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-3{
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
 }
 
 .mx-auto{
@@ -589,6 +607,26 @@ video {
   margin-right: auto;
 }
 
+.my-3{
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.my-5{
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-6{
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.my-8{
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-2{
   margin-bottom: 0.5rem;
 }
@@ -605,6 +643,10 @@ video {
   margin-left: 6rem;
 }
 
+.ml-3{
+  margin-left: 0.75rem;
+}
+
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -613,36 +655,28 @@ video {
   margin-top: 0.25rem;
 }
 
-.mt-20{
-  margin-top: 5rem;
+.mt-10{
+  margin-top: 2.5rem;
 }
 
-.mt-48{
-  margin-top: 12rem;
+.mt-16{
+  margin-top: 4rem;
 }
 
-.mt-5{
-  margin-top: 1.25rem;
+.mt-20{
+  margin-top: 5rem;
 }
 
-.mt-8{
-  margin-top: 2rem;
+.mt-48{
+  margin-top: 12rem;
 }
 
 .mt-\[-2\%\]{
   margin-top: -2%;
 }
 
-.mt-12{
-  margin-top: 3rem;
-}
-
-.mt-3{
-  margin-top: 0.75rem;
-}
-
-.mt-32{
-  margin-top: 8rem;
+.block{
+  display: block;
 }
 
 .inline{
@@ -661,10 +695,26 @@ video {
   display: none;
 }
 
+.h-10{
+  height: 2.5rem;
+}
+
 .h-12{
   height: 3rem;
 }
 
+.h-16{
+  height: 4rem;
+}
+
+.h-28{
+  height: 7rem;
+}
+
+.h-3{
+  height: 0.75rem;
+}
+
 .h-6{
   height: 1.5rem;
 }
@@ -677,26 +727,34 @@ video {
   height: 2rem;
 }
 
+.h-\[800px\]{
+  height: 800px;
+}
+
 .h-full{
   height: 100%;
 }
 
-.h-screen{
-  height: 100vh;
+.min-h-screen{
+  min-height: 100vh;
 }
 
-.h-\[800px\]{
-  height: 800px;
+.w-10{
+  width: 2.5rem;
 }
 
-.h-\[1000px\]{
-  height: 1000px;
+.w-10\/12{
+  width: 83.333333%;
 }
 
 .w-12{
   width: 3rem;
 }
 
+.w-2\/3{
+  width: 66.666667%;
+}
+
 .w-6{
   width: 1.5rem;
 }
@@ -713,10 +771,6 @@ video {
   width: 100%;
 }
 
-.w-\[50rem\]{
-  width: 50rem;
-}
-
 .w-full{
   width: 100%;
 }
@@ -731,6 +785,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-3{
+  --tw-translate-y: 0.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -743,6 +802,10 @@ video {
   list-style-type: disc;
 }
 
+.grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row{
   flex-direction: row;
 }
@@ -751,10 +814,6 @@ video {
   flex-direction: column;
 }
 
-.place-items-center{
-  place-items: center;
-}
-
 .items-center{
   align-items: center;
 }
@@ -771,10 +830,22 @@ video {
   justify-content: space-between;
 }
 
+.justify-around{
+  justify-content: space-around;
+}
+
+.justify-evenly{
+  justify-content: space-evenly;
+}
+
 .gap-16{
   gap: 4rem;
 }
 
+.gap-4{
+  gap: 1rem;
+}
+
 .gap-\[2rem\]{
   gap: 2rem;
 }
@@ -783,18 +854,26 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl{
+  border-radius: 1rem;
+}
+
 .rounded-full{
   border-radius: 9999px;
 }
 
-.rounded-lg{
-  border-radius: 0.5rem;
+.rounded-xl{
+  border-radius: 0.75rem;
 }
 
 .border{
   border-width: 1px;
 }
 
+.border-4{
+  border-width: 4px;
+}
+
 .border-y-\[1px\]{
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -804,21 +883,61 @@ video {
   border-bottom-width: 4px;
 }
 
+.border-black{
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.border-gray-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-rose-400{
+  --tw-border-opacity: 1;
+  border-color: rgb(251 113 133 / var(--tw-border-opacity));
+}
+
 .border-white{
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.bg-black{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-gray-800{
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.bg-rose-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 164 175 / var(--tw-bg-opacity));
+}
+
 .bg-slate-100{
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.bg-slate-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.bg-slate-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
+.bg-stone-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
 .bg-violet-800\/60{
   background-color: rgb(91 33 182 / 0.6);
 }
@@ -828,6 +947,18 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-opacity-0{
+  --tw-bg-opacity: 0;
+}
+
+.bg-opacity-10{
+  --tw-bg-opacity: 0.1;
+}
+
+.bg-opacity-40{
+  --tw-bg-opacity: 0.4;
+}
+
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -838,14 +969,44 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-pink-300{
+  --tw-gradient-from: #f9a8d4 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-pink-400{
+  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-pink-500{
+  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-\[\#FBA277\]{
   --tw-gradient-to: #FBA277 var(--tw-gradient-to-position);
 }
 
+.to-gray-300{
+  --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
+}
+
+.to-orange-300{
+  --tw-gradient-to: #fdba74 var(--tw-gradient-to-position);
+}
+
 .bg-cover{
   background-size: cover;
 }
 
+.bg-clip-padding{
+  background-clip: padding-box;
+}
+
 .bg-center{
   background-position: center;
 }
@@ -854,6 +1015,10 @@ video {
   padding: 0.5rem;
 }
 
+.p-3{
+  padding: 0.75rem;
+}
+
 .p-4{
   padding: 1rem;
 }
@@ -866,6 +1031,11 @@ video {
   padding: 2rem;
 }
 
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-6{
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -876,8 +1046,14 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.pb-0{
-  padding-bottom: 0px;
+.py-3{
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4{
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
 .pb-1{
@@ -912,10 +1088,6 @@ video {
   padding-top: 5rem;
 }
 
-.pt-6{
-  padding-top: 1.5rem;
-}
-
 .text-center{
   text-align: center;
 }
@@ -943,11 +1115,6 @@ video {
   line-height: 2.5rem;
 }
 
-.text-5xl{
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-6xl{
   font-size: 3.75rem;
   line-height: 1;
@@ -968,11 +1135,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-sm{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-xl{
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -982,14 +1144,14 @@ video {
   font-weight: 700;
 }
 
-.font-medium{
-  font-weight: 500;
-}
-
 .font-normal{
   font-weight: 400;
 }
 
+.font-extrabold{
+  font-weight: 800;
+}
+
 .tracking-tight{
   letter-spacing: -0.025em;
 }
@@ -1002,24 +1164,29 @@ video {
   letter-spacing: 0.025em;
 }
 
+.text-\[\#5f2917\]{
+  --tw-text-opacity: 1;
+  color: rgb(95 41 23 / var(--tw-text-opacity));
+}
+
 .text-\[\#9a3412\]{
   --tw-text-opacity: 1;
   color: rgb(154 52 18 / var(--tw-text-opacity));
 }
 
-.text-gray-300{
+.text-black{
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-gray-500{
+.text-custom-pink{
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(255 134 200 / var(--tw-text-opacity));
 }
 
-.text-gray-700{
+.text-gray-500{
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
 .text-white{
@@ -1027,6 +1194,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-0{
+  opacity: 0;
+}
+
 .opacity-70{
   opacity: 0.7;
 }
@@ -1043,9 +1214,29 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline-none{
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+.backdrop-blur-md{
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-blur-sm{
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-filter{
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.transition{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 .transition-all{
@@ -1076,15 +1267,39 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.focus-within\:shadow-lg:focus-within{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+body{
+  overflow-x: hidden;
+  font-family: 'Raleway', sans-serif;
+}
+
+.hover\:scale-110:hover{
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-gray-200:hover{
+.hover\:scale-125:hover{
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:rounded-full:hover{
+  border-radius: 9999px;
+}
+
+.hover\:bg-pink-400:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gradient-to-r:hover{
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
 .hover\:text-gray-700:hover{
@@ -1098,8 +1313,90 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:transition-all:hover{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.group:hover .group-hover\:translate-y-0{
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:bg-opacity-60{
+  --tw-bg-opacity: 0.6;
+}
+
+.group:hover .group-hover\:opacity-100{
+  opacity: 1;
+}
+
+@media (min-width: 640px){
+  .sm\:grid-cols-4{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .sm\:p-4{
+    padding: 1rem;
+  }
+}
+
 @media (min-width: 768px){
-  .md\:block{
-    display: block;
+  .md\:my-0{
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  .md\:h-10{
+    height: 2.5rem;
+  }
+
+  .md\:h-16{
+    height: 4rem;
+  }
+
+  .md\:h-full{
+    height: 100%;
+  }
+
+  .md\:w-1\/3{
+    width: 33.333333%;
+  }
+
+  .md\:w-10{
+    width: 2.5rem;
+  }
+
+  .md\:w-16{
+    width: 4rem;
+  }
+
+  .md\:w-2\/3{
+    width: 66.666667%;
+  }
+
+  .md\:flex-row{
+    flex-direction: row;
+  }
+
+  .md\:text-3xl{
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-xl{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 }
+
+@media (min-width: 1024px){
+  .lg\:h-96{
+    height: 24rem;
+  }
+
+  .lg\:w-2\/3{
+    width: 66.666667%;
+  }
+}
\ No newline at end of file
diff --git a/utils/API_Controller.js b/utils/API_Controller.js
index 43ae919..192d1e2 100644
--- a/utils/API_Controller.js
+++ b/utils/API_Controller.js
@@ -29,7 +29,6 @@ class API_Controller {
         });
 
         const data = await res.json();
-        console.log(data);
         return data;
     }
 }