diff --git a/modules/gui/src/routes/+page.svelte b/modules/gui/src/routes/+page.svelte
index 6542ed8..067e990 100644
--- a/modules/gui/src/routes/+page.svelte
+++ b/modules/gui/src/routes/+page.svelte
@@ -5,7 +5,9 @@
 	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
 	import Packages from '$components/Packages/Packages.svelte';
 	import News from '$components/News/News.svelte';
-	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
+
+	import HeaderCard from '@tea/ui/HeaderCard/HeaderCard.svelte';
+	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
 </script>
 
 <div>
@@ -13,6 +15,31 @@
 	<section class="mt-8 mb-8">
 		<Packages title="FOUNDATIN ESSENTIALS" />
 	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">ASSET TYPE</PageHeader>
+	<section class="mt-8 mb-8 flex gap-4">
+		<div>
+			<HeaderCard
+				title="Browser Packages"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse packages >"
+				articleTitle="What are packages?"
+				description="Collections of files aggregated to form larger frameworks & functions. Think Python or Node.js."
+			/>
+			<ListAction title="Top packages this week" mainCtaTitle="VIEW ALL PACKAGES" />
+		</div>
+		<div>
+			<HeaderCard
+				title="Browse Scripts"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse scripts >"
+				articleTitle="What are scripts?"
+				description="Invisible applications that chain packages together in order to perform cool actions on your computer."
+			/>
+			<ListAction title="Top scripts this week" mainCtaTitle="VIEW ALL SCRIPTS" />
+		</div>
+	</section>
 	<PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
 	<section class="mt-8 mb-8">
 		<EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />
diff --git a/modules/ui/src/HeaderCard/HeaderCard.svelte b/modules/ui/src/HeaderCard/HeaderCard.svelte
new file mode 100644
index 0000000..0380ee9
--- /dev/null
+++ b/modules/ui/src/HeaderCard/HeaderCard.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import '../app.css';
+
+	export let title: string;
+	export let imgUrl: string;
+	export let ctaUrl: string;
+	export let ctaLabel: string;
+
+	export let articleTitle: string;
+	export let description: string;
+</script>
+
+<section class="border border-gray bg-black">
+	<header class="flex justify-between p-4 text-primary">
+		<h1 class="uppercase ">{title}</h1>
+		<a href={ctaUrl} class="text-sm">{ctaLabel}</a>
+	</header>
+	<figure class="h-40">
+		<img class="h-40 w-full object-cover" src={imgUrl} alt={title} />
+	</figure>
+	<article class="m-4 border border-gray p-4">
+		<h2 class="uppercase text-primary">{articleTitle}</h2>
+		<p class="text-gray">{description}</p>
+	</article>
+</section>
diff --git a/modules/ui/src/ListAction/ListAction.svelte b/modules/ui/src/ListAction/ListAction.svelte
new file mode 100644
index 0000000..7313f2d
--- /dev/null
+++ b/modules/ui/src/ListAction/ListAction.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import Button from '../Button/Button.svelte';
+
+	export let title: string;
+	export let mainCtaTitle: string;
+</script>
+
+<section class="bg-black">
+	<header class="w-full border border-gray p-2 text-primary">{title}</header>
+	<ul class="border border-b-0 border-r-0 border-l-0 border-gray">
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+	</ul>
+	<footer class="w-full border border-t-0 border-gray text-gray">
+		<a href="/" class="flex w-full">
+			<Button>
+				<div class="flex w-full justify-between p-2">
+					<button>{mainCtaTitle}</button>
+					<i class="icon-right-arrow" />
+				</div>
+			</Button>
+		</a>
+	</footer>
+</section>