diff --git a/src/Components/Player.jsx b/src/Components/Player.jsx
index 3f05154..d448331 100644
--- a/src/Components/Player.jsx
+++ b/src/Components/Player.jsx
@@ -3,6 +3,14 @@ import "../App.css";
 import Background from "/Background.png";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import Search from '../assets/search.svg';
+import HeartFill from '../assets/heart-fill.svg';
+import Pause from '../assets/pause.svg';
+import Repeat from '../assets/repeat.svg';
+import Shuffle from '../assets/shuffle.svg';
+import Previous from '../assets/previous.svg';
+import Next from '../assets/next.svg';
+import FullScreen from '../assets/full-screen.svg'
 
 export default function Player({ accessToken }) {
   const [searchInput, setSearchInput] = useState("");
@@ -69,184 +77,65 @@ export default function Player({ accessToken }) {
         style={{ backgroundImage: `url(${Background})` }}
       >
         <Navbar />
-        <div className="absolute inset-0 mt-32">
-          <div className="mx-auto w-[50rem] shadow-lg">
-            <div className="flex items-center w-full h-12 rounded-lg focus-within:shadow-lg">
-              <div className="grid place-items-center h-full w-12 text-gray-300 bg-white ">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-              </div>
-
-              <input
-                className="peer h-full w-full outline-none text-sm text-gray-700 pr-2 rounded-lg"
-                type="text"
-                id="search"
-                placeholder="Search your favourite music..."
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-              />
-              <button
-                className="mx-4 bg-white rounded-lg py-2 px-6"
-                onClick={search}
-              >
-                Search
-              </button>
-            </div>
+        <div className="flex flex-col items-center justify-center min-h-screen bg-red-lightest w-full">
+          <div className="flex mt-16 justify-between bg-white rounded-full w-10/12 lg:w-2/3">
+            <input 
+              className="ml-3 rounded-full px-1 py-3" 
+              type="text" 
+              id="search"
+              placeholder="Search..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+            />
+            <img onClick={search} src={Search} className="w-12 h-12" />
           </div>
-        </div>
-
-        <div className="flex items-center justify-center h-screen bg-red-lightest">
-          <div
-            className={`fullscreen-div relative mt-24${isFullScreen
-                ? "fullscreen-styles"
-                : "  bg-white shadow-lg rounded-lg w-[50rem]"
-              }`}
-          >
-            <div className={`${isFullScreen ? "clock" : "no-clock"}`}>
-              <div className="time">
-                {clock.toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: true,
-                })}
-              </div>
+          <div className="flex flex-col md:flex-row items-center w-10/12 lg:w-2/3 lg:h-96 p-8 my-8 bg-slate-300 bg-blur relative bg-opacity-40 shadow-lg rounded-2xl">
+          <div className={`w-64 md:w-1/3 h-64 md:h-full bg-white mx-2 my-6 md:my-0 rounded-xl ${isFullScreen ? "fullscreen-styles" : ""}`}>
+              <img className="w-full h-full rounded-xl" src="https://i.ibb.co/jWnV2tR/music-player.jpg" alt="music-player" />
             </div>
-            <div className={`${isFullScreen ? "flex-style" : "flex"}`}>
-              <div className={`${isFullScreen ? "image" : ""}`}>
-                <img
-                  className="w-full rounded hidden md:block m-2"
-                  src="https://tailwindcss.com/img/card-top.jpg"
-                  alt="Album Pic"
-                />
-              </div>
-              <div className={`w-full ${isFullScreen ? "music" : " p-8 pb-0"}`}>
-                <div
-                  className={`${isFullScreen ? "title" : "flex justify-between"
-                    }`}
-                >
-                  <div>
-                    <h3 className="text-2xl text-grey-darkest font-medium">
-                      A Sky Full of Stars
-                    </h3>
-                    <p className="text-sm text-grey mt-1">Ghost Stories</p>
-                  </div>
-                  <div className="text-red-lighter">
-                    <svg
-                      className="w-6 h-6"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z" />
-                    </svg>
-                  </div>
-                  <div className="text-red-lighter">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth="1.5"
-                      stroke="currentColor"
-                      className="w-6 h-6"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"
-                      />
-                    </svg>
-                  </div>
-                  <div className="text-red-lighter" onClick={toggleFullScreen}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
-                      stroke="currentColor"
-                      className="w-6 h-6"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-                      />
-                    </svg>
-                  </div>
+            <div className="w-full md:w-2/3 h-full bg-white mx-2 rounded-xl p-2 sm:p-4">
+              <div className="h-28">
+                <div className="w-full flex items-center justify-between">
+                  <p className="font-bold text-2xl md:text-3xl">Shape of You</p>
+                  <span className="flex items-center">
+                    <img src={HeartFill} className="w-10 h-10 mx-3 cursor-pointer" />
+                    <div className="text-red-lighter" onClick={toggleFullScreen}>
+                      <img src={FullScreen} className="w-10 h-10 mx-3 cursor-pointer"/>
+                    </div>
+                  </span>
                 </div>
