diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
index 6fdc5d35..b034c768 100644
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@@ -1,24 +1,60 @@
 <div class="header-container">
   <div class="logo-container">
-    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+    <a
+      href="#"
+      class="sidebar-toggle"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true"
+      (click)="toggleSidebar()"
+    >
       <nb-icon icon="menu-2-outline"></nb-icon>
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
-  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
-    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  <nb-select
+    status="primary"
+    matRipple
+    [selected]="currentTheme"
+    (selectedChange)="changeTheme($event)"
+  >
+    <nb-option
+      *ngFor="let theme of themes"
+      [value]="theme.value"
+      matRipple
+    >{{ theme.name }}</nb-option>
   </nb-select>
 </div>
 
 <div class="header-container">
   <nb-actions size="small">
 
-    <nb-action class="control-item">
-      <nb-search type="rotate-layout"></nb-search>
-    </nb-action>
-    <nb-action class="control-item" icon="email-outline"></nb-action>
-    <nb-action class="control-item" icon="bell-outline"></nb-action>
-    <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
+    <nb-action
+      class="control-item"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true"
+    ><nb-search type="rotate-layout"></nb-search></nb-action>
+    <nb-action
+      class="control-item"
+      icon="email-outline"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true"
+    ></nb-action>
+    <nb-action
+      class="control-item"
+      icon="bell-outline"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true"
+    ></nb-action>
+    <nb-action
+      class="user-action"
+      *nbIsGranted="['view', 'user']"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true">
       <nb-user [nbContextMenu]="userMenu"
                [onlyPicture]="userPictureOnly"
                [name]="user?.name"
diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 20d9e872..73270bd2 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -33,8 +33,8 @@
     width: auto;
 
     .sidebar-toggle {
-      @include nb-ltr(padding-right, 1.25rem);
-      @include nb-rtl(padding-left, 1.25rem);
+      @include nb-ltr(margin-right, 1.25rem);
+      @include nb-rtl(margin-left, 1.25rem);
       text-decoration: none;
       color: nb-theme(text-hint-color);
       nb-icon {
diff --git a/src/app/@theme/styles/material/_ripple.scss b/src/app/@theme/styles/material/_ripple.scss
index f77ad29b..6e01c1f9 100644
--- a/src/app/@theme/styles/material/_ripple.scss
+++ b/src/app/@theme/styles/material/_ripple.scss
@@ -6,6 +6,10 @@
     &:not(:empty) {
       transform: translateZ(0);
     }
+
+    &.mat-ripple-unbounded{
+      overflow: visible;
+    }
   }
 
   .mat-ripple-element {
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index 22a42a9c..0be07815 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -106,9 +106,9 @@ $nb-themes: nb-register-theme((
 
   select-min-width: 6rem,
 
-  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+  slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
 ), material-light, material-light);
 
 $nb-themes: nb-register-theme((
@@ -127,7 +127,7 @@ $nb-themes: nb-register-theme((
 
   select-min-width: 6rem,
 
-  slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
-  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У
-  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
+  slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #292929,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
 ), material-dark, material-dark);
diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html
index 0aac40bf..ef34b977 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.html
+++ b/src/app/pages/dashboard/contacts/contacts.component.html
@@ -3,7 +3,7 @@
 
     <nb-tab tabTitle="Contacts">
       <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of contacts">
+        <nb-list-item matRipple class="contact" *ngFor="let c of contacts">
           <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
           <nb-icon icon="phone-outline" pack="eva"></nb-icon>
         </nb-list-item>
@@ -12,7 +12,7 @@
 
     <nb-tab tabTitle="Recent">
       <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of recent">
+        <nb-list-item matRipple class="contact" *ngFor="let c of recent">
           <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
           <span class="caption">{{ c.time | date: 'shortTime' }}</span>
         </nb-list-item>
diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html
index 7085cbd7..c68ede53 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.html
+++ b/src/app/pages/dashboard/electricity/electricity.component.html
@@ -37,8 +37,8 @@
         <span>291 <span class="caption">USD</span></span>
       </span>
 
-      <nb-select [(selected)]="type" class="type-select">
-        <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+      <nb-select matRipple [(selected)]="type" class="type-select">
+        <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
       </nb-select>
     </nb-card-header>
 
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
index 739acc05..70d7b445 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.html
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
@@ -22,7 +22,7 @@
   <div class="grid-container">
 
     <div class="single-view" *ngIf="isSingleView">
-      <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
+      <div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
         <span class="camera-name">{{ selectedCamera.title }}</span>
       </div>
     </div>
@@ -40,19 +40,19 @@
 
   <nb-card-footer>
     <nb-actions [size]="actionSize" fullWidth>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
         Pause
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="list-outline" pack="eva"></nb-icon>
         Logs
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="search-outline" pack="eva"></nb-icon>
         Search
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
         Setup
       </nb-action>
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
index f62f667f..a327a866 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
@@ -72,6 +72,10 @@
     background-size: cover;
     position: relative;
 
+    &:not(.single) {
+      cursor: pointer;
+    }
+
     &::before {
       background-color: rgba(255, 255, 255, 0.1);
       content: '';
@@ -96,6 +100,9 @@
   }
 
   nb-action {
+    cursor: pointer;
+    border-radius: 2px;
+
     nb-icon {
       @include nb-ltr(margin-right, 0.5rem);
       @include nb-rtl(margin-left, 0.5rem);
diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss
index 261f13cf..158df84b 100644
--- a/src/app/pages/dashboard/status-card/status-card.component.scss
+++ b/src/app/pages/dashboard/status-card/status-card.component.scss
@@ -5,6 +5,7 @@
     flex-direction: row;
     align-items: center;
     height: 6rem;
+    cursor: pointer;
 
     .icon-container {
       height: 100%;
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
index 7f46e332..826b87b9 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
@@ -42,6 +42,6 @@
   <ng-content></ng-content>
 </div>
 
-<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
+<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
   <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
 </button>
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index 0fa12c1a..2a911576 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -39,25 +39,27 @@
     position: absolute;
     width: 5.25rem;
     height: 5.25rem;
-    background-color: nb-theme(card-background-color);
+    background-color: nb-theme(card-background-color) !important;
     border-radius: 50%;
     bottom: 2%;
     left: 50%;
     transform: translate(-50%, 50%);
     z-index: 2;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
     cursor: pointer;
     border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
 
     &.on {
-      color: nb-theme(text-hint-color);
+      color: nb-theme(color-primary-default);
     }
   }
 
   .power-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.625rem;
+    left: 50%;
+    margin-left: -0.625rem;
     font-size: 3rem;
   }
 }
diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
index 9f6c4345..a7da27bb 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.html
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -51,16 +51,16 @@
       </div>
 
       <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
-        <nb-radio value="cool">
+        <nb-radio matRipple value="cool">
           <i class="nb-snowy-circled"></i>
         </nb-radio>
-        <nb-radio value="warm">
+        <nb-radio matRipple value="warm">
           <i class="nb-sunny-circled"></i>
         </nb-radio>
-        <nb-radio value="heat">
+        <nb-radio matRipple value="heat">
           <i class="nb-flame-circled"></i>
         </nb-radio>
-        <nb-radio value="fan">
+        <nb-radio matRipple value="fan">
           <i class="nb-loop-circled"></i>
         </nb-radio>
       </nb-radio-group>
diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts
index 3ddd6e2c..a0396689 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.ts
+++ b/src/app/pages/dashboard/traffic/traffic.component.ts
@@ -12,8 +12,8 @@ import { TrafficChartData } from '../../../@core/data/traffic-chart';
       <nb-card-header>
         <span>Traffic Consumption</span>
 
-        <nb-select [(selected)]="type">
-          <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+        <nb-select matRipple [(selected)]="type">
+          <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
         </nb-select>
       </nb-card-header>
 
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
index 30bf039a..f2ba91aa 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
@@ -1,7 +1,7 @@
 <ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
 
-<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
-  <nb-option *ngFor="let period of types" [value]="period">
+<nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">
     {{ period }}
   </nb-option>
 </nb-select>
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
index 52cb2cab..51b123bb 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
@@ -11,9 +11,9 @@
 
   ngx-legend-chart,
   .period-select {
-    padding-top: 1rem;
-    @include nb-ltr(padding-left, 0.5rem);
-    @include nb-rtl(padding-right, 0.5rem);
+    margin-top: 1rem;
+    @include nb-ltr(margin-left, 0.5rem);
+    @include nb-rtl(margin-right, 0.5rem);
   }
 
   @include media-breakpoint-up(md) {
diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
index 0f932318..abaa6784 100644
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
+++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
@@ -1,6 +1,6 @@
 <nb-card-header>
-  <nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
-    <nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
+  <nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
+    <nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
   </nb-select>
 </nb-card-header>
 <nb-card-body>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
index 4e225305..9ee7a987 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
@@ -1,6 +1,6 @@
 <nb-card-header>
   <span>Traffic</span>
-  <nb-select [selected]="type" (selectedChange)="changePeriod($event)">
-    <nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+    <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
   </nb-select>
 </nb-card-header>
diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.html b/src/app/pages/e-commerce/user-activity/user-activity.component.html
index 445f18f9..46ba0524 100644
--- a/src/app/pages/e-commerce/user-activity/user-activity.component.html
+++ b/src/app/pages/e-commerce/user-activity/user-activity.component.html
@@ -2,8 +2,8 @@
 
   <nb-card-header>
     <span>User Activity</span>
-    <nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
-      <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+    <nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
+      <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
     </nb-select>
   </nb-card-header>
 
diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html
index bc2ff55c..e547a3ea 100644
--- a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html
+++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html
@@ -3,33 +3,33 @@
   <nb-card-body>
     <div class="row">
       <div class="col-md-12 col-lg-12 col-xxxl-12">
-        <button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
       </div>
       <div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
-        <button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
           Download
         </button>
diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html
index b9bbeb50..9ad1b934 100644
--- a/src/app/pages/forms/buttons/buttons.component.html
+++ b/src/app/pages/forms/buttons/buttons.component.html
@@ -4,10 +4,10 @@
       <nb-card-header>Hero Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" hero>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
             {{ status }}
           </button>
-          <button disabled nbButton hero>
+          <button disabled nbButton matRipple hero>
             disabled
           </button>
         </div>
@@ -18,10 +18,10 @@
       <nb-card-header>Default Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status">
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status">
             {{ status }}
           </button>
-          <button disabled nbButton>
+          <button disabled nbButton matRipple>
             disabled
           </button>
         </div>
@@ -32,10 +32,10 @@
       <nb-card-header>Outline Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" outline>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
             {{ status }}
           </button>
-          <button disabled nbButton outline>
+          <button disabled nbButton matRipple outline>
             disabled
           </button>
         </div>
@@ -46,10 +46,10 @@
       <nb-card-header>Ghost Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" ghost>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
             {{ status }}
           </button>
-          <button disabled nbButton outline>
+          <button disabled nbButton matRipple outline>
             disabled
           </button>
         </div>
@@ -62,7 +62,7 @@
       <nb-card-header>Button shapes</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let shape of shapes" nbButton [shape]="shape">
+          <button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
             {{ shape }}
           </button>
         </div>
@@ -73,7 +73,7 @@
       <nb-card-header>Button sizes</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let size of sizes" nbButton [size]="size">
+          <button *ngFor="let size of sizes" nbButton matRipple [size]="size">
             {{ size }}
           </button>
         </div>
@@ -86,13 +86,13 @@
       <nb-card-header>Action Groups</nb-card-header>
       <nb-card-body>
         <nb-actions size="medium">
-          <nb-action icon="menu-outline"></nb-action>
-          <nb-action icon="search-outline"></nb-action>
-          <nb-action icon="email-outline"></nb-action>
+          <nb-action matRipple icon="menu-outline"></nb-action>
+          <nb-action matRipple icon="search-outline"></nb-action>
+          <nb-action matRipple icon="email-outline"></nb-action>
           <nb-action disabled icon="bell-outline"></nb-action><nb-action>
-          <nb-user name="Han Solo"></nb-user>
+          <nb-user matRipple name="Han Solo"></nb-user>
         </nb-action>
-          <nb-action icon="settings-2-outline"></nb-action>
+          <nb-action matRipple icon="settings-2-outline"></nb-action>
         </nb-actions>
       </nb-card-body>
     </nb-card>
@@ -100,19 +100,19 @@
     <nb-card>
       <nb-card-body>
         <nb-actions size="medium" fullWidth>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
             <span>Pause</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="list-outline"></nb-icon>
             <span>Logs</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="search-outline"></nb-icon>
             <span>Search</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
             <span>Setup</span>
           </nb-action>
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss
index 71df8954..19176e49 100644
--- a/src/app/pages/forms/buttons/buttons.component.scss
+++ b/src/app/pages/forms/buttons/buttons.component.scss
@@ -17,4 +17,9 @@
   .actions-card {
     height: 8rem;
   }
+
+  nb-action {
+    border-radius: 2px;
+    cursor: pointer;
+  }
 }
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index c40a0b6d..7bb23392 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -26,9 +26,9 @@
     <nb-card>
       <nb-card-header>Select</nb-card-header>
       <nb-card-body>
-        <nb-select selected="1">
-          <nb-option value="1">Option 1</nb-option>
-          <nb-option value="2">Option 2</nb-option>
+        <nb-select matRipple selected="1">
+          <nb-option matRipple value="1">Option 1</nb-option>
+          <nb-option matRipple value="2">Option 2</nb-option>
         </nb-select>
       </nb-card-body>
     </nb-card>
diff --git a/src/app/pages/layout/accordion/accordion.component.html b/src/app/pages/layout/accordion/accordion.component.html
index 180e3aba..1b5240bf 100644
--- a/src/app/pages/layout/accordion/accordion.component.html
+++ b/src/app/pages/layout/accordion/accordion.component.html
@@ -3,13 +3,13 @@
     <nb-card>
       <nb-card-header>Toggle Accordion By Button</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="toggle()">Toggle First Item</button>
+        <button nbButton matRipple (click)="toggle()">Toggle First Item</button>
       </nb-card-body>
     </nb-card>
 
     <nb-accordion>
       <nb-accordion-item #item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Product Details
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -20,7 +20,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Reviews
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -31,7 +31,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Edit
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -46,7 +46,7 @@
   <div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
     <nb-accordion multi>
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Product Details
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -57,7 +57,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Reviews
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -68,7 +68,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Edit
         </nb-accordion-item-header>
         <nb-accordion-item-body>
diff --git a/src/app/pages/layout/stepper/stepper.component.html b/src/app/pages/layout/stepper/stepper.component.html
index 86e0116c..e6c220cc 100644
--- a/src/app/pages/layout/stepper/stepper.component.html
+++ b/src/app/pages/layout/stepper/stepper.component.html
@@ -4,25 +4,25 @@
       <nb-step [label]="labelOne">
         <ng-template #labelOne>First step</ng-template>
         <h3>Step content #1</h3>
-        <button nbButton disabled nbStepperNext>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple disabled nbStepperNext>prev</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelTwo">
         <ng-template #labelTwo>Second step</ng-template>
         <h3>Step content #2</h3>
-        <button nbButton nbStepperPrevious>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Third step">
         <h3>Step content #3</h3>
-        <button nbButton nbStepperPrevious>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelFour">
         <ng-template #labelFour>Fourth step</ng-template>
         <h3>Step content #4</h3>
-        <button nbButton nbStepperPrevious>prev</button>
-        <button nbButton disabled nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
+        <button nbButton matRipple disabled nbStepperNext>next</button>
       </nb-step>
     </nb-stepper>
   </nb-card-body>
@@ -43,7 +43,7 @@
                 <input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
                        [ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
               </div>
-              <button nbButton nbStepperNext>next</button>
+              <button nbButton matRipple nbStepperNext>next</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="secondForm" label="Second step">
@@ -57,8 +57,8 @@
                 <input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
                        [ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
               </div>
-              <button nbButton nbStepperPrevious>prev</button>
-              <button nbButton nbStepperNext>next</button>
+              <button nbButton matRipple nbStepperPrevious>prev</button>
+              <button nbButton matRipple nbStepperNext>next</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="thirdForm" label="Third step">
@@ -70,14 +70,14 @@
                 <input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
                        [ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
               </div>
-              <button nbButton nbStepperPrevious>prev</button>
-              <button nbButton nbStepperNext>Confirm</button>
+              <button nbButton matRipple nbStepperPrevious>prev</button>
+              <button nbButton matRipple nbStepperNext>Confirm</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
             <div class="step-container">
               <h3>Wizard completed!</h3>
-              <button nbButton (click)="stepper.reset()">Try again</button>
+              <button nbButton matRipple (click)="stepper.reset()">Try again</button>
             </div>
           </nb-step>
         </nb-stepper>
@@ -97,8 +97,8 @@
               viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
               placerat quis, lobortis in ligula.
             </p>
-            <button nbButton disabled nbStepperNext>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple disabled nbStepperNext>prev</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Second step">
             <h3>Step content #2</h3>
@@ -107,8 +107,8 @@
               sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
               eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Third step">
             <h3>Step content #3</h3>
@@ -123,8 +123,8 @@
               sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
               eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Fourth step">
             <h3>Step content #4</h3>
@@ -133,8 +133,8 @@
               sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
               viverra ex.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
-            <button nbButton disabled nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
+            <button nbButton matRipple disabled nbStepperNext>next</button>
           </nb-step>
         </nb-stepper>
       </nb-card-body>
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.html b/src/app/pages/miscellaneous/not-found/not-found.component.html
index 9eb129fa..df0284ad 100644
--- a/src/app/pages/miscellaneous/not-found/not-found.component.html
+++ b/src/app/pages/miscellaneous/not-found/not-found.component.html
@@ -5,7 +5,7 @@
         <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
           <h2 class="title">404 Page Not Found</h2>
           <small class="sub-title">The page you were looking for doesn't exist</small>
-          <button nbButton fullWidth (click)="goToHome()" type="button" class="home-button">
+          <button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
             Take me home
           </button>
         </div>
diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html
index 267efd37..a4202be3 100644
--- a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html
+++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html
@@ -4,7 +4,7 @@
     <input #name nbInput placeholder="Name">
   </nb-card-body>
   <nb-card-footer>
-    <button class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
-    <button nbButton status="success" (click)="submit(name.value)">Submit</button>
+    <button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
+    <button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
   </nb-card-footer>
 </nb-card>
diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.html b/src/app/pages/modal-overlays/dialog/dialog.component.html
index 655d03ae..a017869e 100644
--- a/src/app/pages/modal-overlays/dialog/dialog.component.html
+++ b/src/app/pages/modal-overlays/dialog/dialog.component.html
@@ -3,9 +3,9 @@
     <nb-card>
       <nb-card-header>Open Dialog</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with component</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with component</button>
 
-        <button nbButton (click)="open2(dialog)">Open Dialog with template</button>
+        <button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -14,9 +14,9 @@
     <nb-card>
       <nb-card-header>Open Without Backdrop</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with backdrop</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
 
-        <button nbButton (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
+        <button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,9 +25,9 @@
     <nb-card>
       <nb-card-header>Open Without Esc Close</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with esc close</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
 
-        <button nbButton (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
+        <button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -36,9 +36,9 @@
     <nb-card>
       <nb-card-header>Open Without Backdrop Click</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with backdrop click</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
 
-        <button nbButton (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
+        <button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -47,7 +47,7 @@
     <nb-card class="form-input-card">
       <nb-card-header>Return Result From Dialog</nb-card-header>
       <nb-card-body class="result-from-dialog">
-        <button nbButton (click)="open3()">Enter Name</button>
+        <button nbButton matRipple (click)="open3()">Enter Name</button>
         <br>
         <h3 class="title">Names:</h3>
         <ul>
@@ -63,7 +63,7 @@
     <nb-card-header>Template Dialog</nb-card-header>
     <nb-card-body>{{ data }}</nb-card-body>
     <nb-card-footer>
-      <button nbButton (click)="ref.close()">Close Dialog</button>
+      <button nbButton matRipple (click)="ref.close()">Close Dialog</button>
     </nb-card-footer>
   </nb-card>
 </ng-template>
diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html
index 4cd3db63..1e82a3b4 100644
--- a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html
+++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html
@@ -9,6 +9,6 @@
     in aliquet massa aliquet et.
   </nb-card-body>
   <nb-card-footer>
-    <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+    <button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
   </nb-card-footer>
 </nb-card>
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 c542b774..000d50bc 100644
--- a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts
+++ b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts
@@ -34,7 +34,7 @@ export class NgxPopoverTabsComponent {
         <div class="form-group">
           <textarea class="form-control" placeholder="Message"></textarea>
         </div>
-        <button type="submit" class="btn btn-primary w-100">Send</button>
+        <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
       </form>
     </div>
   `,
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.html b/src/app/pages/modal-overlays/popovers/popovers.component.html
index 0f9f38d6..4d7465ba 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 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>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
+        <button nbButton matRipple 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 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>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -55,7 +55,7 @@
           <div class="form-group">
             <textarea class="form-control" placeholder="Message"></textarea>
           </div>
-          <button type="submit" class="btn btn-primary w-100">Send</button>
+          <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
         </form>
       </div>
     </ng-template>
@@ -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 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>
+        <button nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
+        <button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
+        <button nbButton matRipple 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 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>
+        <button nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
+        <button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
+        <button nbButton matRipple status="warning" [nbPopover]="cardComponent">With card</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -103,52 +103,52 @@
       <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 nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
       </nb-card-body>
diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.html b/src/app/pages/modal-overlays/toastr/toastr.component.html
index 6e1c4c63..f9204833 100644
--- a/src/app/pages/modal-overlays/toastr/toastr.component.html
+++ b/src/app/pages/modal-overlays/toastr/toastr.component.html
@@ -8,8 +8,8 @@
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
           <label class="label">Position:</label>
-          <nb-select [(selected)]="position" class="position-select">
-            <nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
+          <nb-select [(selected)]="position" matRipple class="position-select">
+            <nb-option *ngFor="let p of positions"  [value]="p" matRipple>{{ p }}</nb-option>
           </nb-select>
         </div>
 
@@ -34,8 +34,8 @@
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
           <label class="label">Toast type:</label>
-          <nb-select [(selected)]="status">
-            <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+          <nb-select [(selected)]="status" matRipple>
+            <nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
           </nb-select>
         </div>
 
@@ -53,7 +53,7 @@
   </nb-card-body>
 
   <nb-card-footer>
-    <button nbButton (click)="makeToast()">Show toast</button>
-    <button nbButton status="success" (click)="openRandomToast()">Random toast</button>
+    <button nbButton matRipple (click)="makeToast()">Show toast</button>
+    <button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
   </nb-card-footer>
 </nb-card>
diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.html b/src/app/pages/modal-overlays/tooltip/tooltip.component.html
index edddfcd1..a5113a5f 100644
--- a/src/app/pages/modal-overlays/tooltip/tooltip.component.html
+++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.html
@@ -3,8 +3,8 @@
     <nb-card>
       <nb-card-header>Tooltip With Icon</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton>Show Tooltip</button>
-        <button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton>Show Tooltip</button>
+        <button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
+        <button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -13,10 +13,10 @@
     <nb-card>
       <nb-card-header>Tooltip Placements</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,12 +25,12 @@
     <nb-card>
       <nb-card-header>Colored Tooltips</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Default</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton>Primary</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton>Success</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton>Danger</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton>Info</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton>Warning</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton matRipple>Primary</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton matRipple>Success</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton matRipple>Danger</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton matRipple>Info</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
       </nb-card-body>
     </nb-card>
   </div>
diff --git a/src/app/pages/modal-overlays/window/window.component.html b/src/app/pages/modal-overlays/window/window.component.html
index db824d2d..a6fb387b 100644
--- a/src/app/pages/modal-overlays/window/window.component.html
+++ b/src/app/pages/modal-overlays/window/window.component.html
@@ -3,9 +3,9 @@
     <nb-card>
       <nb-card-header>Window Form</nb-card-header>
       <nb-card-body>
-        <button (click)="openWindowForm()" nbButton>Open window form</button>
+        <button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
 
-        <button (click)="openWindow(contentTemplate)" nbButton>Open window with template</button>
+        <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -14,9 +14,9 @@
     <nb-card>
       <nb-card-header>Window Without Backdrop</nb-card-header>
       <nb-card-body>
-        <button (click)="openWindow(contentTemplate)" nbButton>Open window with backdrop</button>
+        <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
 
-        <button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button>
+        <button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
       </nb-card-body>
     </nb-card>
   </div>
diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.html b/src/app/pages/ui-features/search-fields/search-fields.component.html
index eee086fb..138d1694 100644
--- a/src/app/pages/ui-features/search-fields/search-fields.component.html
+++ b/src/app/pages/ui-features/search-fields/search-fields.component.html
@@ -5,7 +5,14 @@
         Layout Rotate Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="rotate-layout"
+          tag="rotate-layout"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -15,7 +22,14 @@
         Modal Zoomin Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-zoomin"
+          tag="modal-zoomin"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,7 +39,14 @@
         Modal Move Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-move" tag="modal-move"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-move"
+          tag="modal-move"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -35,7 +56,14 @@
         Modal Drop Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-drop" tag="modal-drop"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-drop"
+          tag="modal-drop"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -45,7 +73,14 @@
         Modal Half Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-half" tag="modal-half"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-half"
+          tag="modal-half"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -55,7 +90,14 @@
         Curtain Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="curtain" tag="curtain"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="curtain"
+          tag="curtain"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -65,7 +107,14 @@
         Column Curtain Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="column-curtain" tag="column-curtain"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="column-curtain"
+          tag="column-curtain"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>