diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/Payment Status nptel genai.pdf b/Domains/Frontend/MiniProjects/Spotify clone/files/Payment Status nptel genai.pdf
new file mode 100644
index 00000000..7fa12c87
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/Payment Status nptel genai.pdf differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon1.png b/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon1.png
new file mode 100644
index 00000000..b61505e3
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon1.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon2.png b/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon2.png
new file mode 100644
index 00000000..69e2cca4
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/album_icon2.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/backward_icon.png b/Domains/Frontend/MiniProjects/Spotify clone/files/backward_icon.png
new file mode 100644
index 00000000..9cdd027b
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/backward_icon.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card1img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card1img.jpeg
new file mode 100644
index 00000000..662ed4c8
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card1img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card2img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card2img.jpeg
new file mode 100644
index 00000000..8c1f0f1a
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card2img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card3img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card3img.jpeg
new file mode 100644
index 00000000..5a7107e6
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card3img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card4img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card4img.jpeg
new file mode 100644
index 00000000..2e45b6f8
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card4img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card5img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card5img.jpeg
new file mode 100644
index 00000000..d9126f32
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card5img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card6img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card6img.jpeg
new file mode 100644
index 00000000..213b2b8d
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card6img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card7img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card7img.jpeg
new file mode 100644
index 00000000..67c151e3
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card7img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/card8img.jpeg b/Domains/Frontend/MiniProjects/Spotify clone/files/card8img.jpeg
new file mode 100644
index 00000000..9981f937
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/card8img.jpeg differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/controld_icon2.png b/Domains/Frontend/MiniProjects/Spotify clone/files/controld_icon2.png
new file mode 100644
index 00000000..e15eb10c
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/controld_icon2.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon1.png b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon1.png
new file mode 100644
index 00000000..ee9559a2
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon1.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon3.png b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon3.png
new file mode 100644
index 00000000..ec03fd35
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon3.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon4.png b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon4.png
new file mode 100644
index 00000000..4a605703
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon4.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon5.png b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon5.png
new file mode 100644
index 00000000..3ba434cd
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon5.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/forward_icon.png b/Domains/Frontend/MiniProjects/Spotify clone/files/forward_icon.png
new file mode 100644
index 00000000..ece8e488
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/forward_icon.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/library_icon.png b/Domains/Frontend/MiniProjects/Spotify clone/files/library_icon.png
new file mode 100644
index 00000000..77a06317
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/library_icon.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/logo.png b/Domains/Frontend/MiniProjects/Spotify clone/files/logo.png
new file mode 100644
index 00000000..0d54aa81
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/logo.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/play_musicbar.png b/Domains/Frontend/MiniProjects/Spotify clone/files/play_musicbar.png
new file mode 100644
index 00000000..dd45993c
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/play_musicbar.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon1.png b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon1.png
new file mode 100644
index 00000000..151b6db7
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon1.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon2.png b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon2.png
new file mode 100644
index 00000000..ae5a9883
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon2.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon3.png b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon3.png
new file mode 100644
index 00000000..dd45993c
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon3.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon4.png b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon4.png
new file mode 100644
index 00000000..a1cb4fb9
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon4.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon5.png b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon5.png
new file mode 100644
index 00000000..d217a727
Binary files /dev/null and b/Domains/Frontend/MiniProjects/Spotify clone/files/player_icon5.png differ
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/index.html b/Domains/Frontend/MiniProjects/Spotify clone/index.html
new file mode 100644
index 00000000..27e5d885
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/Spotify clone/index.html	
@@ -0,0 +1,168 @@
+<!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="styles.css">
+    <link rel="icon" href="./files/logo.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Spotify - Web Player: Music for everyone</title>
+    <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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="main">
+        <div class="sidebar">
+            <div class="nav">
+                <div class="nav-option" style="opacity: 1.5;">
+                    <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="options">
+                    <div class="lib-option nav-option">
+                        <img src="./files/library_icon.png">
+                        <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-option">
+                    <div class="box">
+                        <p class="box-p1">Create your first playlist</p>
+                        <p class="box-p2">It's easy, we'll help you</p>
+                        <button class="badge">Create playlist</button>
+                    </div>
+                    <div class="box">
+                        <p class="box-p1">Let's find some podcasts to follow</p>
+                        <p class="box-p2">we'll keep you updated on new episodes</p>
+                        <button class="badge">Browse podcasts</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="sticky-nav">
+                <div class="nav-icons">
+                    <img src="./files/backward_icon.png">
+                    <img src="./files/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 dark-badge"><i class="fa-solid fa-circle-arrow-down" style="margin-right: 5px;"></i>Install App</button>
+                    <i class="fa-solid fa-user nav-item"></i>
+                </div> 
+            </div>
+            <h2>Recently Played</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./files/card1img.jpeg" class="card-img">
+                    <p class="card-title">Top 50 - Global</p>
+                    <p class="card-info">Your daily updates of the most played...</p>
+                </div>
+                <div class="card">
+                    <img src="./files/card7img.jpeg" class="card-img">
+                    <p class="card-title">Ye Waadiyan</p>
+                    <p class="card-info">Navjot Ahuja</p>
+                </div>
+            </div>
+
+            <h2>Trending now near you</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./files/card2img.jpeg" class="card-img">
+                    <p class="card-title">Mahiya Jinna Sohna</p>
+                    <p class="card-info">Darshan Rawal</p>
+                </div>
+
+                <div class="card">
+                    <img src="./files/card3img.jpeg" class="card-img">
+                    <p class="card-title">Mere Pass Tum Ho</p>
+                    <p class="card-info">Rahat Fateh Ali Khan (Lofi mix)</p>
+                </div>
+
+                <div class="card">
+                    <img src="./files/card4img.jpeg" class="card-img">
+                    <p class="card-title">Naa Ready</p>
+                    <p class="card-info"> Anirudh Ravichander,Vijay,Asal Kolaar</p>
+                </div>
+                <div class="card">
+                    <img src="./files/card7img.jpeg" class="card-img">
+                    <p class="card-title">Ye Waadiyan</p>
+                    <p class="card-info">Navjot Ahuja</p>
+                </div>
+                <div class="card">
+                    <img src="./files/card8img.jpeg" class="card-img">
+                    <p class="card-title">Is This Love</p>
+                    <p class="card-info">Mohit Chauhan,Shreya Ghoshal,Pritam</p>
+                </div>
+            </div>
+
+            <h2>Featured Charts</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./files/card5img.jpeg" class="card-img">
+                    <p class="card-title">Top songs - Global</p>
+                    <p class="card-info">Your daily updates of the most played...</p>
+                </div>
+                <div class="card">
+                    <img src="./files/card6img.jpeg" class="card-img">
+                    <p class="card-title">Top songs - India</p>
+                    <p class="card-info">Your daily updates of the most played...</p>
+                </div>
+                <div class="card">
+                    <img src="./files/card1img.jpeg" class="card-img">
+                    <p class="card-title">Top 50 - Global</p>
+                    <p class="card-info">Your daily updates of the most played...</p>
+                </div>
+            </div>
+            <div class="footer">
+                <div class="line"></div>
+            </div>
+        </div>
+        <div class="music-player">
+            <div class="music-img">
+                <img src="./files/card8img.jpeg" class="music-imgs">
+                <div class="music">
+                     <span class="music-title">Is This Love</span>
+                     <span class="music-info">Mohit Chauhan,Shreya Ghoshal,Pritam</span>
+                </div>
+            </div>
+            <img src="./files/album_icon1.png"  alt="" class="album-icon" >
+            <!--<img src="./files/album_icon2.png "  alt="" class="album-icon2">-->
+            <div class="player">
+                <div class="player-control">
+                    <img src="./files/player_icon1.png" class="player-control-icon">
+                    <img src="./files/player_icon2.png" class="player-control-icon">
+                    <img src="./files/player_icon3.png" class="player-control-icon" style="opacity: 1; height: 2rem;">
+                    <img src="./files/player_icon4.png" class="player-control-icon">
+                    <img src="./files/player_icon5.png" class="player-control-icon">
+                </div>
+                <div class="playback-bar">
+                    <span class="current-time">00.00</span>
+                    <input type="range" min="0" max="100" class="progress-bar" step="1"></input>
+                    <span class="total-time">3.33</span>
+                </div>
+            </div>
+            <div class="controls">
+                <img src="./files/controls_icon1.png" alt="" class="control-icon" >
+                <img src="./files/controld_icon2.png" alt="" class="control-icon">
+                <img src="./files/controls_icon3.png" alt="" class="control-icon" style="height: 1.25rem; width: 0.9rem;">
+                <img src="./files/controls_icon4.png" alt="" class="control-icon" style="height: 1.25rem; width: 0.9rem;">
+                <img src="./files/controls_icon5.png" alt="" class="control-icon">
+                <input type="range" min="0" max="100" step="1" class="volume"></input>
+
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Domains/Frontend/MiniProjects/Spotify clone/styles.css b/Domains/Frontend/MiniProjects/Spotify clone/styles.css
new file mode 100644
index 00000000..d2f0651f
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/Spotify clone/styles.css	
@@ -0,0 +1,313 @@
+body{
+    font-family: "Montserrat", sans-serif;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    overflow:hidden;
+}
+.main{
+    display: flex;
+    height: 100vh;
+    padding:0.5rem;
+}
+.sidebar{
+    background-color: black;
+    width: 340px;
+    border-radius: 1rem;
+    margin: 0.3rem;
+}
+.main-content{
+    background-color: #121212;
+    flex: 1;
+    border-radius: 1rem;
+    overflow: auto;
+    margin: 0.3rem;
+    padding: 0 1.5rem 0 1.5rem;
+}
+.music-player{
+    background-color: black;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 68px;
+}
+a{
+    text-decoration: none;
+    color: #fff;
+}
+.nav{
+    background-color: #121212;
+     border-radius: 1rem;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     height: 100px;
+     padding: 0.5rem 0.75rem;
+}
+.nav-option{ 
+    line-height: 2.5rem;
+     opacity: 0.7;
+     padding: 0.5rem 0.75rem;
+}
+.nav-option:hover{ 
+     opacity: 1.5;
+}
+.nav-option i{
+    font-size: 1.25rem;
+}
+.nav-option a{
+    font-size: 1rem;
+    margin-left: 1rem;;
+}
+.library{
+    background-color: #121212;
+    border-radius: 1rem;
+    height : 100%;
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+}
+.options{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.lib-option img{
+    height: 1.25rem;
+    width: 1.25rem;
+}
+.icons{
+    font-size: 1.25rem;
+    opacity: 0.7;
+    margin-right: 1rem;
+    display: flex;
+}
+.icons i{
+    opacity: 0.7;
+    margin-right: 1rem;
+}
+.icons i:hover{
+    opacity: 1.5;
+}
+.box{
+    height: 8rem;
+    background-color: #232323;
+    border-radius: 0.75rem;
+    margin: 0.75rem 0 1.75rem 0;
+    padding: 0.75rem 1rem;
+}
+.box-p1{
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+.box-p2{
+    font-size: 0.75rem;
+    opacity: 0.9;
+}
+.badge{
+    background-color: white;
+    border: none;
+    border-radius: 100px;
+    padding: 0.25rem 1rem;
+    font-weight: 700;
+    margin: 0.5rem;
+    height: 2rem;
+    width: fit-content;
+}
+.sticky-nav{
+    position: sticky;
+    top: 0;
+    background-color: #121212;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0 0 1rem;
+    z-index: 10;
+}
+nav-icons img{
+    margin-left: 0.75rem;
+}
+.sticky-nav-options{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.5rem;
+    margin-right: 4px;
+}
+.nav-item{
+    margin-right: 1rem;
+}
+.dark-badge{
+    background-color: black;
+    color: white;
+}
+@media (max-width: 1000px) {
+    .hide{
+        display: none;
+    }
+}
+.card{
+    background-color: #232323;
+    width: 150px;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-left: 1.5rem;
+}
+.cards-container{
+    display: flex;
+    flex-wrap: wrap;
+}
+.card-img{
+    width: 100%;
+    border-radius: 0.5rem;
+
+}
+.card-title{
+    font-weight: 600;
+    font-size: 0.93rem;
+}
+.card-info{
+    font-size: 0.8rem;
+    opacity: 0.8;
+}
+.footer{
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.line{
+    height: 80%;
+    width: 50%;
+    border-top: 1px solid white;
+    opacity: 0.4;
+}
+.music-player{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.music-img{
+    width:25%;
+}
+.music-imgs{
+    display: flex;
+    text-align: center;
+    box-sizing: border-box;
+    height: 3.5rem;
+    width: 3.5rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.music{
+    margin-top: 1rem;
+    margin-right: 1.75rem;
+}
+.music-title{
+    display:flex;
+    font-weight:500;
+    font-size: 0.85rem;
+    margin-left: 5rem;
+}
+.music-info{
+    display:flex;
+    font-size: 0.65rem;
+    font-weight: 200;
+    opacity: 0.7;
+    margin-left: 5rem;
+    opacity: 0.75;
+}
+.music-imgs{
+    margin:0.7rem;
+    border-radius: 2px;
+}
+.player{
+    width:50%;
+}
+.player-control{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.controls{
+    width: 25%;
+}
+.player-control-icon{
+    height: 1rem;
+    margin-right: 1.75rem;
+    opacity: 0.7;
+}
+.player-control-icon:hover{
+    opacity: 1;
+}
+.playback-bar{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.progress-bar{
+    width: 60%;
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+.progress-bar::-webkit-slider-runnable-track{
+    background-color: #ddd;
+    border-radius: 100px;
+    height: 0.175rem;
+}
+.progress-bar::-webkit-slider-thumb{
+    appearance: none;
+    height: 0.85rem;
+    width: 0.85rem;
+    background-color: #1bd760;
+    border-radius: 50%;
+    margin-top: -6px;
+}
+.current-time, .total-time{
+    font-size: 0.8rem;
+    opacity: 0.75;
+}
+.volume{
+   height: 1rem;
+   margin-right: 1.75rem;
+   opacity: 0.7;
+}
+.volume::-webkit-slider-runnable-track{
+    height:0.25rem;
+    border-radius: 100px;
+    background-color: #ddd;
+}
+.volume::-webkit-slider-thumb{
+    appearance: none;
+    height: 0.5rem;
+    width: 0.5rem;
+    background-color: #1bd760;
+    border-radius: 50%;
+    margin-top: -6px;
+}
+.controls{
+     display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.control-icon{
+    height: 2.25rem;
+    width: 1.75rem;
+    margin-right:0.5rem;
+    opacity: 0.7;
+}
+.control-icon:hover{
+    opacity: 1;
+}
+.album_icon{
+    width: 1rem;
+    height:1rem;
+    padding:0.9rem;
+    align-items:center;
+    margin-left: 0.625rem;
+    right:0.5rem;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
\ No newline at end of file