diff --git a/modules/gui/src/components/NavBar/NavBar.svelte b/modules/gui/src/components/NavBar/NavBar.svelte
deleted file mode 100644
index f818e45..0000000
--- a/modules/gui/src/components/NavBar/NavBar.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import { searchStore } from '$libs/stores';
-	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
-	import Button from '@tea/ui/Button/Button.svelte';
-	import ProfileNavButton from './ProfileNavButton.svelte';
-
-	import { beforeUpdate } from 'svelte';
-
-	let routes = [
-		{
-			path: '/',
-			active: false,
-			label: 'DISCOVER'
-		},
-		{
-			path: '/documentation',
-			active: false,
-			label: 'DOCUMENTATION'
-		},
-		{
-			path: '/cli',
-			active: false,
-			label: 'TEA CLI INSTALL'
-		},
-		{
-			path: '/packages',
-			active: false,
-			label: 'PACKAGES'
-		},
-		{
-			path: 'https://github.com/teaxyz',
-			active: false,
-			label: 'VIEW ON GITHUB',
-			target: '_blank'
-		}
-	];
-
-	beforeUpdate(async () => {
-		const currentPath = $page.url.pathname;
-
-		for (let i = 0; i < routes.length; i++) {
-			let { path } = routes[i];
-			routes[i].active = currentPath.includes(path);
-		}
-		if (currentPath !== '/') {
-			routes[0].active = false;
-		}
-	});
-
-	const onSearch = (term: string) => {
-		searchStore.search(term);
-	};
-</script>
-
-<ul id="NavBar">
-	<nav class="flex justify-between">
-		<a href="/">
-			<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
-		</a>
-	</nav>
-
-	<SearchInput class="border border-gray py-4" size="small" {onSearch} />
-
-	{#each routes as route}
-		<li class={route.active ? 'nav_button active' : 'nav_button'}>
-			<a href={route.path} target={route.target || ''}>
-				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
-			</a>
-		</li>
-	{/each}
-
-	<footer class="w-full border border-x-0 border-gray">
-		<ProfileNavButton />
-	</footer>
-</ul>
-
-<style>
-	@tailwind base;
-	@tailwind components;
-	@tailwind utilities;
-	ul {
-		height: 100vh;
-		width: 100%;
-	}
-
-	@layer components {
-		.nav_button {
-			transition: all 0.3s;
-			color: theme('colors.white');
-			/* padding: theme('spacing.4') theme('spacing.2'); */
-		}
-		.nav_button button {
-			text-align: left;
-		}
-		.nav_button:hover {
-			color: theme('colors.black');
-			background-color: theme('colors.primary');
-		}
-		.nav_button.active {
-			color: theme('colors.black');
-			background-color: theme('colors.primary');
-		}
-	}
-
-	.titlebar-button {
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-		width: 12px;
-		height: 12px;
-		border-radius: 8px;
-		opacity: 0.9;
-	}
-	.titlebar-button img {
-		transition: opacity 0.3s;
-		opacity: 0;
-	}
-	.titlebar-button:hover img {
-		opacity: 1;
-	}
-	#titlebar-close {
-		background-color: orangered;
-	}
-	#titlebar-minimize {
-		background-color: orange;
-	}
-	#titlebar-maximize {
-		background-color: green;
-	}
-
-	footer {
-		position: absolute;
-		bottom: 20px;
-	}
-</style>
diff --git a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
index 2444caa..67458bd 100644
--- a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
+++ b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
@@ -123,8 +123,8 @@
 <style>
 	section {
 		position: fixed;
-		top: 0;
-		left: 240px;
+		top: 80px;
+		left: 0px;
 		right: 0;
 		background: rgba(0, 0, 0, 0.7);
 		transition: opacity 0.3s ease-in-out;
diff --git a/modules/gui/src/components/NavBar/ProfileNavButton.svelte b/modules/gui/src/components/TopBar/ProfileNavButton.svelte
similarity index 100%
rename from modules/gui/src/components/NavBar/ProfileNavButton.svelte
rename to modules/gui/src/components/TopBar/ProfileNavButton.svelte
diff --git a/modules/gui/src/components/TopBar/TopBar.svelte b/modules/gui/src/components/TopBar/TopBar.svelte
new file mode 100644
index 0000000..be28f9c
--- /dev/null
+++ b/modules/gui/src/components/TopBar/TopBar.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { beforeUpdate } from 'svelte';
+	import { searchStore } from '$libs/stores';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import { navStore } from '$libs/stores';
+
+	import ProfileNavButton from './ProfileNavButton.svelte';
+
+	let backLink = navStore.backLink;
+
+	const onSearch = (term: string) => {
+		searchStore.search(term);
+	};
+
+	let currentPath: string;
+	beforeUpdate(async () => {
+		currentPath = $page.url.pathname;
+	});
+</script>
+
+<header class="flex w-full border border-l-0 border-r-0 border-gray">
+	<a href="/">
+		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
+	</a>
+	<ul id="PrevNextButtons" class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
+		<a href={$backLink} class={currentPath !== '/' ? 'active' : ''}>&#8592</a>
+		<a href={$backLink} class={currentPath === '/' ? 'active' : ''}>&#8594</a>
+	</ul>
+	<SearchInput
+		class="flex-grow border border-none py-4"
+		size="small"
+		placeholder="search the tea store"
+		{onSearch}
+	/>
+	<ul class="flex gap-4 pr-4 pt-2 align-middle text-gray">
+		<button class="icon-filter hover:text-white" />
+		<button class="icon-share hover:text-white" />
+		<button class="icon-star-empty hover:text-white" />
+	</ul>
+	<ProfileNavButton />
+</header>
+<menu
+	class="flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 border-gray pl-4 align-middle leading-10 text-gray"
+>
+	<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>install teaCli</a>
+	<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>documentation</a
+	>
+	<a href="/packages" class={currentPath === '/packages' ? 'active' : ''}>packages</a>
+	<a href="https://github.com/teaxyz" target="_blank" rel="noreferrer">
+		<i class="icon-star-empty" /> Github (5.2k)
+	</a>
+</menu>
+
+<style>
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+
+	menu > a:hover {
+		color: white;
+	}
+	menu a.active {
+		color: white;
+	}
+
+	#PrevNextButtons a.active {
+		color: white;
+	}
+</style>
diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts
index af5097f..e29fa29 100644
--- a/modules/gui/src/libs/stores.ts
+++ b/modules/gui/src/libs/stores.ts
@@ -6,6 +6,7 @@ import type { GUIPackage } from '$libs/types';
 
 import { getPackages, getFeaturedPackages, getPackageReviews, getAllPosts } from '@api';
 import initAuthStore from './stores/auth';
