I'm tired

src/routes/(app)/+layout.svelte

@@ -38,7 +38,7 @@
                 <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
             </div>
         </div>
-        <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_5vw)] pt-16">
+        <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)] pt-16">
             <slot />
         </section>
         <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">

src/routes/(app)/+page.server.ts

@@ -0,0 +1,12 @@
+import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+import type { PageServerLoad } from './$types'
+
+export const prerender = false
+
+export const load: PageServerLoad = async ({ locals, fetch, url }) => {
+    const recommendationResponse = await fetch(`/api/users/${locals.user.id}/recommendations`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
+    const recommendationData = await recommendationResponse.json()
+    const { recommendations } = recommendationData
+
+    return { recommendations }
+}

src/routes/(app)/+page.svelte

@@ -1,7 +1,10 @@
-<div id="test-box" class="h-[200vh]"></div>
+<script lang="ts">
+    import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
+    import type { PageData } from './$types'
 
-<!-- <style>
-    #test-box {
-        background: linear-gradient(to bottom, white, black);
-    }
-</style> -->
+    export let data: PageData
+</script>
+
+<div id="main">
+    <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
+</div>