-
-                <div className="flex justify-between items-center mt-8">
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M6.59 12.83L4.4 15c-.58.58-1.59 1-2.4 1H0v-2h2c.29 0 .8-.2 1-.41l2.17-2.18 1.42 1.42zM16 4V1l4 4-4 4V6h-2c-.29 0-.8.2-1 .41l-2.17 2.18L9.4 7.17 11.6 5c.58-.58 1.59-1 2.41-1h2zm0 10v-3l4 4-4 4v-3h-2c-.82 0-1.83-.42-2.41-1l-8.6-8.59C2.8 6.21 2.3 6 2 6H0V4h2c.82 0 1.83.42 2.41 1l8.6 8.59c.2.2.7.41.99.41h2z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M4 5h3v10H4V5zm12 0v10l-9-5 9-5z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker p-8 rounded-full bg-red-light shadow-lg">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M5 4h3v12H5V4zm7 0h3v12h-3V4z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M13 5h3v10h-3V5zM4 5l9 5-9 5V5z" />
-                    </svg>
-                  </div>
-                  <div className="text-grey-darker">
-                    <svg
-                      className="w-8 h-8"
-                      fill="currentColor"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20"
-                    >
-                      <path d="M5 4a2 2 0 0 0-2 2v6H0l4 4 4-4H5V6h7l2-2H5zm10 4h-3l4-4 4 4h-3v6a2 2 0 0 1-2 2H6l2-2h7V8z" />
-                    </svg>
+                <div className="w-full flex items-center justify-between">
+                  <p className="my-3 text-lg md:text-xl">Ed Sheeran</p>
+                  <div className="time">
+                    {clock.toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      hour12: true,
+                    })}
                   </div>
                 </div>
-                <div className="flex justify-between text-sm text-grey-darker">
-                  <p>0:40</p>
-                  <p>4:20</p>
+              </div>
+              <div className="h-16 my-5">
+                <div className="mx-3 bg-slate-200 h-3 rounded-full">
+                  <div className="bg-rose-300 h-3 rounded-full" style={{width: '50%'}}></div>
+                </div>
+                <div className="w-full flex justify-between items-center">
+                  <p>02:00</p>
+                  <p>04:00</p>
                 </div>
               </div>
+              <div className="flex justify-around items-center">
+                <img src={Shuffle} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <img src={Previous} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <div className="w-12 h-12 md:w-16 md:h-16 bg-stone-100 border-4 border-rose-400 rounded-full flex items-center justify-center">
+                  <img src={Pause} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                </div>
+                <img src={Next} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+                <img src={Repeat} className="w-6 md:w-10 md:h-10 cursor-pointer" />
+              </div>
             </div>
           </div>
         </div>
-
         <Footer />
       </div>
     </>
