diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
index 84219ac..008f68f 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -1,54 +1,15 @@
 <script lang="ts">
 	import '$appcss';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { watchResize } from 'svelte-watch-resize';
 	import type { Package } from '@tea/ui/types';
 	import FeaturedPackage from './FeaturedPackage.svelte';
+	import {
+		featuredPackages as featuredPackagesStore,
+		initializeFeaturedPackages
+	} from '$libs/stores';
 
-	let featuredPackages: Package[] = [
-		{
-			slug: 'mesonbuild_com',
-			homepage: 'https://mesonbuild.com',
-			name: 'mesonbuild.com',
-			version: '0.63.3',
-			last_modified: '2022-10-06T15:45:08.000Z',
-			full_name: 'mesonbuild.com',
-			dl_count: 270745,
-			thumb_image_name: 'mesonbuild_com_option 1.jpg ',
-			maintainer: '',
-			desc: 'Fast and user friendly build system',
-			thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
-			installs: 0
-		},
-		{
-			slug: 'pixman_org',
-			homepage: 'http://www.pixman.org/',
-			maintainer: 'freedesktop',
-			name: 'pixman.org',
-			version: '0.40.0',
-			last_modified: '2022-09-26T19:37:47.000Z',
-			full_name: 'pixman.org',
-			dl_count: 0,
-			thumb_image_name: 'pixman_org_option 1.jpg ',
-			desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
-			thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
-			installs: 0
-		},
-		{
-			slug: 'freedesktop_org_pkg_config',
-			homepage: 'https://freedesktop.org',
-			maintainer: 'freedesktop.org',
-			name: 'pkg-config',
-			version: '0.29.2',
-			last_modified: '2022-10-20T01:32:15.000Z',
-			full_name: 'freedesktop.org/pkg-config',
-			dl_count: 2661501,
-			thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
-			desc: 'Manage compile and link flags for libraries',
-			thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
-			installs: 0
-		}
-	];
+	let featuredPackages: Package[] = [];
 
 	let pkgFocus = 0;
 	let width = 0;
@@ -76,7 +37,16 @@
 		styleFeaturedPackages = getFeaturedStyle();
 	}, 3000);
 
+	featuredPackagesStore.subscribe((v) => {
+		featuredPackages = v;
+	});
+
 	onDestroy(() => clearInterval(loop));
+	onMount(() => {
+		if (!featuredPackages.length) {
+			initializeFeaturedPackages();
+		}
+	});
 </script>
 
 <section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
diff --git a/packages/gui/src/components/PageHeader/PageHeader.svelte b/packages/gui/src/components/PageHeader/PageHeader.svelte
index 66e5aa1..0037feb 100644
--- a/packages/gui/src/components/PageHeader/PageHeader.svelte
+++ b/packages/gui/src/components/PageHeader/PageHeader.svelte
@@ -1,3 +1,3 @@
-<header class="text-primary text-6xl font-machina uppercase">
+<header class="text-primary text-6xl font-machina uppercase mb-8">
 	<slot />
 </header>
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index 39a2100..5831955 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -152,3 +152,7 @@ const packages: Package[] = [
 export async function getPackages(): Promise<Package[]> {
 	return packages;
 }
+
+export async function getFeaturedPackages(): Promise<Package[]> {
+	return packages.slice(0, 4);
+}
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index 1ad6917..5d9f920 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -13,6 +13,7 @@
 import { getClient } from '@tauri-apps/api/http';
 import { Buffer } from 'buffer';
 import type { Package } from '../types';
+import * as mock from './mock';
 
 const username = 'user';
 const password = 'password';
@@ -49,3 +50,8 @@ export async function getPackages(): Promise<Package[]> {
 	const packages = await get<Package[]>('packages');
 	return packages;
 }
+
+export async function getFeaturedPackages(): Promise<Package[]> {
+	const packages = await mock.getFeaturedPackages();
+	return packages;
+}
diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index b5b204a..cb85595 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -1,13 +1,20 @@
 import { writable } from 'svelte/store';
 import type { Package } from './types';
 
-import { getPackages } from '@api';
+import { getPackages, getFeaturedPackages } from '@api';
 
 export const backLink = writable<string>('/');
 
 export const packages = writable<Package[]>([]);
 
+export const featuredPackages = writable<Package[]>([]);
+
 export const initializePackages = async () => {
 	const newPackages = await getPackages();
 	packages.set(newPackages);
 };
+
+export const initializeFeaturedPackages = async () => {
+	const packages = await getFeaturedPackages();
+	featuredPackages.set(packages);
+};
diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte
index a35153a..5b4e057 100644
--- a/packages/gui/src/routes/+layout.svelte
+++ b/packages/gui/src/routes/+layout.svelte
@@ -48,7 +48,7 @@
 	figure {
 		position: absolute;
 		z-index: 0;
-		top: 180px;
+		top: 220px;
 		left: 0px;
 		right: 0px;
 		bottom: 0px;
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json
index 813ed05..80cda19 100644
--- a/packages/gui/tsconfig.json
+++ b/packages/gui/tsconfig.json
@@ -12,7 +12,7 @@
 		"paths": {
 			"$appcss": ["src/app.css"],
 			"$libs/*": ["src/libs/*"],
-			"@api": ["src/lib/api/tauri.ts"],
+			"@api": ["src/libs/api/tauri.ts"],
 			"$components/*": ["src/components/*"],
 			"@tea/ui/*": ["../ui/src/*"]
 		}