diff --git a/packages/gui/package.json b/packages/gui/package.json
index c3ab475..f6941a0 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -41,7 +41,8 @@
 	"type": "module",
 	"dependencies": {
 		"@tauri-apps/api": "^1.2.0",
-		"buffer": "^6.0.3"
+		"buffer": "^6.0.3",
+		"fuse.js": "^6.6.2"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [
diff --git a/packages/gui/src-tauri/tauri.conf.json b/packages/gui/src-tauri/tauri.conf.json
index 9da9ca5..6696831 100644
--- a/packages/gui/src-tauri/tauri.conf.json
+++ b/packages/gui/src-tauri/tauri.conf.json
@@ -102,7 +102,7 @@
 				"height": 600,
 				"resizable": true,
 				"title": "gui",
-				"width": 800,
+				"width": 1024,
 				"decorations": false
 			}
 		]
diff --git a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
index 35bfb88..c662ae7 100644
--- a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
+++ b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -4,3 +4,4 @@
 </script>
 
 <Placeholder label="FeaturedCourses" />
+<h1>test</h1>
diff --git a/packages/gui/src/components/NavBar/NavBar.svelte b/packages/gui/src/components/NavBar/NavBar.svelte
index 1efec05..e9bad45 100644
--- a/packages/gui/src/components/NavBar/NavBar.svelte
+++ b/packages/gui/src/components/NavBar/NavBar.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { open } from '@tauri-apps/api/shell';
 	import { appWindow } from '@tauri-apps/api/window';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
 
 	import { beforeUpdate } from 'svelte';
 
@@ -53,6 +54,10 @@
 			routes[0].active = false;
 		}
 	});
+
+	const onSearch = (term: string) => {
+		console.log('navbar search:', term);
+	};
 </script>
 
 <ul id="NavBar">
@@ -73,11 +78,7 @@
 		</a>
 	</nav>
 
-	<input
-		class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
-		type="search"
-		placeholder="search"
-	/>
+	<SearchInput size="small" {onSearch} />
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
diff --git a/packages/gui/src/components/Placeholder/Placeholder.svelte b/packages/gui/src/components/Placeholder/Placeholder.svelte
index 513616f..5e5e9a7 100644
--- a/packages/gui/src/components/Placeholder/Placeholder.svelte
+++ b/packages/gui/src/components/Placeholder/Placeholder.svelte
@@ -2,7 +2,7 @@
 	export let label = '';
 </script>
 
-<section>
+<section class="p-8 bg-gray">
 	<header>{label}</header>
 	<slot />
 </section>
@@ -14,7 +14,7 @@
 		height: 100%;
 		width: 100%;
 		min-width: 100%;
-		background-color: #ccc;
+		/* background-color: #ccc; */
 		display: flex;
 	}
 	header {
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 0fdecdb..e45c8ad 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -1,15 +1,25 @@
 <script type="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
-
+	import Fuse from 'fuse.js';
 	import { packages as packagesStore, initializePackages } from '$libs/stores';
-	import type { Package } from '$libs/types';
+
+	import type { Package } from '@tea/ui/types';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
 	import { onMount } from 'svelte';
 
+	let allPackages: Package[] = [];
+	let packagesIndex: Fuse<Package>;
 	let packages: Package[] = [];
 	let initialized = false;
+	const searchLimit = 5;
+
 	packagesStore.subscribe((v) => {
-		packages = v;
+		allPackages = v;
+		packages = allPackages;
+		packagesIndex = new Fuse(allPackages, {
+			keys: ['name', 'full_name', 'desc']
+		});
 	});
 
 	onMount(async () => {
@@ -18,18 +28,34 @@
 			initializePackages();
 		}
 	});
+
+	const onSearch = (term: string) => {
+		if (term !== '' && term.length > 3) {
+			const res = packagesIndex.search(term);
+			packages = [];
+			for (let i = 0; i < searchLimit; i++) {
+				if (res[i]) {
+					packages.push(res[i].item);
+				}
+			}
+		} else {
+			packages = allPackages;
+		}
+	};
 </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 class="flex justify-between items-center">
+		<div>
+			<SearchInput size="medium" {onSearch} />
+		</div>
+		<div class="pr-4">
+			<section class="h-12 w-48 border border-gray" />
+		</div>
 	</section>
