diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss
index acf7d8ac..8ba44121 100644
--- a/src/app/@theme/styles/_overrides.scss
+++ b/src/app/@theme/styles/_overrides.scss
@@ -8,4 +8,8 @@
       right: 0.41rem !important;
     }
   }
+
+  .table {
+    color: nb-theme(text-basic-color) !important;
+  }
 }
diff --git a/src/app/@theme/styles/_material-dark.scss b/src/app/@theme/styles/material/_material-dark.scss
similarity index 98%
rename from src/app/@theme/styles/_material-dark.scss
rename to src/app/@theme/styles/material/_material-dark.scss
index 181e3219..f9a692a4 100644
--- a/src/app/@theme/styles/_material-dark.scss
+++ b/src/app/@theme/styles/material/_material-dark.scss
@@ -275,7 +275,7 @@ $theme: (
 
   background-basic-color-1: color-basic-800,
   background-basic-color-2: color-basic-900,
-  background-basic-color-3: color-basic-1000,
+  background-basic-color-3: color-basic-800,
   background-basic-color-4: color-basic-1100,
 
   background-alternative-color-1: color-basic-100,
@@ -361,7 +361,8 @@ $theme: (
   text-danger-active-color: color-danger-active,
   text-danger-disabled-color: color-danger-400,
 
-  shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)',
+  shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.24), 0 0 20px rgba(0, 0, 0, 0.12)"),
+  header-shadow: unquote("0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)"),
   outline-color: color-basic-700,
 
   font-family-primary: unquote('Roboto, sans-serif')
