diff --git a/src/lib/components/TextInput.svelte b/src/lib/components/TextInput.svelte
index a89b626..5f780f9 100644
--- a/src/lib/components/TextInput.svelte
+++ b/src/lib/components/TextInput.svelte
@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="px-4 py-2 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
 />
 
 <style lang="postcss">
diff --git a/src/lib/icons/magnifying-glass.svg b/src/lib/icons/magnifying-glass.svg
new file mode 100644
index 0000000..19b91c5
--- /dev/null
+++ b/src/lib/icons/magnifying-glass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/views/SearchInputView.svelte b/src/lib/views/SearchInputView.svelte
new file mode 100644
index 0000000..ec599d5
--- /dev/null
+++ b/src/lib/views/SearchInputView.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { TextInput } from '$lib/components';
+	import { t } from '$lib/language/translate';
+	import { searchFilter } from '$lib/stores/catalog';
+	import XMarkIcon from '$lib/icons/x-mark.svg';
+	import SearchIcon from '$lib/icons/magnifying-glass.svg';
+
+	const clearSearch = () => {
+		$searchFilter = '';
+	};
+</script>
+
+<div class="relative">
+	<img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform" />
+	<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+	{#if $searchFilter.length > 0}
+		<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+			<img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform" />
+		</button>
+	{/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5b357a0..b85b09e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,15 +7,16 @@
 	import ThingsView from '$lib/views/ThingsView.svelte';
 	import WishListButtonView from '$lib/views/WishListButtonView.svelte';
 	import CategoryChooserView from '$lib/views/CategoryChooserView.svelte';
+	import SearchInputView from '$lib/views/SearchInputView.svelte';
 
 	export let data;
 
 	$things = data.things;
-  $categories = data.categories;
+	$categories = data.categories;
 
 	onMount(() => {
 		const urlParams = new URLSearchParams(window.location.search);
-    $wishListFilter = urlParams.get('showWishList') === 'true';
+		$wishListFilter = urlParams.get('showWishList') === 'true';
 	});
 </script>
 
@@ -29,7 +30,7 @@
 				<CategoryChooserView />
 				<WishListButtonView />
 			</div>
-			<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+				<SearchInputView />
 		</div>
 		<div class="mb-8">
 			{#if $filteredThings.length > 0}