diff --git a/projects/demo/src/app/pages/badge-demo/badge-demo.component.html b/projects/demo/src/app/pages/badge-demo/badge-demo.component.html
index 82260da28..74662cdc2 100644
--- a/projects/demo/src/app/pages/badge-demo/badge-demo.component.html
+++ b/projects/demo/src/app/pages/badge-demo/badge-demo.component.html
@@ -31,17 +31,19 @@ <h3 demoAnchor>Badge marker block</h3>
     <demo-example-viewer>
       <demo-example-viewer-content>
         <div class="content">
-          <pupa-badge>
-            <pupa-badge-marker [size]="size$ | async">
-              <div class="content__marker"></div>
+          <pupa-badge *ngIf="size$ | async as size">
+            <pupa-badge-marker [size]="size">
+              <pupa-counter *ngIf="size === 'medium'" [count]="99" color="primary"></pupa-counter>
+              <pupa-badge-indicator *ngIf="size === 'small'" [state]="state$ | async"></pupa-badge-indicator>
             </pupa-badge-marker>
             Badge marker
           </pupa-badge>
+
           <pupa-badge>
-            <pupa-badge-marker [size]="size$ | async">
+            Badge indicator
+            <pupa-badge-marker size="small">
               <pupa-badge-indicator [state]="state$ | async"></pupa-badge-indicator>
             </pupa-badge-marker>
-            Badge marker with indicator
           </pupa-badge>
         </div>
       </demo-example-viewer-content>
diff --git a/projects/demo/src/app/pages/badge-demo/badge-demo.component.scss b/projects/demo/src/app/pages/badge-demo/badge-demo.component.scss
index b66b5c3d3..a5e4beec2 100644
--- a/projects/demo/src/app/pages/badge-demo/badge-demo.component.scss
+++ b/projects/demo/src/app/pages/badge-demo/badge-demo.component.scss
@@ -1,22 +1,7 @@
-@use 'demo-variables' as *;
-
-@use 'mixins' as *;
-@use 'functions' as *;
-
 .content {
   display: flex;
   flex-direction: row;
-  margin-top: 4rem;
+  margin-top: 1rem;
   align-items: center;
-  gap: 4rem;
-
-  &__marker {
-    background-color: semantic-color(kind-primary-normal);
-    height: 100%;
-    width: 9rem;
-  }
-
-  &__indicator {
-    display: inline;
-  }
+  gap: 8rem;
 }
diff --git a/projects/demo/src/app/pages/badge-demo/badge-demo.component.ts b/projects/demo/src/app/pages/badge-demo/badge-demo.component.ts
index 4328b25b9..b9d4f5f85 100644
--- a/projects/demo/src/app/pages/badge-demo/badge-demo.component.ts
+++ b/projects/demo/src/app/pages/badge-demo/badge-demo.component.ts
@@ -25,17 +25,25 @@ export class BadgeDemoComponent {
 
   public readonly stateOptions: PropsOption[] = [
     {
-      caption: 'Progress',
-      value: 'progress',
+      caption: 'New',
+      value: 'new',
       isDefault: true,
     },
     {
-      caption: 'Complete',
-      value: 'complete',
+      caption: 'Success',
+      value: 'success',
     },
     {
-      caption: 'Error',
-      value: 'error',
+      caption: 'Danger',
+      value: 'danger',
+    },
+    {
+      caption: 'Warning',
+      value: 'warning',
+    },
+    {
+      caption: 'Loading',
+      value: 'loading',
     },
   ];