diff --git a/src/entities/Font/ui/FontList/FontList.svelte b/src/entities/Font/ui/FontList/FontList.svelte
index ba5a97a..c1f2ac4 100644
--- a/src/entities/Font/ui/FontList/FontList.svelte
+++ b/src/entities/Font/ui/FontList/FontList.svelte
@@ -1,20 +1,46 @@
 <script lang="ts">
+import { fontshareStore } from '$entities/Font/model/store/fontshareStore.svelte';
+import type { UnifiedFont } from '$entities/Font/model/types/normalize';
 import {
     Content as ItemContent,
     Root as ItemRoot,
     Title as ItemTitle,
 } from '$shared/shadcn/ui/item';
 import { VirtualList } from '$shared/ui';
-import { fontCollection } from '../../model';
+/**
+ * FontList
+ *
+ * Displays a virtualized list of fonts with loading, empty, and error states.
+ * Uses unifiedFontStore from context for data, but can accept explicit fonts via props.
+ */
+interface FontListProps {
+    /** Font items to display (defaults to filtered fonts from store) */
+    fonts?: UnifiedFont[];
+    /** Show loading state */
+    loading?: boolean;
+    /** Show empty state when no results */
+    showEmpty?: boolean;
+    /** Custom error message to display */
+    errorMessage?: string;
+}
+
+let {
+    fonts,
+    loading,
+    showEmpty = true,
+    errorMessage,
+}: FontListProps = $props();
+
+// const fontshareStore = getFontshareContext();
 </script>
 
-<VirtualList items={fontCollection.filteredFonts}>
-    {#snippet children({ item, index })}
-        <ItemRoot>
-            <ItemContent>
-                <ItemTitle>{item.name}</ItemTitle>
-                {item.name}
-            </ItemContent>
-        </ItemRoot>
-    {/snippet}
-</VirtualList>
+{#each fontshareStore.fonts as font (font.id)}
+    <ItemRoot>
+        <ItemContent>
+            <ItemTitle>{font.name}</ItemTitle>
+            <span class="text-xs text-muted-foreground">
+                {font.category} • {font.provider}
+            </span>
+        </ItemContent>
+    </ItemRoot>
+{/each}
diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index f65e40b..42439d0 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -31,7 +31,7 @@ let {
 }: Props = $props();
 
 let open = $state(false);
-let triggerRef = $state<HTMLInputElement>();
+let triggerRef = $state<HTMLInputElement>(null!);
 const contentId = useId(id);
 
 function closeAndFocusTrigger() {