diff --git a/src/widgets/AppSidebar/ui/AppSidebar.svelte b/src/widgets/AppSidebar/ui/AppSidebar.svelte
index 20b3874..3762beb 100644
--- a/src/widgets/AppSidebar/ui/AppSidebar.svelte
+++ b/src/widgets/AppSidebar/ui/AppSidebar.svelte
@@ -1,31 +1,12 @@
 <script lang="ts">
-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);
+import Controls from './Controls.svelte';
+import Filters from './Filters.svelte';
 </script>
 
 <Sidebar.Root>
-    <Sidebar.Content>
-        <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 class="p-2">
+        <Filters />
+        <Controls />
     </Sidebar.Content>
 </Sidebar.Root>
diff --git a/src/widgets/AppSidebar/ui/Controls.svelte b/src/widgets/AppSidebar/ui/Controls.svelte
new file mode 100644
index 0000000..3fa3d6d
--- /dev/null
+++ b/src/widgets/AppSidebar/ui/Controls.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+import { Button } from '$shared/shadcn/ui/button';
+</script>
+
+<div class="flex flex-row gap-2">
+    <Button variant="outline" class="flex-1 cursor-pointer">
+        Reset
+    </Button>
+    <Button class="flex-1 cursor-pointer">
+        Apply
+    </Button>
+</div>
diff --git a/src/widgets/AppSidebar/ui/Filters.svelte b/src/widgets/AppSidebar/ui/Filters.svelte
new file mode 100644
index 0000000..30001b1
--- /dev/null
+++ b/src/widgets/AppSidebar/ui/Filters.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+import { categoryFilterStore } from '$features/CategoryFilter';
+import { providersFilterStore } from '$features/ProvidersFilter';
+import { subsetsFilterStore } from '$features/SubsetsFilter';
+import CheckboxFilter from '$shared/ui/CheckboxFilter/CheckboxFilter.svelte';
+
+const { categories: providers } = $derived($providersFilterStore);
+const { categories: subsets } = $derived($subsetsFilterStore);
+const { categories } = $derived($categoryFilterStore);
+</script>
+
+<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}
+/>