diff --git a/src/App.tsx b/src/App.tsx
index 1312479..5dcdbf4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,10 @@
 import './App.css'
+import albumData from './mock/albums.json'
+import type { Album } from './types/albums'
 
 function App() {
+  const albums: Album[] = albumData as Album[]
+
   return (
     <main>
       <section className="filter-box">
@@ -59,23 +63,15 @@ function App() {
       </section>
 
       <section className="album-displayer">
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
-
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
+        {albums.map((album) => (
+          <div className="album-card" key={album.id}>
+            <div className="album-image">Image</div>
 
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
+            <h3>{album.title}</h3>
+            <p>{album.artist}</p>
+            <p>{album.releaseYear}</p>
+          </div>
+        ))}
       </section>
     </main>
   )