diff --git a/SpotifyClone/index.html b/SpotifyClone/index.html
new file mode 100644
index 00000000..b4f8174b
--- /dev/null
+++ b/SpotifyClone/index.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+     integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" 
+     referrerpolicy="no-referrer" />
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+     <link rel="icon" href="https://github.com/apna-college/Delta/blob/main/CSS/Project/assets/logo.png?raw=true">
+     <link rel="stylesheet" href="style.css">
+     <title>Spotify web application</title>
+</head>
+<body>
+    <div class="main">
+
+        <div class="sidebar">
+            <div class="nav">
+                <div class="nav-option">
+                    <i class="fa-solid fa-house"></i>
+                 <a href="#">Home</a>
+                </div>
+                <div class="nav-option">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                    <a href="#">Search</a>
+                </div>
+            </div>
+            <div class="library">
+                <div class="option">
+                   <div class="lib-options nav-option">
+                    <i class="fa-solid fa-book"></i>
+                    <a href="#">Your Library</a>
+                   </div>
+                   <div class="icons">
+                    <i class="fa-solid fa-plus"></i>
+                    <i class="fa-solid fa-arrow-right"></i>
+                   </div>
+                </div>
+                <div class="lib-box">
+                    <div class="box">
+                       <div class="box-p1">Create your first playlist</div>
+                       <div class="box-p2">It's easy we'll help you</div>
+                      <button class="badge">Create playlist</button>
+                    </div>
+                    <div class="box" style="height: 12rem;">
+                        <div class="box-p1">Let's find some podcast to follow</div>
+                        <div class="box-p2">We'll keep you uploading on new episodes</div>
+                       <button class="badge">Browse podacst</button>
+                     </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="sticky-nav">
+                <div class="sticky-nav-icons">
+                    <img src="backward_icon.png">
+                    <img src="forward_icon.png" class="hide">
+                </div>
+              <div class="sticky-nav-options">
+                <button class="badge nav-item hide" >Explore premium</button>
+                <button class="badge nav-item"><i class="fa-solid fa-download"></i>Install app</button>
+                <i class="fa-regular fa-user nav-item"></i>
+            </div>
+              </div>
+               
+          
+                <h2>Recently Played</h2>
+                <div class="card-container">
+                    <div class="card">
+                       <img  class="card-image" src="ti.jpeg">
+                       <p class="card-title">Top 50 global</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                </div>
+
+                <h2>Trending Now Near You</h2>
+                <div class="card-container">
+                    <div class="card">
+                       <img  class="card-image" src="week.jpg">
+                       <p class="card-title">Weekend</p>
+                       <p class="card-info">Listen to your favourite weekend's song on loop.....</p>
+                    </div>
+                    <div class="card">
+                        <img  class="card-image" src="images.jpeg">
+                        <p class="card-title">Taylor's Trending</p>
+                        <p class="card-info">Listen to your favourite Taylor's song on loop.....</p>
+                     </div>
+                     <div class="card">
+                        <img  class="card-image" src="selena.jpg">
+                        <p class="card-title">Selena Gomez</p>
+                        <p class="card-info">Listen to your favourite Selena's song on loop.....</p>
+                     </div>
+                     <div class="card">
+                        <img  class="card-image" src="ss.jpg">
+                        <p class="card-title">Senorita Sunset</p>
+                        <p class="card-info">Listen to your favourite song on loop......</p>
+                     </div>
+                     <div class="card">
+                        <img  class="card-image" src="mma.jpg">
+                        <p class="card-title">Marshmallo</p>
+                        <p class="card-info">Listen to your favourite Marshmallo's song on loop.....</p>
+                     </div>
+                   
+
+                </div> 
+                <h2>Featured Charts</h2>
+                <div class="card-container">
+                    <div class="card">
+                       <img  class="card-image" src="fc1.webp">
+                       <p class="card-title">Weekend Top 50</p>
+                       <p class="card-info">Listen to your favourite weekend song on loop.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="fc2.webp">
+                       <p class="card-title">Pop 50 Global</p>
+                       <p class="card-info">Listen to your favourite pop music on loop.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="fc3.jpg">
+                       <p class="card-title">AP Dhillon Top 50 </p>
+                       <p class="card-info">Listen to your favourite Dhillon's song on loop.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="fc4.jpeg">
+                       <p class="card-title">The Rage Band</p>
+                       <p class="card-info">Listen to your favourite Rage Band song on loop......</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="fc5.jpeg">
+                       <p class="card-title">Drake Top 50</p>
+                       <p class="card-info">Listen to your favourite Drake's song on loop.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="fc6.jpg">
+                       <p class="card-title">Top 50 Black-Pink </p>
+                       <p class="card-info">Listen to your favourite Band's song in loop.....</p>
+                    </div> 
+                </div>
+                <h2>Recently Visited</h2>
+                <div class="card-container">
+                    <div class="card">
+                       <img  class="card-image" src="rp1.webp">
+                       <p class="card-title">Mid night's</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="rp2.jpeg">
+                       <p class="card-title">Doja Cat</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="rp3.webp">
+                       <p class="card-title">God is a women</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="rp4.jpeg">
+                       <p class="card-title">Illusions</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                    <div class="card">
+                       <img  class="card-image" src="rp5.webp">
+                       <p class="card-title">We can't be friends</p>
+                       <p class="card-info">Your daily update of the most played tracks.....</p>
+                    </div>
+                    <div class="card">
+                        <img  class="card-image" src="rp6.jpg">
+                        <p class="card-title">Positions</p>
+                        <p class="card-info">Your daily update of the most played tracks.....</p>
+                     </div>
+                </div>
+               <div class="footer">
+                <div class="line"></div>
+               </div>
+                </div>
+            
+        </div>
+
+    
+        <div class="music-player">
+            <div class="album">
+                <div class="first-line">
+                    <img src="assh.jpg" class="image-inside" alt="Album Cover">
+                    <p class="textm">Tu Aashiqui</p>
+                    <i class="fa-regular fa-heart" id="first"></i>
+                    <i class="fa-solid fa-music" id="second"></i>
+                </div>
+               
+            </div>
+        
+        
+        
+        <div class="player">
+            <div class="player-control">
+                <img src="player_icon1.png" class="player-control-icon">
+                <img src="player_icon2.png" class="player-control-icon">
+                <img src="player_icon3.png" class="player-control-icon" style="opacity: 1 ; height: 2rem;">
+                <img src="player_icon4.png" class="player-control-icon">
+                <img src="player_icon5.png" class="player-control-icon">
+            </div>
+            <div class="playback-bar">
+                <span class="curr-time">00.00</span>
+                <input type="range" min="0" max="100" class="progress-bar">
+                <span class="tot-time">3.14</span>
+            </div>
+        </div>
+        <div class="controls">
+            <i class="fa-solid fa-play" id="f1"></i>
+            <i class="fa-solid fa-microphone" id="f2"></i>
+            <i class="fa-brands fa-pagelines " id="f3"></i>
+            <i class="fa-solid fa-box"id=f4 ></i>
+            <i class="fa-solid fa-volume-xmark" id="f5"></i>
+            <input type="range" min="0" max="100"class=volume>
+        </div>
+     </div>
+    </div>
+</body>
+</html>
diff --git a/SpotifyClone/style.css b/SpotifyClone/style.css
new file mode 100644
index 00000000..50e165d8
--- /dev/null
+++ b/SpotifyClone/style.css
@@ -0,0 +1,292 @@
+*{
+    font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight:500;
+  font-style: normal;
+}
+body{
+    background-color: black;
+    color: white;
+    margin: 0;
+    overflow: hidden;
+}
+.main{
+    display: flex;
+    height: 100vh;
+    padding: 0.5rm;
+}
+.sidebar{
+background-color:black;
+width: 300px;
+border-radius: 1rem;
+margin: 0.5rem;
+}
+.main-content{
+background-color:rgb(34, 33, 33);
+flex:1;
+border-radius: 1rem;
+overflow: auto;
+padding: 0 1.5rem 0 1.5rem;
+}
+.music-player{
+background-color: black;
+height: 72px;
+width: 100%;
+bottom: 0;
+position: fixed;
+border-radius: 1rem;
+}
+a{
+    text-decoration: none;
+    color: white;
+}
+.nav{
+    background-color: rgb(34, 33, 33);
+    border-radius: 15px;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.75rem;
+}
+.nav-option{
+   line-height:2.5rem;
+   opacity: 0.75;
+   padding: 0.5rem;
+}
+.nav-option:hover{
+   
+    opacity: 1;
+ }
+.nav-option i{
+    font-size: 1.75 rem;
+}
+.nav-option a{
+    font-size: 1rem;
+    margin-left: 1rem;
+}
+.option{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.library{
+    border-radius: 1rem;
+    background-color: rgb(34, 33, 33);
+    height: 100%;
+    margin-top: 0.74rem;
+    padding: 0.5rem 0.75rem;
+}
+.icons{
+    font-size: 1rem;
+    opacity:0.7;
+    margin:1rem
+}
+.icons i{
+    opacity:0.7;
+    margin-right: 1rm;
+}
+.icons i:hover{
+    opacity:1;
+   
+}
+.box{
+    background-color: rgb(71, 70, 70);
+    height: 8.125rem;
+    border-radius: 0.813rem;
+    margin-top: 1rem;
+}
+.box-p1{
+    line-height:2.5rem;
+   margin-left: 1rem;
+}
+.box-p2{
+    line-height:2.5rem;
+    margin-left: 1rem;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-weight: 300;
+}
+.badge{
+    margin-left: 20px;
+    background-color: white;
+    border:none;
+    border-radius: 100px;
+    padding: 0.25rem 1rem;
+    font-weight: 700;
+}
+.sticky-nav{
+    position: sticky;
+    top:0;
+    background-color:rgb(34, 33, 33) ;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    margin-left: 7px;
+    z-index: 10;
+}
+.sticky-nav-icons{
+    margin-left: 0.75rem;
+}
+.sticky-nav-options{
+    margin-left: 0.75rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.nav-items{
+    margin-right: 1rem;
+}
+@media(max-width:1000px){
+ .hide{
+    display: none;
+ }
+}
+.card{
+    background-color: rgb(71, 70, 70);
+    width:150px;
+    border-radius:0.5rem;
+    padding :0.5rem;
+    margin:1.5rem
+}
+.card-container{
+    display:flex;
+   flex-wrap: wrap;
+}
+.card-image{
+    width:100%;
+}
+.card-title{
+    font-weight: 600;
+}
+.card-info{
+    opacity:0.8;
+    font-size: 0.75rem;
+}
+.footer{
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.line{
+    height: 50%;
+    width: 90%;
+    border-top:1px solid white ;
+    opacity: 0.4;
+}
+.music-player{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.album{
+    width: 25%;
+}
+.player{
+    width: 50%;
+}
+.control{
+    width: 25%;
+}
+.player-control{
+    display: flex;
+    justify-content: center;
+  align-items: center;
+}
+.player-control-icon{
+    height: 1rem;
+  
+    margin-right: 2rem;
+    margin-bottom: 0.1rem;
+    opacity: 0.7;
+}
+.player-control-icon:hover{
+opacity:1;
+} 
+.playback-bar{
+    display: flex;
+   justify-content: center;
+    align-items: center;
+}
+.progress-bar{
+    width: 70%;
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+.progress-bar::-webkit-slider-runnable-track{
+    background-color: #ddd;
+    border-radius: 100px;
+    height: 0.2rem;
+}
+.progress-bar::-webkit-slider-thumb{
+    appearance: none;
+    height: 1rem;
+    width: 1rem;
+    background-color: #1bd760;
+    border-radius: 50%;
+margin-top: -6px;
+}
+.volume{
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+.volume::-webkit-slider-runnable-track{
+    background-color: #ddd;
+    border-radius: 100px;
+    height: 0.2rem;
+}
+.volume::-webkit-slider-thumb{
+    appearance: none;
+    height: 1rem;
+    width: 1rem;
+    background-color: #1bd760;
+    border-radius: 50%;
+margin-top: -6px;
+}
+.first-line {
+    display: flex; /* Align items in the same line */
+    align-items: center; /* Center items vertically */
+}
+
+.first-line img {
+    margin-right: 10px; /* Space between image and text */
+}
+
+.first-line p {
+    margin-right: 10px; 
+    font-weight: 600;/* Space between text and icons */
+}
+
+.artist-name {
+    margin-top: 5px; /* Space above the artist name */
+}
+
+.image-inside{
+   
+    height: 50px;
+    width: 50px;
+}
+#first{
+    margin-left: 5px;
+}
+#second{
+    margin-left: 5px;
+}
+#f1{
+    margin-left: 2px;
+}
+#f2{
+    margin-left: 2px;
+}
+#f3{
+    margin-left: 2px;
+}
+#f4{
+    margin-left: 2px;
+}
+#f5{
+    margin-left: 2px;
+}
+
