diff --git a/Music.png b/Music.png
new file mode 100644
index 00000000..d481c0ff
Binary files /dev/null and b/Music.png differ
diff --git a/README.md b/README.md
index 38807b33..5ee20065 100644
--- a/README.md
+++ b/README.md
@@ -5,30 +5,24 @@
 </h1>
 
 # Music Releases
-
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+9th week's project. First time on React/Vite. Spotify's API. 
 
 ## Getting Started with the Project
 
 ### Dependency Installation & Startup Development Server
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
 
-```bash
-npm i && code . && npm run dev
-```
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+It was really challenging: new tools, new components, I had a lot of technical issues on npm and the server... but I get it! 
+React is challenging but its also the base to build amazing sites! 
+I find JSX a little difficult to cope but, with a little more time, I will get use to it, for sure!
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Netlify: https://cute-profiterole-7ddc46.netlify.app
+Host: http://localhost:5175/
 
 ## Instructions
 
diff --git a/src/Album.css b/src/Album.css
new file mode 100644
index 00000000..58a27b06
--- /dev/null
+++ b/src/Album.css
@@ -0,0 +1,80 @@
+//*Album.css*//
+.album-container {
+    position: relative;
+    background-color: #000;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: background-color 0.3s;
+}
+
+.album-cover {
+    position: relative;
+}
+
+.album-cover img {
+    width: 100%;
+    display: block;
+    border-radius: 8px;
+}
+
+.album-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.album-container:hover .album-hover {
+    opacity: 1;
+}
+
+.play-button,
+.heart-button,
+.ellipsis-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: white;
+}
+
+.play-button img:hover {
+    transform: scale(1.2);
+}
+
+.album-info {
+    padding: 10px;
+    text-align: center;
+}
+
+.album-title {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    color: white;
+    text-decoration: none;
+}
+
+.album-title:hover {
+    text-decoration: underline;
+}
+
+.artist-names {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    color: #a0a0a0;
+}
+
+.artist-name {
+    color: #a0a0a0;
+    text-decoration: none;
+}
+
+.artist-name:hover {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/src/Album.jsx b/src/Album.jsx
new file mode 100644
index 00000000..3fe22e9e
--- /dev/null
+++ b/src/Album.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ArtistName from './ArtistName.jsx';
+import './Album.css';
+
+const Album = ({ album }) => {
+    return (
+        <div className="album-container">
+            <div className="album-cover">
+                <img src={album.images[0].url} alt={album.name} />
+                <div className="album-hover">
+                    <button className="play-button">
+                        <img src="/assets/icons/play-icon.svg" alt="Play" />
+                    </button>
+                    <button className="heart-button">
+                        <img src="/assets/icons/heart-icon.svg" alt="Favorite" />
+                    </button>
+                    <button className="ellipsis-button">
+                        <img src="/assets/icons/ellipsis-icon.svg" alt="More" />
+                    </button>
+                </div>
+            </div>
+            <div className="album-info">
+                <a href={album.external_urls.spotify} className="album-title" target="_blank" rel="noopener noreferrer">
+                    {album.name}
+                </a>
+                <div className="artist-names">
+                    {album.artists.map((artist, index) => (
+                        <ArtistName key={artist.id} artist={artist} isLast={index === album.artists.length - 1} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Album;
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 00000000..00de496a
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,27 @@
+//*App.css*//
+
+.app-container {
+    padding: 20px;
+}
+
+.app-container h1 {
+    text-align: center;
+}
+
+.album-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+}
+
+@media (max-width: 768px) {
+    .album-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .album-grid {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index a13f8faf..23d110fc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,29 @@
-import data from "./data.json";
+import React from 'react';  // Importa React primero
+import data from './data.json';  // Importa data.json solo una vez
+import Album from './Album.jsx';  // Importa el componente Album
+import './App.css';  // Importa el archivo de estilos CSS
 
-console.log(data);
-
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+// Componente App
+const App = () => {
+  return (
+    <div className="app-container">
+      <h1>Maria's Music Releases</h1>
+      <div className="album-grid">
+        {/* Mapea los álbumes del JSON y pasa los datos al componente Album */}
+        {data.albums.items.map((album) => (
+          <Album key={album.id} album={album} />
+        ))}
+      </div>
+    </div>
+  );
 };
+
+export default App;  // Exporta el componente App por defecto
+
+
+
+
+
+
+
+
diff --git a/src/ArtistName.css b/src/ArtistName.css
new file mode 100644
index 00000000..519e515b
--- /dev/null
+++ b/src/ArtistName.css
@@ -0,0 +1,20 @@
+//*ArtistName.css*//
+.artist-name {
+    color: #a0a0a0;
+    text-decoration: none;
+}
+
+.artist-name:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+//*Icon hover capacity*//
+button img {
+    opacity: 0.7;
+    transition: opacity 0.3s;
+}
+
+button img:hover {
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/src/ArtistName.jsx b/src/ArtistName.jsx
new file mode 100644
index 00000000..9e8cf4c2
--- /dev/null
+++ b/src/ArtistName.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './ArtistName.css';
+
+const ArtistName = ({ artist, isLast }) => {
+    return (
+        <>
+            <a href={artist.external_urls.spotify} className="artist-name" target="_blank" rel="noopener noreferrer">
+                {artist.name}
+            </a>
+            {!isLast && ', '}
+        </>
+    );
+};
+
+export default ArtistName;
+
diff --git a/src/index.css b/src/index.css
index 4558f538..8218a993 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,9 +5,11 @@
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+  Color: white;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 51294f39..b91620d3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App.jsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(