+import initNavStore from './stores/nav';
 
 export const backLink = writable<string>('/');
 
@@ -172,3 +173,5 @@ function initSearchStore() {
 export const searchStore = initSearchStore();
 
 export const authStore = initAuthStore();
+
+export const navStore = initNavStore();
diff --git a/modules/gui/src/libs/stores/nav.ts b/modules/gui/src/libs/stores/nav.ts
new file mode 100644
index 0000000..b8d3729
--- /dev/null
+++ b/modules/gui/src/libs/stores/nav.ts
@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export default function initNavStore() {
+	const backLink = writable<string>('/');
+
+	return {
+		backLink,
+		set: (newlink: string) => backLink.set(newlink)
+	};
+}
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index fa7a693..f349f5b 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -2,32 +2,19 @@
 <script lang="ts">
 	import '$appcss';
 	import { navigating } from '$app/stores';
-	import NavBar from '$components/NavBar/NavBar.svelte';
+	import TopBar from '$components/TopBar/TopBar.svelte';
 	import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
 
-	import { backLink as backLinkStore } from '$libs/stores';
 	import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte';
 
 	let view: HTMLElement;
 
-	let backLink = '';
-	backLinkStore.subscribe((v) => {
-		backLink = v;
-	});
-
 	$: if ($navigating) view.scrollTop = 0;
 </script>
 
-<div id="main-layout">
-	<nav class="border border-t-0 border-l-0 border-b-0 border-gray">
-		<NavBar />
-	</nav>
+<div id="main-layout" class="w-full">
+	<TopBar />
 	<section class="pt-24" bind:this={view}>
-		{#if backLink}
-			<header class="border-b border-gray px-16 text-3xl text-gray hover:text-primary">
-				<a href={backLink}>&#8592</a>
-			</header>
-		{/if}
 		<figure />
 
 		<div class="content">
@@ -43,16 +30,11 @@
 
 <style>
 	#main-layout {
-		width: 100vh;
 		height: 100vh;
 	}
-	nav {
-		position: fixed;
-		width: 240px;
-	}
 	section {
 		position: fixed;
-		left: 240px;
+		left: 0px;
 		right: 0px;
 		height: 100vh;
 		overflow-y: scroll;
@@ -62,7 +44,7 @@
 		z-index: 0;
 		position: fixed;
 		top: 220px;
-		left: 240px;
+		left: 0px;
 		right: 0px;
 		bottom: 0px;
 		background-image: url('/images/gui-background-grid.svg');
diff --git a/modules/gui/src/routes/cli/+page.svelte b/modules/gui/src/routes/cli/+page.svelte
index a4ffe83..b0550a4 100644
--- a/modules/gui/src/routes/cli/+page.svelte
+++ b/modules/gui/src/routes/cli/+page.svelte
@@ -3,8 +3,8 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import CliBanner from '$components/CliBanner/CliBanner.svelte';
 	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
-	import { backLink } from '$libs/stores';
-	backLink.set('/');
+	import { navStore } from '$libs/stores';
+	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/documentation/+page.svelte b/modules/gui/src/routes/documentation/+page.svelte
index 300ac20..857b921 100644
--- a/modules/gui/src/routes/documentation/+page.svelte
+++ b/modules/gui/src/routes/documentation/+page.svelte
@@ -3,8 +3,8 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
 	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
-	import { backLink } from '$libs/stores';
-	backLink.set('/');
+	import { navStore } from '$libs/stores';
+	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/others/+page.svelte b/modules/gui/src/routes/others/+page.svelte
deleted file mode 100644
index 79e2d6a..0000000
--- a/modules/gui/src/routes/others/+page.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { invoke } from '@tauri-apps/api/tauri';
-	import Button from '@tea/ui/Button/Button.svelte';
-	let pkg = '';
-	async function installPackage() {
-		await invoke('install_package', { package: pkg });
-	}
-</script>
-
-<h1>Others</h1>
-<input bind:value={pkg} />
-<Button on:click={installPackage} label="install package" />
-<a href="/">Back</a>
diff --git a/modules/gui/src/routes/packages/+page.svelte b/modules/gui/src/routes/packages/+page.svelte
index d4ca121..dae8d10 100644
--- a/modules/gui/src/routes/packages/+page.svelte
+++ b/modules/gui/src/routes/packages/+page.svelte
@@ -2,8 +2,8 @@
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
-	import { backLink } from '$libs/stores';
-	backLink.set('/');
+	import { navStore } from '$libs/stores';
+	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index ee5eacb..5ed7afd 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import { backLink, packagesReviewStore } from '$libs/stores';
+	import { navStore, packagesReviewStore } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
 	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	import type { Review } from '@tea/ui/types';
-	backLink.set('/packages');
+
+	navStore.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;
diff --git a/modules/gui/src/routes/profile/+page.svelte b/modules/gui/src/routes/profile/+page.svelte
index 149a3ec..a3db7d2 100644
--- a/modules/gui/src/routes/profile/+page.svelte
+++ b/modules/gui/src/routes/profile/+page.svelte
@@ -5,8 +5,8 @@
 	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('/');
+	import { navStore } from '$libs/stores';
+	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/ui/src/SearchInput/SearchInput.svelte b/modules/ui/src/SearchInput/SearchInput.svelte
index c859831..b8624c8 100644
--- a/modules/ui/src/SearchInput/SearchInput.svelte
+++ b/modules/ui/src/SearchInput/SearchInput.svelte
@@ -5,6 +5,7 @@
 	export { clazz as class };
 	export let size: 'small' | 'medium' | 'large' = 'small';
 	export let onSearch: (text: string) => void;
+	export let placeholder = 'search_';
 
 	let timer: NodeJS.Timeout;
 	const onChange = (e: KeyboardEvent) => {
@@ -20,7 +21,7 @@
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
-	<input type="search" class="pb-2" placeholder="search_" on:keyup={onChange} />
+	<input type="search" class="flex-grow pb-2" {placeholder} on:keyup={onChange} />
 </section>
 
 <!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
diff --git a/modules/ui/src/icons/fonts/tea-icons.eot b/modules/ui/src/icons/fonts/tea-icons.eot
index c0e6c9a..09dd738 100644
Binary files a/modules/ui/src/icons/fonts/tea-icons.eot and b/modules/ui/src/icons/fonts/tea-icons.eot differ
diff --git a/modules/ui/src/icons/fonts/tea-icons.svg b/modules/ui/src/icons/fonts/tea-icons.svg
index ed7a7a8..8dc05ed 100644
--- a/modules/ui/src/icons/fonts/tea-icons.svg
+++ b/modules/ui/src/icons/fonts/tea-icons.svg
@@ -16,7 +16,6 @@
 <glyph glyph-name="right-arrow" unicode="&#103;" d="M297 128c-2 3-4 7-4 11 0 4 2 9 5 12 4 2 7 5 11 7l146 84-438 0c-7 0-13 5-13 13 0 7 6 13 13 13l13 0 0 0 424 0-145 84c-4 1-7 4-11 6-3 4-5 8-5 13 0 4 2 8 4 11 2 3 6 4 9 4 3 0 5-1 7-2l176-101c5-3 8-6 12-10 4-5 6-11 6-17l0-2c0-7-2-13-6-18-3-4-7-7-12-10l-176-101c-2-1-4-2-7-2-3 0-7 2-9 5z"/>
 <glyph glyph-name="telegram" unicode="&#104;" d="M509 459c-2 6-4 7-7 8-7 2-14 1-21-1 0 0-446-161-472-178-3-2-6-5-8-9-2-7 2-15 9-18l115-38c2 0 4 0 6 0 26 17 263 167 277 172 2 0 3 0 3-2-5-19-211-202-211-202-1-1-1-2-2-2l-10-114c0 0-5-35 30 0 25 24 49 45 60 55 41-27 83-58 101-73 7-6 15-9 24-9 11 1 20 9 22 19 0 0 81 328 84 372 0 4 1 7 1 10 0 3 0 7-1 10z"/>
 <glyph glyph-name="twitter" unicode="&#105;" d="M161 51c194 0 299 159 299 297 0 5 0 9 0 14 20 14 38 33 52 54-19-9-40-14-61-16 23 12 39 33 47 57-21-12-43-20-67-25-20 21-47 33-76 33-28 0-55-11-74-31-20-19-31-46-31-73 0-9 1-17 3-24-85 4-164 43-217 109-28-48-14-109 33-140-17 1-33 5-48 13l0-1c0-50 36-93 85-103-9-2-19-3-28-3-7 0-13 0-20 2 14-43 53-72 98-73-37-29-83-44-131-44-8 0-17 0-25 1 48-31 104-47 161-47z"/>
-<glyph glyph-name="tea-logo-iconasset-1" unicode="&#106;" d="M475 187c6-3 11-8 15-14 12-20 5-47-15-59l-75-52c-3-3-8-4-12-4-6 0-12 3-16 8-7 10-5 23 4 30l76 53 2 1 0 1-2 1-76 53c0 1-1 1-2 2-9 7-10 20-3 29 7 9 20 11 29 4l75-53 0 0z m-194 7c8 6 10 17 4 25 0 0 0 0 0 0-12 17-48 40-97 12-6-3-12-7-17-12-16-13-39-23-62 2-6 7-18 8-25 1-7-7-8-18-1-25 14-17 34-27 56-27 20 1 40 9 55 22 3 3 7 6 12 9 31 18 47 1 50-2 6-8 17-11 25-5 0 0 0 0 0 0z m35 70c-11-3-17-15-14-26 0-1 34-118-35-198-8-9-7-22 2-30 8-7 22-6 29 3 85 97 46 231 45 237-4 11-15 18-27 14l0 0z m-249-26c3 11-4 23-15 26-11 3-22-3-25-14-2-6-41-140 44-237 4-5 10-8 16-8 5 0 10 2 13 5 9 8 10 21 3 30l0 0c-70 80-37 197-36 198z m157-196l-81 0c-11 0-21-9-21-21 0-11 10-21 21-21l81 0c11 0 21 10 21 21 0 12-10 21-21 21l0 0z m-38 236c2-2 5-3 8-3 5 0 10 2 13 6 51 72 2 146 0 149-5 7-14 9-21 4-7-5-9-14-4-21 1-2 39-60 0-115-5-7-3-16 4-20z m-31 72c3 0 6 1 9 2 6 5 8 14 4 21-2 3-40 60 0 115 5 7 3 16-4 21-6 5-16 3-21-3-51-72-2-146 0-149 3-4 7-7 12-7z"/>
 <glyph glyph-name="tea-circle" unicode="&#107;" d="M512 256c0-141-115-256-256-256-141 0-256 115-256 256 0 141 115 256 256 256 141 0 256-115 256-256z"/>
 <glyph glyph-name="clipboard" unicode="&#108;" d="M403 464l-67 0-20 47-120 0-20-47-67 0c-15 0-27-12-27-27l0-409c0-15 12-27 27-27l294 0c15 0 27 12 27 27l0 409c0 15-12 27-27 27z m-189 20l84 0 8-20-100 0 8 20z m188-456l-292 0 0 408 292 0 0-408z m-254 362l216 0c4 0 7 4 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l216 0c4 0 7 3 7 7 0 3-3 6-7 6l-216 0c-4 0-7-3-7-6 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-46l216 0c4 0 7 3 7 7 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-4 3-7 7-7z m0-45l216 0c4 0 7 3 7 6 0 4-3 7-7 7l-216 0c-4 0-7-3-7-7 0-3 3-6 7-6z m0-46l124 0c4 0 7 3 7 7 0 3-3 6-7 6l-124 0c-4 0-7-3-7-6 0-4 3-7 7-7z"/>
 <glyph glyph-name="tea-checkmark" unicode="&#109;" d="M481 512l-450 0c-17 0-31-14-31-31l0-450c0-17 14-31 31-31l450 0c17 0 31 14 31 31l0 450c0 17-14 31-31 31z m-436-467l0 422 406 0-207-311-116 70c-11 7-25 3-31-7-7-11-3-25 7-31l154-93 209 314 0-364z"/>
@@ -24,8 +23,12 @@
 <glyph glyph-name="pattern-random-15" unicode="&#111;" d="M59 512l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m-414-138l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z m138 0l-20 0 0-39-39 0 0-20 39 0 0-39 20 0 0 39 39 0 0 20-39 0z"/>
 <glyph glyph-name="pattern-random-19" unicode="&#112;" d="M439 512l-201 0 0-91-37 0 0 91-201 0 0-201 91 0 0-110-91 0 0-201 512 0 0 421-73 0z m-183-18l165 0 0-73-165 0z m0-92l165 0 0-73-165 0z m-238-73l0 165 165 0 0-73-92 0 0-92z m165 73l0-73-73 0 0 73z m-165-384l0 165 73 0 0-165z m92 0l0 165 73 0 0-165z m384 384l0-384-293 0 0 183-91 0 0 110 91 0 0 91 37 0 0-91 201 0 0 91z m-256-347l201 0 0 201-201 0z m18 183l165 0 0-165-165 0z"/>
 <glyph glyph-name="click-copy-icon" unicode="&#113;" d="M380 440l0 71-325 0 0-439 77 0 0-71 325 0 0 439z m-304-347l0 397 284 0 0-50-228 0 0-347z m360-71l-284 0 0 397 284 0z"/>
-<glyph glyph-name="search-icon" unicode="&#114;" d="M422 340c0 92-74 166-166 166-92 0-166-74-166-166 0-85 64-156 147-165l0-169 38 0 0 169c83 9 147 80 147 165z m-166-128c-71 0-128 57-128 128 0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128z"/>
 <glyph glyph-name="star-full" unicode="&#115;" d="M494 327c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-4-1-8-3-10-2-3-4-5-8-5-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
 <glyph glyph-name="star-half" unicode="&#116;" d="M357 239l74 71-102 15-19 3-9 17-45 92 0-275 17-9 91-48-17 101-4 19z m129 74l-103-101 24-143c1-6 1-11-2-14-2-4-5-6-9-6-4 0-7 2-12 4l-128 67-128-67c-5-2-8-4-12-4-4 0-7 2-9 6-3 3-3 8-2 14l24 143-104 101c-6 7-8 12-6 17 2 6 7 9 15 10l144 21 64 130c4 8 8 12 14 12 5 0 10-4 14-12l64-130 144-21c8-1 13-4 15-10 2-5 0-10-7-17z"/>
 <glyph glyph-name="star-empty" unicode="&#117;" d="M343 225l88 85-121 18-54 109-54-109-121-18 88-85-21-120 108 57 108-57z m151 102c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-10-3-15-11-15-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
+<glyph glyph-name="tea-logo-iconasset-1" unicode="&#106;" d="M475 187c6-3 11-8 15-14 12-20 5-47-15-59l-75-52c-3-3-8-4-12-4-6 0-12 3-16 8-7 10-5 23 4 30l76 53 2 1 0 1-2 1-76 53c0 1-1 1-2 2-9 7-10 20-3 29 7 9 20 11 29 4l75-53 0 0z m-194 7c8 6 10 17 4 25 0 0 0 0 0 0-12 17-48 40-97 12-6-3-12-7-17-12-16-13-39-23-62 2-6 7-18 8-25 1-7-7-8-18-1-25 14-17 34-27 56-27 20 1 40 9 55 22 3 3 7 6 12 9 31 18 47 1 50-2 6-8 17-11 25-5 0 0 0 0 0 0z m35 70c-11-3-17-15-14-26 0-1 34-118-35-198-8-9-7-22 2-30 8-7 22-6 29 3 85 97 46 231 45 237-4 11-15 18-27 14l0 0z m-249-26c3 11-4 23-15 26-11 3-22-3-25-14-2-6-41-140 44-237 4-5 10-8 16-8 5 0 10 2 13 5 9 8 10 21 3 30l0 0c-70 80-37 197-36 198z m157-196l-81 0c-11 0-21-9-21-21 0-11 10-21 21-21l81 0c11 0 21 10 21 21 0 12-10 21-21 21l0 0z m-38 236c2-2 5-3 8-3 5 0 10 2 13 6 51 72 2 146 0 149-5 7-14 9-21 4-7-5-9-14-4-21 1-2 39-60 0-115-5-7-3-16 4-20z m-31 72c3 0 6 1 9 2 6 5 8 14 4 21-2 3-40 60 0 115 5 7 3 16-4 21-6 5-16 3-21-3-51-72-2-146 0-149 3-4 7-7 12-7z"/>
+<glyph glyph-name="search-icon" unicode="&#114;" d="M291 459c-91 0-164-74-164-164 0-31 8-60 23-85l-79-79 0 0c-8-8-14-20-14-33 0-25 21-45 46-45 12 0 24 5 32 14l0-1 82 82c22-11 47-17 74-17 90 0 164 73 164 164 0 90-74 164-164 164z m1-263c-57 0-103 45-103 102 0 56 46 102 103 102 56 0 102-46 102-102 0-57-46-102-102-102z"/>
+<glyph glyph-name="filter" unicode="&#118;" d="M461 398c0 18-14 32-32 33l0 0-343 0 0 0c0 0-1 0-2 0-18 0-33-15-33-33 0-11 5-20 13-26l154-154 0-96 0 0 0 0c0-7 4-12 9-15l0 0 40-23c0 0 1 0 1-1l0 0 0 0c3-1 6-2 9-2 10 0 17 8 17 17 0 1 0 1 0 2l0 0 0 118 156 155 0 0c7 6 11 15 11 25z m-296-33l0 0 0 0z"/>
+<glyph glyph-name="upload" unicode="&#119;" d="M440 258l-93 0c-12 0-22-7-25-17-10-28-36-46-66-46-30 0-56 18-66 46-3 10-13 17-25 17l-93 0c-14 0-26-11-26-25l0-144c0-14 12-25 26-25l368 0c14 0 26 11 26 25l0 144c0 14-12 25-26 25z m-257 79l34 0 0-88c0-4 4-7 7-7l64 0c3 0 7 3 7 7l0 88 34 0c2 0 5 1 6 3 1 2 1 5-1 7l-73 98c-1 2-3 3-5 3l0 0c-3 0-5-1-6-3l-72-98c-2-2-2-5-1-7 1-2 4-3 6-3z"/>
+<glyph glyph-name="share" unicode="&#120;" d="M421 229l0-74c0-22-8-42-25-58-16-16-35-24-58-24l-237 0c-23 0-42 8-59 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 17 16 36 24 59 24l72 0c3 0 5 0 7-2 2-2 3-4 3-7 0-5-3-8-8-9-15-5-27-11-38-17-2-1-3-1-4-1l-32 0c-13 0-24-5-33-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 33-13l237 0c13 0 24 4 33 13 9 9 13 20 13 32l0 62c0 3 2 6 5 8 5 2 11 6 16 10 3 3 6 4 10 3 4-2 6-5 6-9z m67 142l-109-110c-4-3-8-5-13-5-3 0-5 0-7 1-8 4-12 9-12 17l0 55-45 0c-62 0-104-12-125-37-23-26-30-71-22-135 1-5-1-8-5-10-2-1-3-1-4-1-3 0-5 2-7 4-2 3-4 6-6 9-2 3-6 10-11 19-6 10-11 20-15 29-4 9-7 20-11 32-3 13-5 25-5 35 0 10 1 18 1 26 1 8 2 17 4 26 2 9 5 18 8 25 4 8 8 16 14 23 5 8 12 15 19 22 8 6 17 12 27 17 11 6 23 10 36 14 13 4 28 7 46 9 17 2 36 3 56 3l45 0 0 55c0 8 4 13 12 17 2 1 4 1 7 1 5 0 9-2 13-5l109-110c4-4 6-8 6-13 0-5-2-9-6-13z"/>
 </font></defs></svg>
diff --git a/modules/ui/src/icons/fonts/tea-icons.ttf b/modules/ui/src/icons/fonts/tea-icons.ttf
index bfc9423..15034cb 100644
Binary files a/modules/ui/src/icons/fonts/tea-icons.ttf and b/modules/ui/src/icons/fonts/tea-icons.ttf differ
diff --git a/modules/ui/src/icons/fonts/tea-icons.woff b/modules/ui/src/icons/fonts/tea-icons.woff
index bc848f3..9f560e4 100644
Binary files a/modules/ui/src/icons/fonts/tea-icons.woff and b/modules/ui/src/icons/fonts/tea-icons.woff differ
diff --git a/modules/ui/src/icons/icons.css b/modules/ui/src/icons/icons.css
index 78036fd..f0d7363 100644
--- a/modules/ui/src/icons/icons.css
+++ b/modules/ui/src/icons/icons.css
@@ -64,9 +64,6 @@
 .icon-twitter:before {
 	content: '\69';
 }
-.icon-tea-logo-iconasset-1:before {
-	content: '\6a';
-}
 .icon-tea-circle:before {
 	content: '\6b';
 }
@@ -88,9 +85,6 @@
 .icon-click-copy-icon:before {
 	content: '\71';
 }
-.icon-search-icon:before {
-	content: '\72';
-}
 .icon-star-full:before {
 	content: '\73';
 }
@@ -100,3 +94,18 @@
 .icon-star-empty:before {
 	content: '\75';
 }
+.icon-tea-logo-iconasset-1:before {
+	content: '\6a';
+}
+.icon-search-icon:before {
+	content: '\72';
+}
+.icon-filter:before {
+	content: '\76';
+}
+.icon-upload:before {
+	content: '\77';
+}
+.icon-share:before {
+	content: '\78';
+}