diff --git a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts
index 8e4395c7..c542b774 100644
--- a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts
+++ b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts
@@ -56,6 +56,12 @@ export class NgxPopoverFormComponent {
       </nb-card-body>
     </nb-card>
   `,
+  styles: [`
+    nb-card {
+      margin: 0;
+      max-width: 20rem;
+    }
+  `],
 })
 export class NgxPopoverCardComponent {
 }
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.html b/src/app/pages/modal-overlays/popovers/popovers.component.html
index a5762fc9..0f9f38d6 100644
--- a/src/app/pages/modal-overlays/popovers/popovers.component.html
+++ b/src/app/pages/modal-overlays/popovers/popovers.component.html
@@ -4,10 +4,10 @@
       <nb-card-header>Popover Position</nb-card-header>
       <nb-card-body>
         <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
-        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="left">Left</button>
-        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="top">Top</button>
-        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="bottom">Bottom</button>
-        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="right">Right</button>
+        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
+        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
+        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
+        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -17,9 +17,9 @@
       <nb-card-header>Simple Popovers</nb-card-header>
       <nb-card-body>
         <p>In a simples form popover can take a string of text to render.</p>
-        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?">on click</button>
-        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hover">on hover</button>
-        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint">on hint</button>
+        <button nbButton status="success" nbPopover="Hello, how are you today?">on click</button>
+        <button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
+        <button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -76,9 +76,9 @@
       <nb-card-header>Template Popovers</nb-card-header>
       <nb-card-body>
         <p>You can pass a refference to `ng-template` to be rendered.</p>
-        <button class="btn btn-warning with-margins" [nbPopover]="tabs">With tabs</button>
-        <button class="btn btn-warning with-margins" [nbPopover]="form">With form</button>
-        <button class="btn btn-warning with-margins" [nbPopover]="card">With card</button>
+        <button nbButton status="warning" [nbPopover]="tabs">With tabs</button>
+        <button nbButton status="warning" [nbPopover]="form">With form</button>
+        <button nbButton status="warning" [nbPopover]="card">With card</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -88,9 +88,9 @@
       <nb-card-header>Component Popovers</nb-card-header>
       <nb-card-body>
         <p>Same way popover can render any angular compnoent.</p>
-        <button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
-        <button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
-        <button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
+        <button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
+        <button nbButton status="warning" [nbPopover]="formComponent">With form</button>
+        <button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -100,55 +100,55 @@
   <div class="col-md-12">
     <nb-card>
       <nb-card-header>Event Debouncing</nb-card-header>
-      <nb-card-body>
+      <nb-card-body class="debounce-card">
         <p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
 
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
       </nb-card-body>
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.scss b/src/app/pages/modal-overlays/popovers/popovers.component.scss
index 09cab9e6..cfc7a60c 100644
--- a/src/app/pages/modal-overlays/popovers/popovers.component.scss
+++ b/src/app/pages/modal-overlays/popovers/popovers.component.scss
@@ -1,19 +1,15 @@
 @import '~@nebular/theme/styles/core/mixins';
 
-::ng-deep nb-card.popover-card {
-  margin-bottom: 0;
-  width: 300px;
-  box-shadow: none;
-}
+nb-card-body {
+  margin: 0 -0.5rem;
 
-:host {
-  button.with-margins {
-    @include nb-ltr(margin, 0 0.75rem 2rem 0);
-    @include nb-rtl(margin, 0 0 2rem 0.75rem);
-  }
-
-  ::ng-deep .btn-outline-secondary {
-    @include nb-ltr(margin, 0 0.5rem 0.5rem 0);
-    @include nb-rtl(margin, 0 0 0.5rem 0.5rem);
+  button,
+  p {
+    margin: 0.5rem 0.5rem 0;
   }
 }
+
+.popover-card {
+  margin: 0;
+  max-width: 20rem;
+}