diff --git a/packages/gui/src/components/Badges/Badges.svelte b/packages/gui/src/components/Badges/Badges.svelte
new file mode 100644
index 0000000..bf86e1d
--- /dev/null
+++ b/packages/gui/src/components/Badges/Badges.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Badges"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
new file mode 100644
index 0000000..c5ed78a
--- /dev/null
+++ b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="BigBlackSpace"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/CliBanner/CliBanner.svelte b/packages/gui/src/components/CliBanner/CliBanner.svelte
new file mode 100644
index 0000000..11728c1
--- /dev/null
+++ b/packages/gui/src/components/CliBanner/CliBanner.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="CLI Hero"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
new file mode 100644
index 0000000..f274cd2
--- /dev/null
+++ b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="EssentialWorkshops"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
new file mode 100644
index 0000000..86631f5
--- /dev/null
+++ b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedCourses"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
new file mode 100644
index 0000000..99371ec
--- /dev/null
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedPackages"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/GettingStarted/GettingStarted.svelte b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
new file mode 100644
index 0000000..2d5006f
--- /dev/null
+++ b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="GettingStarted"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
new file mode 100644
index 0000000..8fe4409
--- /dev/null
+++ b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="InstalledPackages"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/PackageBanner/PackageBanner.svelte b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
new file mode 100644
index 0000000..800c99a
--- /dev/null
+++ b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="PackageBanner"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/PackageReviews/PackageReviews.svelte b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
new file mode 100644
index 0000000..b3e42a0
--- /dev/null
+++ b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<Placeholder label="PackageReviews"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/Preflight/Preflight.svelte b/packages/gui/src/components/Preflight/Preflight.svelte
new file mode 100644
index 0000000..56fa250
--- /dev/null
+++ b/packages/gui/src/components/Preflight/Preflight.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Preflight"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte b/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte
new file mode 100644
index 0000000..a1e05fe
--- /dev/null
+++ b/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="ProfileBanner"/>
\ No newline at end of file
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
new file mode 100644
index 0000000..85ec61d
--- /dev/null
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -0,0 +1,31 @@
+<script>
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<div class="bg-black border border-gray">
+    <section class="flex">
+        <h2>Filter Packages</h2>
+        <input type="search" class="text-white bg-black border border-gray"/>
+    </section>
+    <ul class="grid grid-cols-3 gap-8 mt-8">
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte
index 54754e2..ba89794 100644
--- a/packages/gui/src/routes/+layout.svelte
+++ b/packages/gui/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
     });
 </script>
 
-<div>
+<div id="main-layout">
     <nav class="">
         <NavBar/>
     </nav>
@@ -22,12 +22,14 @@
             </header>
         {/if}
         <figure></figure>
-        <slot></slot>
+        <div>
+            <slot></slot>
+        </div>
     </section>
 </div>
 
 <style>
-    div {
+    #main-layout {
         width: 100vh;
         height: 100vh;
     }
@@ -44,6 +46,7 @@
     }
     figure {
         position: absolute;
+        z-index: 0;
         top: 180px;
         left: 0px;
         right: 0px;
@@ -58,4 +61,12 @@
         height: 50px;
         border-bottom: #CCC 1px solid;
     }
+
+    slot {
+        z-index: 1;
+    }
+
+    div {
+        position: relative;
+    }
 </style>
\ No newline at end of file
diff --git a/packages/gui/src/routes/+page.svelte b/packages/gui/src/routes/+page.svelte
index 1d6b5d7..ce17a2f 100644
--- a/packages/gui/src/routes/+page.svelte
+++ b/packages/gui/src/routes/+page.svelte
@@ -2,20 +2,20 @@
 <script lang="ts">
     import "$appcss";
     import { backLink } from '$libs/stores';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-
+    import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
+    import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
     backLink.set('');
 </script>
 
 
 <div>
     <PageHeader>Discover</PageHeader>