-	<ul class="grid grid-cols-3 gap-8 mt-8">
+	<ul class="grid grid-cols-3">
 		{#each packages as pkg}
-			<li>
-				<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
-			</li>
+			<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
 		{/each}
 	</ul>
 </div>
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index d58553f..39a2100 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -6,149 +6,149 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package } from '../types';
+const packages: 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
+	},
+	{
+		slug: 'gnu_org_gettext',
+		homepage: 'https://gnu.org',
+		maintainer: 'gnu.org',
+		name: 'gettext',
+		version: '0.21.1',
+		last_modified: '2022-10-20T01:23:46.000Z',
+		full_name: 'gnu.org/gettext',
+		dl_count: 3715970,
+		thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
+		desc: 'GNU internationalization (i18n) and localization (l10n) library',
+		thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
+		installs: 0
+	},
+	{
+		slug: 'ipfs_tech',
+		homepage: 'https://ipfs.tech',
+		name: 'ipfs.tech',
+		version: '0.16.0',
+		last_modified: '2022-10-19T21:36:52.000Z',
+		full_name: 'ipfs.tech',
+		dl_count: 14457,
+		thumb_image_name: 'ipfs_tech_option 2.jpg ',
+		maintainer: '',
+		desc: 'Peer-to-peer hypermedia protocol',
+		thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
+		installs: 0
+	},
+	{
+		slug: 'nixos_org_patchelf',
+		homepage: 'https://nixos.org',
+		maintainer: 'nixos.org',
+		name: 'patchelf',
+		version: '0.15.0',
+		last_modified: '2022-09-27T04:50:44.000Z',
+		full_name: 'nixos.org/patchelf',
+		dl_count: 0,
+		thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
+		desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
+		thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
+		installs: 0
+	},
+	{
+		slug: 'tea_xyz',
+		homepage: 'https://tea.xyz',
+		maintainer: 'tea.xyz',
+		name: 'tea.xyz',
+		version: '0.8.6',
+		last_modified: '2022-10-19T19:13:51.000Z',
+		full_name: 'tea.xyz',
+		dl_count: 0,
+		thumb_image_name: 'tea_xyz_option 2.jpg ',
+		desc: 'Website of tea.xyz',
+		thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
+		installs: 0
+	},
+	{
+		slug: 'charm_sh_gum',
+		homepage: 'https://charm.sh',
+		maintainer: 'charm.sh',
+		name: 'gum',
+		version: '0.8.0',
+		last_modified: '2022-10-21T02:15:16.000Z',
+		full_name: 'charm.sh/gum',
+		dl_count: 0,
+		thumb_image_name: 'charm_sh_gum.jpg ',
+		desc: '',
+		thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
+		installs: 0
+	},
+	{
+		slug: 'pyyaml_org',
+		homepage: 'https://pyyaml.org',
+		name: 'pyyaml.org',
+		version: '0.2.5',
+		last_modified: '2022-10-03T15:35:14.000Z',
+		full_name: 'pyyaml.org',
+		dl_count: 107505,
+		thumb_image_name: 'pyyaml_org_option 1.jpg ',
+		maintainer: '',
+		desc: 'YAML framework for Python',
+		thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
+		installs: 0
+	},
+	{
+		slug: 'tea_xyz_gx_cc',
+		homepage: 'https://tea.xyz',
+		maintainer: 'tea.xyz',
+		name: 'cc',
+		version: '0.1.0',
+		last_modified: '2022-10-19T16:47:44.000Z',
+		full_name: 'tea.xyz/gx/cc',
+		dl_count: 0,
+		thumb_image_name: 'tea_xyz_gx.jpg ',
+		desc: '',
+		thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
+		installs: 0
+	}
+];
 
 export async function getPackages(): Promise<Package[]> {
-	const packages: 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
-		},
-		{
-			slug: 'gnu_org_gettext',
-			homepage: 'https://gnu.org',
-			maintainer: 'gnu.org',
-			name: 'gettext',
-			version: '0.21.1',
-			last_modified: '2022-10-20T01:23:46.000Z',
-			full_name: 'gnu.org/gettext',
-			dl_count: 3715970,
-			thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
-			desc: 'GNU internationalization (i18n) and localization (l10n) library',
-			thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
-			installs: 0
-		},
-		{
-			slug: 'ipfs_tech',
-			homepage: 'https://ipfs.tech',
-			name: 'ipfs.tech',
-			version: '0.16.0',
-			last_modified: '2022-10-19T21:36:52.000Z',
-			full_name: 'ipfs.tech',
-			dl_count: 14457,
-			thumb_image_name: 'ipfs_tech_option 2.jpg ',
-			maintainer: '',
-			desc: 'Peer-to-peer hypermedia protocol',
-			thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
-			installs: 0
-		},
-		{
-			slug: 'nixos_org_patchelf',
-			homepage: 'https://nixos.org',
-			maintainer: 'nixos.org',
-			name: 'patchelf',
-			version: '0.15.0',
-			last_modified: '2022-09-27T04:50:44.000Z',
-			full_name: 'nixos.org/patchelf',
-			dl_count: 0,
-			thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
-			desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
-			thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
-			installs: 0
-		},
-		{
-			slug: 'tea_xyz',
-			homepage: 'https://tea.xyz',
-			maintainer: 'tea.xyz',
-			name: 'tea.xyz',
-			version: '0.8.6',
-			last_modified: '2022-10-19T19:13:51.000Z',
-			full_name: 'tea.xyz',
-			dl_count: 0,
-			thumb_image_name: 'tea_xyz_option 2.jpg ',
-			desc: 'Website of tea.xyz',
-			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
-			installs: 0
-		},
-		{
-			slug: 'charm_sh_gum',
-			homepage: 'https://charm.sh',
-			maintainer: 'charm.sh',
-			name: 'gum',
-			version: '0.8.0',
-			last_modified: '2022-10-21T02:15:16.000Z',
-			full_name: 'charm.sh/gum',
-			dl_count: 0,
-			thumb_image_name: 'charm_sh_gum.jpg ',
-			desc: '',
-			thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
-			installs: 0
-		},
-		{
-			slug: 'pyyaml_org',
-			homepage: 'https://pyyaml.org',
-			name: 'pyyaml.org',
-			version: '0.2.5',
-			last_modified: '2022-10-03T15:35:14.000Z',
-			full_name: 'pyyaml.org',
-			dl_count: 107505,
-			thumb_image_name: 'pyyaml_org_option 1.jpg ',
-			maintainer: '',
-			desc: 'YAML framework for Python',
-			thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
-			installs: 0
-		},
-		{
-			slug: 'tea_xyz_gx_cc',
-			homepage: 'https://tea.xyz',
-			maintainer: 'tea.xyz',
-			name: 'cc',
-			version: '0.1.0',
-			last_modified: '2022-10-19T16:47:44.000Z',
-			full_name: 'tea.xyz/gx/cc',
-			dl_count: 0,
-			thumb_image_name: 'tea_xyz_gx.jpg ',
-			desc: '',
-			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
-			installs: 0
-		}
-	];
 	return packages;
 }
diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts
index 1ce476c..ed18b7d 100644
--- a/packages/gui/src/libs/types.ts
+++ b/packages/gui/src/libs/types.ts
@@ -1,14 +1,4 @@
-export interface Package {
-	slug: string;
-	version: string;
-	full_name: string;
-	name: string;
-	maintainer: string;
-	homepage: string;
-	last_modified: Date | string;
-	thumb_image_url: string;
-	thumb_image_name: string;
-	desc: string;
-	dl_count: number;
-	installs: number;
-}
+// as much possible add types here that are unique to @tea/gui use only
+// else
+// 		please use the package @tea/ui/src/types.ts
+//		things that go there are shared types/shapes like ie: Package
diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte
index 46953d5..a35153a 100644
--- a/packages/gui/src/routes/+layout.svelte
+++ b/packages/gui/src/routes/+layout.svelte
@@ -23,6 +23,7 @@
 		{/if}
 		<figure />
 		<div>
+			<!-- all pages get inserted in this slot -->
 			<slot />
 		</div>
 	</section>
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json
index d93018b..813ed05 100644
--- a/packages/gui/tsconfig.json
+++ b/packages/gui/tsconfig.json
@@ -14,7 +14,7 @@
 			"$libs/*": ["src/libs/*"],
 			"@api": ["src/lib/api/tauri.ts"],
 			"$components/*": ["src/components/*"],
