diff --git a/src/lib/components/utils/Button.svelte b/src/lib/components/utils/Button.svelte
new file mode 100644
index 0000000..9e7f351
--- /dev/null
+++ b/src/lib/components/utils/Button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Link from './Link.svelte';
+
+	let {
+		href,
+		class: className,
+		icon,
+		children,
+		...props
+	}: {
+		href?: string;
+		class?: string;
+		icon?: Snippet;
+		children?: Snippet;
+	} = $props();
+</script>
+
+{#if href}
+	<Link {href} class="reset group/fancy-button p-8 bg-other-black/50 backdrop-blur-md {className}" {icon} {children} {...props} />
+{:else}{/if}
+
+<style>
+
+</style>
diff --git a/src/lib/components/utils/Link.svelte b/src/lib/components/utils/Link.svelte
index 012015d..c5e4aaf 100644
--- a/src/lib/components/utils/Link.svelte
+++ b/src/lib/components/utils/Link.svelte
@@ -18,18 +18,17 @@
 	} = $props();
 </script>
 
-<span>
-	<a {href} class="reset group/fancy-link {className}" {...props}>
-		<span>{@render children()}</span>
-
-		{#if icon}
-			{@render icon()}
-		{:else if href.startsWith('http')}
-			<ArrowUpRight
-				size={16}
-				strokeWidth={1.5}
-				absoluteStrokeWidth={true}
-				class="
+<a {href} class="reset group/fancy-link {className}" {...props}>
+	<span>{@render children()}</span>
+
+	{#if icon}
+		{@render icon()}
+	{:else if href.startsWith('http')}
+		<ArrowUpRight
+			size={16}
+			strokeWidth={1.5}
+			absoluteStrokeWidth={true}
+			class="
                                         inline-block
                                         -mt-2 -ml-0.5
                                         transition-colors duration-default ease-out
@@ -38,13 +37,13 @@
 
                                         group-hover/fancy-link:opacity-100
                                 "
-			/>
-		{:else}
-			<ArrowRight
-				size={16}
-				strokeWidth={1.5}
-				absoluteStrokeWidth={true}
-				class="
+		/>
+	{:else}
+		<ArrowRight
+			size={16}
+			strokeWidth={1.5}
+			absoluteStrokeWidth={true}
+			class="
                                         inline-block
                                         -mt-1
                                         -translate-x-0.5
@@ -55,15 +54,12 @@
                                         group-hover/fancy-link:translate-x-0
                                         group-hover/fancy-link:opacity-100
                                 "
-			/>
-		{/if}
-	</a>
-</span>
+		/>
+	{/if}
+</a>
 
 <style lang="scss">
 	a {
-
-
 		:first-child {
 			&::after {
 				@apply absolute left-0 bottom-0 w-0 h-px;
diff --git a/src/lib/shopify/zod/custom/media.ts b/src/lib/shopify/zod/custom/media.ts
index 6db68b4..8aacf8c 100644
--- a/src/lib/shopify/zod/custom/media.ts
+++ b/src/lib/shopify/zod/custom/media.ts
@@ -39,25 +39,19 @@ const Song = BaseMetaobject.extend({
 	})
 		.optional()
 		.nullable(),
-	authors: BaseMetaobjectField.extend(AuthorArray)
-		.optional()
-		.nullable(),
+	authors: BaseMetaobjectField.extend(AuthorArray).optional().nullable(),
 	image: BaseMetaobjectField.extend({
 		reference: MediaImage
 	})
 		.optional()
 		.nullable(),
 	index: BaseMetaobjectField.optional().nullable(),
-	links: BaseMetaobjectField.extend(LinkArray)
-		.optional()
-		.nullable(),
+	links: BaseMetaobjectField.extend(LinkArray).optional().nullable(),
 	title: BaseMetaobjectField.optional().nullable()
 });
 
 const Album = BaseMetaobject.extend({
-	authors: BaseMetaobjectField.extend(AuthorArray)
-		.optional()
-		.nullable(),
+	authors: BaseMetaobjectField.extend(AuthorArray).optional().nullable(),
 
 	description: BaseMetaobjectField.optional().nullable(),
 
@@ -67,9 +61,7 @@ const Album = BaseMetaobject.extend({
 		.optional()
 		.nullable(),
 	index: BaseMetaobjectField.optional().nullable(),
-	links: BaseMetaobjectField.extend(LinkArray)
-		.optional()
-		.nullable(),
+	links: BaseMetaobjectField.extend(LinkArray).optional().nullable(),
 
 	media: BaseMetaobjectField.extend(RefEdgesNodeArray(z.union([Artwork, Song])))
 		.optional()
diff --git a/src/lib/shopify/zod/simple-types.ts b/src/lib/shopify/zod/simple-types.ts
index af14f3b..0701475 100644
--- a/src/lib/shopify/zod/simple-types.ts
+++ b/src/lib/shopify/zod/simple-types.ts
@@ -82,7 +82,7 @@ const PageInfo = z.object({
 export function RefNodesArray<T extends z.ZodTypeAny>(schema: T) {
 	return {
 		references: z.object({
-			nodes: z.array(schema as z.infer<T>)
+			nodes: z.array(schema as z.infer<T>).default([])
 		})
 	};
 }
@@ -90,7 +90,7 @@ export function RefNodesArray<T extends z.ZodTypeAny>(schema: T) {
 export function RefEdgesNodeArray<T extends z.ZodTypeAny>(schema: T) {
 	return {
 		references: z.object({
-			edges: z.array(z.object({ node: schema as z.infer<T> }))
+			edges: z.array(z.object({ node: schema as z.infer<T> })).default([])
 		})
 	};
 }
diff --git a/src/routes/[[lang=lang]]/(store)/[collection]/Album.svelte b/src/routes/[[lang=lang]]/(store)/[collection]/Album.svelte
index 5677914..572db9d 100644
--- a/src/routes/[[lang=lang]]/(store)/[collection]/Album.svelte
+++ b/src/routes/[[lang=lang]]/(store)/[collection]/Album.svelte
@@ -1,44 +1,117 @@
 <script lang="ts">
+	import Button from '$lib/components/utils/Button.svelte';
 	import type Collection from '$lib/shopify/zod/catalog/collection/Collection';
 	import type { z } from 'zod';
 
 	let { collection }: { collection: z.infer<typeof Collection> } = $props();
 </script>
-		
+
+<!-- <main> -->
+<!-- <section id="hero" class="flex flex-col gap-10 items-center min-h-screen py-12"> -->
+<!--  -->
+<!-- album cover and description -->
+<!-- <div class="flex justify-center flex-col md:flex-row gap-10  max-w-m md:w-9/12 max-h-m  items-stretch"> -->
+<!-- album cover island -->
+<!-- <div class="relative bg-dark-primary-island flex items-center justify-center min-w-96 min-h-96 max-w-96 max-h-96"> -->
+<!-- <img src="{collection.album?.reference.image?.reference.image.url}" alt="{collection.title} cover" class="w-full h-full object-cover" /> -->
+<!-- </div> -->
+<!-- album title and description island -->
+<!-- <div class="gap-10 flex flex-col flex-grow"> -->
+<!-- <div class="bg-dark-primary-island p-7 max-h-64 flex flex-col "> -->
+<!-- title and description -->
+<!-- <div> -->
+<!-- <h2>{collection.title}</h2> -->
+<!-- <p>{collection.description} description</p> -->
+<!-- </div> -->
+<!-- <button class="mt-4 px-6 py-2 mx-auto">buy now</button> -->
+<!-- </div> -->
+<!--  -->
+<!-- </div> -->
+<!--  -->
+<!-- </div> -->
+<!--  -->
+<!-- youtube embed -->
+<!-- <div class="relative bg-dark-primary-island p-5 w-full max-w-m md:w-9/12"> -->
+<!-- <div class="aspect-w-16 aspect-h-9"> -->
+<!-- <iframe src="{collection.feature?.value}" title="youtube embed" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen></iframe> -->
+<!-- </div> -->
+<!-- </div> -->
+<!--  -->
+<!-- </section> -->
+<!--  -->
+<!--  -->
+<!-- </main> -->
+
 <main>
-	<section id="hero" class="flex flex-col gap-10 items-center min-h-screen py-12">
+	<section id="hero" class="py-48">
+		<div
+			data-role="background"
+			class="relative flex justify-center items-center [&>*]:w-full overflow-clip"
+		>
+			{#if collection.banner?.reference?.image}
+				<img
+					src={collection.banner?.reference?.image.url}
+					class="w-full h-full object-cover"
+					alt="{collection.title} banner"
+				/>
+			{:else}
+				<video autoplay loop muted>
+					{#each collection.banner?.reference.sources as source}
+						<source src={source.url} type={source.mimeType} />
+					{/each}
+				</video>
+			{/if}
+		</div>
+		<div data-role="background" class="bg-other-black/50 backdrop-blur-md"></div>
 
-		<!-- album cover and description -->
-		<div class="flex justify-center flex-col md:flex-row gap-10  max-w-m md:w-9/12 max-h-m  items-stretch">
-			<!-- album cover island -->
-			<div class="relative bg-dark-primary-island flex items-center justify-center min-w-96 min-h-96 max-w-96 max-h-96">
-				<img src="{collection.album?.reference.image?.reference.image.url}" alt="{collection.title} cover" class="w-full h-full object-cover" />
-			</div>
-			<!-- album title and description island -->
-			<div class="gap-10 flex flex-col flex-grow">
-				<div class="bg-dark-primary-island p-7 max-h-64 flex flex-col ">
-					<!-- title and description -->
-					<div>
-						<h2>{collection.title}</h2>
-						<p>{collection.description} description</p>
-					</div>
-					<button class="mt-4 px-6 py-2 mx-auto">buy now</button>
+		<div class="!grid grid-cols-1 lg:grid-cols-2 auto-rows-[fit-content] gap-xl relative">
+			<img
+				src={collection.image?.url}
+				alt="{collection.title} cover"
+				class="w-full h-full object-cover border-other-white/25 border-[1px]"
+			/>
+			<div class="flex flex-col gap-xl justify-center relative">
+				<div class="bg-other-black/50 backdrop-blur-md p-xxl border-other-white/25 border-[1px]">
+					<h1 class="">{collection.title}</h1>
+					{@html collection.descriptionHtml}
+				</div>
+				<div class="relative flex gap-xs items-start">
+					<Button href="#" class="flex-1 border-other-white/25 border-[1px]">buy now</Button>
+					<Button href="#" class="border-other-white/25 border-[1px]"></Button>
 				</div>
-				
 			</div>
-			
 		</div>
+	</section>
+	<section>
+		<div
+			data-role="background"
+			class="!h-48 !bottom-full !inset-auto bg-gradient-to-t from-dark-background to-transparent"
+		></div>
 
-	<!-- youtube embed -->
-	<div class="relative bg-dark-primary-island p-5 w-full max-w-m md:w-9/12">
-		<div class="aspect-w-16 aspect-h-9">
-			<iframe src="{collection.feature?.value}" title="youtube embed" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen></iframe>
+		<div class="-mt-24">
+			<h2 class="text-center text-display mb-xxl">watch</h2>
+			<iframe
+				src={collection.feature?.value}
+				title="youtube embed"
+				class="w-full aspect-[16/9] border-other-white/25 border-[1px]"
+				frameborder="0"
+				allowfullscreen
+			>
+			</iframe>
+		</div>
+	</section>
+	<section>
+		<div class="bg-other-black/50 p-xxl">
+			<h2>tracks</h2>
+			<ul>
+				{#each collection.album?.reference.media?.references.edges as song_edge}
+					<li>
+						{song_edge.node.title.value}
+					</li>
+				{/each}
+			</ul>
 		</div>
-	</div>
-
 	</section>
-
-	 
 </main>
 
 <style>