diff --git a/src/assets/full-screen.svg b/src/assets/full-screen.svg
new file mode 100644
index 0000000..4431543
--- /dev/null
+++ b/src/assets/full-screen.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/heart-fill.svg b/src/assets/heart-fill.svg
new file mode 100644
index 0000000..aa9da55
--- /dev/null
+++ b/src/assets/heart-fill.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#fb7185" d="M58.714,29.977c0,0-0.612,0.75-1.823,1.961S33.414,55.414,33.414,55.414C33.023,55.805,32.512,56,32,56
+		s-1.023-0.195-1.414-0.586c0,0-22.266-22.266-23.477-23.477s-1.823-1.961-1.823-1.961C3.245,27.545,2,24.424,2,21
+		C2,13.268,8.268,7,16,7c3.866,0,7.366,1.566,9.899,4.101l0.009-0.009l4.678,4.677c0.781,0.781,2.047,0.781,2.828,0l4.678-4.677
+		l0.009,0.009C40.634,8.566,44.134,7,48,7c7.732,0,14,6.268,14,14C62,24.424,60.755,27.545,58.714,29.977z"/>
+	<path fill="#fb7185" d="M58.714,29.977c0,0-0.612,0.75-1.823,1.961S33.414,55.414,33.414,55.414C33.023,55.805,32.512,56,32,56
+		s-1.023-0.195-1.414-0.586c0,0-22.266-22.266-23.477-23.477s-1.823-1.961-1.823-1.961C3.245,27.545,2,24.424,2,21
+		C2,13.268,8.268,7,16,7c3.866,0,7.366,1.566,9.899,4.101l0.009-0.009l4.678,4.677c0.781,0.781,2.047,0.781,2.828,0l4.678-4.677
+		l0.009,0.009C40.634,8.566,44.134,7,48,7c7.732,0,14,6.268,14,14C62,24.424,60.755,27.545,58.714,29.977z"/>
+	<g>
+		<path fill="#394240" d="M48,5c-4.418,0-8.418,1.791-11.313,4.687l-3.979,3.961c-0.391,0.391-1.023,0.391-1.414,0
+			c0,0-3.971-3.97-3.979-3.961C24.418,6.791,20.418,5,16,5C7.163,5,0,12.163,0,21c0,3.338,1.024,6.436,2.773,9
+			c0,0,0.734,1.164,1.602,2.031s24.797,24.797,24.797,24.797C29.953,57.609,30.977,58,32,58s2.047-0.391,2.828-1.172
+			c0,0,23.93-23.93,24.797-24.797S61.227,30,61.227,30C62.976,27.436,64,24.338,64,21C64,12.163,56.837,5,48,5z M58.714,29.977
+			c0,0-0.612,0.75-1.823,1.961S33.414,55.414,33.414,55.414C33.023,55.805,32.512,56,32,56s-1.023-0.195-1.414-0.586
+			c0,0-22.266-22.266-23.477-23.477s-1.823-1.961-1.823-1.961C3.245,27.545,2,24.424,2,21C2,13.268,8.268,7,16,7
+			c3.866,0,7.366,1.566,9.899,4.101l0.009-0.009l4.678,4.677c0.781,0.781,2.047,0.781,2.828,0l4.678-4.677l0.009,0.009
+			C40.634,8.566,44.134,7,48,7c7.732,0,14,6.268,14,14C62,24.424,60.755,27.545,58.714,29.977z"/>
+		<path fill="#394240" d="M48,11c-0.553,0-1,0.447-1,1s0.447,1,1,1c4.418,0,8,3.582,8,8c0,0.553,0.447,1,1,1s1-0.447,1-1
+			C58,15.478,53.522,11,48,11z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/heart.svg b/src/assets/heart.svg
new file mode 100644
index 0000000..fdc2e54
--- /dev/null
+++ b/src/assets/heart.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#231F20" d="M48,6c-4.418,0-8.418,1.791-11.313,4.687l-3.979,3.961c-0.391,0.391-1.023,0.391-1.414,0
+		c0,0-3.971-3.97-3.979-3.961C24.418,7.791,20.418,6,16,6C7.163,6,0,13.163,0,22c0,3.338,1.024,6.436,2.773,9
+		c0,0,0.734,1.164,1.602,2.031s24.797,24.797,24.797,24.797C29.953,58.609,30.977,59,32,59s2.047-0.391,2.828-1.172
+		c0,0,23.93-23.93,24.797-24.797S61.227,31,61.227,31C62.976,28.436,64,25.338,64,22C64,13.163,56.837,6,48,6z M58.714,30.977
+		c0,0-0.612,0.75-1.823,1.961S33.414,56.414,33.414,56.414C33.023,56.805,32.512,57,32,57s-1.023-0.195-1.414-0.586
+		c0,0-22.266-22.266-23.477-23.477s-1.823-1.961-1.823-1.961C3.245,28.545,2,25.424,2,22C2,14.268,8.268,8,16,8
+		c3.866,0,7.366,1.566,9.899,4.101l0.009-0.009l4.678,4.677c0.781,0.781,2.047,0.781,2.828,0l4.678-4.677l0.009,0.009
+		C40.634,9.566,44.134,8,48,8c7.732,0,14,6.268,14,14C62,25.424,60.755,28.545,58.714,30.977z"/>
+	<path fill="#231F20" d="M48,12c-0.553,0-1,0.447-1,1s0.447,1,1,1c4.418,0,8,3.582,8,8c0,0.553,0.447,1,1,1s1-0.447,1-1
+		C58,16.478,53.522,12,48,12z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/next.svg b/src/assets/next.svg
new file mode 100644
index 0000000..4ac494f
--- /dev/null
+++ b/src/assets/next.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -2 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>next [#998]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-144.000000, -3805.000000)" fill="#fb7185">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M99.684,3649.69353 L95.207,3652.82453 C94.571,3653.25353 94,3652.84553 94,3652.13153 L94,3650.14053 L89.78,3652.82453 C89.145,3653.25353 88,3652.84553 88,3652.13153 L88,3645.86853 C88,3645.15453 89.145,3644.74653 89.78,3645.17453 L94,3647.85953 L94,3645.86853 C94,3645.15453 94.571,3644.74653 95.207,3645.17453 L99.516,3648.30653 C100.03,3648.65353 100.198,3649.34653 99.684,3649.69353" id="next-[#998]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/pause.svg b/src/assets/pause.svg
new file mode 100644
index 0000000..e8c03c5
--- /dev/null
+++ b/src/assets/pause.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-1 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>pause [#1006]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-227.000000, -3765.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M172,3605 C171.448,3605 171,3605.448 171,3606 L171,3612 C171,3612.552 171.448,3613 172,3613 C172.552,3613 173,3612.552 173,3612 L173,3606 C173,3605.448 172.552,3605 172,3605 M177,3606 L177,3612 C177,3612.552 176.552,3613 176,3613 C175.448,3613 175,3612.552 175,3612 L175,3606 C175,3605.448 175.448,3605 176,3605 C176.552,3605 177,3605.448 177,3606" id="pause-[#1006]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/play.svg b/src/assets/play.svg
new file mode 100644
index 0000000..b076268
--- /dev/null
+++ b/src/assets/play.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-1 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>play [#1000]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-65.000000, -3803.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M18.074,3650.7335 L12.308,3654.6315 C10.903,3655.5815 9,3654.5835 9,3652.8985 L9,3645.1015 C9,3643.4155 10.903,3642.4185 12.308,3643.3685 L18.074,3647.2665 C19.306,3648.0995 19.306,3649.9005 18.074,3650.7335" id="play-[#1000]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/previous.svg b/src/assets/previous.svg
new file mode 100644
index 0000000..942bc27
--- /dev/null
+++ b/src/assets/previous.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -2 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>previous [#999]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-104.000000, -3805.000000)" fill="#fb7185">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M59.9990013,3645.86816 L59.9990013,3652.13116 C59.9990013,3652.84516 58.8540013,3653.25316 58.2180013,3652.82516 L53.9990013,3650.14016 L53.9990013,3652.13116 C53.9990013,3652.84516 53.4260013,3653.25316 52.7900013,3652.82516 L48.4790013,3649.69316 C47.9650013,3649.34616 47.7980013,3648.65316 48.3120013,3648.30616 L52.7900013,3645.17516 C53.4260013,3644.74616 53.9990013,3645.15416 53.9990013,3645.86816 L53.9990013,3647.85916 L58.2180013,3645.17516 C58.8540013,3644.74616 59.9990013,3645.15416 59.9990013,3645.86816" id="previous-[#999]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/repeat.svg b/src/assets/repeat.svg
new file mode 100644
index 0000000..7f8f4a4
--- /dev/null
+++ b/src/assets/repeat.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 2L14 5M14 5L11 8M14 5H6.8C5.11984 5 4.27976 5 3.63803 5.32698C3.07354 5.6146 2.6146 6.07354 2.32698 6.63803C2 7.27976 2 8.11984 2 9.8V15.5C2 15.9644 2 16.1966 2.02567 16.3916C2.2029 17.7378 3.26222 18.7971 4.60842 18.9743C4.80337 19 5.03558 19 5.5 19M10 19H17.2C18.8802 19 19.7202 19 20.362 18.673C20.9265 18.3854 21.3854 17.9265 21.673 17.362C22 16.7202 22 15.8802 22 14.2V8.5C22 8.03558 22 7.80337 21.9743 7.60842C21.7971 6.26222 20.7378 5.2029 19.3916 5.02567C19.1966 5 18.9644 5 18.5 5M10 19L13 22M10 19L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000..d38a17c
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-1 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><path d="M16.417 9.583A7.917 7.917 0 1 1 8.5 1.666a7.917 7.917 0 0 1 7.917 7.917zm-3.297 3.103-2.424-2.424a3.978 3.978 0 1 0-1.119 1.12l2.424 2.423a.791.791 0 1 0 1.119-1.12zM9.633 5.808a3.189 3.189 0 1 1-2.255-.934 3.167 3.167 0 0 1 2.255.934z"/></svg>
\ No newline at end of file
diff --git a/src/assets/shuffle.svg b/src/assets/shuffle.svg
new file mode 100644
index 0000000..e693b56
--- /dev/null
+++ b/src/assets/shuffle.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Media / Shuffle">
+<path id="Vector" d="M18 20L21 17M21 17L18 14M21 17H17C14.2386 17 12 14.7614 12 12C12 9.23858 9.76142 7 7 7H3M18 4L21 7M21 7L18 10M21 7L17 7C15.8744 7 14.8357 7.37194 14 7.99963M3 17H7C8.12561 17 9.16434 16.6277 10 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
\ No newline at end of file