diff --git a/src/features/DisplayFont/index.ts b/src/features/DisplayFont/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/DisplayFont/model/index.ts b/src/features/DisplayFont/model/index.ts
new file mode 100644
index 0000000..5099f73
--- /dev/null
+++ b/src/features/DisplayFont/model/index.ts
@@ -0,0 +1 @@
+export { displayedFontsStore } from './store';
diff --git a/src/features/DisplayFont/model/store/displayedFontsStore.svelte.ts b/src/features/DisplayFont/model/store/displayedFontsStore.svelte.ts
new file mode 100644
index 0000000..6877ae8
--- /dev/null
+++ b/src/features/DisplayFont/model/store/displayedFontsStore.svelte.ts
@@ -0,0 +1,23 @@
+import { selectedFontsStore } from '$entities/Font';
+
+export class DisplayedFontsStore {
+    #sampleText = $state('The quick brown fox jumps over the lazy dog');
+
+    #displayedFonts = $derived.by(() => {
+        return selectedFontsStore.all;
+    });
+
+    get fonts() {
+        return this.#displayedFonts;
+    }
+
+    get text() {
+        return this.#sampleText;
+    }
+
+    set text(text: string) {
+        this.#sampleText = text;
+    }
+}
+
+export const displayedFontsStore = new DisplayedFontsStore();
diff --git a/src/features/DisplayFont/model/store/index.ts b/src/features/DisplayFont/model/store/index.ts
new file mode 100644
index 0000000..43bb021
--- /dev/null
+++ b/src/features/DisplayFont/model/store/index.ts
@@ -0,0 +1 @@
+export { displayedFontsStore } from './displayedFontsStore.svelte';