diff --git a/src/components/layout/PanelBar.svelte b/src/components/layout/PanelBar.svelte
index 87d1d74..9846fdc 100644
--- a/src/components/layout/PanelBar.svelte
+++ b/src/components/layout/PanelBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Badge from "$components/ui/Badge.svelte";
   import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
   import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
   import Card from "./Card.svelte";
@@ -8,7 +9,7 @@
   <Card title="Фоновое изображение">фоновое изображение</Card>
 
   {#snippet panelTitle()}
-    Панели <span class="badge" id="panelCount">0</span>
+    Панели <Badge text="0" />
   {/snippet}
 
   {#snippet panelControls()}
diff --git a/src/components/ui/Badge.svelte b/src/components/ui/Badge.svelte
new file mode 100644
index 0000000..2f955c4
--- /dev/null
+++ b/src/components/ui/Badge.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    text: string;
+  }
+
+  let { text }: Props = $props();
+</script>
+
+<span class="badge" id="panelCount">{text}</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background: var(--accent-light);
+    color: var(--accent-primary);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+</style>