diff --git a/angular.json b/angular.json
index 2ca10f49..3e2f6150 100644
--- a/angular.json
+++ b/angular.json
@@ -27,6 +27,9 @@
               "projects/ucap-webmessenger-app/src/favicon.ico",
               "projects/ucap-webmessenger-app/src/assets"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["projects/ucap-webmessenger-ui/src/assets/scss"]
+            },
             "styles": ["projects/ucap-webmessenger-app/src/styles.scss"],
             "scripts": [],
             "customWebpackConfig": {
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
index 0a1ba1af..20041b91 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
@@ -5,13 +5,13 @@
 @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';
+// @import 'partials/breakpoints';
+// @import 'partials/forms';
+// @import 'partials/general';
+// @import 'partials/helpers';
+// @import 'partials/icons';
+// @import 'partials/normalize';
+// @import 'partials/scrollbars';
 
 //creative
 @import 'global/default';
diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss
index 37fc523b..832b9c56 100644
--- a/projects/ucap-webmessenger-app/src/styles.scss
+++ b/projects/ucap-webmessenger-app/src/styles.scss
@@ -1,8 +1,6 @@
+@import 'ucap-ui';
+
 @import 'assets/scss/ucap';
 
 // Import app.theme.scss
 @import 'app/app.theme';
-
-.file-upload-backdrop {
-  background-color: aqua;
-}
diff --git a/projects/ucap-webmessenger-ui/ng-package.json b/projects/ucap-webmessenger-ui/ng-package.json
index 3b16d4e3..a9eb1043 100644
--- a/projects/ucap-webmessenger-ui/ng-package.json
+++ b/projects/ucap-webmessenger-ui/ng-package.json
@@ -2,6 +2,7 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/ucap-webmessenger-ui",
   "lib": {
+    "styleIncludePaths": ["./src/assets/scss"],
     "entryFile": "src/public-api.ts"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
new file mode 100644
index 00000000..0a1ba1af
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
@@ -0,0 +1,17 @@
+// 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';
+
+//creative
+@import 'global/default';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/global/_common.scss b/projects/ucap-webmessenger-ui/src/assets/scss/global/_common.scss
new file mode 100644
index 00000000..54d1153c
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/global/_common.scss
@@ -0,0 +1,53 @@
+@charset 'utf-8';
+
+$listH-row3: 120px;
+$listH-row2: 90px;
+$listH-row2-s: 70px;
+$checkbox-size: 16px;
+$presence-size: 8px;
+$thumbnail-msize: 40px;
+$bg-list-hover: #efefef;
+$bg-list-item-msg: #f0f4f6;
+
+$font-dark: #212121;
+$font-mid: #666666;
+$font-light: #848d95;
+$font-white: #ffffff;
+
+$line-basic: 1px solid #dddddd;
+$color-main: #ee278b;
+
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
+    display: block;
+    white-space: nowrap;
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+  }
+}
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+}
+@mixin visible($sh) {
+  display: $sh;
+}
+@mixin presence-status($status) {
+  @if $status == pcOn {
+    background-color: #28ad66;
+  } @else if $status == pcOut {
+    background-color: #f35b5b;
+  } @else if $status == pcOff {
+    background-color: #a29f9f;
+  } @else if $status == pcOther {
+    background-color: #f0c10a;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-ui/src/assets/scss/global/_default.scss
new file mode 100644
index 00000000..22f1ca11
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/global/_default.scss
@@ -0,0 +1,47 @@
+@charset 'utf-8';
+
+html {
+  height: 100%;
+  overflow-y: scroll;
+}
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: #333;
+  font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
+    Gulim, '굴림';
+  font-size: 13px;
+  line-height: 18px !important;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+div,
+p,
+ol,
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+iframe,
+dl,
+dt,
+dd {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+ul,
+ol {
+  list-style: none;
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_breakpoints.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_breakpoints.scss
new file mode 100644
index 00000000..306c8eb4
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
new file mode 100644
index 00000000..b558aafa
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_general.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss
new file mode 100644
index 00000000..c643d734
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_helpers.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_helpers.scss
new file mode 100644
index 00000000..8822eea8
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
new file mode 100644
index 00000000..02f7c065
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_normalize.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_normalize.scss
new file mode 100644
index 00000000..037c5d31
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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-ui/src/assets/scss/partials/_scrollbars.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_scrollbars.scss
new file mode 100644
index 00000000..cf000226
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/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/tsconfig.json b/tsconfig.json
index f79668c2..21d4c409 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,7 @@
       ],
       "@ucap-webmessenger/pi": ["projects/ucap-webmessenger-pi/src/public-api"],
       "@ucap-webmessenger/ui": ["projects/ucap-webmessenger-ui/src/public-api"],
+      "@ucap-webmessenger/ui/*": ["projects/ucap-webmessenger-ui/src/*"],
       "@ucap-webmessenger/ui-account": [
         "projects/ucap-webmessenger-ui-account/src/public-api"
       ],