diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index 3c565e4..f9efca8 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -20,7 +20,7 @@ let {
 }: Props = $props();
 </script>
 
-<Input bind:value variant="underline" {...rest}>
+<Input bind:value variant="default" {...rest}>
     {#snippet rightIcon(size)}
         <SearchIcon size={inputIconSize[size]} />
     {/snippet}
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
new file mode 100644
index 0000000..0f0eba4
--- /dev/null
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import { filterManager } from '$features/GetFonts';
+import { SearchBar } from '$shared/ui';
+</script>
+
+<div class="p-6 border-b border-black/5">
+    <SearchBar
+        id="font-search"
+        class="w-full"
+        placeholder="Typeface Search"
+        bind:value={filterManager.queryValue}
+        fullWidth
+    />
+</div>