diff --git a/src/app/@theme/styles/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss
similarity index 98%
rename from src/app/@theme/styles/_material-light.scss
rename to src/app/@theme/styles/material/_material-light.scss
index 6f677190..4ea1d660 100644
--- a/src/app/@theme/styles/_material-light.scss
+++ b/src/app/@theme/styles/material/_material-light.scss
@@ -274,8 +274,8 @@ $theme: (
   color-control-transparent-disabled-border: color-basic-transparent-300,
 
   background-basic-color-1: color-basic-100,
-  background-basic-color-2: color-basic-200,
-  background-basic-color-3: color-basic-300,
+  background-basic-color-2: color-basic-300,
+  background-basic-color-3: color-basic-100,
   background-basic-color-4: color-basic-400,
 
   background-alternative-color-1: color-basic-800,
@@ -361,7 +361,8 @@ $theme: (
   text-danger-active-color: color-danger-active,
   text-danger-disabled-color: color-danger-400,
 
-  shadow: '0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)',
+  shadow: unquote("0 2px 10px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.06)"),
+  header-shadow: unquote("0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)"),
   outline-color: color-basic-transparent-200,
 
   font-family-primary: unquote('Roboto, sans-serif')
diff --git a/src/app/@theme/styles/material/_material.scss b/src/app/@theme/styles/material/_material.scss
new file mode 100644
index 00000000..282c15da
--- /dev/null
+++ b/src/app/@theme/styles/material/_material.scss
@@ -0,0 +1,32 @@
+@import './ripple';
+
+@include nb-install() {
+  @include ngx-ripple();
+
+  @include nb-for-themes(material-dark, material-light) {
+    nb-layout-header {
+      box-shadow: nb-theme(header-shadow) !important;
+      background-color: nb-theme(color-primary-default) !important;
+
+      .logo-container, nb-action {
+        a, nb-icon, .user-name {
+          color: nb-theme(text-control-color) !important;
+        }
+      }
+    }
+
+    nb-sidebar {
+      background-color: nb-theme(background-basic-color-2) !important;
+      transition: width 0.3s;
+
+      .main-container {
+        transition: width 0.3s;
+      }
+    }
+
+    nb-card, nb-reveal-card {
+      border: none !important;
+      box-shadow: nb-theme(shadow) !important;
+    }
+  }
+}
diff --git a/src/app/@theme/styles/_ripple.scss b/src/app/@theme/styles/material/_ripple.scss
similarity index 100%
rename from src/app/@theme/styles/_ripple.scss
rename to src/app/@theme/styles/material/_ripple.scss
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index 15c2de14..42369947 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -18,7 +18,7 @@
 
 @import './layout';
 @import './overrides';
-@import './ripple';
+@import './material/material';
 
 // install the framework and custom global styles
 @include nb-install() {
@@ -32,5 +32,4 @@
   @include ngx-pace-theme();
 
   @include nb-overrides();
-  @include ngx-ripple();
 };
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index 6e60d197..22a42a9c 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -3,8 +3,8 @@
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
 // material themes
-@import './material-dark';
-@import './material-light';
+@import './material/material-dark';
+@import './material/material-light';
 
 $nb-themes: nb-register-theme((
   layout-padding-top: 2.25rem,
@@ -128,6 +128,6 @@ $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: 0 4px 14px 0 #8f9bb3,У
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), material-dark, material-dark);
diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
new file mode 100644
index 00000000..ea352406
--- /dev/null
+++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
@@ -0,0 +1,77 @@
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card {
+    background-color: transparent;
+    border-width: 0;
+    box-shadow: none;
+    margin: 0;
+    height: 100%;
+  }
+
+  nb-card-header {
+    border-color: transparent;
+  }
+
+  svg {
+    width: 100%;
+  }
+
+  .stroke-pattern {
+    fill: none;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+    opacity: 0.1;
+    stroke-width: 1px;
+  }
+
+  .stroked-element {
+    stroke-width: 4px;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+  }
+
+  .room-border {
+    stroke-width: 4px;
+    stroke: #bdc4cd;
+    stroke-miterlimit: 10;
+    fill: none;
+  }
+
+  .room-bg {
+    fill: nb-theme(card-background-color);
+    stroke: transparent;
+    cursor: pointer;
+    stroke-width: 4px;
+  }
+
+  .room-bg-border-grad {
+    fill: none;
+    stroke: none;
+    stroke-width: 4px;
+  }
+
+  .room-text {
+    cursor: pointer;
+    user-select: none;
+    pointer-events: none;
+    fill: nb-theme(text-hint-color);
+  }
+
+  .selected-room {
+    z-index: 40;
+
+    .room-text {
+      fill: nb-theme(text-basic-color);
+    }
+    .room-border {
+      stroke: nb-theme(color-primary-default);
+    }
+  }
+
+  .header {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
new file mode 100644
index 00000000..f62f667f
--- /dev/null
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
@@ -0,0 +1,114 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+@include nb-install-component() {
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+
+  .single-view-button {
+    .nb-square {
+      font-size: 1rem;
+    }
+
+    @include nb-ltr {
+      margin-left: auto;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    @include nb-rtl {
+      margin-right: auto;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .grid-view-button {
+    ::ng-deep svg {
+      vertical-align: top;
+    }
+
+    @include nb-ltr {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    @include nb-rtl {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .grid-container {
+    height: 100%;
+    display: flex;
+  }
+
+  .single-view,
+  .grid-view {
+    flex: 1 0 100%;
+  }
+
+  .grid-view {
+    display: flex;
+    flex-wrap: wrap;
+
+    .camera {
+      flex: 1 0 50%;
+    }
+  }
+
+  .single-view .camera {
+    width: 100%;
+    height: 100%;
+  }
+
+  .camera {
+    background-position: center;
+    background-size: cover;
+    position: relative;
+
+    &::before {
+      background-color: rgba(255, 255, 255, 0.1);
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+    }
+
+    &:hover::before {
+      opacity: 0;
+    }
+  }
+
+  .camera-name {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background: nb-theme(overlay-backdrop-background-color);
+    padding: 0.5rem 1rem;
+  }
+
+  nb-action {
+    nb-icon {
+      @include nb-ltr(margin-right, 0.5rem);
+      @include nb-rtl(margin-left, 0.5rem);
+    }
+
+    ::ng-deep svg {
+      vertical-align: top;
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    nb-action {
+      padding: 0;
+    }
+  }
+}
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
new file mode 100644
index 00000000..dadf5a21
--- /dev/null
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
@@ -0,0 +1,49 @@
+@import '../../../@theme/styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  position: relative;
+  display: block;
+
+  nb-card {
+    position: relative;
+    overflow: hidden;
+  }
+
+  nb-card-header {
+    border-bottom: none;
+  }
+
+  .subtitle {
+    color: nb-theme(text-hint-color);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .chart-container {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2.125rem;
+  }
+
+  @include media-breakpoint-down(is) {
+    ngx-legend-chart {
+      ::ng-deep .legends {
+        padding-left: 0;
+      }
+    }
+  }
+}