diff --git a/assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png b/assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png
new file mode 100644
index 00000000..1add03a1
Binary files /dev/null and b/assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png differ
diff --git a/css/style.css b/css/style.css
index e69de29b..7e650388 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,251 @@
+/* styles.css */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing:border-box;
+ }
+
+ body {
+ font-family: Arial, sans-serif;
+ }
+
+ .main-layout {
+ display: grid;
+ grid-template-areas:
+ "sidebar header"
+ "sidebar main"
+ "player player";
+ grid-template-columns: 250px 1fr;
+ grid-template-rows: auto 1fr auto;
+ height: 100vh;
+ }
+
+ .sidebar-layout {
+ grid-area:sidebar;
+ background-color: #121212;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .sidebar-contents {
+ padding: 20px;
+ }
+
+ .spotify-content {
+ display:flex;
+ align-items: center;
+ }
+
+
+ .spotify-logo {
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+ }
+
+ .spotify-logo img {
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+ }
+
+ .logo {
+ font-size: 24px;
+ }
+
+ .menu,
+ .playlists {
+ list-style: none;
+ margin-bottom: 20px;
+ }
+
+ .menu li,
+ .playlists li {
+ margin: 10px 0;
+ }
+
+ .create-playlist {
+ background-color: #1DB954;
+ color: white;
+ padding: 10px;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ }
+
+ .content-main-layout {
+ grid-area: main;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ }
+
+ .content-header {
+ grid-area: header;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px;
+ background-color: #282828;
+ color: white;
+ }
+
+ .nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ }
+
+ .nav-list {
+ display: flex;
+ list-style: none;
+ }
+
+ .nav-list li {
+ margin: 0 10px;
+ }
+
+ .upgrade-button {
+ background-color: #1DB954;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ }
+
+ .content {
+ padding: 20px;
+ overflow-y: auto;
+ background-color: #181818;
+ color: white;
+ }
+
+ .recently-played,
+ .created-for-you,
+ .popular-artists {
+ margin-bottom: 20px;
+ }
+
+ .sidebar-footer {
+ padding-left: 20px;
+ font-weight: bold;
+ }
+ .recently-played img {
+ width: 50%;
+ height: 50%;
+
+ }
+ .playlists {
+ display: flex;
+ justify-content:flex-start;
+ margin: 20px 5px;
+ }
+
+ .playlists img {
+ margin: 20px 10px;
+ }
+
+ .popular-artists {
+ display: flex;
+ justify-content:flex-start;
+ margin: 20px 5px;
+ }
+
+ .popular-artists img {
+ margin: 20px 10px;
+ border-radius: 50%;
+ }
+
+
+ .album-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 20px;
+ }
+
+ .player-controls {
+ grid-area: player;
+ background-color: #282828;
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: white;
+ }
+
+ .player-left,
+ .player-right {
+ display: flex;
+ align-items:center;
+ }
+
+ .player-center {
+ display: table-row-group;
+ }
+
+ .player-controls img{
+ width: 10%;
+ height: 10%;
+
+ }
+
+ .player-center {
+ flex-direction: row;
+ }
+
+
+
+ .player-center button {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 20px;
+ margin: 0 5px;
+ cursor: pointer;
+ }
+
+ .progress-bar {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+
+ .progress {
+ flex: 1;
+ height: 5px;
+ background: #404040;
+ margin: 0 10px;
+ position: relative;
+ }
+
+ .progress-filled {
+ height: 100%;
+ width: 25%;
+ background: #1DB954;
+ }
+
+ @media (max-width: 768px) {
+ .main-layout {
+ grid-template-areas:
+ "header header"
+ "main main"
+ "player player";
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar-layout {
+ display: none;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .nav-list {
+ flex-wrap: wrap;
+ }
+ }
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 56efbdba..fb5d9d74 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,147 @@
+
+
+
Document
-
-
-
+
+
+
+
+
+
+
Recently played
+
+
+
+
Heavy Metal
+
Subtitle
+
+
+
+
Stranger Things, Vol.1 (a Netflix Original Series Soundtrack)
+
Kyle Dixon & Micheal Stein
+
+
+
+
A quiet place
+
Subtitle
+
+
+
+
Split
+
Subtitle
+
+
+
+
A cure for wellness
+
Subtitle
+
+
+
+
Sinister
+
Subtitle
+
+
+
+
Creato per John Doe
+
+
+
+
Release Radar
+
+
+
+
Daily Mix 1
+
+
+
+
Artisti più popolari
+
+
+
+
+
+
+
+
+
+
+
+