diff --git a/src/app/audio/audio-list/audio-list.component.css b/src/app/audio/audio-list/audio-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/audio/audio-list/audio-list.component.html b/src/app/audio/audio-list/audio-list.component.html
new file mode 100644
index 0000000..ffa45d4
--- /dev/null
+++ b/src/app/audio/audio-list/audio-list.component.html
@@ -0,0 +1,27 @@
+<div *ngIf="isLoading" class="loading-indicator">
+  <p>Loading audio files, please wait...</p>
+</div>
+<div *ngIf="isError" class="error-indicator">
+  <p>Error loading audio files. Please try again later.</p>
+</div>
+<div *ngIf="audioData.length==0 && !isLoading" class="no-audio-indicator d-flex flex-column align-items-center justify-content-center">
+  <i class="fa fa-volume-mute fa-3x mb-3 text-muted"></i>
+  <p class="text-muted">No audios found</p>
+</div>
+<ul class="list-group list-group-flush" *ngIf="!isLoading && !isError">
+  <li class="list-group-item" *ngFor="let audioItem of audioData">
+    <div class="card">
+      <div class="card-header d-flex align-items-center">
+        {{ audioItem.audio.name }}
+      </div>
+      <div class="card-body d-flex justify-content-center">
+        <div class="col-12 col-md-6">
+          <audio class="w-100" controls>
+            <source [src]="audioItem.url" type="audio/mpeg"/>
+            Your browser does not support the audio element.
+          </audio>
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/audio/audio-list/audio-list.component.ts b/src/app/audio/audio-list/audio-list.component.ts
new file mode 100644
index 0000000..82c3b88
--- /dev/null
+++ b/src/app/audio/audio-list/audio-list.component.ts
@@ -0,0 +1,21 @@
+import {Component, Input} from '@angular/core';
+import {Audio} from "../audio.model";
+import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
+import {NgClass, NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-audio-list',
+  standalone: true,
+  imports: [
+    NgClass,
+    NgIf,
+    NgForOf,
+  ],
+  templateUrl: './audio-list.component.html',
+  styleUrl: './audio-list.component.css'
+})
+export class AudioListComponent {
+  @Input() audioData: { audio: Audio, url: SafeUrl }[] = [];
+  @Input() isLoading: boolean = false;
+  @Input() isError: boolean = false;
+}
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.html b/src/app/map-location/map-location-modal/map-location-modal.component.html
index 4a99b2f..33db481 100644
--- a/src/app/map-location/map-location-modal/map-location-modal.component.html
+++ b/src/app/map-location/map-location-modal/map-location-modal.component.html
@@ -10,32 +10,10 @@ <h5 class="card-title">{{mapLocation.name}}</h5>
       <p class="card-text">{{mapLocation.description}}</p>
       <a (click)="onCalculateRoute()" class="btn btn-primary" style="background-color: #10898d"><i class="fa fa-location-arrow"></i> Navigate</a>
     </div>
-    <ul class="list-group list-group-flush">
-      <div *ngIf="isLoading" class="loading-indicator">
-        <p>Loading audio files, please wait...</p>
-      </div>
-      <div *ngIf="isError" class="error-indicator">
-        <p>Error loading audio files. Please try again later.</p>
-      </div>
-      <div *ngIf="noAudioAvailable && !isLoading" class="no-audio-indicator d-flex flex-column align-items-center justify-content-center">
-        <i class="fa fa-volume-mute fa-3x mb-3 text-muted"></i>
-        <p class="text-muted">No audios found</p>
-      </div>
-      <li class="list-group-item" *ngFor="let audioItem of audioData">
-        <div class="card">
-          <div class="card-header d-flex align-items-center">
-            {{ audioItem.audio.name }}
-          </div>
-          <div class="card-body d-flex justify-content-center">
-            <div class="col-12 col-md-6">
-              <audio class="w-100" controls>
-                <source [src]="audioItem.url" type="audio/mpeg"/>
-                Your browser does not support the audio element.
-              </audio>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
+    <app-audio-list
+      [audioData]="audioData"
+      [isLoading]="isLoading"
+      [isError]="isError"
+    ></app-audio-list>
   </div>
 </div>
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.ts b/src/app/map-location/map-location-modal/map-location-modal.component.ts
index 9766455..88bd4b0 100644
--- a/src/app/map-location/map-location-modal/map-location-modal.component.ts
+++ b/src/app/map-location/map-location-modal/map-location-modal.component.ts
@@ -8,11 +8,14 @@ import {AudioService} from "../../audio/audio.service";
 import {ScreenSizeService} from "../../shared/screen-size.service";
 import {maxPageSize} from "../../shared/http.config";
 import {MapService} from "../../shared/map/map.service";
+import {AudioListComponent} from "../../audio/audio-list/audio-list.component";
+
 
 @Component({
   selector: 'app-map-location-modal',
   standalone: true,
   imports: [
+    AudioListComponent,
     NgForOf,
     NgIf,
   ],
@@ -25,13 +28,10 @@ export class MapLocationModalComponent implements OnInit {
 
 
   mapLocationImageUrl: SafeUrl;
-
-  audiosEntities: Audio[] = [];
   audioData: { audio: Audio, url: SafeUrl }[] = [];
   mobileVersion: boolean;
   isError: boolean;
   isLoading: boolean;
-  noAudioAvailable: boolean;
   constructor(
               private mapLocationService: MapLocationService,
               private audioService: AudioService,
@@ -69,15 +69,9 @@ export class MapLocationModalComponent implements OnInit {
   private fetchMapLocationAudio() {
     this.isLoading= true;
     this.isError = false;
-    this.audiosEntities = [];
-    this.audioData = [];
     this.audioService.getAudiosByMapLocation(this.mapLocation, 0, maxPageSize).subscribe({
       next: (response) => {
-        this.audiosEntities = response.content;
-        if (this.audiosEntities.length === 0) {
-          this.noAudioAvailable = true;
-        }
-        const audioPromises = this.audiosEntities.map((audio, index) => {
+        const audioPromises = response.content.map((audio, index) => {
           return this.audioService.getAudioFileByAudio(audio).toPromise()
             .then((audioBlob) => {
               let audioUrl: SafeUrl = null;
@@ -92,6 +86,7 @@ export class MapLocationModalComponent implements OnInit {
               this.audioData[index] = {audio, url: null};
             });
         });
+
         Promise.all(audioPromises).then(() => {
           this.isLoading = false;
         }).catch(() => {