diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 03d9703..2fb9d41 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,9 +9,18 @@ const khyay = localFont({ src: '../../styles/Khyay-Regular.ttf' })
 
 
 export async function getStaticProps() {
-  const { data: songData1 } = await axios.get(lyricsApi + '/song/50000001');
-  const { data: songData2 } = await axios.get(lyricsApi + '/song/50000002');
-  const songData = [songData1, songData2];
+  //the API gives an Array back looking like this [50000001,50000002,50000003]
+  const { data: songList } = await axios.get(lyricsApi + '/songs');
+
+  //we need to get the data for each song from /song/[id] and put it into an songData array
+  const songData = await Promise.all(
+    songList.map(async (songId: any) => {
+      const { data: song } = await axios.get(lyricsApi + `/song/${songId}`);
+      return song;
+    }
+    )
+  );
+
   return {
     props: {
       songData,
diff --git a/src/pages/song/[id].tsx b/src/pages/song/[id].tsx
index 780cb63..d8f063e 100644
--- a/src/pages/song/[id].tsx
+++ b/src/pages/song/[id].tsx
@@ -6,17 +6,18 @@ const lyricsApi = process.env.LYRICS_API_HOST;
 
 
 export async function getStaticPaths() {
-    const songs = (await axios.get(lyricsApi + '/songs')).data;
-    const paths = songs.map((song: any) => ({
-      params: {
-        id: song.id.toString(),
-      },
-    }));
-    return {
-      paths,
-      fallback: "blocking", // generate a new page if the user visits a page that doesn't exist
-    };
-  }
+  const songs = (await axios.get(lyricsApi + '/songs')).data;
+  const paths = songs.map((id: any) => ({
+    params: {
+      id: id.toString(),
+    },
+  }));
+  return {
+    paths,
+    // generate a new page if the user visits a page that doesn't exist
+    fallback: "blocking",
+  };
+}
 
 export async function getStaticProps({ params }: any) {
   const { data: songData } = await axios.get(lyricsApi + '/song/' + params.id);