diff --git a/src/app/pages/extra-components/extra-components.module.ts b/src/app/pages/extra-components/extra-components.module.ts
index 4267c083..31161874 100644
--- a/src/app/pages/extra-components/extra-components.module.ts
+++ b/src/app/pages/extra-components/extra-components.module.ts
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import {
   NbActionsModule,
   NbAlertModule,
+  NbButtonModule,
   NbCalendarKitModule,
   NbCalendarModule,
   NbCalendarRangeModule,
   NbCardModule,
   NbChatModule,
+  NbIconModule,
   NbProgressBarModule,
   NbSelectModule,
   NbSpinnerModule,
@@ -58,11 +60,13 @@ const COMPONENTS = [
 const MODULES = [
   NbAlertModule,
   NbActionsModule,
+  NbButtonModule,
   NbCalendarModule,
   NbCalendarKitModule,
   NbCalendarRangeModule,
   NbCardModule,
   NbChatModule,
+  NbIconModule,
   NbProgressBarModule,
   NbSelectModule,
   NbSpinnerModule,
diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html
index 11c26e51..233ba30d 100644
--- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html
+++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html
@@ -2,13 +2,13 @@
   <nb-card-header>Progress Bar Interactive</nb-card-header>
   <nb-card-body>
     <div class="container">
-      <nb-actions size="medium">
-        <nb-action icon="nb-arrow-down" (click)="setValue(value - 25)"></nb-action>
-      </nb-actions>
+      <button nbButton appearance="ghost" [disabled]="canDecrease ? null : ''" (click)="decreaseValue()">
+        <nb-icon icon="minus" pack="eva"></nb-icon>
+      </button>
       <nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
-      <nb-actions size="medium">
-        <nb-action icon="nb-arrow-up" (click)="setValue(value + 25)"></nb-action>
-      </nb-actions>
+      <button nbButton appearance="ghost" [disabled]="canIncrease ? null : ''" (click)="increaseValue()">
+        <nb-icon icon="plus" pack="eva"></nb-icon>
+      </button>
     </div>
   </nb-card-body>
 </nb-card>
diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
index 7d6cf13b..c44ec134 100644
--- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
+++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
@@ -8,5 +8,6 @@
 
   nb-progress-bar {
     flex: 1;
+    margin: 0 1rem;
   }
 }
diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts
index 11f6ac77..e82687f9 100644
--- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts
+++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts
@@ -9,10 +9,6 @@ export class InteractiveProgressBarComponent {
 
   value = 25;
 
-  setValue(newValue) {
-    this.value = Math.min(Math.max(newValue, 0), 100);
-  }
-
   get status() {
     if (this.value <= 25) {
       return 'danger';
@@ -24,4 +20,24 @@ export class InteractiveProgressBarComponent {
       return 'success';
     }
   }
+
+  get canIncrease(): boolean {
+    return this.value < 100;
+  }
+
+  get canDecrease(): boolean {
+    return this.value > 0;
+  }
+
+  decreaseValue() {
+    if (this.value > 0) {
+      this.value -= 25;
+    }
+  }
+
+  increaseValue() {
+    if (this.value < 100) {
+      this.value += 25;
+    }
+  }
 }