-    <header>
-        <Placeholder label="featured packages"/>
-    </header>
+    <section>
+        <FeaturedPackages/>
+    </section>
     <section class="mt-8">
-        <Placeholder label="Getting started with tea"/>
+        <GettingStarted/>
     </section>
 </div>
 
diff --git a/packages/gui/src/routes/cli/+page.svelte b/packages/gui/src/routes/cli/+page.svelte
index 7c6e885..b9aa038 100644
--- a/packages/gui/src/routes/cli/+page.svelte
+++ b/packages/gui/src/routes/cli/+page.svelte
@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import CliBanner from "$components/CliBanner/CliBanner.svelte";
+    import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>INSTALL TEA</PageHeader>
 
-    <header>
-        <Placeholder label="big tea icon version with copy curl"/>
-    </header>
+    <section>
+        <CliBanner/>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="big black blank space"/>
+        <BigBlackSpace/>
     </section>
 </div>
\ No newline at end of file
diff --git a/packages/gui/src/routes/documentation/+page.svelte b/packages/gui/src/routes/documentation/+page.svelte
index 9081b15..e1db9e8 100644
--- a/packages/gui/src/routes/documentation/+page.svelte
+++ b/packages/gui/src/routes/documentation/+page.svelte
@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
+    import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>Documentation</PageHeader>
 
-    <header>
-        <Placeholder label="featured courses"/>
-    </header>
+    <section>
+        <FeaturedCourses/>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="Essential workshops"/>
+        <EssentialWorkshops/>
     </section>
 </div>
\ No newline at end of file
diff --git a/packages/gui/src/routes/packages/+page.svelte b/packages/gui/src/routes/packages/+page.svelte
index 501ad5b..7111686 100644
--- a/packages/gui/src/routes/packages/+page.svelte
+++ b/packages/gui/src/routes/packages/+page.svelte
@@ -1,7 +1,7 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -9,27 +9,5 @@
 
 <div>
     <PageHeader>Packages</PageHeader>
-    <section>
-        <Placeholder label="filter packages"/>
-    </section>
-    <ul class="grid grid-cols-3 gap-8 mt-8">
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
-        </li>
-    </ul>
+    <SearchPackages/>
 </div>
\ No newline at end of file
diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index 1f9991b..b161f43 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,9 +1,9 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
-    import { page } from '$app/stores';
     import { backLink } from '$libs/stores';
+    import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
+    import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
     backLink.set('/packages');
 
     /** @type {import('./$types').PageData} */
@@ -13,9 +13,9 @@
 <div>
     <PageHeader>{data.title}</PageHeader>
     <section>
-        <Placeholder label="package cover w/ copy link" />
+        <PackageBanner/>
     </section>
     <section class="mt-8">
-        <Placeholder label="reviews" />
+        <PackageReviews/>
     </section>
 </div>
\ No newline at end of file
diff --git a/packages/gui/src/routes/profile/+page.svelte b/packages/gui/src/routes/profile/+page.svelte
index 7f1852c..4a6a773 100644
--- a/packages/gui/src/routes/profile/+page.svelte
+++ b/packages/gui/src/routes/profile/+page.svelte
@@ -2,6 +2,10 @@
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
     import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
+    import Preflight from "$components/Preflight/Preflight.svelte";
+    import Badges from "$components/Badges/Badges.svelte";
+    import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,21 +14,21 @@
 <div>
     <PageHeader>PROFILE</PageHeader>
 
-    <header>
-        <Placeholder label="github username and wallet address"/>
-    </header>
+    <section>
+        <ProfileBanner/>
+    </section>
 
     <section class="mt-8 grid grid-cols-2 gap-8">
         <div>
-            <Placeholder label="pre-flight"/>
+            <Preflight/>
         </div>
         <div>
-            <Placeholder label="badges"/>
+            <Badges/>
         </div>
     </section>
 
     <section class="mt-8">
-        <Placeholder label="my installs"/>
+        <InstalledPackages/>
     </section>
 
 </div>
\ No newline at end of file