-			"@tea/ui": ["../ui/src/*"]
+			"@tea/ui/*": ["../ui/src/*"]
 		}
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
diff --git a/packages/tsconfig.cli.json b/packages/tsconfig.cli.json
deleted file mode 100644
index c636490..0000000
--- a/packages/tsconfig.cli.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-		"paths": {
-			"@api": ["src/lib/api_cli.ts"],
-		}
-	},
-}
\ No newline at end of file
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
index 1490af9..8a4c282 100644
--- a/packages/ui/.eslintrc.cjs
+++ b/packages/ui/.eslintrc.cjs
@@ -1,5 +1,8 @@
 module.exports = {
 	root: true,
+	globals: {
+		NodeJS: true
+	},
 	parser: '@typescript-eslint/parser',
 	extends: [
 		'eslint:recommended',
diff --git a/packages/ui/src/PackageCard/PackageCard.css b/packages/ui/src/PackageCard/PackageCard.css
new file mode 100644
index 0000000..7ddd2d1
--- /dev/null
+++ b/packages/ui/src/PackageCard/PackageCard.css
@@ -0,0 +1 @@
+@import '../app.css';
diff --git a/packages/ui/src/PackageCard/PackageCard.stories.ts b/packages/ui/src/PackageCard/PackageCard.stories.ts
new file mode 100644
index 0000000..c67c9f4
--- /dev/null
+++ b/packages/ui/src/PackageCard/PackageCard.stories.ts
@@ -0,0 +1,45 @@
+import PackageCard from './PackageCard.svelte';
+import type { Package } from '../types';
+
+const SamplePkg: 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
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+	title: 'Example/PackageCard',
+	component: PackageCard,
+	tags: ['docsPage'],
+	render: ({ pkg, link }: { pkg: Package; link: string }) => ({
+		Component: PackageCard,
+		props: { pkg }
+	}),
+	argTypes: {
+		pkg: {
+			name: 'pkg',
+			description: 'type Package'
+		},
+		link: {
+			name: 'link'
+		}
+	}
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {
+	args: {
+		pkg: SamplePkg,
+		link: '#'
+	}
+};
diff --git a/packages/ui/src/PackageCard/PackageCard.svelte b/packages/ui/src/PackageCard/PackageCard.svelte
new file mode 100644
index 0000000..8b0cde6
--- /dev/null
+++ b/packages/ui/src/PackageCard/PackageCard.svelte
@@ -0,0 +1,129 @@
+<script type="ts">
+	import './PackageCard.css';
+	import type { Package } from '../types';
+	export let pkg: Package;
+	export let link: string;
+</script>
+
+<section class="p-4 border border-gray">
+	<figure>
+		<img
+			src={!pkg.thumb_image_url.includes('https://tea.xyz')
+				? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
+				: pkg.thumb_image_url}
+			alt={pkg.name}
+		/>
+		<article class="card-thumb-label">
+			<i class="icon-tea-logo-iconasset-1">
+				<!-- TODO: replace with icon.svg -->
+			</i>
+			<h3>{pkg.name}</h3>
+			{#if pkg.maintainer}
+				<h4>&#x2022;&nbsp;{pkg.maintainer}</h4>
+			{/if}
+		</article>
+	</figure>
+	<footer class="flex mt-4 justify-between items-center">
+		<div>
+			<p>
+				<span>V&NonBreakingSpace;{pkg.version}</span>
+				<!--
+        TODO: uncomment once install counts improve
+        <br>
+        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
+			</p>
+		</div>
+		<!-- TODO: move this button into its own reusable component -->
+		<a href={link}>
+			<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
+		</a>
+	</footer>
+</section>
+
+<style>
+	section {
+		background-color: #1a1a1a;
+		transition: all 0.3s;
+		width: 100%;
+	}
+
+	figure {
+		position: relative;
+	}
+
+	.detail-btn {
+		position: relative;
+		float: right !important;
+		right: 0;
+	}
+
+	img {
+		box-shadow: 0px 0px 12px #0c0c0c !important;
+		width: 100%;
+		height: 100%;
+	}
+	.card-thumb-label i {
+		font-size: 1.5vw;
+	}
+
+	.card-thumb-label h3 {
+		color: black;
+		font-size: 1.8vw;
+		line-height: 1.8vw;
+		margin: 0px 0px 0.5vw 0vw;
+		padding: 0px;
+	}
+
+	.card-thumb-label {
+		position: absolute;
+		background: rgba(255, 255, 255, 0.9);
+		left: 0;
+		bottom: 0vw;
+		padding: 1.116vw;
+		text-align: left;
+		width: 90%;
+		height: 40%;
+	}
+
+	.card-thumb-label h4 {
+		color: black;
+		font-size: 1.5vw;
+		line-height: 1.5vw;
+		margin: 0px;
+		padding: 0px;
+	}
+
+	.detail-btn {
+		display: inline-block;
+		font-family: 'pp-neue-machina', sans-serif;
+		background-color: #1a1a1a;
+		border: 0.5px solid #ffffff;
+		color: #fff;
+		padding-top: 0.279vw;
+		text-decoration: none;
+		text-transform: uppercase;
+		width: 100px;
+		height: 2.232vw;
+		min-height: 34px;
+		transition: 0.1s linear;
+	}
+
+	.detail-btn:hover {
+		background-color: #8000ff;
+		box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
+	}
+
+	/* Icon Styling */
+
+	.detail-btn .icon-enter-arrow {
+		display: inline-block;
+		position: relative;
+		margin-right: 0.558vw;
+		transition: 0.2s ease-in-out;
+	}
+
+	.detail-btn:hover .icon-enter-arrow {
+		display: inline-block;
+		transform: rotate(-45deg) !important;
+	}
+</style>
diff --git a/packages/ui/src/SearchInput/SearchInput.css b/packages/ui/src/SearchInput/SearchInput.css
new file mode 100644
index 0000000..7ddd2d1
--- /dev/null
+++ b/packages/ui/src/SearchInput/SearchInput.css
@@ -0,0 +1 @@
+@import '../app.css';
diff --git a/packages/ui/src/SearchInput/SearchInput.stories.ts b/packages/ui/src/SearchInput/SearchInput.stories.ts
new file mode 100644
index 0000000..6fabc6d
--- /dev/null
+++ b/packages/ui/src/SearchInput/SearchInput.stories.ts
@@ -0,0 +1,31 @@
+import SearchInput from './SearchInput.svelte';
+
+export default {
+	title: 'Example/SearchInput',
+	component: SearchInput,
+	// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
+	tags: [],
+	render: (args) => ({
+		Component: SearchInput,
+		props: args
+	}),
+	parameters: {
+		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+		// layout: 'fullscreen'
+	},
+	argTypes: {
+		// onLogin: { action: 'onLogin' },
+		// onLogout: { action: 'onLogout' },
+		// onCreateAccount: { action: 'onCreateAccount' }
+	}
+};
+
+export const Small = {
+	args: {
+		user: {
+			name: 'Jane Doe'
+		}
+	}
+};
+
+export const Big = {};
diff --git a/packages/ui/src/SearchInput/SearchInput.svelte b/packages/ui/src/SearchInput/SearchInput.svelte
new file mode 100644
index 0000000..4335c58
--- /dev/null
+++ b/packages/ui/src/SearchInput/SearchInput.svelte
@@ -0,0 +1,72 @@
+<script type="ts">
+	import './SearchInput.css';
+
+	export let size: 'small' | 'medium' | 'large' = 'small';
+	export let onSearch: (text: string) => void;
+
+	let timer: NodeJS.Timeout;
+	const onChange = (e: KeyboardEvent) => {
+		const t = e.target as HTMLInputElement;
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			onSearch && onSearch(t.value);
+		}, 300);
+	};
+</script>
+
+<section class={`flex items-center ${size}`}>
+	<div class="icon">
+		<i class="icon-search-icon" />
+	</div>
+	<input type="search" placeholder="search_" on:keyup={onChange} />
+</section>
+
+<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
+<style>
+	.icon-search-icon {
+		font-size: 30px;
+		color: #949494;
+		margin-right: 20px;
+		position: relative;
+		top: 2px;
+	}
+
+	section {
+		padding: 0px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	section.medium {
+		height: 75px;
+	}
+	section.large {
+		height: 150px;
+	}
+
+	section input {
+		font-family: 'pp-neue-machina', sans-serif;
+		color: #00ffd0;
+		text-transform: uppercase;
+		margin-bottom: -5px;
+		min-width: 60%;
+		padding: 0px;
+		background-color: #1a1a1a !important;
+		border: none;
+		color: #00ffd0;
+		outline: none;
+		border-radius: 0px;
+	}
+
+	section.medium input {
+		font-size: 24px;
+	}
+	section.large input {
+		font-size: 32px;
+	}
+	section input::placeholder {
+		/* Chrome, Firefox, Opera, Safari 10.1+ */
+		color: #949494;
+		opacity: 1; /* Firefox */
+	}
+</style>
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
new file mode 100644
index 0000000..1ce476c
--- /dev/null
+++ b/packages/ui/src/types.ts
@@ -0,0 +1,14 @@
+export interface Package {
+	slug: string;
+	version: string;
+	full_name: string;
+	name: string;
+	maintainer: string;
+	homepage: string;
+	last_modified: Date | string;
+	thumb_image_url: string;
+	thumb_image_name: string;
+	desc: string;
+	dl_count: number;
+	installs: number;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24e725d..cccecea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,7 @@ importers:
       eslint: ^8.16.0
       eslint-config-prettier: ^8.3.0
       eslint-plugin-svelte3: ^4.0.0
+      fuse.js: ^6.6.2
       postcss: ^8.4.19
       prettier: ^2.6.2
       prettier-plugin-svelte: ^2.7.0
@@ -35,11 +36,12 @@ importers:
     dependencies:
       '@tauri-apps/api': 1.2.0
       buffer: 6.0.3
+      fuse.js: 6.6.2
     devDependencies:
       '@playwright/test': 1.25.0
       '@sveltejs/adapter-auto': 1.0.0-next.89
       '@sveltejs/adapter-static': 1.0.0-next.48
-      '@sveltejs/kit': 1.0.0-next.562_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.563_svelte@3.53.1+vite@3.2.4
       '@tauri-apps/cli': 1.2.0
       '@tea/ui': link:../ui
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
@@ -99,7 +101,7 @@ importers:
       '@storybook/svelte-vite': 7.0.0-alpha.51_xlscsvjyync2sh57nhuoanpbpq
       '@storybook/testing-library': 0.0.13_wcqkhtmu7mswc6yz4uyexck3ty
       '@sveltejs/adapter-auto': 1.0.0-next.89
-      '@sveltejs/kit': 1.0.0-next.561_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.563_svelte@3.53.1+vite@3.2.4
       '@sveltejs/package': 1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
       '@typescript-eslint/parser': 5.43.0_e3uo4sehh4zr4i6m57mkkxxv7y
@@ -3002,36 +3004,8 @@ packages:
     resolution: {integrity: sha512-Z5Z+QZOav6D0KDeU3ReksGERJg/sX1k5OKWWXyQ11OwGErEEwSXHYRUyjaBmZEPeGzpVVGwwMUK8YWJlG/MKeA==}
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.561_svelte@3.53.1+vite@3.2.4:
-    resolution: {integrity: sha512-N8HQvS6gcm7R78ADfM4xjhuFS3Ir+Ezce3De8WOnISXQ1tS2npc5LMH9LRHHi14nfosAfJ7vUlcLwLE6N/I7+Q==}
-    engines: {node: '>=16.14'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      svelte: ^3.44.0
-      vite: ^3.2.0
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
-      '@types/cookie': 0.5.1
-      cookie: 0.5.0
-      devalue: 4.2.0
-      kleur: 4.1.5
-      magic-string: 0.26.7
-      mime: 3.0.0
-      sade: 1.8.1
-      set-cookie-parser: 2.5.1
-      sirv: 2.0.2
-      svelte: 3.53.1
-      tiny-glob: 0.2.9
-      undici: 5.12.0
-      vite: 3.2.4
-    transitivePeerDependencies:
-      - diff-match-patch
-      - supports-color
-    dev: true
-
-  /@sveltejs/kit/1.0.0-next.562_svelte@3.53.1+vite@3.2.4:
-    resolution: {integrity: sha512-VgJzjtfjVLW/4A/vDtURc10PrS3bb/N62LHzqLZcUNb5+eN4a0k5cayC7Hz2tmtvrb2Qsg+piEAogvqjKBxrOg==}
+  /@sveltejs/kit/1.0.0-next.563_svelte@3.53.1+vite@3.2.4:
+    resolution: {integrity: sha512-RvQSE6dOuH4vE2hM5K/DezJlm9RjC5EMQK8X46mBXIggp8unaDH+YJyF+KRvAZE5sV93Hk5xaq0WZa8jtU42Jw==}
     engines: {node: '>=16.14'}
     hasBin: true
     requiresBuild: true
@@ -6043,6 +6017,11 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /fuse.js/6.6.2:
+    resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
+    engines: {node: '>=10'}
+    dev: false
+
   /gauge/3.0.2:
     resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
     engines: {node: '>=10'}