diff --git a/frontend/package.json b/frontend/package.json
index bbcd48e..1d63d70 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -79,6 +79,7 @@
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.60.1",
     "angular-eslint": "21.4.0",
+    "baseline-browser-mapping": "^2.10.34",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-deprecation": "^3.0.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 4aecbe1..d70eddb 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -126,6 +126,9 @@ importers:
       angular-eslint:
         specifier: 21.4.0
         version: 21.4.0(@angular/cli@22.0.0(@types/node@18.19.127)(chokidar@5.0.0))(chokidar@5.0.0)(eslint@9.36.0(jiti@1.21.7))(typescript-eslint@8.60.1(eslint@9.36.0(jiti@1.21.7))(typescript@6.0.3))(typescript@6.0.3)
+      baseline-browser-mapping:
+        specifier: ^2.10.34
+        version: 2.10.34
       eslint:
         specifier: ^9.35.0
         version: 9.36.0(jiti@1.21.7)
@@ -2096,8 +2099,9 @@ packages:
     resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
     engines: {node: ^4.5.0 || >= 5.9}
 
-  baseline-browser-mapping@2.8.6:
-    resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
+  baseline-browser-mapping@2.10.34:
+    resolution: {integrity: sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   beasties@0.4.2:
@@ -6321,7 +6325,7 @@ snapshots:
 
   base64id@2.0.0: {}
 
-  baseline-browser-mapping@2.8.6: {}
+  baseline-browser-mapping@2.10.34: {}
 
   beasties@0.4.2:
     dependencies:
@@ -6387,7 +6391,7 @@ snapshots:
 
   browserslist@4.26.2:
     dependencies:
-      baseline-browser-mapping: 2.8.6
+      baseline-browser-mapping: 2.10.34
       caniuse-lite: 1.0.30001743
       electron-to-chromium: 1.5.222
       node-releases: 2.0.21
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 0e7199b..494bd54 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -6,17 +6,28 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .main-content {
   grid-area: main;
   background: transparent;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
   grid-column: 1 / -1;
+  min-height: 0;
   height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 0 1rem 1rem;
+}
+
+.main-content > * {
+  width: 100%;
 }
 
 app-header {
@@ -30,6 +41,8 @@ app-footer {
 }
 
 .app-container {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto auto 1fr 1fr 1fr 1fr auto;
@@ -44,4 +57,5 @@ app-footer {
     'footer footer footer footer';
   height: 100vh;
   background: transparent;
+  overflow: hidden;
 }
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index dc34e12..cad2683 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,9 +1,14 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration(withNoIncrementalHydration())],
+  providers: [
+    provideRouter(routes),
+    provideClientHydration(withNoIncrementalHydration()),
+    provideHttpClient(),
+  ],
 };
diff --git a/frontend/src/app/pages/about/about.component.scss b/frontend/src/app/pages/about/about.component.scss
index a03d93e..04d0275 100644
--- a/frontend/src/app/pages/about/about.component.scss
+++ b/frontend/src/app/pages/about/about.component.scss
@@ -15,6 +15,7 @@
     background: rgba($color-background-dark, 0.8);
     padding: 1rem;
     border-radius: 1rem;
+    border: 2px solid $color-accent;
 
     .profile-image {
       padding-top: 1rem;
@@ -45,6 +46,8 @@
     width: min(100%, 38rem);
     background: rgba($color-background-dark, 0.8);
     padding: 1rem;
+    border: 2px solid $color-accent;
+    border-radius: 1rem;
 
     .title {
       text-align: center;
diff --git a/frontend/src/app/pages/music/music.component.html b/frontend/src/app/pages/music/music.component.html
index 67fc81f..0ab9c4f 100644
--- a/frontend/src/app/pages/music/music.component.html
+++ b/frontend/src/app/pages/music/music.component.html
@@ -1 +1,28 @@
-<p>music works!</p>
+<section class="discographies">
+  <h1>Discographies</h1>
+  @if (releases$ | async; as releases) {
+    @for (item of releases; track item.title) {
+      <article>
+        <img [src]="item.image" [alt]="item.title" title="Release cover" />
+        <div class="content">
+          <h3>{{ item.title }}</h3>
+          <time>{{ item.short_infos[0].released }}</time>
+          <p>{{ item.short_infos[0].songs }}</p>
+          <p>{{ item.short_infos[0].songs_length }}</p>
+          <p>{{ item.short_infos[0].bpm }}</p>
+          <div class="icons">
+            <a [href]="item.short_infos[0].spotify_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].spotify_icon" alt="Spotify" title="Spotify" />
+            </a>
+            <a [href]="item.short_infos[0].youtube_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].youtube_icon" alt="YouTube" title="YouTube" />
+            </a>
+            <a [href]="item.short_infos[0].itunes_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].itunes_icon" alt="iTunes" title="iTunes" />
+            </a>
+          </div>
+        </div>
+      </article>
+    }
+  }
+</section>
diff --git a/frontend/src/app/pages/music/music.component.scss b/frontend/src/app/pages/music/music.component.scss
index e69de29..6f3a17a 100644
--- a/frontend/src/app/pages/music/music.component.scss
+++ b/frontend/src/app/pages/music/music.component.scss
@@ -0,0 +1,91 @@
+@use 'variables' as *;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.discographies {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: flex-start;
+  align-items: flex-start;
+  gap: 1.5em;
+  padding: 1em;
+  scroll-margin-top: 150px;
+  width: min(1500px, 100%);
+  margin-inline: auto;
+  box-sizing: border-box;
+
+  h1 {
+    flex-basis: 100%;
+    margin: 0;
+    color: $color-accent;
+    text-align: center;
+  }
+
+  article {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    padding: 0.5em;
+    grid-gap: 0.5em;
+    width: min(420px, 100%);
+
+    > img {
+      grid-row: 1;
+      border: 2px solid $color-accent;
+      border-radius: 2em;
+      width: 100%;
+      height: auto;
+    }
+
+    .content {
+      grid-row: 3;
+      display: grid;
+      grid-template-columns: 20% 20% 35% 25%;
+      border: 2px solid $color-accent;
+      border-radius: 2em;
+      background: rgba($color-background-dark, 0.8);
+      padding: 1em;
+
+      h3 {
+        grid-column: 1/-1;
+        color: $color-accent;
+      }
+
+      time,
+      p {
+        margin: 2em 0 2em 0;
+        color: $color-text;
+      }
+    }
+  }
+
+  .content .icons {
+    grid-column: 1/-1;
+    display: flex;
+    justify-content: center;
+    padding: 0.5em;
+
+    img {
+      width: 128px;
+      height: 128px;
+      padding: 0.5em;
+      border: none;
+      border-radius: 0;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .discographies {
+    gap: 4.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .discographies {
+    gap: 4.5rem;
+  }
+}
diff --git a/frontend/src/app/pages/music/music.component.ts b/frontend/src/app/pages/music/music.component.ts
index 085d78a..4cfa036 100644
--- a/frontend/src/app/pages/music/music.component.ts
+++ b/frontend/src/app/pages/music/music.component.ts
@@ -1,11 +1,47 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { catchError, map, Observable, of } from 'rxjs';
+
+interface ReleaseInfo {
+  released: number;
+  songs: string;
+  songs_length: string;
+  bpm: string;
+  spotify_icon: string;
+  spotify_link: string;
+  youtube_icon: string;
+  youtube_link: string;
+  itunes_icon: string;
+  itunes_link: string;
+}
+
+interface Release {
+  image: string;
+  title: string;
+  short_infos: ReleaseInfo[];
+}
+
+interface MusicData {
+  releases: Release[];
+}
 
 @Component({
   standalone: true,
   selector: 'app-music',
-  imports: [],
+  imports: [AsyncPipe],
   templateUrl: './music.component.html',
   styleUrl: './music.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MusicComponent {}
+export class MusicComponent {
+  private readonly http = inject(HttpClient);
+
+  readonly releases$: Observable<Release[]> = this.http
+    .get<MusicData>('assets/musicdata.json')
+    .pipe(
+      map((data) => data.releases ?? []),
+      catchError(() => of([])),
+    );
+}
diff --git a/frontend/src/assets/musicdata.json b/frontend/src/assets/musicdata.json
new file mode 100644
index 0000000..e2345c5
--- /dev/null
+++ b/frontend/src/assets/musicdata.json
@@ -0,0 +1,76 @@
+{
+  "releases": [
+    {
+      "image": "assets/resources/covers/Cover_Find_Flow.jpg",
+      "title": "Find Flow",
+      "short_infos": [
+        {
+          "released": 2025,
+          "songs": "1 Song",
+          "songs_length": "5 Min. 45 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/intl-de/album/7543yReuf6ojw47puZiymj?si=OzUlK7siRGmvHsgOb37NZg",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://music.youtube.com/watch?v=mUo69BB3f5c&si=_kBvkxY5C53BHzkH",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/ch/album/find-flow/1839233312?i=1839233313"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Breathe_Again.png",
+      "title": "Breath Again",
+      "short_infos": [
+        {
+          "released": 2025,
+          "songs": "1 Song",
+          "songs_length": "4 Min. 04 sec",
+          "bpm": "143 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/intl-de/album/3Zl4tMXmSVCSeb9uIdTiRq?si=kLGm17jPRQGwpiciHCaxBA",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://music.youtube.com/watch?v=BS053uOLDrE&si=aYqkf_lj2ocs3Hyy",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/ch/album/breathe-again/1827254948?i=1827254950"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Summer_Vibes.jpeg",
+      "title": "Summer Vibes",
+      "short_infos": [
+        {
+          "released": 2018,
+          "songs": "1 Song",
+          "songs_length": "4 Min. 31 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/album/2XFUE1SkxBwVkHoxWSJN3W",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://www.youtube.com/watch?v=9Fig45Lgfrw&list=PLPY7SNMth8dYYcc24wvGpjXMTP7x189oE",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/us/album/summer-vibes/1410121451?i=1410121722"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Heart_in_Fire.jpeg",
+      "title": "Heart in Fire",
+      "short_infos": [
+        {
+          "released": 2014,
+          "songs": "2 Song",
+          "songs_length": "9 Min. 22 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/album/4qEK9uwnvTNcWQrJue5dgr?si=r5UFkTUMRXaf6JIPuTCVQQ",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://www.youtube.com/watch?v=a1u3rpDJkvs&list=PLPY7SNMth8dYYcc24wvGpjXMTP7x189oE&index=2",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/us/album/heart-in-fire-single/878646664"
+        }
+      ]
+    }
+  ]
+}
diff --git a/frontend/src/assets/resources/covers/Cover_Breathe_Again.png b/frontend/src/assets/resources/covers/Cover_Breathe_Again.png
new file mode 100644
index 0000000..23da3b2
Binary files /dev/null and b/frontend/src/assets/resources/covers/Cover_Breathe_Again.png differ
diff --git a/frontend/src/assets/resources/covers/Cover_Find_Flow.jpg b/frontend/src/assets/resources/covers/Cover_Find_Flow.jpg
new file mode 100644
index 0000000..b42d25e
Binary files /dev/null and b/frontend/src/assets/resources/covers/Cover_Find_Flow.jpg differ
diff --git a/frontend/src/assets/resources/covers/Cover_Heart_in_Fire.jpeg b/frontend/src/assets/resources/covers/Cover_Heart_in_Fire.jpeg
new file mode 100755
index 0000000..e8384b0
Binary files /dev/null and b/frontend/src/assets/resources/covers/Cover_Heart_in_Fire.jpeg differ
diff --git a/frontend/src/assets/resources/covers/Cover_Summer_Vibes.jpeg b/frontend/src/assets/resources/covers/Cover_Summer_Vibes.jpeg
new file mode 100755
index 0000000..45c4bdc
Binary files /dev/null and b/frontend/src/assets/resources/covers/Cover_Summer_Vibes.jpeg differ
diff --git a/frontend/src/assets/resources/icons/djredflame.png b/frontend/src/assets/resources/icons/djredflame.png
new file mode 100755
index 0000000..2f8aa8e
Binary files /dev/null and b/frontend/src/assets/resources/icons/djredflame.png differ
diff --git a/frontend/src/assets/resources/icons/facebook.png b/frontend/src/assets/resources/icons/facebook.png
new file mode 100755
index 0000000..acdc10d
Binary files /dev/null and b/frontend/src/assets/resources/icons/facebook.png differ
diff --git a/frontend/src/assets/resources/icons/instagram.png b/frontend/src/assets/resources/icons/instagram.png
new file mode 100755
index 0000000..9334a33
Binary files /dev/null and b/frontend/src/assets/resources/icons/instagram.png differ
diff --git a/frontend/src/assets/resources/icons/itunes.png b/frontend/src/assets/resources/icons/itunes.png
new file mode 100755
index 0000000..61b4214
Binary files /dev/null and b/frontend/src/assets/resources/icons/itunes.png differ
diff --git a/frontend/src/assets/resources/icons/sources.json b/frontend/src/assets/resources/icons/sources.json
new file mode 100755
index 0000000..07ba880
--- /dev/null
+++ b/frontend/src/assets/resources/icons/sources.json
@@ -0,0 +1,28 @@
+[
+  {
+    "Youtube": {
+      "Link": "https://www.flaticon.com/free-icon/youtube_665232?term=youtube&page=1&position=8&origin=search&related_id=665232",
+      "Contribute": "<a href=\"\" title=\"Stockio\"> Stockio </a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com'</a>"
+    },
+    "Spotify": {
+      "Link": "https://www.flaticon.com/free-icon/spotify_1532448?term=spotify&page=1&position=79&origin=search&related_id=1532448",
+      "Contribute": "<a href=\"https://www.flaticon.com/free-icons/spotify\" title=\"spotify icons\">Spotify icons created by Freepik - Flaticon</a>"
+    },
+    "Itunes": {
+      "Link": "https://www.flaticon.com/free-icon/itunes_1384029?term=itunes&page=1&position=2&origin=search&related_id=1384029",
+      "Contribute": "<a href=\"https://www.freepik.com\" title=\"Freepik\"> Freepik </a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com'</a>"
+    },
+    "Facebook": {
+      "Link": "https://www.flaticon.com/free-icon/facebook_665209",
+      "Contribute": "<a href=\"https://www.flaticon.com/authors/stockio\" title=\"Stockio\"> Stockio </a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com'</a>"
+    },
+    "Instagram": {
+      "Link": "https://www.flaticon.com/free-icon/instagram_1362857",
+      "Contribute": "<a href=\"https://www.flaticon.com/authors/payungkead\" title=\"Payungkead\"> Payungkead </a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com'</a>"
+    },
+    "Twitter": {
+      "Link": "https://www.flaticon.com/free-icon/twitter_356076",
+      "Contribute": "<a href=\"https://www.flaticon.com/authors/freepik\" title=\"Freepik\"> Freepik </a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com'</a>"
+    }
+  }
+]
diff --git a/frontend/src/assets/resources/icons/spotify.png b/frontend/src/assets/resources/icons/spotify.png
new file mode 100755
index 0000000..11b72ec
Binary files /dev/null and b/frontend/src/assets/resources/icons/spotify.png differ
diff --git a/frontend/src/assets/resources/icons/twitter.png b/frontend/src/assets/resources/icons/twitter.png
new file mode 100755
index 0000000..af3135c
Binary files /dev/null and b/frontend/src/assets/resources/icons/twitter.png differ
diff --git a/frontend/src/assets/resources/icons/youtube.png b/frontend/src/assets/resources/icons/youtube.png
new file mode 100755
index 0000000..693e80e
Binary files /dev/null and b/frontend/src/assets/resources/icons/youtube.png differ