diff --git a/index.html b/index.html
index 56efbdba..7464cd57 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,147 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <title>Spotify Layout</title>
 </head>
 <body>
-    
+    <body>
+        <div class="container">
+            <div class="container ">
+                <div class="navigation">
+            <nav class="sidebar">
+                <div class="logo">
+                    <img src="assets/img/logo.svg" alt="Spotify Logo">
+                </div>
+                <ul class="menu">
+                    <li class="menu-item active"><i class="fa fa-home"></i> Home</li>
+                    <li class="menu-item"><i class="fa fa-search"></i> search</li>
+                    <li class="menu-item"><i class="fa fa-book"></i> Book</li>
+                </ul>
+                <div class="playlist-section">
+                    <button class="create-playlist"><i class="fa fa-plus"></i> Create Playlist</button>
+                    <ul class="playlists">
+                        <li class="playlist">No Playlist</li>
+                        <li class="playlist">No Playlist</li>
+                        <li class="playlist">No Playlist</li>
+                        <li class="playlist">No Playlist</li>
+                    </ul>
+                </div>
+                <div class="profile-section">
+                    <div class="profile">
+                        <img src="assets/img/profile.svg" alt="Profile Picture">
+                        <span>Faruq</span>
+                    </div>
+                </div>
+            </nav>
+        </div>
+        </div>
+            <main class="main-content">
+                <div class="header">
+                    <button class="upgrade-button">Upgrade</button>
+                </div>
+                <section class="recently-played">
+                    <h2>Recently Played</h2>
+                    <div class="albums">
+                        <div class="album">
+                            <img src="assets/img/aquietplace.jpeg" alt="Heavy Metal">
+                            <span class="subtitle">Heavy Metal</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="album">
+                            <img src="assets/img/stranger.jpeg" alt="Stranger Things">
+                            <span class="subtitle">Kyle Dixon & Michael Stein</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="album">
+                            <img src="assets/img/aquietplace.jpeg" alt="A Quiet Place">
+                            <span class="subtitle">Marco Beltrami</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="album">
+                            <img src="assets/img/split.jpeg" alt="Split">
+                            <span class="subtitle">Subtitle</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="album">
+                            <img src="assets/img/youg.jpeg" alt="A Cure for Wellness">
+                            <span class="subtitle">Subtitle</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="album">
+                            <img src="assets/img/sinister.jpeg" alt="Sinister">
+                            <span class="subtitle">Subtitle</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section class="created-for-you">
+                    <h2>Created for Faruq </h2>
+                    <div class="playlists">
+                        <div class="playlist">
+                            <img src="assets/img/radar.jpeg" alt="Release Radar">
+                            <span>Release Radar</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="playlist">
+                            <img src="assets/img/mixdaily.jpeg" alt="Daily Mix 1">
+                            <span>Daily Mix 1</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section class="popular-artists">
+                    <h2>Popular Artists</h2>
+                    <div class="artists">
+                        <div class="artist">
+                            <img src="assets/img/stranger.jpeg" alt="Artist 1">
+                            <span>Artist 1</span>
+                            <div class="overlay">
+                                <i class="fa fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="artist">
+                            <img src="assets/img/stranger.jpeg" alt="Artist 2">
+                            <span>Artist 2</span>
+                        </div>
+                    </div>
+                </section>
+            </main>
+            <footer class="player">
+                <div class="now-playing">
+                    <img src="assets/img/sinister.jpeg" alt="Now Playing">
+                    <div class="track-info">
+                        <span class="track-name">Sinister</span>
+                        <span class="artist-name">Artist Name</span>
+                    </div>
+                </div>
+                <div class="controls">
+                    <button class="control-button">Play</button>
+                    <button class="control-button">Next</button>
+                    <button class="control-button">Previous</button>
+                </div>
+                <div class="volume-control">
+                    <input type="range" min="0" max="100">
+                </div>
+            </footer>
+        </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..477f42dd
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,327 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    height: 100vh;
+    color: #fff;
+    background-color: #121212;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+        "sidebar main"
+        "sidebar player";
+    height: 100%;
+    width: 100%;
+}
+.container,.navigation {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    height: 100%;
+    width: 100%;
+}
+
+.sidebar {
+    background-color: #000;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: fixed;
+    height: 90%;
+    width: 200px;
+    transition: width 0.3s;
+}
+
+.sidebar .logo img {
+    width: 131px;
+    height: 40px;
+    margin-bottom: 5px;
+}
+
+.sidebar .menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar .menu-item {
+    padding: 10px 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #b3b3b3;
+}
+
+.sidebar .menu-item i {
+    margin-right: 10px;
+}
+
+.sidebar .menu-item span {
+    display: inline-block;
+}
+
+.sidebar .menu-item.active {
+    color: #1db954;
+}
+
+.sidebar .playlist-section {
+    margin-top: 5px;
+}
+
+.sidebar .create-playlist {
+    background-color: #1db954;
+    border: none;
+    color: #fff;
+    padding: 10px;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sidebar .create-playlist i {
+    margin-right: 10px;
+}
+
+.sidebar .playlists {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+.sidebar .playlist {
+    padding: 5px 0;
+    cursor: pointer;
+    color: #b3b3b3;
+}
+
+.sidebar .playlist:hover {
+    color: #fff;
+}
+
+.sidebar .profile-section {
+    display: flex;
+    align-items: center;
+}
+
+.sidebar .profile {
+    display: flex;
+    align-items: center;
+}
+
+.sidebar .profile img {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+}
+
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 60px 1fr;
+    }
+
+    .sidebar {
+        width: 60px;
+    }
+
+    .sidebar .logo,
+    .sidebar .menu-item span,
+    .sidebar .create-playlist span,
+    .sidebar .playlist {
+        display: none;
+    }
+
+    .sidebar .menu-item i,
+    .sidebar .create-playlist i {
+        margin-right: 0;
+    }
+
+    .sidebar .profile-section {
+        justify-content: center;
+    }
+
+    .sidebar .profile span {
+        display: none;
+    }
+}
+.main-content {
+    grid-area: main;
+    padding: 20px;
+    overflow-y: auto;
+    margin-left: 200px;
+}
+
+.header {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.upgrade-button {
+    background-color: #1db954;
+    border: none;
+    color: #fff;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+section {
+    margin-bottom: 30px;
+}
+
+.recently-played h2,
+.created-for-you h2,
+.popular-artists h2 {
+    margin-bottom: 15px;
+}
+
+.albums,
+.playlists,
+.artists {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 10px;
+}
+
+.album,
+.playlist,
+.artist {
+    position: relative;
+    text-align: center;
+    overflow: hidden;
+}
+
+.album img,
+.playlist img,
+.artist img {
+    width: 100%;
+    border-radius: 5px;
+    transition: transform 0.3s;
+}
+
+.album:hover img,
+.playlist:hover img,
+.artist:hover img {
+    transform: scale(1.1);
+}
+
+.subtitle {
+    display: block;
+    margin-top: 5px;
+    font-size: 12px;
+    color: #b3b3b3;
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.album:hover .overlay,
+.playlist:hover .overlay,
+.artist:hover .overlay {
+    opacity: 1;
+}
+
+.overlay i {
+    font-size: 24px;
+    color: #fff;
+}
+
+footer {
+    grid-area: player;
+    background-color: #282828;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    width: calc(100% - 230px);
+    left: 200px;
+}
+
+.now-playing {
+    display: flex;
+    align-items: center;
+}
+
+.now-playing img {
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+}
+
+.track-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.track-name {
+    font-size: 14px;
+}
+
+.artist-name {
+    font-size: 12px;
+    color: #b3b3b3;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    
+}
+
+.control-button {
+    background: none;
+    border: none;
+    color: #fff;
+    margin: 0 10px;
+    cursor: pointer;
+}
+
+.volume-control input[type="range"] {
+    width: 100px;
+}
+
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 60px 1fr;
+    }
+
+    .main-content {
+        margin-left: 60px;
+    }
+
+    footer {
+        width: calc(100% - 70%);
+        left: 60px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        flex-wrap: wrap;
+    }
+
+    .upgrade-button {
+        margin-top: 10px;
+    }
+}
