diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss
new file mode 100644
index 00000000..10a5496a
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss
@@ -0,0 +1,97 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
+
+// Angular Material typography
+// $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+$typography: mat-typography-config(
+  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+  $title: mat-typography-level(20px, 32px, 600),
+  $body-2: mat-typography-level(14px, 24px, 600),
+  $button: mat-typography-level(14px, 14px, 600),
+  $input: mat-typography-level(16px, 1.125, 400)
+);
+
+// Setup the typography
+@include angular-material-typography($typography);
+
+@mixin components-theme($theme) {
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-primary-palette: mat-palette($mat-indigo);
+$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
+$default-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$theme: mat-light-theme(
+  $default-primary-palette,
+  $default-accent-palette,
+  $default-warn-palette
+);
+
+// Add ".theme-default" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-default {
+  // Create an Angular Material theme from the $theme map
+  @include angular-material-theme($theme);
+
+  // Apply the theme to the user components
+  @include components-theme($theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a blue-gray dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
+$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
+$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$blue-gray-dark-theme: mat-dark-theme(
+  $blue-gray-dark-theme-primary-palette,
+  $blue-gray-dark-theme-accent-palette,
+  $blue-gray-dark-theme-warn-palette
+);
+
+// Add ".theme-blue-gray-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-blue-gray-dark {
+  // Generate the Angular Material theme
+  @include angular-material-theme($blue-gray-dark-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($blue-gray-dark-theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a pink dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$pink-dark-theme-primary-palette: mat-palette($mat-pink);
+$pink-dark-theme-accent-palette: mat-palette($mat-pink);
+$pink-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$pink-dark-theme: mat-dark-theme(
+  $pink-dark-theme-primary-palette,
+  $pink-dark-theme-accent-palette,
+  $pink-dark-theme-warn-palette
+);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-pink-dark {
+  // Generate the Angular Material theme
+  @include angular-material-theme($pink-dark-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($pink-dark-theme);
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
index dd087bff..f1a27735 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -14,7 +14,6 @@
           position="start"
           opened="true"
           mode="side"
-          fuseMatSidenavHelper="chat-left-sidenav"
           matIsLockedOpen="gt-md"
         >
           <!-- <chat-left-sidenav></chat-left-sidenav> -->
@@ -29,13 +28,7 @@
         <!-- / CONTENT -->
         asdfsdfsdfs
         <!-- RIGHT SIDENAV -->
-        <mat-sidenav
-          class="sidenav"
-          position="end"
-          opened="false"
-          mode="over"
-          fuseMatSidenavHelper="chat-right-sidenav"
-        >
+        <mat-sidenav class="sidenav" position="end" opened="false" mode="over">
           <!-- <chat-right-sidenav></chat-right-sidenav> -->
           safsdf
         </mat-sidenav>
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_breakpoints.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_breakpoints.scss
new file mode 100644
index 00000000..306c8eb4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_breakpoints.scss
@@ -0,0 +1,37 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+  xs: 'screen and (max-width: 599px)',
+  sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+  md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+  lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+  xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+  lt-sm: 'screen and (max-width: 599px)',
+  lt-md: 'screen and (max-width: 959px)',
+  lt-lg: 'screen and (max-width: 1279px)',
+  lt-xl: 'screen and (max-width: 1919px)',
+  gt-xs: 'screen and (min-width: 600px)',
+  gt-sm: 'screen and (min-width: 960px)',
+  gt-md: 'screen and (min-width: 1280px)',
+  gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+  xs: null,
+  sm: 'gt-xs',
+  md: 'gt-sm',
+  lg: 'gt-md',
+  xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+  $mediaQuery: map-get($breakpoints, $breakpointName);
+
+  @if ($mediaQuery == null) {
+    @content;
+  } @else {
+    @media #{$mediaQuery} {
+      @content;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_forms.scss
new file mode 100644
index 00000000..b558aafa
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_forms.scss
@@ -0,0 +1,15 @@
+button,
+input[type='email'],
+input[type='tel'],
+input[type='text'],
+input[type='password'],
+input[type='image'],
+input[type='submit'],
+input[type='button'],
+input[type='search'],
+textarea {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_general.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_general.scss
new file mode 100644
index 00000000..c643d734
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_general.scss
@@ -0,0 +1,70 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Body scroll lock
+// -----------------------------------------------------------------------------------------------------
+html,
+body {
+  display: flex;
+  flex: 1 0 auto;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Boxed body
+// -----------------------------------------------------------------------------------------------------
+body {
+  // Boxed
+  &.boxed {
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @include mat-elevation(8);
+  }
+}
+
+/*----------------------------------------------------------------*/
+/*  @ Text rendering & box sizing
+/*----------------------------------------------------------------*/
+* {
+  text-rendering: optimizeLegibility;
+  -o-text-rendering: optimizeLegibility;
+  -ms-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  -webkit-text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+
+  // Remove focus outline
+  &:focus {
+    outline: none;
+  }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Responsive images
+// -----------------------------------------------------------------------------------------------------
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+  border: none;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Input
+// -----------------------------------------------------------------------------------------------------
+input {
+  border: none;
+  padding: 0 16px;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_helpers.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_helpers.scss
new file mode 100644
index 00000000..8822eea8
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_helpers.scss
@@ -0,0 +1,236 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Position helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+  @include media-breakpoint($materialBreakpoint) {
+    $infix: if($materialBreakpoint == null, '', '-#{$breakpoint}');
+
+    .position#{$infix}-relative {
+      position: relative;
+    }
+
+    .position#{$infix}-absolute {
+      position: absolute;
+    }
+
+    .position#{$infix}-static {
+      position: static;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+  @include media-breakpoint($materialBreakpoint) {
+    $infix: if($materialBreakpoint == null, '', '-#{$breakpoint}');
+
+    .align#{$infix}-top {
+      top: 0;
+    }
+
+    .align#{$infix}-right {
+      right: 0;
+    }
+
+    .align#{$infix}-bottom {
+      bottom: 0;
+    }
+
+    .align#{$infix}-left {
+      left: 0;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Size helpers
+// -----------------------------------------------------------------------------------------------------
+@each $prop, $abbrev in (height: h, width: w) {
+  @for $index from 0 through 180 {
+    $size: $index * 4;
+    $length: #{$size}px;
+
+    .#{$abbrev}-#{$size} {
+      #{$prop}: $length !important;
+      min-#{$prop}: $length !important;
+      max-#{$prop}: $length !important;
+    }
+  }
+
+  // Percentage
+  @for $i from 0 through 20 {
+    $i-p: 5 * $i;
+    $size-p: 5% * $i;
+
+    .#{$abbrev}-#{$i-p}-p {
+      #{$prop}: $size-p !important;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+  @include media-breakpoint($materialBreakpoint) {
+    $infix: if($materialBreakpoint == null, '', '-#{$breakpoint}');
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        .#{$abbrev}#{$infix}-#{$size} {
+          #{$prop}: $length !important;
+        }
+      }
+
+      @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+          #{$prop}-left: $length !important;
+        }
+
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+          #{$prop}-bottom: $length !important;
+        }
+      }
+
+      @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        .#{$abbrev}t#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+
+        .#{$abbrev}r#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+
+        .#{$abbrev}b#{$infix}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
+
+        .#{$abbrev}l#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+
+      @if ($abbrev == m) {
+        // Some special margin utils for flex alignments
+        .m#{$infix}-auto {
+          margin: auto !important;
+        }
+
+        .mt#{$infix}-auto {
+          margin-top: auto !important;
+        }
+
+        .mr#{$infix}-auto {
+          margin-right: auto !important;
+        }
+
+        .mb#{$infix}-auto {
+          margin-bottom: auto !important;
+        }
+
+        .ml#{$infix}-auto {
+          margin-left: auto !important;
+        }
+
+        .mx#{$infix}-auto {
+          margin-right: auto !important;
+          margin-left: auto !important;
+        }
+
+        .my#{$infix}-auto {
+          margin-top: auto !important;
+          margin-bottom: auto !important;
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border helpers
+// -----------------------------------------------------------------------------------------------------
+$border-style: 1px solid rgba(0, 0, 0, 0.12);
+
+.border,
+.b {
+  border: $border-style;
+}
+
+.border-top,
+.bt {
+  border-top: $border-style;
+}
+
+.border-right,
+.br {
+  border-right: $border-style;
+}
+
+.border-bottom,
+.bb {
+  border-bottom: $border-style;
+}
+
+.border-left,
+.bl {
+  border-left: $border-style;
+}
+
+.border-horizontal,
+.bx {
+  border-left: $border-style;
+  border-right: $border-style;
+}
+
+.border-vertical,
+.by {
+  border-top: $border-style;
+  border-bottom: $border-style;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border radius helpers
+// -----------------------------------------------------------------------------------------------------
+.border-radius-100 {
+  border-radius: 100%;
+}
+
+.border-radius-2 {
+  border-radius: 2px;
+}
+
+.border-radius-4 {
+  border-radius: 4px;
+}
+
+.border-radius-8 {
+  border-radius: 8px;
+}
+
+.border-radius-16 {
+  border-radius: 16px;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor helpers
+// -----------------------------------------------------------------------------------------------------
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_icons.scss
new file mode 100644
index 00000000..02f7c065
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_icons.scss
@@ -0,0 +1,26 @@
+i,
+mat-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  line-height: 24px;
+
+  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+    @include media-breakpoint($materialBreakpoint) {
+      $infix: if($materialBreakpoint == null, '', '-#{$breakpoint}');
+
+      @for $size from 2 through 128 {
+        &.s#{$infix}-#{$size * 2} {
+          font-size: #{($size * 2) + 'px'} !important;
+          width: #{($size * 2) + 'px'} !important;
+          height: #{($size * 2) + 'px'} !important;
+          min-width: #{($size * 2) + 'px'} !important;
+          min-height: #{($size * 2) + 'px'} !important;
+          line-height: #{($size * 2) + 'px'} !important;
+        }
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_normalize.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_normalize.scss
new file mode 100644
index 00000000..037c5d31
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_normalize.scss
@@ -0,0 +1,450 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main {
+  /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/_scrollbars.scss b/projects/ucap-webmessenger-app/src/assets/scss/partials/_scrollbars.scss
new file mode 100644
index 00000000..cf000226
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/_scrollbars.scss
@@ -0,0 +1,22 @@
+body:not(.is-mobile) {
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  ::-webkit-scrollbar:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+    border-radius: 12px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+    border-radius: 12px;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/theme.scss b/projects/ucap-webmessenger-app/src/assets/scss/theme.scss
deleted file mode 100644
index 0b86b4c4..00000000
--- a/projects/ucap-webmessenger-app/src/assets/scss/theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '~@angular/material/theming';
-
-@include mat-core();
-
-$primary: mat-palette($mat-indigo);
-$accent: mat-palette($mat-pink, A200, A100, A400);
-$warn: mat-palette($mat-red);
-$theme: mat-light-theme($primary, $accent, $warn);
-
-@include angular-material-theme($theme);
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
new file mode 100644
index 00000000..8624180f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
@@ -0,0 +1,14 @@
+// Material theming tools
+@import '~@angular/material/theming';
+
+// Include core Angular Material styles
+@include mat-core();
+
+// Partials
+@import 'partials/breakpoints';
+@import 'partials/forms';
+@import 'partials/general';
+@import 'partials/helpers';
+@import 'partials/icons';
+@import 'partials/normalize';
+@import 'partials/scrollbars';
diff --git a/projects/ucap-webmessenger-app/src/index.html b/projects/ucap-webmessenger-app/src/index.html
index 166a2e94..4d98163a 100644
--- a/projects/ucap-webmessenger-app/src/index.html
+++ b/projects/ucap-webmessenger-app/src/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <body class="theme-default">
     <app-root></app-root>
   </body>
 </html>
diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss
index f5b7b84e..99c13242 100644
--- a/projects/ucap-webmessenger-app/src/styles.scss
+++ b/projects/ucap-webmessenger-app/src/styles.scss
@@ -1,14 +1,4 @@
-@import '~@angular/material/theming';
-@import 'assets/scss/theme';
+@import 'assets/scss/ucap';
 
-html,
-body {
-  margin: 0;
-  height: 100%;
-}
-
-@media only screen and (max-width: 600px) {
-  html {
-    font-size: 80%;
-  }
-}
+// Import app.theme.scss
+@import 'app/app.theme';