diff --git a/src/features/CategoryFilter/index.ts b/src/features/CategoryFilter/index.ts
index e5f9301..e3fe061 100644
--- a/src/features/CategoryFilter/index.ts
+++ b/src/features/CategoryFilter/index.ts
@@ -1,9 +1,7 @@
 import { FONT_CATEGORIES } from './model/state';
 import { categoryFilterStore } from './store/categoryFilterStore';
-import CategoryFilter from './ui/CategoryFilter.svelte';
 
 export {
-    CategoryFilter,
     categoryFilterStore,
     FONT_CATEGORIES,
 };
diff --git a/src/features/CategoryFilter/model/state.ts b/src/features/CategoryFilter/model/state.ts
index 9935247..f93d8b5 100644
--- a/src/features/CategoryFilter/model/state.ts
+++ b/src/features/CategoryFilter/model/state.ts
@@ -1,11 +1,14 @@
-import type { FilterModel } from '$shared/store/createFilterStore';
+import type {
+    Category,
+    FilterModel,
+} from '$shared/store/createFilterStore';
 
 /**
  * Model of state for CategoryFilter
  */
 export type CategoryFilterModel = FilterModel;
 
-export const FONT_CATEGORIES = [
+export const FONT_CATEGORIES: Category[] = [
     {
         id: 'serif',
         name: 'Serif',
diff --git a/src/features/CategoryFilter/store/categoryFilterStore.ts b/src/features/CategoryFilter/store/categoryFilterStore.ts
index 287ce6e..cb87a36 100644
--- a/src/features/CategoryFilter/store/categoryFilterStore.ts
+++ b/src/features/CategoryFilter/store/categoryFilterStore.ts
@@ -1,6 +1,8 @@
-import { FONT_CATEGORIES } from '$entities/Font/model/font';
 import { createFilterStore } from '$shared/store/createFilterStore';
-import type { CategoryFilterModel } from '../model/state';
+import {
+    type CategoryFilterModel,
+    FONT_CATEGORIES,
+} from '../model/state';
 
 /**
  * Initial state for CategoryFilter
diff --git a/src/features/CategoryFilter/ui/CategoryFilter.svelte b/src/features/CategoryFilter/ui/CategoryFilter.svelte
deleted file mode 100644
index 066caae..0000000
--- a/src/features/CategoryFilter/ui/CategoryFilter.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
-import { categoryFilterStore } from '../store/categoryFilterStore';
-
-const { categories } = $derived($categoryFilterStore);
-
-function didCategoryToggle(categoryId: string) {
-    if (categories?.find(category => category.id === categoryId)?.selected) {
-        categoryFilterStore.deselectCategory(categoryId);
-    } else {
-        categoryFilterStore.selectCategory(categoryId);
-    }
-}
-</script>
-
-<CheckboxFilter
-    filterName="Font category"
-    categories={categories}
-    onCategoryToggle={didCategoryToggle}
-/>
diff --git a/src/shared/store/createFilterStore.ts b/src/shared/store/createFilterStore.ts
index a59eaac..ed244be 100644
--- a/src/shared/store/createFilterStore.ts
+++ b/src/shared/store/createFilterStore.ts
@@ -77,6 +77,12 @@ export interface FilterStore<T extends FilterModel> extends Writable<T> {
      * @param category - Category to deselect
      */
     deselectCategory: (categoryId: string) => void;
+    /**
+     * Toggle a category.
+     *
+     * @param categoryId - Category ID
+     */
+    toggleCategory: (categoryId: string) => void;
     /**
      * Select all categories.
      */
@@ -185,6 +191,19 @@ export function createFilterStore<T extends FilterModel>(
                 ),
             }));
         },
+        /**
+         * Toggle a category.
+         *
+         * @param categoryId - Category ID
+         */
+        toggleCategory: (categoryId: string) => {
+            update(state => ({
+                ...state,
+                categories: state.categories.map(c =>
+                    c.id === categoryId ? { ...c, selected: !c.selected } : c
+                ),
+            }));
+        },
         /**
          * Select all categories
          */
diff --git a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
index 99cfb6c..01215a4 100644
--- a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
+++ b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
@@ -110,7 +110,7 @@ const hasSelection = $derived(selectedCount > 0);
             class="border-t"
         >
             <div class="px-4 py-3">
-                <div class="flex flex-col gap-2.5">
+                <div class="flex flex-col gap-1.5">
                     <!-- Each item: checkbox + label with interactive hover/focus states -->
                     <!-- Keyed by category.id for efficient DOM updates -->
                     {#each categories as category (category.id)}
diff --git a/src/widgets/AppSidebar/ui/AppSidebar.svelte b/src/widgets/AppSidebar/ui/AppSidebar.svelte
index 46a78be..20b3874 100644
--- a/src/widgets/AppSidebar/ui/AppSidebar.svelte
+++ b/src/widgets/AppSidebar/ui/AppSidebar.svelte
@@ -1,10 +1,31 @@
 <script lang="ts">
-import { CategoryFilter } from '$features/CategoryFilter';
+import { categoryFilterStore } from '$features/CategoryFilter';
+import { providersFilterStore } from '$features/ProvidersFilter';
+import { subsetsFilterStore } from '$features/SubsetsFilter';
 import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
+import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
+
+const { categories: providers } = $derived($providersFilterStore);
+const { categories: subsets } = $derived($subsetsFilterStore);
+const { categories } = $derived($categoryFilterStore);
 </script>
 
 <Sidebar.Root>
     <Sidebar.Content>
-        <CategoryFilter />
+        <CheckboxFilter
+            filterName="Font provider"
+            categories={providers}
+            onCategoryToggle={providersFilterStore.toggleCategory}
+        />
+        <CheckboxFilter
+            filterName="Font subset"
+            categories={subsets}
+            onCategoryToggle={subsetsFilterStore.toggleCategory}
+        />
+        <CheckboxFilter
+            filterName="Font category"
+            categories={categories}
+            onCategoryToggle={categoryFilterStore.toggleCategory}
+        />
     </Sidebar.Content>
 </Sidebar.Root>