diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..e89330a6
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..d4a1da70
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,47 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+/.awcache
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..1b8aa883
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,7 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": []
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..837d3440
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.autoClosingBrackets": "languageDefined",
+  "editor.trimAutoWhitespace": true,
+  "files.trimTrailingWhitespace": true,
+  "files.trimFinalNewlines": true,
+  "go.testFlags": ["-v"],
+  "go.testTimeout": "100s",
+  "prettier.singleQuote": true,
+  "debug.node.autoAttach": "on"
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000..78ac87d7
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,15 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "build:main:dev",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}
diff --git a/angular.json b/angular.json
new file mode 100644
index 00000000..3a4664d4
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,1212 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ucap-webmessenger-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-app",
+      "sourceRoot": "projects/ucap-webmessenger-app/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "outputPath": "dist/ucap-webmessenger-app",
+            "index": "projects/ucap-webmessenger-app/src/index.html",
+            "main": "projects/ucap-webmessenger-app/src/main.ts",
+            "polyfills": "projects/ucap-webmessenger-app/src/polyfills.ts",
+            "tsConfig": "projects/ucap-webmessenger-app/tsconfig.app.json",
+            "aot": false,
+            "assets": [
+              "projects/ucap-webmessenger-app/src/favicon.ico",
+              "projects/ucap-webmessenger-app/src/assets"
+            ],
+            "styles": ["projects/ucap-webmessenger-app/src/styles.scss"],
+            "scripts": [],
+            "customWebpackConfig": {
+              "path": "./config/renderer.webpack.config.js",
+              "mergeStrategies": { "externals": "replace" }
+            }
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/ucap-webmessenger-app/src/environments/environment.ts",
+                  "with": "projects/ucap-webmessenger-app/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "browserTarget": "ucap-webmessenger-app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ucap-webmessenger-app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ucap-webmessenger-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-app/src/test.ts",
+            "polyfills": "projects/ucap-webmessenger-app/src/polyfills.ts",
+            "tsConfig": "projects/ucap-webmessenger-app/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-app/karma.conf.js",
+            "assets": [
+              "projects/ucap-webmessenger-app/src/favicon.ico",
+              "projects/ucap-webmessenger-app/src/assets"
+            ],
+            "styles": ["projects/ucap-webmessenger-app/src/styles.scss"],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-app/tsconfig.app.json",
+              "projects/ucap-webmessenger-app/tsconfig.spec.json",
+              "projects/ucap-webmessenger-app/e2e/tsconfig.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "projects/ucap-webmessenger-app/e2e/protractor.conf.js",
+            "devServerTarget": "ucap-webmessenger-app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "ucap-webmessenger-app:serve:production"
+            }
+          }
+        }
+      }
+    },
+
+    "ucap-webmessenger-core": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-core",
+      "sourceRoot": "projects/ucap-webmessenger-core/src",
+      "prefix": "ucap-core",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-core/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-core/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-core/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-core/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-core/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-core/tsconfig.lib.json",
+              "projects/ucap-webmessenger-core/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-api-common": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-api-common",
+      "sourceRoot": "projects/ucap-webmessenger-api-common/src",
+      "prefix": "ucap-api-common",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-api-common/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-api-common/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-api-common/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-api-common/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-api-common/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-api-common/tsconfig.lib.json",
+              "projects/ucap-webmessenger-api-common/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-api-public": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-api-public",
+      "sourceRoot": "projects/ucap-webmessenger-api-public/src",
+      "prefix": "ucap-api-public",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-api-public/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-api-public/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-api-public/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-api-public/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-api-public/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-api-public/tsconfig.lib.json",
+              "projects/ucap-webmessenger-api-public/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-api-external": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-api-external",
+      "sourceRoot": "projects/ucap-webmessenger-api-external/src",
+      "prefix": "ucap-api-external",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-api-external/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-api-external/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-api-external/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-api-external/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-api-external/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-api-external/tsconfig.lib.json",
+              "projects/ucap-webmessenger-api-external/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-api": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-api",
+      "sourceRoot": "projects/ucap-webmessenger-api/src",
+      "prefix": "ucap-api",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-api/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-api/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-api/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-api/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-api/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-api/tsconfig.lib.json",
+              "projects/ucap-webmessenger-api/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-pi": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-pi",
+      "sourceRoot": "projects/ucap-webmessenger-pi/src",
+      "prefix": "ucap-pi",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-pi/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-pi/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-pi/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-pi/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-pi/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-pi/tsconfig.lib.json",
+              "projects/ucap-webmessenger-pi/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-ui": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui",
+      "sourceRoot": "projects/ucap-webmessenger-ui/src",
+      "prefix": "ucap-ui",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-ui-account": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-account",
+      "sourceRoot": "projects/ucap-webmessenger-ui-account/src",
+      "prefix": "ucap-account",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-account/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-account/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-account/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-account/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-account/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-account/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-account/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-ui-messenger": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-messenger",
+      "sourceRoot": "projects/ucap-webmessenger-ui-messenger/src",
+      "prefix": "ucap-messenger",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-messenger/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-messenger/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-messenger/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-messenger/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-messenger/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-messenger/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-messenger/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-ui-organization": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-organization",
+      "sourceRoot": "projects/ucap-webmessenger-ui-organization/src",
+      "prefix": "ucap-organization",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-organization/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-organization/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-organization/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-organization/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-organization/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-organization/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-organization/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-ui-profile": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-profile",
+      "sourceRoot": "projects/ucap-webmessenger-ui-profile/src",
+      "prefix": "ucap-profile",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-profile/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-profile/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-profile/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-profile/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-profile/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-profile/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-profile/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol",
+      "sourceRoot": "projects/ucap-webmessenger-protocol/src",
+      "prefix": "ucap-protocol",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-sync": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-sync",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-sync/src",
+      "prefix": "ucap-protocol-sync",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-sync/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-sync/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-sync/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-sync/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-sync/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-sync/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-sync/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-buddy": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-buddy",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-buddy/src",
+      "prefix": "ucap-protocol-buddy",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-buddy/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-buddy/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-buddy/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-buddy/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-buddy/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-buddy/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-buddy/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-group": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-group",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-group/src",
+      "prefix": "ucap-protocol-group",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-group/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-group/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-group/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-group/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-group/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-group/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-group/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-info": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-info",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-info/src",
+      "prefix": "ucap-protocol-info",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-info/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-info/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-info/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-info/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-info/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-info/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-info/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-option": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-option",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-option/src",
+      "prefix": "ucap-protocol-option",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-option/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-option/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-option/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-option/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-option/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-option/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-option/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-query": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-query",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-query/src",
+      "prefix": "ucap-protocol-query",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-query/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-query/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-query/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-query/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-query/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-query/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-query/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-service": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-service",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-service/src",
+      "prefix": "ucap-protocol-service",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-service/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-service/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-service/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-service/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-service/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-service/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-service/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-authentication": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-authentication",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-authentication/src",
+      "prefix": "ucap-protocol-authentication",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-authentication/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-authentication/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-authentication/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-authentication/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-authentication/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-authentication/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-authentication/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-status": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-status",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-status/src",
+      "prefix": "ucap-protocol-status",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-status/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-status/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-status/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-status/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-status/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-status/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-status/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-room": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-room",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-room/src",
+      "prefix": "ucap-protocol-room",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-room/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-room/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-room/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-room/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-room/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-room/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-room/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-event": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-event",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-event/src",
+      "prefix": "ucap-protocol-event",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-event/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-event/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-event/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-event/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-event/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-event/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-event/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-ucti": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-ucti",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-ucti/src",
+      "prefix": "ucap-protocol-ucti",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-ucti/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-ucti/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-ucti/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-ucti/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-ucti/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-ucti/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-ucti/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-fmc": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-fmc",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-fmc/src",
+      "prefix": "ucap-protocol-fmc",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-fmc/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-fmc/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-fmc/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-fmc/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-fmc/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-fmc/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-fmc/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-umg": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-umg",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-umg/src",
+      "prefix": "ucap-protocol-umg",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-umg/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-umg/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-umg/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-umg/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-umg/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-umg/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-umg/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-file": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-file",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-file/src",
+      "prefix": "ucap-protocol-file",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-file/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-file/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-file/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-file/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-file/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-file/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-file/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-protocol-ping": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-protocol-ping",
+      "sourceRoot": "projects/ucap-webmessenger-protocol-ping/src",
+      "prefix": "ucap-protocol-ping",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-protocol-ping/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-protocol-ping/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-protocol-ping/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-protocol-ping/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-protocol-ping/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-protocol-ping/tsconfig.lib.json",
+              "projects/ucap-webmessenger-protocol-ping/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-web-storage": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-web-storage",
+      "sourceRoot": "projects/ucap-webmessenger-web-storage/src",
+      "prefix": "ucap-web-storage",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-web-storage/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-web-storage/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-web-storage/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-web-storage/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-web-storage/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-web-storage/tsconfig.lib.json",
+              "projects/ucap-webmessenger-web-storage/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-native": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-native",
+      "sourceRoot": "projects/ucap-webmessenger-native/src",
+      "prefix": "ucap-native",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-native/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-native/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-native/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-native/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-native/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-native/tsconfig.lib.json",
+              "projects/ucap-webmessenger-native/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-native-electron": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-native-electron",
+      "sourceRoot": "projects/ucap-webmessenger-native-electron/src",
+      "prefix": "ucap-native-electron",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-native-electron/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-native-electron/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-native-electron/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-native-electron/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-native-electron/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-native-electron/tsconfig.lib.json",
+              "projects/ucap-webmessenger-native-electron/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ucap-webmessenger-web-socket": {
+      "projectType": "library",
+      "root": "projects/ucap-webmessenger-web-socket",
+      "sourceRoot": "projects/ucap-webmessenger-web-socket/src",
+      "prefix": "ucap-web-socket",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-web-socket/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-web-socket/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-web-socket/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-web-socket/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-web-socket/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-web-socket/tsconfig.lib.json",
+              "projects/ucap-webmessenger-web-socket/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ucap-webmessenger-app"
+}
diff --git a/config/enviroment.ts b/config/enviroment.ts
new file mode 100644
index 00000000..aaf4673b
--- /dev/null
+++ b/config/enviroment.ts
@@ -0,0 +1,19 @@
+import * as fs from 'fs';
+import * as Path from 'path';
+
+const projectRoot = Path.dirname(__dirname);
+const channel = process.env.NODE_ENV;
+
+const s = JSON.stringify;
+
+export function getEnviroments() {
+  return {
+    __DARWIN__: process.platform === 'darwin',
+    __WIN32__: process.platform === 'win32',
+    __LINUX__: process.platform === 'linux',
+    __DEV__: channel === 'development',
+    'process.platform': s(process.platform),
+    'process.env.NODE_ENV': s(process.env.NODE_ENV || 'development'),
+    'process.env.TEST_ENV': s(process.env.TEST_ENV)
+  };
+}
diff --git a/config/main.webpack.config.ts b/config/main.webpack.config.ts
new file mode 100644
index 00000000..5cd68bf5
--- /dev/null
+++ b/config/main.webpack.config.ts
@@ -0,0 +1,94 @@
+import * as path from 'path';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import * as webpack from 'webpack';
+import * as nodeExternals from 'webpack-node-externals';
+import { getEnviroments } from './enviroment';
+
+const enviroments = getEnviroments();
+
+export const externals = [nodeExternals()];
+// if (enviroments.__DEV__) {
+//   externals.push('devtron');
+// }
+
+const outputDir = 'dist/main';
+
+const mainConfig: webpack.Configuration = {
+  entry: { main: path.resolve(__dirname, '..', 'main/src/index') },
+  target: 'electron-main',
+  mode: enviroments.__DEV__ ? 'development' : 'production',
+  devtool: 'source-map',
+  optimization: {
+    noEmitOnErrors: true
+  },
+  externals,
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '..', outputDir)
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        include: [
+          path.resolve(__dirname, '..', 'main/src'),
+          path.resolve(__dirname, '..', 'projects')
+        ],
+        use: [
+          {
+            loader: 'awesome-typescript-loader',
+            options: {
+              useCache: true,
+              configFileName: path.resolve(
+                __dirname,
+                '..',
+                'main/tsconfig.main.json'
+              )
+            }
+          }
+        ],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.node$/,
+        loader: 'awesome-node-loader',
+        options: {
+          name: '[name].[ext]'
+        }
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin({ verbose: false }),
+    // This saves us a bunch of bytes by pruning locales (which we don't use)
+    // from moment.
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.DefinePlugin(
+      Object.assign({}, enviroments, {
+        __PROCESS_KIND__: JSON.stringify('main')
+      })
+    )
+  ],
+  resolve: {
+    extensions: ['.js', '.ts'],
+    alias: {
+      '@ucap-webmessenger/native': path.resolve(
+        __dirname,
+        '..',
+        'projects/ucap-webmessenger-native/src/public-api'
+      ),
+      '@ucap-webmessenger/native-electron': path.resolve(
+        __dirname,
+        '..',
+        'projects/ucap-webmessenger-native-electron/src/public-api'
+      )
+    },
+    modules: [path.resolve(__dirname, '..', 'node_modules/')]
+  },
+  node: {
+    __dirname: false,
+    __filename: false
+  }
+};
+
+export default [mainConfig];
diff --git a/config/renderer.webpack.config.js b/config/renderer.webpack.config.js
new file mode 100644
index 00000000..89ca4e14
--- /dev/null
+++ b/config/renderer.webpack.config.js
@@ -0,0 +1,7 @@
+module.exports = (config, options) => {
+  const PRODUCTION = process.env.NODE_ENV === 'production';
+
+  config.target = 'electron-renderer';
+
+  return config;
+};
diff --git a/config/tsconfig.webpack.json b/config/tsconfig.webpack.json
new file mode 100644
index 00000000..0e7afc68
--- /dev/null
+++ b/config/tsconfig.webpack.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}
diff --git a/electron-builder.json b/electron-builder.json
new file mode 100644
index 00000000..41926e19
--- /dev/null
+++ b/electron-builder.json
@@ -0,0 +1,40 @@
+{
+  "productName": "WooriTalk",
+  "appId": "lgcns.ucap.messenger",
+  "asar": true,
+  "protocols": {
+    "name": "WooriTalk",
+    "schemes": ["WooriTalk"]
+  },
+  "publish": {
+    "provider": "generic",
+    "url": "http://localhost:8099/client-updates/"
+  },
+  "mac": {
+    "target": ["default"],
+    "icon": "./resources/installer/woori.icns"
+  },
+  "dmg": {
+    "title": "WooriTalk",
+    "icon": "./resources/installer/woori.icns"
+  },
+  "win": {
+    "target": ["zip", "nsis"],
+    "icon": "./resources/installer/woori_256x256.ico"
+  },
+  "linux": {
+    "target": ["AppImage", "deb", "rpm", "zip", "tar.gz"],
+    "icon": "./resources/linuxicon"
+  },
+  "nsis": {
+    "oneClick": false,
+    "allowToChangeInstallationDirectory": true,
+    "perMachine": true,
+    "differentialPackage": true
+  },
+  "directories": {
+    "buildResources": "resources/installer/",
+    "output": "dist-electron/",
+    "app": "."
+  }
+}
diff --git a/main/resources/image/128_128.png b/main/resources/image/128_128.png
new file mode 100644
index 00000000..197dd6fd
Binary files /dev/null and b/main/resources/image/128_128.png differ
diff --git a/main/resources/image/16_16.png b/main/resources/image/16_16.png
new file mode 100644
index 00000000..9c4e5eef
Binary files /dev/null and b/main/resources/image/16_16.png differ
diff --git a/main/resources/image/256_256.png b/main/resources/image/256_256.png
new file mode 100644
index 00000000..532e389d
Binary files /dev/null and b/main/resources/image/256_256.png differ
diff --git a/main/resources/image/32_32.png b/main/resources/image/32_32.png
new file mode 100644
index 00000000..4d956fad
Binary files /dev/null and b/main/resources/image/32_32.png differ
diff --git a/main/resources/image/48_48.png b/main/resources/image/48_48.png
new file mode 100644
index 00000000..9e1330da
Binary files /dev/null and b/main/resources/image/48_48.png differ
diff --git a/main/resources/image/64_64.png b/main/resources/image/64_64.png
new file mode 100644
index 00000000..caa67f2c
Binary files /dev/null and b/main/resources/image/64_64.png differ
diff --git a/main/resources/image/ico_64_64.png b/main/resources/image/ico_64_64.png
new file mode 100644
index 00000000..adbc1dd4
Binary files /dev/null and b/main/resources/image/ico_64_64.png differ
diff --git a/main/resources/image/ico_64x64.ico b/main/resources/image/ico_64x64.ico
new file mode 100644
index 00000000..d62de46c
Binary files /dev/null and b/main/resources/image/ico_64x64.ico differ
diff --git a/main/resources/image/ico_64x64.png b/main/resources/image/ico_64x64.png
new file mode 100644
index 00000000..adbc1dd4
Binary files /dev/null and b/main/resources/image/ico_64x64.png differ
diff --git a/main/resources/image/ico_64x64_r.ico b/main/resources/image/ico_64x64_r.ico
new file mode 100644
index 00000000..94ece2ba
Binary files /dev/null and b/main/resources/image/ico_64x64_r.ico differ
diff --git a/main/resources/image/ico_64x64_r.png b/main/resources/image/ico_64x64_r.png
new file mode 100644
index 00000000..caa67f2c
Binary files /dev/null and b/main/resources/image/ico_64x64_r.png differ
diff --git a/main/resources/installer/woori.icns b/main/resources/installer/woori.icns
new file mode 100644
index 00000000..aa6a8e78
Binary files /dev/null and b/main/resources/installer/woori.icns differ
diff --git a/main/resources/installer/woori.ico b/main/resources/installer/woori.ico
new file mode 100644
index 00000000..d997cca0
Binary files /dev/null and b/main/resources/installer/woori.ico differ
diff --git a/main/resources/installer/woori_256x256.ico b/main/resources/installer/woori_256x256.ico
new file mode 100644
index 00000000..0c7861df
Binary files /dev/null and b/main/resources/installer/woori_256x256.ico differ
diff --git a/main/resources/installer/woori_256x256.png b/main/resources/installer/woori_256x256.png
new file mode 100644
index 00000000..73418fbe
Binary files /dev/null and b/main/resources/installer/woori_256x256.png differ
diff --git a/main/resources/linuxicon/256x256.png b/main/resources/linuxicon/256x256.png
new file mode 100644
index 00000000..73418fbe
Binary files /dev/null and b/main/resources/linuxicon/256x256.png differ
diff --git a/main/src/app/AppWindow.ts b/main/src/app/AppWindow.ts
new file mode 100644
index 00000000..3c0231cd
--- /dev/null
+++ b/main/src/app/AppWindow.ts
@@ -0,0 +1,209 @@
+import * as path from 'path';
+import * as url from 'url';
+
+import { app, BrowserWindow, screen, ipcMain, IpcMainEvent } from 'electron';
+import windowStateKeeper from 'electron-window-state';
+import { EventEmitter } from 'events';
+
+import { now } from '../util/now';
+
+export class AppWindow {
+  private window: BrowserWindow | null = null;
+
+  private eventEmitter = new EventEmitter();
+
+  private _loadTime: number | null = null;
+  private _rendererReadyTime: number | null = null;
+
+  private minWidth = 960;
+  private minHeight = 660;
+
+  public constructor() {
+    const savedWindowState = windowStateKeeper({
+      defaultWidth: this.minWidth,
+      defaultHeight: this.minHeight
+    });
+
+    const windowOptions: Electron.BrowserWindowConstructorOptions = {
+      x: savedWindowState.x,
+      y: savedWindowState.y,
+      width: savedWindowState.width,
+      height: savedWindowState.height,
+      minWidth: this.minWidth,
+      minHeight: this.minHeight,
+      // This fixes subpixel aliasing on Windows
+      // See https://github.com/atom/atom/commit/683bef5b9d133cb194b476938c77cc07fd05b972
+      backgroundColor: '#fff',
+      webPreferences: {
+        // Disable auxclick event
+        // See https://developers.google.com/web/updates/2016/10/auxclick
+        disableBlinkFeatures: 'Auxclick',
+        // Enable, among other things, the ResizeObserver
+        experimentalFeatures: true,
+        nodeIntegration: true
+      },
+      acceptFirstMouse: true
+    };
+
+    if (__DARWIN__) {
+      windowOptions.titleBarStyle = 'hidden';
+    } else if (__WIN32__) {
+      // windowOptions.frame = false;
+    } else if (__LINUX__) {
+      windowOptions.icon = path.join(__dirname, 'static', 'icon-logo.png');
+    }
+
+    this.window = new BrowserWindow(windowOptions);
+    savedWindowState.manage(this.window);
+
+    let quitting = false;
+    app.on('before-quit', () => {
+      quitting = true;
+    });
+
+    ipcMain.on('will-quit', (event: IpcMainEvent) => {
+      quitting = true;
+      event.returnValue = true;
+    });
+
+    // on macOS, when the user closes the window we really just hide it. This
+    // lets us activate quickly and keep all our interesting logic in the
+    // renderer.
+    if (__DARWIN__) {
+      this.window.on('close', e => {
+        if (!quitting) {
+          e.preventDefault();
+        }
+      });
+    }
+
+    if (__WIN32__) {
+      // workaround for known issue with fullscreen-ing the app and restoring
+      // is that some Chromium API reports the incorrect bounds, so that it
+      // will leave a small space at the top of the screen on every other
+      // maximize
+      //
+      // adapted from https://github.com/electron/electron/issues/12971#issuecomment-403956396
+      //
+      // can be tidied up once https://github.com/electron/electron/issues/12971
+      // has been confirmed as resolved
+      this.window.once('ready-to-show', () => {
+        this.window.on('unmaximize', () => {
+          setTimeout(() => {
+            const bounds = this.window.getBounds();
+            bounds.width += 1;
+            this.window.setBounds(bounds);
+            bounds.width -= 1;
+            this.window.setBounds(bounds);
+          }, 5);
+        });
+      });
+    }
+  }
+
+  public load(): void {
+    let startLoad = 0;
+
+    if (__DEV__) {
+      this.window.loadURL('http://localhost:4200');
+    } else {
+      this.window.loadURL(
+        url.format({
+          pathname: path.join(
+            __dirname,
+            '..',
+            'ucap-webmessenger-app/index.html'
+          ),
+          protocol: 'file:',
+          slashes: true
+        })
+      );
+    }
+
+    this.window.webContents.once('did-start-loading', () => {
+      this._rendererReadyTime = null;
+      this._loadTime = null;
+
+      startLoad = now();
+    });
+
+    this.window.webContents.once('did-finish-load', () => {
+      if (process.env.NODE_ENV === 'development') {
+        this.window.webContents.openDevTools();
+      }
+
+      this._loadTime = now() - startLoad;
+    });
+
+    this.window.webContents.on('did-finish-load', () => {
+      this.window.webContents.setVisualZoomLevelLimits(1, 1);
+    });
+
+    this.window.webContents.on('did-fail-load', () => {
+      this.window.webContents.openDevTools();
+      this.window.show();
+    });
+  }
+
+  /** Is the page loaded and has the renderer signalled it's ready? */
+  private get rendererLoaded(): boolean {
+    return !!this.loadTime && !!this.rendererReadyTime;
+  }
+
+  public onClose(fn: () => void) {
+    this.window.on('closed', fn);
+  }
+
+  /**
+   * Register a function to call when the window is done loading. At that point
+   * the page has loaded and the renderer has signalled that it is ready.
+   */
+  public onDidLoad(fn: () => void): EventEmitter {
+    return this.eventEmitter.on('did-load', fn);
+  }
+
+  public isMinimized() {
+    return this.window.isMinimized();
+  }
+
+  /** Is the window currently visible? */
+  public isVisible() {
+    return this.window.isVisible();
+  }
+
+  public restore() {
+    this.window.restore();
+  }
+
+  public focus() {
+    this.window.focus();
+  }
+
+  /** Show the window. */
+  public show() {
+    this.window.show();
+  }
+
+  /**
+   * Get the time (in milliseconds) spent loading the page.
+   *
+   * This will be `null` until `onDidLoad` is called.
+   */
+  public get loadTime(): number | null {
+    return this._loadTime;
+  }
+
+  /**
+   * Get the time (in milliseconds) elapsed from the renderer being loaded to it
+   * signaling it was ready.
+   *
+   * This will be `null` until `onDidLoad` is called.
+   */
+  public get rendererReadyTime(): number | null {
+    return this._rendererReadyTime;
+  }
+
+  public destroy() {
+    this.window.destroy();
+  }
+}
diff --git a/main/src/crash/CrashWindow.ts b/main/src/crash/CrashWindow.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/main/src/crash/show-uncaught-exception.ts b/main/src/crash/show-uncaught-exception.ts
new file mode 100644
index 00000000..a4c7b2ec
--- /dev/null
+++ b/main/src/crash/show-uncaught-exception.ts
@@ -0,0 +1 @@
+export function showUncaughtException(isLaunchError: boolean, error: Error) {}
diff --git a/main/src/global.d.ts b/main/src/global.d.ts
new file mode 100644
index 00000000..bf652bfe
--- /dev/null
+++ b/main/src/global.d.ts
@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+/** Is the app running in dev mode? */
+declare const __DEV__: boolean;
+
+/** Is the app being built to run on Darwin? */
+declare const __DARWIN__: boolean;
+
+/** Is the app being built to run on Win32? */
+declare const __WIN32__: boolean;
+
+/** Is the app being built to run on Linux? */
+declare const __LINUX__: boolean;
+
+/**
+ * The currently executing process kind, this is specific to desktop
+ * and identifies the processes that we have.
+ */
+declare const __PROCESS_KIND__: 'main' | 'ui';
diff --git a/main/src/index.ts b/main/src/index.ts
new file mode 100644
index 00000000..9f0f5271
--- /dev/null
+++ b/main/src/index.ts
@@ -0,0 +1,148 @@
+import { app, ipcMain, IpcMainEvent } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+
+import { AppWindow } from './app/AppWindow';
+import { now } from './util/now';
+import { showUncaughtException } from './crash/show-uncaught-exception';
+import { Channel } from '@ucap-webmessenger/native-electron';
+
+let appWindow: AppWindow | null = null;
+
+const launchTime = now();
+let readyTime: number | null = null;
+
+type OnDidLoadFn = (window: AppWindow) => void;
+let onDidLoadFns: Array<OnDidLoadFn> | null = [];
+
+let preventQuit = false;
+function handleUncaughtException(error: Error) {
+  preventQuit = true;
+
+  // If we haven't got a window we'll assume it's because
+  // we've just launched and haven't created it yet.
+  // It could also be because we're encountering an unhandled
+  // exception on shutdown but that's less likely and since
+  // this only affects the presentation of the crash dialog
+  // it's a safe assumption to make.
+  const isLaunchError = appWindow === null;
+
+  if (appWindow) {
+    appWindow.destroy();
+    appWindow = null;
+  }
+
+  showUncaughtException(isLaunchError, error);
+}
+
+function getUptimeInSeconds() {
+  return (now() - launchTime) / 1000;
+}
+
+process.on('uncaughtException', (error: Error) => {
+  // error = withSourceMappedStack(error);
+  // reportError(error, getExtraErrorContext());
+  handleUncaughtException(error);
+});
+
+let isDuplicateInstance = false;
+const gotSingleInstanceLock = app.requestSingleInstanceLock();
+isDuplicateInstance = !gotSingleInstanceLock;
+
+app.on('second-instance', (event, args, workingDirectory) => {
+  // Someone tried to run a second instance, we should focus our window.
+  if (appWindow) {
+    if (appWindow.isMinimized()) {
+      appWindow.restore();
+    }
+
+    if (!appWindow.isVisible()) {
+      appWindow.show();
+    }
+
+    appWindow.focus();
+  }
+});
+
+if (isDuplicateInstance) {
+  app.quit();
+}
+
+function createWindow() {
+  const window = new AppWindow();
+
+  window.onClose(() => {
+    appWindow = null;
+    if (!__DARWIN__ && !preventQuit) {
+      app.quit();
+    }
+  });
+
+  window.onDidLoad(() => {
+    window.show();
+
+    const fns = onDidLoadFns;
+    onDidLoadFns = null;
+    for (const fn of fns) {
+      fn(window);
+    }
+  });
+
+  window.load();
+
+  appWindow = window;
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', () => {
+  if (isDuplicateInstance) {
+    return;
+  }
+
+  readyTime = now() - launchTime;
+
+  createWindow();
+
+  ipcMain.on('uncaught-exception', (event: IpcMainEvent, error: Error) => {
+    handleUncaughtException(error);
+  });
+
+  ipcMain.on(
+    'send-error-report',
+    (
+      event: IpcMainEvent,
+      { error, extra }: { error: Error; extra: { [key: string]: string } }
+    ) => {}
+  );
+});
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  onDidLoad(window => {
+    window.show();
+  });
+});
+
+function onDidLoad(fn: OnDidLoadFn) {
+  if (onDidLoadFns) {
+    onDidLoadFns.push(fn);
+  } else {
+    if (appWindow) {
+      fn(appWindow);
+    }
+  }
+}
+
+ipcMain.on(Channel.checkForUpdates, (event: IpcMainEvent, ...args: any[]) => {
+  event.returnValue = false;
+});
diff --git a/main/src/lib/storage.ts b/main/src/lib/storage.ts
new file mode 100644
index 00000000..f39c1095
--- /dev/null
+++ b/main/src/lib/storage.ts
@@ -0,0 +1,99 @@
+import Store from 'electron-store';
+
+const STORE_KEY_AUTORUN = 'options.autoRun';
+const STORE_KEY_AUTOLOGIN = 'options.autoLogin';
+const STORE_KEY_STARTUPHIDEWINDOW = 'options.startupHideWindow';
+const STORE_KEY_LOGINCOMPANY = 'login.loginCompany';
+const STORE_KEY_LOGINID = 'login.loginId';
+const STORE_KEY_LOGINPW = 'login.loginPw';
+
+export class Storage extends Store<any> {
+  constructor() {
+    super({
+      schema: {
+        options: {
+          type: 'object',
+          properties: {
+            autoRun: {
+              type: 'boolean'
+            },
+            autoLogin: {
+              type: 'boolean'
+            },
+            startupHideWindow: {
+              type: 'boolean'
+            }
+          },
+          default: {
+            autoRun: false,
+            autoLogin: false,
+            startupHideWindow: false
+          }
+        },
+        login: {
+          type: 'object',
+          properties: {
+            loginCompany: {
+              type: 'string'
+            },
+            loginId: {
+              type: 'string'
+            },
+            loginPw: {
+              type: 'string'
+            }
+          },
+          default: {
+            loginCompany: '',
+            loginId: '',
+            loginPw: ''
+          }
+        }
+      },
+      encryptionKey: 'ucap',
+      fileExtension: 'dat'
+    });
+  }
+
+  get autoRun(): boolean {
+    return this.get(STORE_KEY_AUTORUN, false);
+  }
+  set autoRun(autoRun: boolean) {
+    this.set(STORE_KEY_AUTORUN, autoRun);
+  }
+
+  get autoLogin(): boolean {
+    return this.get(STORE_KEY_AUTOLOGIN, false);
+  }
+  set autoLogin(autoLogin: boolean) {
+    this.set(STORE_KEY_AUTOLOGIN, autoLogin);
+  }
+
+  get startupHideWindow(): boolean {
+    return this.get(STORE_KEY_STARTUPHIDEWINDOW, false);
+  }
+  set startupHideWindow(startupHideWindow: boolean) {
+    this.set(STORE_KEY_STARTUPHIDEWINDOW, startupHideWindow);
+  }
+
+  get loginCompany(): string {
+    return this.get(STORE_KEY_LOGINCOMPANY, false);
+  }
+  set loginCompany(loginCompany: string) {
+    this.set(STORE_KEY_LOGINCOMPANY, loginCompany);
+  }
+
+  get loginId(): string {
+    return this.get(STORE_KEY_LOGINID, false);
+  }
+  set loginId(loginId: string) {
+    this.set(STORE_KEY_LOGINID, loginId);
+  }
+
+  get loginPw(): string {
+    return this.get(STORE_KEY_LOGINPW, false);
+  }
+  set loginPw(loginPw: string) {
+    this.set(STORE_KEY_LOGINPW, loginPw);
+  }
+}
diff --git a/main/src/util/now.ts b/main/src/util/now.ts
new file mode 100644
index 00000000..01e8a334
--- /dev/null
+++ b/main/src/util/now.ts
@@ -0,0 +1,4 @@
+export function now(): number {
+  const time = process.hrtime();
+  return time[0] * 1000 + time[1] / 1000000;
+}
diff --git a/main/tsconfig.main.json b/main/tsconfig.main.json
new file mode 100644
index 00000000..f2a2e501
--- /dev/null
+++ b/main/tsconfig.main.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "../dist/main",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "target": "es5",
+    "types": ["node"],
+    "lib": ["es2017", "es2016", "es2015", "dom"],
+    "paths": {
+      "@ucap-webmessenger/native": [
+        "../projects/ucap-webmessenger-native/src/public-api"
+      ],
+      "@ucap-webmessenger/native-electron": [
+        "../projects/ucap-webmessenger-native-electron/src/public-api"
+      ]
+    }
+  },
+
+  "exclude": ["../node_modules", "**/*.spec.ts"]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..b2a02e66
--- /dev/null
+++ b/package.json
@@ -0,0 +1,104 @@
+{
+  "name": "ucap-webmessenger",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "npm-run-all -p start:renderer start:main",
+    "start:main": "wait-on http-get://localhost:4200/ && npm run build:main:dev && electron --nolazy --inspect-brk=9229 .",
+    "start:renderer": "ng serve",
+    "start:production": "npm run build:renderer && npm run build:main:prod && electron --nolazy --inspect-brk=9229 .",
+    "build:renderer": "cross-env NODE_ENV=production ng build --base-href ./",
+    "build:main:dev": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts",
+    "build:main:prod": "cross-env NODE_ENV=production TS_NODE_PROJECT='./config/tsconfig.webpack.json' NODE_OPTIONS='--max_old_space_size=4096' parallel-webpack --config=config/main.webpack.config.ts",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "tslib": "^1.10.0"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^8.2.0",
+    "@angular-devkit/build-angular": "~0.803.2",
+    "@angular-devkit/build-ng-packagr": "~0.803.2",
+    "@angular/animations": "~8.2.4",
+    "@angular/cdk": "^8.1.4",
+    "@angular/cli": "~8.3.2",
+    "@angular/common": "~8.2.4",
+    "@angular/compiler": "~8.2.4",
+    "@angular/compiler-cli": "~8.2.4",
+    "@angular/core": "~8.2.4",
+    "@angular/flex-layout": "^8.0.0-beta.27",
+    "@angular/forms": "~8.2.4",
+    "@angular/language-service": "~8.2.4",
+    "@angular/material": "^8.1.4",
+    "@angular/material-moment-adapter": "^8.1.4",
+    "@angular/platform-browser": "~8.2.4",
+    "@angular/platform-browser-dynamic": "~8.2.4",
+    "@angular/router": "~8.2.4",
+    "@ngrx/effects": "^8.3.0",
+    "@ngrx/router-store": "^8.3.0",
+    "@ngrx/store": "^8.3.0",
+    "@ngrx/store-devtools": "^8.3.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@types/crypto-js": "^3.1.43",
+    "@types/detect-browser": "^4.0.0",
+    "@types/extract-text-webpack-plugin": "^3.0.4",
+    "@types/filesize": "^4.1.0",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.7.3",
+    "@types/semver": "^6.0.2",
+    "@types/webpack": "^4.39.1",
+    "@types/webpack-merge": "^4.1.5",
+    "@types/webpack-node-externals": "^1.6.3",
+    "awesome-node-loader": "^1.1.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "codelyzer": "^5.0.0",
+    "concurrently": "^4.1.2",
+    "crypto-js": "^3.1.9-1",
+    "cross-env": "^5.2.1",
+    "detect-browser": "^4.6.0",
+    "devtron": "^1.4.0",
+    "electron": "^6.0.7",
+    "electron-builder": "^21.2.0",
+    "electron-debug": "^3.0.1",
+    "electron-devtools-installer": "^2.2.4",
+    "electron-log": "^3.0.7",
+    "electron-reload": "^1.5.0",
+    "electron-store": "^4.0.0",
+    "electron-window-state": "^5.0.3",
+    "filesize": "^4.1.2",
+    "hammerjs": "^2.0.8",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "moment": "^2.24.0",
+    "ng-packagr": "^5.4.0",
+    "ngrx-store-freeze": "^0.2.4",
+    "ngx-perfect-scrollbar": "^8.0.0",
+    "npm-run-all": "^4.1.5",
+    "parallel-webpack": "^2.4.0",
+    "protractor": "~5.4.0",
+    "queueing-subject": "^0.3.4",
+    "rxjs": "^6.5.2",
+    "semver": "^6.3.0",
+    "ts-node": "~7.0.0",
+    "tsickle": "^0.37.0",
+    "tslib": "^1.10.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.5.3",
+    "wait-on": "^3.3.0",
+    "webpack": "4.39.2",
+    "webpack-cli": "^3.3.7",
+    "webpack-node-externals": "^1.7.2",
+    "zone.js": "~0.9.1"
+  },
+  "main": "./dist/main/main.js"
+}
diff --git a/projects/ucap-webmessenger-api-common/README.md b/projects/ucap-webmessenger-api-common/README.md
new file mode 100644
index 00000000..a01a565e
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerApiCommon
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-api-common` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-api-common`.
+> Note: Don't forget to add `--project ucap-webmessenger-api-common` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-api-common` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-api-common`, go to the dist folder `cd dist/ucap-webmessenger-api-common` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-api-common` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-api-common/karma.conf.js b/projects/ucap-webmessenger-api-common/karma.conf.js
new file mode 100644
index 00000000..17c6fbbb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-api-common'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-api-common/ng-package.json b/projects/ucap-webmessenger-api-common/ng-package.json
new file mode 100644
index 00000000..ac20a112
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-api-common",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-api-common/package.json b/projects/ucap-webmessenger-api-common/package.json
new file mode 100644
index 00000000..1cdc4b6b
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/api-common",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-profile-save.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-profile-save.ts
new file mode 100644
index 00000000..e66efc87
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/file-profile-save.ts
@@ -0,0 +1,16 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface FileProfileSaveRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  file?: File;
+  intro?: string;
+  initProfileImage?: boolean;
+}
+
+export interface FileProfileSaveResponse extends APIResponse {
+  ProfileURL?: string;
+  ProfileSubDir?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-download.ts
new file mode 100644
index 00000000..96398582
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-download.ts
@@ -0,0 +1,9 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest } from '@ucap-webmessenger/api';
+
+export interface FileTalkDownloadRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  attachmentsSeq?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-save.ts
new file mode 100644
index 00000000..8a10f9db
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-save.ts
@@ -0,0 +1,31 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface FileTalkSaveRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  file?: File;
+  fileName?: string;
+  thumb?: File;
+  voice?: boolean;
+  voiceTime?: string;
+  roomId?: string;
+  type?: string;
+}
+
+export interface FileTalkSaveResponse extends APIResponse {
+  RoomID?: string;
+  FileName?: string;
+  FileExt?: string;
+  FileType?: string;
+  ThumbURL?: string;
+  AttSEQ?: string;
+  AttSize?: string;
+  AttRegDate?: string;
+  ImageWidth?: string;
+  ImageHeight?: string;
+  CompanyCode?: string;
+  VoiceTime?: string;
+  SynapKey?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-share.ts b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-share.ts
new file mode 100644
index 00000000..8d5d3c82
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/file-talk-share.ts
@@ -0,0 +1,24 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface FileTalkShareRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  attachmentsSeq?: string;
+  roomId?: string;
+  synapKey?: string;
+}
+
+export interface FileTalkShareResponse extends APIResponse {
+  RoomID?: string;
+  FileName?: string;
+  FileExt?: string;
+  FileType?: string;
+  ThumbURL?: string;
+  AttSEQ?: string;
+  AttSize?: string;
+  AttRegDate?: string;
+  CompanyCode?: string;
+  SynapKey?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-download.ts
new file mode 100644
index 00000000..633c413f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-download.ts
@@ -0,0 +1,15 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface MassTalkDownloadRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  eventMassSeq?: string;
+}
+
+export interface MassTalkDownloadResponse extends APIResponse {
+  Content?: string;
+  UserName?: string;
+  RegDate?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-save.ts
new file mode 100644
index 00000000..35882482
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/mass-talk-save.ts
@@ -0,0 +1,17 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface MassTalkSaveRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  content?: string;
+  roomId?: string;
+}
+
+export interface MassTalkSaveResponse extends APIResponse {
+  EventMassSEQ?: string;
+  RoomID?: string;
+  RegDate?: string;
+  Content?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-download.ts
new file mode 100644
index 00000000..764884c2
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-download.ts
@@ -0,0 +1,17 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface TransMassTalkDownloadRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  eventTransSeq?: string;
+}
+
+export interface TransMassTalkDownloadResponse extends APIResponse {
+  Original?: string;
+  Translation?: string;
+  Locale?: string;
+  UserName?: string;
+  RegDate?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-save.ts
new file mode 100644
index 00000000..03136ef0
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/trans-mass-talk-save.ts
@@ -0,0 +1,21 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface TransMassTalkSaveRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  original?: string;
+  translation?: string;
+  roomId?: string;
+  locale: string;
+}
+
+export interface TransMassTalkSaveResponse extends APIResponse {
+  EventTransSEQ?: string;
+  RoomID?: string;
+  RegDate?: string;
+  Locale?: string;
+  Original?: string;
+  Translation?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/translation-req.ts b/projects/ucap-webmessenger-api-common/src/lib/models/translation-req.ts
new file mode 100644
index 00000000..c31b9809
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/translation-req.ts
@@ -0,0 +1,18 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface TranslationReqRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  original: string;
+  srcLocale: string;
+  destLocale: string;
+}
+
+export interface TranslationReqResponse extends APIResponse {
+  SrcLocale?: string;
+  DestLocale?: string;
+  Original?: string;
+  Translation?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/models/translation-save.ts b/projects/ucap-webmessenger-api-common/src/lib/models/translation-save.ts
new file mode 100644
index 00000000..43843783
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/models/translation-save.ts
@@ -0,0 +1,22 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface TranslationSaveRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  roomId?: string;
+  original?: string;
+  srcLocale: string;
+  destLocale: string;
+}
+
+export interface TranslationSaveResponse extends APIResponse {
+  EventTransSeq?: string;
+  RoomID?: string;
+  RegDate?: string;
+  SrcLocale?: string;
+  DestLocale?: string;
+  Original?: string;
+  Translation?: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.spec.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.spec.ts
new file mode 100644
index 00000000..b229df4d
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommonApiService } from './common-api.service';
+
+describe('CommonApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: CommonApiService = TestBed.get(CommonApiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
new file mode 100644
index 00000000..20081b47
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
@@ -0,0 +1,227 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { _MODULE_CONFIG } from '../types/token';
+import { ModuleConfig } from '../types/module-config';
+import {
+  FileProfileSaveRequest,
+  FileProfileSaveResponse
+} from '../models/file-profile-save';
+import { FileTalkDownloadRequest } from '../models/file-talk-download';
+import {
+  FileTalkSaveRequest,
+  FileTalkSaveResponse
+} from '../models/file-talk-save';
+import {
+  FileTalkShareRequest,
+  FileTalkShareResponse
+} from '../models/file-talk-share';
+import {
+  MassTalkDownloadRequest,
+  MassTalkDownloadResponse
+} from '../models/mass-talk-download';
+import {
+  MassTalkSaveRequest,
+  MassTalkSaveResponse
+} from '../models/mass-talk-save';
+import {
+  TransMassTalkDownloadRequest,
+  TransMassTalkDownloadResponse
+} from '../models/trans-mass-talk-download';
+import {
+  TransMassTalkSaveRequest,
+  TransMassTalkSaveResponse
+} from '../models/trans-mass-talk-save';
+import {
+  TranslationReqRequest,
+  TranslationReqResponse
+} from '../models/translation-req';
+import {
+  TranslationSaveRequest,
+  TranslationSaveResponse
+} from '../models/translation-save';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommonApiService {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private httpClient: HttpClient
+  ) {}
+
+  public fileProfileSave(
+    req: FileProfileSaveRequest
+  ): Observable<FileProfileSaveResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.fileProfileSave,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as FileProfileSaveResponse;
+        })
+      );
+  }
+
+  public fileTalkDownload(req: FileTalkDownloadRequest): Observable<Blob> {
+    return this.httpClient.post<Blob>(
+      this.moduleConfig.urls.fileTalkDownload,
+      { responseType: 'blob' },
+      {
+        params: {}
+      }
+    );
+  }
+
+  public fileTalkSave(
+    req: FileTalkSaveRequest
+  ): Observable<FileTalkSaveResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.fileTalkSave,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as FileTalkSaveResponse;
+        })
+      );
+  }
+
+  public fileTalkShare(
+    req: FileTalkShareRequest
+  ): Observable<FileTalkShareResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.fileTalkShare,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as FileTalkShareResponse;
+        })
+      );
+  }
+
+  public massTalkDownload(
+    req: MassTalkDownloadRequest
+  ): Observable<MassTalkDownloadResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.massTalkDownload,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as MassTalkDownloadResponse;
+        })
+      );
+  }
+
+  public massTalkSave(
+    req: MassTalkSaveRequest
+  ): Observable<MassTalkSaveResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.massTalkSave,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as MassTalkSaveResponse;
+        })
+      );
+  }
+
+  public transMassTalkDownload(
+    req: TransMassTalkDownloadRequest
+  ): Observable<TransMassTalkDownloadResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.transMassTalkDownload,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as TransMassTalkDownloadResponse;
+        })
+      );
+  }
+
+  public transMassTalkSave(
+    req: TransMassTalkSaveRequest
+  ): Observable<TransMassTalkSaveResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.transMassTalkSave,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as TransMassTalkSaveResponse;
+        })
+      );
+  }
+
+  public translationReq(
+    req: TranslationReqRequest
+  ): Observable<TranslationReqResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.translationReq,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as TranslationReqResponse;
+        })
+      );
+  }
+
+  public translationSave(
+    req: TranslationSaveRequest
+  ): Observable<TranslationSaveResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.translationSave,
+        {},
+        {
+          params: {}
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as TranslationSaveResponse;
+        })
+      );
+  }
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
new file mode 100644
index 00000000..9f432080
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
@@ -0,0 +1,14 @@
+export interface ModuleConfig {
+  urls: {
+    fileProfileSave: string;
+    fileTalkDownload: string;
+    fileTalkSave: string;
+    fileTalkShare: string;
+    massTalkDownload: string;
+    massTalkSave: string;
+    transMassTalkDownload: string;
+    transMassTalkSave: string;
+    translationReq: string;
+    translationSave: string;
+  };
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/types/token.ts b/projects/ucap-webmessenger-api-common/src/lib/types/token.ts
new file mode 100644
index 00000000..9a4e6314
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/types/token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const _MODULE_CONFIG = new InjectionToken(
+  '@ucap-webmessenger/api-common config of module'
+);
diff --git a/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts b/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
new file mode 100644
index 00000000..3e3baffb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { _MODULE_CONFIG } from './types/token';
+
+import { CommonApiService } from './services/common-api.service';
+import { ModuleConfig } from './types/module-config';
+
+const SERVICES = [CommonApiService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapCommonApiModule {
+  public static forRoot(
+    config: ModuleConfig
+  ): ModuleWithProviders<UCapCommonApiModule> {
+    return {
+      ngModule: UCapCommonApiModule,
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-api-common/src/public-api.ts b/projects/ucap-webmessenger-api-common/src/public-api.ts
new file mode 100644
index 00000000..9398e8a3
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/public-api.ts
@@ -0,0 +1,20 @@
+/*
+ * Public API Surface of ucap-webmessenger-api-common
+ */
+
+export * from './lib/types/module-config';
+
+export * from './lib/models/file-profile-save';
+export * from './lib/models/file-talk-download';
+export * from './lib/models/file-talk-save';
+export * from './lib/models/file-talk-share';
+export * from './lib/models/mass-talk-download';
+export * from './lib/models/mass-talk-save';
+export * from './lib/models/trans-mass-talk-download';
+export * from './lib/models/trans-mass-talk-save';
+export * from './lib/models/translation-req';
+export * from './lib/models/translation-save';
+
+export * from './lib/services/common-api.service';
+
+export * from './lib/ucap-common-api.module';
diff --git a/projects/ucap-webmessenger-api-common/src/test.ts b/projects/ucap-webmessenger-api-common/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-api-common/tsconfig.lib.json b/projects/ucap-webmessenger-api-common/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-common/tsconfig.spec.json b/projects/ucap-webmessenger-api-common/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-common/tslint.json b/projects/ucap-webmessenger-api-common/tslint.json
new file mode 100644
index 00000000..78122a82
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapApiCommon",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-api-common",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-api-external/README.md b/projects/ucap-webmessenger-api-external/README.md
new file mode 100644
index 00000000..b42ab63a
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerApiExternal
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-api-external` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-api-external`.
+> Note: Don't forget to add `--project ucap-webmessenger-api-external` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-api-external` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-api-external`, go to the dist folder `cd dist/ucap-webmessenger-api-external` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-api-external` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-api-external/karma.conf.js b/projects/ucap-webmessenger-api-external/karma.conf.js
new file mode 100644
index 00000000..0ab23631
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-api-external'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-api-external/ng-package.json b/projects/ucap-webmessenger-api-external/ng-package.json
new file mode 100644
index 00000000..a356309b
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-api-external",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-api-external/package.json b/projects/ucap-webmessenger-api-external/package.json
new file mode 100644
index 00000000..67da0228
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/api-external",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/models/check-user-info-ex.ts b/projects/ucap-webmessenger-api-external/src/lib/models/check-user-info-ex.ts
new file mode 100644
index 00000000..2166b926
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/models/check-user-info-ex.ts
@@ -0,0 +1,11 @@
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface CheckUserInfoExRequest extends APIRequest {
+  userId: string;
+  companyCode: string;
+  userSession: string;
+}
+
+export interface CheckUserInfoExResponse extends APIResponse {
+  userId?: string;
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/models/company-list.ts b/projects/ucap-webmessenger-api-external/src/lib/models/company-list.ts
new file mode 100644
index 00000000..222dcfc1
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/models/company-list.ts
@@ -0,0 +1,23 @@
+import { AppType, DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface CompanyListRequest extends APIRequest {
+  userSeq?: string;
+  appType?: AppType;
+  deviceType?: DeviceType;
+  token?: string;
+  companyGroupCode: string;
+}
+
+export interface Company {
+  companyCode?: string;
+  companyName?: string;
+  companyDomain?: string;
+  companyConfAuthYn?: string;
+  ucapUseYn?: string;
+  companyTimerChatAuthYn?: string;
+}
+
+export interface CompanyListResponse extends APIResponse {
+  companyList?: Company[];
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/models/token-update.ts b/projects/ucap-webmessenger-api-external/src/lib/models/token-update.ts
new file mode 100644
index 00000000..3dfa56d8
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/models/token-update.ts
@@ -0,0 +1,13 @@
+import { DeviceType, PushType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface TokenUpdateRequest extends APIRequest {
+  userSeq: string;
+  deviceType: DeviceType;
+  token: string;
+  mobilePid?: string;
+  pushType?: PushType;
+}
+
+// tslint:disable-next-line: no-empty-interface
+export interface TokenUpdateResponse extends APIResponse {}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/models/url-info.ts b/projects/ucap-webmessenger-api-external/src/lib/models/url-info.ts
new file mode 100644
index 00000000..f2f15bb0
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/models/url-info.ts
@@ -0,0 +1,21 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface UrlInfoRequest extends APIRequest {
+  deviceType: DeviceType;
+}
+
+export interface UrlInfoResponse extends APIResponse {
+  portCheckUrl?: string;
+  messageUrl?: string;
+  messageUrl2?: string;
+  passwordUrl?: string;
+  planUrl?: string;
+  planUrl2?: string;
+  vocUrl?: string;
+  confUrl?: string;
+  uprApiUrl?: string;
+  uprSvcUrl?: string;
+  uprDownloadUrl?: string;
+  synapViewUrl?: string;
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.spec.ts b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.spec.ts
new file mode 100644
index 00000000..3cd4cdf3
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ExternalApiService } from './external-api.service';
+
+describe('ExternalApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ExternalApiService = TestBed.get(ExternalApiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
new file mode 100644
index 00000000..1444612d
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
@@ -0,0 +1,154 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { _MODULE_CONFIG } from '../types/token';
+import { ModuleConfig } from '../types/module-config';
+import {
+  CheckUserInfoExRequest,
+  CheckUserInfoExResponse
+} from '../models/check-user-info-ex';
+import {
+  CompanyListRequest,
+  CompanyListResponse,
+  Company
+} from '../models/company-list';
+import {
+  TokenUpdateRequest,
+  TokenUpdateResponse
+} from '../models/token-update';
+import { UrlInfoResponse, UrlInfoRequest } from '../models/url-info';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalApiService {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private httpClient: HttpClient
+  ) {}
+
+  public checkUserInfoEx(
+    req: CheckUserInfoExRequest
+  ): Observable<CheckUserInfoExResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.checkUserInfoEx,
+        {},
+        {
+          params: {
+            p_user_id: req.userId,
+            p_comp_code: req.companyCode,
+            p_user_session: req.userSession
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {
+            statusCode: res.StatusCode,
+            errorMessage: res.ErrorMessage,
+            userId: res.UserID
+          } as CheckUserInfoExResponse;
+        })
+      );
+  }
+
+  public companyList(req: CompanyListRequest): Observable<CompanyListResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.companyList,
+        {},
+        {
+          params: {
+            p_user_seq: req.userSeq,
+            p_app_type: req.appType,
+            p_device_type: req.deviceType,
+            p_token: req.token,
+            p_comp_group_code: req.companyGroupCode
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          let companyList: Company[] | undefined;
+          if (!!res.CompanyList) {
+            companyList = [];
+            for (const company of res.CompanyList) {
+              companyList.push({
+                companyCode: company.COMPANY_CODE,
+                companyName: company.COMPANY_NAME,
+                companyDomain: company.COMPANY_DOMAIN,
+                companyConfAuthYn: company.COMPANY_CONF_AUTH,
+                ucapUseYn: company.UCAP_USE_YN,
+                companyTimerChatAuthYn: company.COMPANY_TIMER_CHAT_AUTH
+              });
+            }
+          }
+
+          return {
+            statusCode: res.StatusCode,
+            errorMessage: res.ErrorMessage,
+            companyList
+          } as CompanyListResponse;
+        })
+      );
+  }
+
+  public tokenUpdate(req: TokenUpdateRequest): Observable<TokenUpdateResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.tokenUpdate,
+        {},
+        {
+          params: {
+            p_user_seq: req.userSeq,
+            p_device_type: req.deviceType,
+            p_token: req.token,
+            p_mobile_pid: req.mobilePid,
+            p_push_type: req.pushType
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {} as TokenUpdateResponse;
+        })
+      );
+  }
+
+  public urlInfo(req: UrlInfoRequest): Observable<UrlInfoResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.urlInfo,
+        {},
+        {
+          params: {
+            p_device_type: req.deviceType
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {
+            statusCode: res.StatusCode,
+            errorMessage: res.ErrorMessage,
+            portCheckUrl: res.PortCheckURL,
+            messageUrl: res.MsgURL,
+            messageUrl2: res.MsgURL2,
+            passwordUrl: res.PasswordURL,
+            planUrl: res.PlanURL,
+            planUrl2: res.PlanURL2,
+            vocUrl: res.VocURL,
+            confUrl: res.ConfURL,
+            uprApiUrl: res.UprApiURL,
+            uprSvcUrl: res.UprSvcURL,
+            uprDownloadUrl: res.UprDownloadURL,
+            synapViewUrl: res.SynapViewURL
+          } as UrlInfoResponse;
+        })
+      );
+  }
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
new file mode 100644
index 00000000..91a494d8
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
@@ -0,0 +1,8 @@
+export interface ModuleConfig {
+  urls: {
+    checkUserInfoEx: string;
+    companyList: string;
+    tokenUpdate: string;
+    urlInfo: string;
+  };
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/types/token.ts b/projects/ucap-webmessenger-api-external/src/lib/types/token.ts
new file mode 100644
index 00000000..61ffc8ea
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/types/token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const _MODULE_CONFIG = new InjectionToken(
+  '@ucap-webmessenger/api-external config of module'
+);
diff --git a/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts b/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
new file mode 100644
index 00000000..c21dada5
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { _MODULE_CONFIG } from './types/token';
+
+import { ExternalApiService } from './services/external-api.service';
+import { ModuleConfig } from './types/module-config';
+
+const SERVICES = [ExternalApiService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapExternalApiModule {
+  public static forRoot(
+    config: ModuleConfig
+  ): ModuleWithProviders<UCapExternalApiModule> {
+    return {
+      ngModule: UCapExternalApiModule,
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-api-external/src/public-api.ts b/projects/ucap-webmessenger-api-external/src/public-api.ts
new file mode 100644
index 00000000..3398ff7c
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/public-api.ts
@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of ucap-webmessenger-api-public
+ */
+
+export * from './lib/types/module-config';
+
+export * from './lib/models/check-user-info-ex';
+export * from './lib/models/company-list';
+export * from './lib/models/token-update';
+export * from './lib/models/url-info';
+
+export * from './lib/services/external-api.service';
+
+export * from './lib/ucap-external-api.module';
diff --git a/projects/ucap-webmessenger-api-external/src/test.ts b/projects/ucap-webmessenger-api-external/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-api-external/tsconfig.lib.json b/projects/ucap-webmessenger-api-external/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-external/tsconfig.spec.json b/projects/ucap-webmessenger-api-external/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-external/tslint.json b/projects/ucap-webmessenger-api-external/tslint.json
new file mode 100644
index 00000000..736e7060
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapApiExternal",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-api-external",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-api-public/README.md b/projects/ucap-webmessenger-api-public/README.md
new file mode 100644
index 00000000..74befe5f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerApiPublic
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-api-public` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-api-public`.
+> Note: Don't forget to add `--project ucap-webmessenger-api-public` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-api-public` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-api-public`, go to the dist folder `cd dist/ucap-webmessenger-api-public` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-api-public` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-api-public/karma.conf.js b/projects/ucap-webmessenger-api-public/karma.conf.js
new file mode 100644
index 00000000..2623a34f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-api-public'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-api-public/ng-package.json b/projects/ucap-webmessenger-api-public/ng-package.json
new file mode 100644
index 00000000..1d9c0df1
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-api-public",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-api-public/package.json b/projects/ucap-webmessenger-api-public/package.json
new file mode 100644
index 00000000..8e5f98ba
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/api-public",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/models/update-info.ts b/projects/ucap-webmessenger-api-public/src/lib/models/update-info.ts
new file mode 100644
index 00000000..27fd7bda
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/models/update-info.ts
@@ -0,0 +1,13 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface UpdateInfoRequest extends APIRequest {
+  deviceType: DeviceType;
+}
+
+export interface UpdateInfoResponse extends APIResponse {
+  appVersion?: string;
+  installUrl?: string;
+  launcherAppVersion?: string;
+  launcherInstallUrl?: string;
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/models/version-info.ts b/projects/ucap-webmessenger-api-public/src/lib/models/version-info.ts
new file mode 100644
index 00000000..a7e6927c
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/models/version-info.ts
@@ -0,0 +1,29 @@
+import { DeviceType } from '@ucap-webmessenger/core';
+import { APIRequest, APIResponse } from '@ucap-webmessenger/api';
+
+export interface VersionInfoRequest extends APIRequest {
+  userSeq?: string;
+  deviceType: DeviceType;
+  token?: string;
+  companyGroupType: string;
+  companyCode: string;
+  loginId: string;
+}
+
+export interface VersionInfoResponse extends APIResponse {
+  protocolCode?: string;
+  syncMode?: string;
+  appVersion?: string;
+  installUrl?: string;
+  serverIp?: string;
+  serverPort?: string;
+  uploadUrl?: string;
+  downloadUrl?: string;
+  profileUploadUrl?: string;
+  profileRoot?: string;
+  fileTerm?: string;
+  fileAllowSize?: string;
+  authIp?: string;
+  launcherAppVersion?: string;
+  launcherInstallUrl?: string;
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.spec.ts b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.spec.ts
new file mode 100644
index 00000000..06dc832a
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PublicApiService } from './public-api.service';
+
+describe('PublicApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PublicApiService = TestBed.get(PublicApiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
new file mode 100644
index 00000000..352ea17b
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
@@ -0,0 +1,89 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { _MODULE_CONFIG } from '../types/token';
+import {
+  VersionInfoRequest,
+  VersionInfoResponse
+} from '../models/version-info';
+import { UpdateInfoRequest, UpdateInfoResponse } from '../models/update-info';
+import { ModuleConfig } from '../types/module-config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicApiService {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private httpClient: HttpClient
+  ) {}
+
+  public versionInfo(req: VersionInfoRequest): Observable<VersionInfoResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.versionInfo,
+        {},
+        {
+          params: {
+            p_user_seq: req.userSeq,
+            p_device_type: req.deviceType,
+            p_token: req.token,
+            p_comp_group_type: req.companyGroupType,
+            p_comp_code: req.companyCode,
+            p_login_id: req.loginId
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {
+            statusCode: res.StatusCode,
+            errorMessage: res.ErrorMessage,
+            protocolCode: res.ProtocolCD,
+            syncMode: res.SyncMode,
+            appVersion: res.AppVer,
+            installUrl: res.InstallURL,
+            serverIp: res.ServerIP,
+            serverPort: res.ServerPort,
+            uploadUrl: res.UploadURL,
+            downloadUrl: res.DownloadURL,
+            profileUploadUrl: res.ProfileUploadURL,
+            profileRoot: res.ProfileRoot,
+            fileTerm: res.FileTerm,
+            fileAllowSize: res.FileAllowSize,
+            authIp: res.AuthIP,
+            launcherAppVersion: res.LauncherAppVer,
+            launcherInstallUrl: res.LauncherInstallURL
+          } as VersionInfoResponse;
+        })
+      );
+  }
+
+  public updateInfo(req: UpdateInfoRequest): Observable<UpdateInfoResponse> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.updateInfo,
+        {},
+        {
+          params: {
+            p_device_type: req.deviceType
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {
+            statusCode: res.StatusCode,
+            errorMessage: res.ErrorMessage,
+            appVersion: res.AppVer,
+            installUrl: res.InstallURL,
+            launcherAppVersion: res.LauncherAppVer,
+            launcherInstallUrl: res.LauncherInstallURL
+          } as UpdateInfoResponse;
+        })
+      );
+  }
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
new file mode 100644
index 00000000..0fbe5188
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
@@ -0,0 +1,6 @@
+export interface ModuleConfig {
+  urls: {
+    versionInfo: string;
+    updateInfo: string;
+  };
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/types/token.ts b/projects/ucap-webmessenger-api-public/src/lib/types/token.ts
new file mode 100644
index 00000000..236f4ca7
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/types/token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const _MODULE_CONFIG = new InjectionToken(
+  '@ucap-webmessenger/api-public config of module'
+);
diff --git a/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts b/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
new file mode 100644
index 00000000..3424d78f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { _MODULE_CONFIG } from './types/token';
+
+import { PublicApiService } from './services/public-api.service';
+import { ModuleConfig } from './types/module-config';
+
+const SERVICES = [PublicApiService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapPublicApiModule {
+  public static forRoot(
+    config: ModuleConfig
+  ): ModuleWithProviders<UCapPublicApiModule> {
+    return {
+      ngModule: UCapPublicApiModule,
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-api-public/src/public-api.ts b/projects/ucap-webmessenger-api-public/src/public-api.ts
new file mode 100644
index 00000000..1f4a6d09
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/public-api.ts
@@ -0,0 +1,12 @@
+/*
+ * Public API Surface of ucap-webmessenger-api-public
+ */
+
+export * from './lib/types/module-config';
+
+export * from './lib/models/update-info';
+export * from './lib/models/version-info';
+
+export * from './lib/services/public-api.service';
+
+export * from './lib/ucap-public-api.module';
diff --git a/projects/ucap-webmessenger-api-public/src/test.ts b/projects/ucap-webmessenger-api-public/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-api-public/tsconfig.lib.json b/projects/ucap-webmessenger-api-public/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-public/tsconfig.spec.json b/projects/ucap-webmessenger-api-public/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api-public/tslint.json b/projects/ucap-webmessenger-api-public/tslint.json
new file mode 100644
index 00000000..3fa42f2a
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapApiPublic",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-api-public",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-api/README.md b/projects/ucap-webmessenger-api/README.md
new file mode 100644
index 00000000..6f5aab33
--- /dev/null
+++ b/projects/ucap-webmessenger-api/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerApi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-api` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-api`.
+> Note: Don't forget to add `--project ucap-webmessenger-api` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-api` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-api`, go to the dist folder `cd dist/ucap-webmessenger-api` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-api` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-api/karma.conf.js b/projects/ucap-webmessenger-api/karma.conf.js
new file mode 100644
index 00000000..2835029a
--- /dev/null
+++ b/projects/ucap-webmessenger-api/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-api'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-api/ng-package.json b/projects/ucap-webmessenger-api/ng-package.json
new file mode 100644
index 00000000..9c943c60
--- /dev/null
+++ b/projects/ucap-webmessenger-api/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-api",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-api/package.json b/projects/ucap-webmessenger-api/package.json
new file mode 100644
index 00000000..0ae09c62
--- /dev/null
+++ b/projects/ucap-webmessenger-api/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/api",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-api/src/lib/models/api.ts b/projects/ucap-webmessenger-api/src/lib/models/api.ts
new file mode 100644
index 00000000..266f2182
--- /dev/null
+++ b/projects/ucap-webmessenger-api/src/lib/models/api.ts
@@ -0,0 +1,9 @@
+export interface APIRequest {
+  _id?: string;
+}
+
+export interface APIResponse {
+  _id?: string;
+  statusCode: string;
+  errorMessage: string;
+}
diff --git a/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts b/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
new file mode 100644
index 00000000..a5c41a9f
--- /dev/null
+++ b/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
@@ -0,0 +1,3 @@
+export enum StatusCode {
+  Success = '200'
+}
diff --git a/projects/ucap-webmessenger-api/src/public-api.ts b/projects/ucap-webmessenger-api/src/public-api.ts
new file mode 100644
index 00000000..fc49ac71
--- /dev/null
+++ b/projects/ucap-webmessenger-api/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-api
+ */
+
+export * from './lib/models/api';
+
+export * from './lib/types/status-code.type';
diff --git a/projects/ucap-webmessenger-api/src/test.ts b/projects/ucap-webmessenger-api/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-api/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-api/tsconfig.lib.json b/projects/ucap-webmessenger-api/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-api/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api/tsconfig.spec.json b/projects/ucap-webmessenger-api/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-api/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-api/tslint.json b/projects/ucap-webmessenger-api/tslint.json
new file mode 100644
index 00000000..2fa7f591
--- /dev/null
+++ b/projects/ucap-webmessenger-api/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapApi",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-api",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-app/browserslist b/projects/ucap-webmessenger-app/browserslist
new file mode 100644
index 00000000..80848532
--- /dev/null
+++ b/projects/ucap-webmessenger-app/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/e2e/protractor.conf.js b/projects/ucap-webmessenger-app/e2e/protractor.conf.js
new file mode 100644
index 00000000..73e4e680
--- /dev/null
+++ b/projects/ucap-webmessenger-app/e2e/protractor.conf.js
@@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/e2e/src/app.e2e-spec.ts b/projects/ucap-webmessenger-app/e2e/src/app.e2e-spec.ts
new file mode 100644
index 00000000..b87fce7b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('ucap-webmessenger-app app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
diff --git a/projects/ucap-webmessenger-app/e2e/src/app.po.ts b/projects/ucap-webmessenger-app/e2e/src/app.po.ts
new file mode 100644
index 00000000..b8498c26
--- /dev/null
+++ b/projects/ucap-webmessenger-app/e2e/src/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/e2e/tsconfig.json b/projects/ucap-webmessenger-app/e2e/tsconfig.json
new file mode 100644
index 00000000..bc240fbf
--- /dev/null
+++ b/projects/ucap-webmessenger-app/e2e/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-app/karma.conf.js b/projects/ucap-webmessenger-app/karma.conf.js
new file mode 100644
index 00000000..74065c12
--- /dev/null
+++ b/projects/ucap-webmessenger-app/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-app'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-app/src/app/app-provider.module.ts b/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
new file mode 100644
index 00000000..6c423277
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { SERVICES } from './services';
+import { UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
+import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+
+@NgModule({
+  imports: [],
+  exports: [],
+  providers: [
+    ...SERVICES,
+    { provide: UCAP_NATIVE_SERVICE, useClass: ElectronNativeService }
+  ]
+})
+export class AppProviderModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
new file mode 100644
index 00000000..46569658
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from './guards/auth.guard';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/messenger', pathMatch: 'full' },
+  {
+    path: 'messenger',
+    loadChildren: './pages/messenger/messenger.page.module#MessengerPageModule',
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'account',
+    loadChildren: './pages/account/account.page.module#AccountPageModule'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app-store.module.ts b/projects/ucap-webmessenger-app/src/app/app-store.module.ts
new file mode 100644
index 00000000..5c69901c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app-store.module.ts
@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { ROOT_REDUCERS, metaReducers, effects } from './store';
+
+@NgModule({
+  imports: [
+    /**
+     * StoreModule.forRoot is imported once in the root module, accepting a reducer
+     * function or object map of reducer functions. If passed an object of
+     * reducers, combineReducers will be run creating your application
+     * meta-reducer. This returns all providers for an @ngrx/store
+     * based application.
+     */
+    StoreModule.forRoot(ROOT_REDUCERS, {
+      metaReducers,
+      runtimeChecks: {
+        strictStateImmutability: true,
+        strictActionImmutability: true,
+        strictStateSerializability: true,
+        strictActionSerializability: true
+      }
+    }),
+
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store.
+     */
+    StoreRouterConnectingModule.forRoot({
+      routerState: RouterState.Minimal
+    }),
+
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    StoreDevtoolsModule.instrument({
+      name: 'NgRx Book Store App'
+
+      // In a production build you would want to disable the Store Devtools
+      // logOnly: environment.production,
+    }),
+
+    /**
+     * EffectsModule.forRoot() is imported once in the root module and
+     * sets up the effects class to be initialized immediately when the
+     * application starts.
+     *
+     * See: https://ngrx.io/guide/effects#registering-root-effects
+     */
+    EffectsModule.forRoot([...effects])
+  ],
+  exports: []
+})
+export class AppStoreModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app-translate.module.ts b/projects/ucap-webmessenger-app/src/app/app-translate.module.ts
new file mode 100644
index 00000000..e8e1836b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app-translate.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [TranslateModule.forRoot({})],
+  exports: []
+})
+export class AppTranslateModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app.component.html b/projects/ucap-webmessenger-app/src/app/app.component.html
new file mode 100644
index 00000000..0680b43f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/projects/ucap-webmessenger-app/src/app/app.component.scss b/projects/ucap-webmessenger-app/src/app/app.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/app.component.spec.ts b/projects/ucap-webmessenger-app/src/app/app.component.spec.ts
new file mode 100644
index 00000000..8f5623dc
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-webmessenger-app'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('ucap-webmessenger-app');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('ucap-webmessenger-app app is running!');
+  });
+});
diff --git a/projects/ucap-webmessenger-app/src/app/app.component.ts b/projects/ucap-webmessenger-app/src/app/app.component.ts
new file mode 100644
index 00000000..54476187
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'ucap-webmessenger-app';
+}
diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
new file mode 100644
index 00000000..a48e6374
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -0,0 +1,67 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
+import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
+import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
+
+import { UCapPiModule } from '@ucap-webmessenger/pi';
+
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
+
+import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
+
+import { environment } from '../environments/environment';
+
+import { AppProviderModule } from './app-provider.module';
+import { AppRoutingModule } from './app-routing.module';
+import { AppStoreModule } from './app-store.module';
+import { AppTranslateModule } from './app-translate.module';
+
+import { AppComponent } from './app.component';
+
+import { GUARDS } from './guards';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+
+    HttpClientModule,
+
+    MatProgressBarModule,
+
+    UCapCommonApiModule.forRoot({ urls: environment.urls.apiCommon }),
+
+    UCapPublicApiModule.forRoot({
+      urls: environment.urls.apiPublic
+    }),
+    UCapExternalApiModule.forRoot({
+      urls: environment.urls.apiExternal
+    }),
+
+    UCapPiModule.forRoot({
+      urls: environment.urls.pi
+    }),
+
+    UCapUiModule.forRoot(),
+    UCapUiAccountModule.forRoot(),
+
+    UCapWebStorageModule.forRoot(),
+
+    AppProviderModule,
+    AppRoutingModule,
+    AppStoreModule,
+    AppTranslateModule
+  ],
+  providers: [...GUARDS],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  entryComponents: []
+})
+export class AppModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/guards/auth.guard.ts b/projects/ucap-webmessenger-app/src/app/guards/auth.guard.ts
new file mode 100644
index 00000000..8aa88a76
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/guards/auth.guard.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  UrlTree,
+  Router
+} from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+
+import { AuthenticationService } from '../services/authentication.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(
+    private router: Router,
+    private authenticationService: AuthenticationService
+  ) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | boolean
+    | UrlTree
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree> {
+    return new Promise<boolean | UrlTree>((resolve, reject) => {
+      if (this.authenticationService.authenticated()) {
+        resolve(true);
+      } else {
+        this.router.navigateByUrl('/account/login');
+        resolve(false);
+      }
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/guards/index.ts b/projects/ucap-webmessenger-app/src/app/guards/index.ts
new file mode 100644
index 00000000..d2030c3c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/guards/index.ts
@@ -0,0 +1,3 @@
+import { AuthGuard } from './auth.guard';
+
+export const GUARDS = [AuthGuard];
diff --git a/projects/ucap-webmessenger-app/src/app/interceptors/loader.interceptor.ts b/projects/ucap-webmessenger-app/src/app/interceptors/loader.interceptor.ts
new file mode 100644
index 00000000..e3e4485f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/interceptors/loader.interceptor.ts
@@ -0,0 +1,34 @@
+import { Injectable, Injector } from '@angular/core';
+import {
+  HttpEvent,
+  HttpRequest,
+  HttpHandler,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { finalize, delay } from 'rxjs/operators';
+import { LoaderService } from '../services/loader.service';
+
+@Injectable()
+export class LoaderInterceptor implements HttpInterceptor {
+  constructor(private injector: Injector) {}
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    if (!req.url.includes('albums')) {
+      return next.handle(req);
+    }
+    console.warn('LoaderInterceptor');
+
+    const loaderService = this.injector.get(LoaderService);
+
+    loaderService.show();
+
+    return next.handle(req).pipe(
+      delay(3000),
+      finalize(() => loaderService.hide())
+    );
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/account-routing.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/account/account-routing.page.module.ts
new file mode 100644
index 00000000..a524597e
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/account-routing.page.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginPageComponent } from './components/login.page.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/account/login', pathMatch: 'full' },
+  {
+    path: 'login',
+    component: LoginPageComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountRoutingPageModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts
new file mode 100644
index 00000000..caf1f47c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
+
+import { AccountRoutingPageModule } from './account-routing.page.module';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [CommonModule, UCapUiAccountModule, AccountRoutingPageModule],
+  declarations: [...COMPONENTS],
+  entryComponents: []
+})
+export class AccountPageModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/index.ts b/projects/ucap-webmessenger-app/src/app/pages/account/components/index.ts
new file mode 100644
index 00000000..49840226
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/index.ts
@@ -0,0 +1,3 @@
+import { LoginPageComponent } from './login.page.component';
+
+export const COMPONENTS = [LoginPageComponent];
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html
new file mode 100644
index 00000000..b374a74c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html
@@ -0,0 +1,8 @@
+<div id="login" fxLayout="column">
+  <div id="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
+    <ucap-account-login
+      [companies]="companies"
+      (login)="onLogin($event)"
+    ></ucap-account-login>
+  </div>
+</div>
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
new file mode 100644
index 00000000..8b4b8ea9
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
@@ -0,0 +1,9 @@
+#login {
+  width: 100%;
+  background-size: cover;
+
+  #login-wrapper {
+    flex: 1 0 auto;
+    padding: 32px;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.spec.ts b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.spec.ts
new file mode 100644
index 00000000..b6198694
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LoginPageComponent } from './login.page.component';
+
+describe('LoginPageComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [LoginPageComponent]
+    }).compileComponents();
+  }));
+});
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts
new file mode 100644
index 00000000..2c15bd2d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+
+import { take, map } from 'rxjs/operators';
+
+import { Store } from '@ngrx/store';
+
+import {
+  ExternalApiService,
+  CompanyListResponse,
+  Company
+} from '@ucap-webmessenger/api-external';
+
+import * as AuthenticationStore from '../../../store/account/authentication';
+
+@Component({
+  selector: 'app-page-account-login',
+  templateUrl: './login.page.component.html',
+  styleUrls: ['./login.page.component.scss']
+})
+export class LoginPageComponent implements OnInit {
+  companies: Company[];
+
+  constructor(
+    private externalApiService: ExternalApiService,
+    private store: Store<any>
+  ) {}
+
+  ngOnInit(): void {
+    this.externalApiService
+      .companyList({ companyGroupCode: 'LG' })
+      .pipe(
+        take(1),
+        map((res: CompanyListResponse) => {
+          this.companies = res.companyList;
+        })
+      )
+      .subscribe();
+  }
+
+  onLogin(value: {
+    companyCode: string;
+    loginId: string;
+    loginPw: string;
+    rememberMe: boolean;
+    notValid: () => void;
+  }) {
+    this.store.dispatch(
+      AuthenticationStore.login({
+        loginInfo: {
+          companyCode: value.companyCode,
+          loginId: value.loginId,
+          loginPw: value.loginPw
+        },
+        rememberMe: value.rememberMe
+      })
+    );
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/index.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/index.ts
new file mode 100644
index 00000000..43201f32
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/index.ts
@@ -0,0 +1,3 @@
+import { MainPageComponent } from './main.page.component';
+
+export const COMPONENTS = [MainPageComponent];
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
new file mode 100644
index 00000000..dd087bff
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
@@ -0,0 +1,48 @@
+<div id="chat" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <mat-sidenav-container>
+        <!-- LEFT SIDENAV -->
+        <mat-sidenav
+          class="sidenav"
+          position="start"
+          opened="true"
+          mode="side"
+          fuseMatSidenavHelper="chat-left-sidenav"
+          matIsLockedOpen="gt-md"
+        >
+          <!-- <chat-left-sidenav></chat-left-sidenav> -->
+          dsafsdfsdf
+        </mat-sidenav>
+        <!-- / LEFT SIDENAV -->
+
+        <!-- CONTENT -->
+        <!-- <chat-start *ngIf="!selectedChat"></chat-start>
+
+        <chat-view *ngIf="selectedChat"></chat-view> -->
+        <!-- / CONTENT -->
+        asdfsdfsdfs
+        <!-- RIGHT SIDENAV -->
+        <mat-sidenav
+          class="sidenav"
+          position="end"
+          opened="false"
+          mode="over"
+          fuseMatSidenavHelper="chat-right-sidenav"
+        >
+          <!-- <chat-right-sidenav></chat-right-sidenav> -->
+          safsdf
+        </mat-sidenav>
+        <!-- / RIGHT SIDENAV -->
+      </mat-sidenav-container>
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
new file mode 100644
index 00000000..2f5aeea7
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
@@ -0,0 +1,40 @@
+#chat {
+  .center {
+    padding: 32px !important;
+    max-width: 1400px;
+    margin: 0 auto;
+
+    .content-card {
+      position: relative;
+      display: flex;
+      flex: 1;
+      border-radius: 8px;
+
+      .mat-sidenav-container {
+        display: flex;
+        flex: 1;
+        width: 100%;
+
+        > .mat-sidenav-content,
+        > .mat-drawer-content {
+          display: flex;
+          flex: 1 1 auto;
+          min-height: 100%;
+          height: auto;
+        }
+
+        > .mat-drawer-content {
+          max-width: 100%;
+        }
+
+        mat-sidenav {
+          display: flex;
+          flex-direction: column;
+          width: 400px;
+          max-width: 90%;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.spec.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.spec.ts
new file mode 100644
index 00000000..62759563
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MainPageComponent } from './main.page.component';
+
+describe('MainPageComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [MainPageComponent]
+    }).compileComponents();
+  }));
+});
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
new file mode 100644
index 00000000..a3788af2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-messenger-main',
+  templateUrl: './main.page.component.html',
+  styleUrls: ['./main.page.component.scss']
+})
+export class MainPageComponent {
+  title = 'ucap-webmessenger-app';
+}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger-routing.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger-routing.page.module.ts
new file mode 100644
index 00000000..399220eb
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger-routing.page.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MainPageComponent } from './components/main.page.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'main', pathMatch: 'full' },
+  {
+    path: 'main',
+    component: MainPageComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MessengerRoutingPageModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
new file mode 100644
index 00000000..9519a902
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatSidenavModule } from '@angular/material/sidenav';
+
+import { MessengerRoutingPageModule } from './messenger-routing.page.module';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [CommonModule, MatSidenavModule, MessengerRoutingPageModule],
+  declarations: [...COMPONENTS],
+  entryComponents: []
+})
+export class MessengerPageModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
new file mode 100644
index 00000000..f022d51d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+import CryptoJS from 'crypto-js';
+
+import {
+  SessionStorageService,
+  LocalStorageService
+} from '@ucap-webmessenger/web-storage';
+import { LoginInfo, KEY_LOGIN_INFO } from '../types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationService {
+  showLoader = false;
+
+  constructor(
+    private sessionStorageService: SessionStorageService,
+    private localStorageService: LocalStorageService
+  ) {}
+
+  authenticated(): boolean {
+    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
+    return null !== loginInfo && !!loginInfo.loginId;
+  }
+
+  login(loginInfo: LoginInfo, rememberMe: boolean) {
+    this.sessionStorageService.set<LoginInfo>(KEY_LOGIN_INFO, {
+      ...loginInfo,
+      loginPw: CryptoJS.enc.Hex.stringify(CryptoJS.SHA256(loginInfo.loginPw))
+    });
+
+    if (rememberMe) {
+      this.localStorageService.set<LoginInfo>(KEY_LOGIN_INFO, {
+        ...loginInfo,
+        loginPw: undefined
+      });
+    } else {
+      this.localStorageService.remove(KEY_LOGIN_INFO);
+    }
+  }
+
+  logout() {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/services/index.ts b/projects/ucap-webmessenger-app/src/app/services/index.ts
new file mode 100644
index 00000000..c703a210
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/services/index.ts
@@ -0,0 +1,4 @@
+import { AuthenticationService } from './authentication.service';
+import { LoaderService } from './loader.service';
+
+export const SERVICES = [AuthenticationService, LoaderService];
diff --git a/projects/ucap-webmessenger-app/src/app/services/loader.service.ts b/projects/ucap-webmessenger-app/src/app/services/loader.service.ts
new file mode 100644
index 00000000..fe44bc82
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/services/loader.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+  showLoader = false;
+
+  constructor() {}
+
+  show() {
+    this.showLoader = true;
+  }
+
+  hide() {
+    this.showLoader = false;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
new file mode 100644
index 00000000..28b5bcc0
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
@@ -0,0 +1,41 @@
+import { createAction, props } from '@ngrx/store';
+
+import { Login2Response } from '@ucap-webmessenger/pi';
+
+import { LoginInfo } from '../../../types';
+
+export const login = createAction(
+  '[Account::Authentication] Login',
+  props<{
+    loginInfo: LoginInfo;
+    rememberMe: boolean;
+  }>()
+);
+
+export const loginSuccess = createAction(
+  '[Account::Authentication] Login Success',
+  props<{
+    loginInfo: LoginInfo;
+    rememberMe: boolean;
+    login2Response: Login2Response;
+  }>()
+);
+
+export const loginFailure = createAction(
+  '[Account::Authentication] Login Failure',
+  props<{ error: any }>()
+);
+
+export const loginRedirect = createAction(
+  '[Account::Authentication] Login Redirect'
+);
+
+export const logout = createAction('[Account::Authentication] Logout');
+
+export const logoutConfirmation = createAction(
+  '[Account::Authentication] Logout Confirmation'
+);
+
+export const logoutConfirmationDismiss = createAction(
+  '[Account::Authentication] Logout Confirmation Dismiss'
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
new file mode 100644
index 00000000..7b955e88
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -0,0 +1,96 @@
+import { Injectable, Inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import {
+  PiService,
+  Login2Response,
+  ResponseStatus
+} from '@ucap-webmessenger/pi';
+
+import {
+  login,
+  loginSuccess,
+  loginFailure,
+  loginRedirect,
+  logout
+} from './actions';
+import { LoginInfo } from '../../../types';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
+
+@Injectable()
+export class Effects {
+  login$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(login),
+      map(action => action),
+      exhaustMap((params: { loginInfo: LoginInfo; rememberMe: boolean }) =>
+        this.piService
+          .login2({
+            loginId: params.loginInfo.loginId,
+            loginPw: params.loginInfo.loginPw,
+            companyCode: params.loginInfo.companyCode
+          })
+          .pipe(
+            map((res: Login2Response) => {
+              console.log(res);
+              if (res.status === ResponseStatus.Fail) {
+                return loginFailure({ error: 'Failed' });
+              } else {
+                return loginSuccess({
+                  loginInfo: params.loginInfo,
+                  rememberMe: params.rememberMe,
+                  login2Response: res
+                });
+              }
+            }),
+            catchError(error => of(loginFailure({ error })))
+          )
+      )
+    )
+  );
+
+  loginSuccess$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(loginSuccess),
+        tap(params => {
+          this.nativeService
+            .checkForUpdates()
+            .then(update => {
+              if (!update) {
+                this.authentication.login(params.loginInfo, params.rememberMe);
+                this.router.navigate(['/messenger']);
+                return;
+              }
+            })
+            .catch(reson => {});
+        })
+      ),
+    { dispatch: false }
+  );
+
+  loginRedirect$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(loginRedirect, logout),
+        tap(authed => {
+          this.router.navigate(['/account/login']);
+        })
+      ),
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private piService: PiService,
+    private authentication: AuthenticationService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private router: Router
+  ) {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/index.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/index.ts
new file mode 100644
index 00000000..2663cade
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/index.ts
@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
new file mode 100644
index 00000000..28e58c6f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
@@ -0,0 +1,6 @@
+import { Action, combineReducers } from '@ngrx/store';
+import { State } from './state';
+
+export function reducers(state: State | undefined, action: Action) {
+  return combineReducers({})(state, action);
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
new file mode 100644
index 00000000..aacfe4f7
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
@@ -0,0 +1,10 @@
+import { Selector } from '@ngrx/store';
+
+// tslint:disable-next-line: no-empty-interface
+export interface State {}
+
+export const initialState: State = {};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {};
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/index.ts b/projects/ucap-webmessenger-app/src/app/store/account/index.ts
new file mode 100644
index 00000000..5cdac23a
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/account/index.ts
@@ -0,0 +1,27 @@
+import { Type } from '@angular/core';
+import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
+
+import * as AuthenticationStore from './authentication';
+
+export interface State {
+  authentication: AuthenticationStore.State;
+}
+
+export const effects: Type<any>[] = [AuthenticationStore.Effects];
+
+export function reducers(state: State | undefined, action: Action) {
+  return combineReducers({
+    authentication: AuthenticationStore.reducers
+  })(state, action);
+}
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    AuthenticationSelector: AuthenticationStore.selectors(
+      createSelector(
+        selector,
+        (state: State) => state.authentication
+      )
+    )
+  };
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/index.ts b/projects/ucap-webmessenger-app/src/app/store/index.ts
new file mode 100644
index 00000000..2ce64b86
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/index.ts
@@ -0,0 +1,56 @@
+import { Type, InjectionToken } from '@angular/core';
+
+import {
+  ActionReducer,
+  MetaReducer,
+  Action,
+  ActionReducerMap
+} from '@ngrx/store';
+import * as fromRouter from '@ngrx/router-store';
+import { storeFreeze } from 'ngrx-store-freeze';
+
+import { environment } from '../../environments/environment';
+
+import * as AccountStore from './account';
+
+export interface State {
+  router: fromRouter.RouterReducerState<any>;
+  account: AccountStore.State;
+}
+
+/**
+ * Our state is composed of a map of action reducer functions.
+ * These reducer functions are called with each dispatched action
+ * and the current or initial state and return a new immutable state.
+ */
+export const ROOT_REDUCERS = new InjectionToken<
+  ActionReducerMap<State, Action>
+>('Root reducers token', {
+  factory: () => ({
+    router: fromRouter.routerReducer,
+    account: AccountStore.reducers
+  })
+});
+
+export const effects: Type<any>[] = [...AccountStore.effects];
+
+export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
+  return (state, action) => {
+    const result = reducer(state, action);
+    console.groupCollapsed(action.type);
+    console.log('prev state', state);
+    console.log('action', action);
+    console.log('next state', result);
+    console.groupEnd();
+
+    return result;
+  };
+}
+
+export const metaReducers: MetaReducer<State>[] = !environment.production
+  ? [logger, storeFreeze]
+  : [];
+
+export const AccountSelector = AccountStore.selectors(
+  (state: State) => state.account
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/index.ts b/projects/ucap-webmessenger-app/src/app/store/setting/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/actions.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/actions.ts
new file mode 100644
index 00000000..1598728b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/actions.ts
@@ -0,0 +1,21 @@
+import { createAction, props } from '@ngrx/store';
+
+import {
+  VersionInfoRequest,
+  VersionInfoResponse
+} from '@ucap-webmessenger/api-public';
+
+export const fetch = createAction(
+  '[Setting::VersionInfo] Fetch',
+  props<VersionInfoRequest>()
+);
+
+export const fetchSuccess = createAction(
+  '[Setting::VersionInfo] Fetch Success',
+  props<VersionInfoResponse>()
+);
+
+export const fetchFailure = createAction(
+  '[Setting::VersionInfo] Fetch Failure',
+  props<{ error: any }>()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts
new file mode 100644
index 00000000..49d2a11e
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Actions, ofType, createEffect } from '@ngrx/effects';
+
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { fetch, fetchSuccess, fetchFailure } from './actions';
+import { PublicApiService } from '@ucap-webmessenger/api-public';
+import { StatusCode } from '@ucap-webmessenger/api';
+
+@Injectable()
+export class Effects {
+  fetch$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(fetch),
+      map(action => action),
+      exhaustMap(req =>
+        this.publicApiService.versionInfo(req).pipe(
+          map(res => {
+            if (res.statusCode === StatusCode.Success) {
+              return fetchSuccess(res);
+            } else {
+              return fetchFailure({ error: 'Failed' });
+            }
+          }),
+          catchError(error => of(fetchFailure({ error })))
+        )
+      )
+    )
+  );
+
+  fetchSuccess$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(fetchSuccess),
+        tap(params => {})
+      ),
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private publicApiService: PublicApiService,
+    private router: Router
+  ) {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/index.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/index.ts
new file mode 100644
index 00000000..2663cade
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/index.ts
@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/reducers.ts
new file mode 100644
index 00000000..28e58c6f
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/reducers.ts
@@ -0,0 +1,6 @@
+import { Action, combineReducers } from '@ngrx/store';
+import { State } from './state';
+
+export function reducers(state: State | undefined, action: Action) {
+  return combineReducers({})(state, action);
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/version-info/state.ts b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/state.ts
new file mode 100644
index 00000000..aacfe4f7
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/version-info/state.ts
@@ -0,0 +1,10 @@
+import { Selector } from '@ngrx/store';
+
+// tslint:disable-next-line: no-empty-interface
+export interface State {}
+
+export const initialState: State = {};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {};
+}
diff --git a/projects/ucap-webmessenger-app/src/app/types/index.ts b/projects/ucap-webmessenger-app/src/app/types/index.ts
new file mode 100644
index 00000000..5d9da6f4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/types/index.ts
@@ -0,0 +1 @@
+export * from './login-info.type';
diff --git a/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts b/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts
new file mode 100644
index 00000000..bd71bc7a
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/types/login-info.type.ts
@@ -0,0 +1,9 @@
+export const KEY_LOGIN_INFO = 'ucap::LOGIN_INFO';
+
+export interface LoginInfo {
+  loginId?: string;
+  loginPw?: string;
+  companyCode?: string;
+  lang?: string;
+  encData?: string;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/.gitkeep b/projects/ucap-webmessenger-app/src/assets/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_colleague_word.png b/projects/ucap-webmessenger-app/src/assets/img/bg_colleague_word.png
new file mode 100644
index 00000000..f97d3300
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_colleague_word.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_header_logo.png b/projects/ucap-webmessenger-app/src/assets/img/bg_header_logo.png
new file mode 100644
index 00000000..9e369ae9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_header_logo.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_input.png b/projects/ucap-webmessenger-app/src/assets/img/bg_input.png
new file mode 100644
index 00000000..b8811964
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_input.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_login.png b/projects/ucap-webmessenger-app/src/assets/img/bg_login.png
new file mode 100644
index 00000000..c7ac0f57
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_login.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_notice_important.png b/projects/ucap-webmessenger-app/src/assets/img/bg_notice_important.png
new file mode 100644
index 00000000..a7bb3786
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_notice_important.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_searchbox.png b/projects/ucap-webmessenger-app/src/assets/img/bg_searchbox.png
new file mode 100644
index 00000000..6e0de083
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_searchbox.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule.png b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule.png
new file mode 100644
index 00000000..ab413496
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule_d.png b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule_d.png
new file mode 100644
index 00000000..f01303b1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_schedule_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_talk_sms.png b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_sms.png
new file mode 100644
index 00000000..ccb6d49f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_sms.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc.png b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc.png
new file mode 100644
index 00000000..633af043
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc_d.png b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc_d.png
new file mode 100644
index 00000000..3b094e01
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_talk_vc_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/bg_tip.png b/projects/ucap-webmessenger-app/src/assets/img/bg_tip.png
new file mode 100644
index 00000000..66e36bf2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/bg_tip.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/biz_logo.png b/projects/ucap-webmessenger-app/src/assets/img/biz_logo.png
new file mode 100644
index 00000000..9cb7ec1e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/biz_logo.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_hide.png b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_hide.png
new file mode 100644
index 00000000..aaff876e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_hide.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_ord.png b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_ord.png
new file mode 100644
index 00000000..2241e90a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_ord.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_show.png b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_show.png
new file mode 100644
index 00000000..8b79c972
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_show.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_up_color.png b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_up_color.png
new file mode 100644
index 00000000..8499d6d0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_arrow_up_color.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd.png b/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd.png
new file mode 100644
index 00000000..5e6fcb32
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd_o.png
new file mode 100644
index 00000000..175c18de
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_attendAdd_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chat_fileup.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_fileup.png
new file mode 100644
index 00000000..474bd3fe
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_fileup.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_insert.png
new file mode 100644
index 00000000..6e44a931
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chat_sticker.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_sticker.png
new file mode 100644
index 00000000..e9217c1c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chat_sticker.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel.png
new file mode 100644
index 00000000..767250e5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..9be102c6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit.png
new file mode 100644
index 00000000..a048364b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..3fd0b6a9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_add.png b/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_add.png
new file mode 100644
index 00000000..855cd46e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_delete.png
new file mode 100644
index 00000000..9fdc9488
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_combo24_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/btn_combo24_arrow.png
new file mode 100644
index 00000000..78531ae2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_combo24_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/btn_delete2.png
new file mode 100644
index 00000000..196febc1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_dial_call.png b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_call.png
new file mode 100644
index 00000000..3d620e7c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_n.png
new file mode 100644
index 00000000..38dac6ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_o.png
new file mode 100644
index 00000000..62297bbb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel.png b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel.png
new file mode 100644
index 00000000..8c40778c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel_o.png
new file mode 100644
index 00000000..66382394
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm.png
new file mode 100644
index 00000000..e82298c9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm_o.png
new file mode 100644
index 00000000..92cb77a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_edit_confirm_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_empty_add.png b/projects/ucap-webmessenger-app/src/assets/img/btn_empty_add.png
new file mode 100644
index 00000000..5387acfa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_empty_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_favorite.png b/projects/ucap-webmessenger-app/src/assets/img/btn_favorite.png
new file mode 100644
index 00000000..ed45261e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_favorite.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_favorite_c.png b/projects/ucap-webmessenger-app/src/assets/img/btn_favorite_c.png
new file mode 100644
index 00000000..ccb26922
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_favorite_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_file_download.png b/projects/ucap-webmessenger-app/src/assets/img/btn_file_download.png
new file mode 100644
index 00000000..74259480
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_file_download.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_file_download_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_file_download_o.png
new file mode 100644
index 00000000..8d47c446
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_file_download_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/btn_global.png
new file mode 100644
index 00000000..7da270d1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/btn_group_add.png
new file mode 100644
index 00000000..7c9092af
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_group_add_o.png
new file mode 100644
index 00000000..6b33dfc9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_invite_mail.png b/projects/ucap-webmessenger-app/src/assets/img/btn_invite_mail.png
new file mode 100644
index 00000000..e5c43415
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_invite_mail.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_invite_sms.png b/projects/ucap-webmessenger-app/src/assets/img/btn_invite_sms.png
new file mode 100644
index 00000000..add99501
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_invite_sms.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/btn_list_call_n.png
new file mode 100644
index 00000000..189067b0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/btn_login_arrow.png
new file mode 100644
index 00000000..ecd9fa53
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow.png
new file mode 100644
index 00000000..805acf58
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..a3a389f1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_main_call.png b/projects/ucap-webmessenger-app/src/assets/img/btn_main_call.png
new file mode 100644
index 00000000..c4e4f9ba
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_main_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_main_message.png b/projects/ucap-webmessenger-app/src/assets/img/btn_main_message.png
new file mode 100644
index 00000000..04c9ad7b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_main_message.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_adds.png b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_adds.png
new file mode 100644
index 00000000..a0bb5742
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_adds.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_call.png b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_call.png
new file mode 100644
index 00000000..34c6492a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_group.png b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_group.png
new file mode 100644
index 00000000..88554aa2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_group.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_organization.png b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_organization.png
new file mode 100644
index 00000000..e05fffcd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_organization.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_talk.png b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_talk.png
new file mode 100644
index 00000000..5a973603
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_mainmenu_talk.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit.png b/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit.png
new file mode 100644
index 00000000..2e7a5b98
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..0a2d9fc2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_navi_hide.png b/projects/ucap-webmessenger-app/src/assets/img/btn_navi_hide.png
new file mode 100644
index 00000000..1f421a5c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_navi_hide.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_page_first.png b/projects/ucap-webmessenger-app/src/assets/img/btn_page_first.png
new file mode 100644
index 00000000..2baef772
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_page_first.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_page_last.png b/projects/ucap-webmessenger-app/src/assets/img/btn_page_last.png
new file mode 100644
index 00000000..41b1fd6d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_page_last.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_page_next.png b/projects/ucap-webmessenger-app/src/assets/img/btn_page_next.png
new file mode 100644
index 00000000..47af2dbd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_page_next.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_page_prev.png b/projects/ucap-webmessenger-app/src/assets/img/btn_page_prev.png
new file mode 100644
index 00000000..b838625a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_page_prev.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/btn_phone_c.png
new file mode 100644
index 00000000..c9f3dea8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/btn_phone_h.png
new file mode 100644
index 00000000..31af5b8d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message.png
new file mode 100644
index 00000000..5a9f060f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_d.png
new file mode 100644
index 00000000..44d285a4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_o.png
new file mode 100644
index 00000000..dcbc1dd5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile.png
new file mode 100644
index 00000000..6d4a8732
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_d.png
new file mode 100644
index 00000000..0c0356a9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_o.png
new file mode 100644
index 00000000..b95ebb1b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk.png
new file mode 100644
index 00000000..968b8be5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_d.png
new file mode 100644
index 00000000..a3f9968d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_o.png
new file mode 100644
index 00000000..c9080e14
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_mytalk_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password.png
new file mode 100644
index 00000000..f70bdb38
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password_d.png
new file mode 100644
index 00000000..4dedda3b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_password_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone.png
new file mode 100644
index 00000000..0a7326fd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_d.png
new file mode 100644
index 00000000..f2178b3c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_o.png
new file mode 100644
index 00000000..e4ec346d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting.png
new file mode 100644
index 00000000..f04921c0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting_o.png
new file mode 100644
index 00000000..d46745d7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_setting_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking.png
new file mode 100644
index 00000000..310e374f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_d.png
new file mode 100644
index 00000000..fdb111dd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_o.png
new file mode 100644
index 00000000..50e5181e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_old.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_old.png
new file mode 100644
index 00000000..310e374f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_talking_old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_upload.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_upload.png
new file mode 100644
index 00000000..35b13143
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_upload.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference.png
new file mode 100644
index 00000000..a77d6bdd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_d.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_d.png
new file mode 100644
index 00000000..67c92605
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_o.png
new file mode 100644
index 00000000..01390bcc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_right_navi.png b/projects/ucap-webmessenger-app/src/assets/img/btn_right_navi.png
new file mode 100644
index 00000000..fb2ed7b3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_right_navi.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_search_del.png b/projects/ucap-webmessenger-app/src/assets/img/btn_search_del.png
new file mode 100644
index 00000000..6db25a5a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_search_del.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_slide.png b/projects/ucap-webmessenger-app/src/assets/img/btn_slide.png
new file mode 100644
index 00000000..68c7151f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_slide.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb.png
new file mode 100644
index 00000000..15211ac3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_off.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_off.png
new file mode 100644
index 00000000..dc223e76
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_off.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on.png
new file mode 100644
index 00000000..427bfa48
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on_over.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on_over.png
new file mode 100644
index 00000000..6d8978d1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_alarm_on_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_logout.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_logout.png
new file mode 100644
index 00000000..28dd7126
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_logout.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_old.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_old.png
new file mode 100644
index 00000000..c742535f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting.png
new file mode 100644
index 00000000..029c9485
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting_o.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting_o.png
new file mode 100644
index 00000000..67560a78
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_setting_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd.png
new file mode 100644
index 00000000..f65b6403
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd_over.png b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd_over.png
new file mode 100644
index 00000000..b2a607c1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btn_tnb_talkadd_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_close.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close.png
new file mode 100644
index 00000000..9038b692
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray.png
new file mode 100644
index 00000000..24472402
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray_o.png
new file mode 100644
index 00000000..f628242a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_gray_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_white.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_white.png
new file mode 100644
index 00000000..8997d911
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_close_white.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_edit.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_edit.png
new file mode 100644
index 00000000..46fa102b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_edit.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_off.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_off.png
new file mode 100644
index 00000000..ac4e56ae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_off.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on.png
new file mode 100644
index 00000000..798facc5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on_o.png
new file mode 100644
index 00000000..8735c486
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_alarm_on_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu_o.png
new file mode 100644
index 00000000..eb04631d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_menu_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search.png
new file mode 100644
index 00000000..890b5917
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search_o.png
new file mode 100644
index 00000000..736d8a1a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_taking_top_search_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close.png
new file mode 100644
index 00000000..0ce0aba0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close_o.png
new file mode 100644
index 00000000..cf6ccf9a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_close_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max.png
new file mode 100644
index 00000000..75b989cd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max_o.png
new file mode 100644
index 00000000..f77102a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_max_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_menu.png
new file mode 100644
index 00000000..615f9998
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min.png
new file mode 100644
index 00000000..3e6116a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min_o.png b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min_o.png
new file mode 100644
index 00000000..1930cc23
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/btnimg_top_min_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f.png
new file mode 100644
index 00000000..c7d52a1d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f_old.png b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f_old.png
new file mode 100644
index 00000000..f159a2dc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_f_old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/checkbox18_n.png b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_n.png
new file mode 100644
index 00000000..fdae1e6a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/checkbox18_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_balloon_counselor.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_balloon_counselor.png
new file mode 100644
index 00000000..09f9eada
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_balloon_counselor.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing.png
new file mode 100644
index 00000000..51f9ffa9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing_off.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing_off.png
new file mode 100644
index 00000000..eb09afa1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ing_off.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok.png
new file mode 100644
index 00000000..f27738a9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok_off.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok_off.png
new file mode 100644
index 00000000..14654fae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_ok_off.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_talk.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_talk.png
new file mode 100644
index 00000000..6975b218
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/bg_counselor_talk.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_fileup_o.png
new file mode 100644
index 00000000..3085db43
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send.png
new file mode 100644
index 00000000..b1d8c022
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send_o.png
new file mode 100644
index 00000000..80105c75
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_sticker_o.png
new file mode 100644
index 00000000..fe596d3e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_mainmenu_consultation.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_mainmenu_consultation.png
new file mode 100644
index 00000000..4f46681b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/btn_mainmenu_consultation.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/counselor_chat_bgimg.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/counselor_chat_bgimg.png
new file mode 100644
index 00000000..d917b560
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/counselor_chat_bgimg.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/dot_counselor.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/dot_counselor.png
new file mode 100644
index 00000000..32baaf1a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/dot_counselor.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/img_counselor.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/img_counselor.png
new file mode 100644
index 00000000..ca6ea613
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/img_counselor.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/counselor/textBalloon_tail_my_cou.png b/projects/ucap-webmessenger-app/src/assets/img/counselor/textBalloon_tail_my_cou.png
new file mode 100644
index 00000000..080cf841
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/counselor/textBalloon_tail_my_cou.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/company2.png b/projects/ucap-webmessenger-app/src/assets/img/dtree/company2.png
new file mode 100644
index 00000000..c138215a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/company2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/company2_old.png b/projects/ucap-webmessenger-app/src/assets/img/dtree/company2_old.png
new file mode 100644
index 00000000..d641d459
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/company2_old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/empty.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/empty.gif
new file mode 100644
index 00000000..b5cf5237
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/empty.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.gif
new file mode 100644
index 00000000..c651b848
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.png b/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.png
new file mode 100644
index 00000000..1571764e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/folder.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/folderopen.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/folderopen.gif
new file mode 100644
index 00000000..c651b848
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/folderopen.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/join.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/join.gif
new file mode 100644
index 00000000..34dd4761
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/join.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/joinbottom.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/joinbottom.gif
new file mode 100644
index 00000000..48b81c80
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/joinbottom.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/line.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/line.gif
new file mode 100644
index 00000000..1a259eea
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/line.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/minus.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/minus.gif
new file mode 100644
index 00000000..3d212a97
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/minus.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/minusbottom.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/minusbottom.gif
new file mode 100644
index 00000000..dc3198be
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/minusbottom.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/page.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/page.gif
new file mode 100644
index 00000000..54bcd62d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/page.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/plus.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/plus.gif
new file mode 100644
index 00000000..b2c99723
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/plus.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/plusbottom.gif b/projects/ucap-webmessenger-app/src/assets/img/dtree/plusbottom.gif
new file mode 100644
index 00000000..b5671d89
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/plusbottom.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/dtree/root.png b/projects/ucap-webmessenger-app/src/assets/img/dtree/root.png
new file mode 100644
index 00000000..c138215a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/dtree/root.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/empty_chat.jpg b/projects/ucap-webmessenger-app/src/assets/img/empty_chat.jpg
new file mode 100644
index 00000000..a49daee3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/empty_chat.jpg differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/favicon.ico b/projects/ucap-webmessenger-app/src/assets/img/favicon.ico
new file mode 100644
index 00000000..6ae3ca71
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/favicon.ico differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/favicon.png b/projects/ucap-webmessenger-app/src/assets/img/favicon.png
new file mode 100644
index 00000000..3cdca62f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/favicon.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_next_footerList2.png b/projects/ucap-webmessenger-app/src/assets/img/ic_next_footerList2.png
new file mode 100644
index 00000000..90f8acd8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_next_footerList2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_pre_footerList2.png b/projects/ucap-webmessenger-app/src/assets/img/ic_pre_footerList2.png
new file mode 100644
index 00000000..dc38950a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_pre_footerList2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_profile_company.png b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_company.png
new file mode 100644
index 00000000..3bb720fc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_company.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_profile_mail.png b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_mail.png
new file mode 100644
index 00000000..3751de64
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_mail.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_profile_phone.png b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_phone.png
new file mode 100644
index 00000000..d3f4a6bd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_phone.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_profile_team.png b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_team.png
new file mode 100644
index 00000000..16b40f59
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_team.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_profile_telephone.png b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_telephone.png
new file mode 100644
index 00000000..a016e286
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_profile_telephone.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_status_call.png b/projects/ucap-webmessenger-app/src/assets/img/ic_status_call.png
new file mode 100644
index 00000000..8fb7663c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_status_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_status_com.png b/projects/ucap-webmessenger-app/src/assets/img/ic_status_com.png
new file mode 100644
index 00000000..528a6faf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_status_com.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_status_mobile.png b/projects/ucap-webmessenger-app/src/assets/img/ic_status_mobile.png
new file mode 100644
index 00000000..d53369f4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_status_mobile.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ic_status_vc.png b/projects/ucap-webmessenger-app/src/assets/img/ic_status_vc.png
new file mode 100644
index 00000000..c9e03a5e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ic_status_vc.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ico_64_64.png b/projects/ucap-webmessenger-app/src/assets/img/ico_64_64.png
new file mode 100644
index 00000000..adbc1dd4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ico_64_64.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.ico b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.ico
new file mode 100644
index 00000000..d62de46c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.ico differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.png b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.png
new file mode 100644
index 00000000..97356635
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.ico b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.ico
new file mode 100644
index 00000000..f42e7df3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.ico differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.png b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.png
new file mode 100644
index 00000000..a8959b35
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/ico_64x64_r.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_absence.png b/projects/ucap-webmessenger-app/src/assets/img/icon_absence.png
new file mode 100644
index 00000000..5f75d7ba
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_absence.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/icon_add.png
new file mode 100644
index 00000000..99ad31a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_all_close.png b/projects/ucap-webmessenger-app/src/assets/img/icon_all_close.png
new file mode 100644
index 00000000..a2cb8ed4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_all_close.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_all_close_over.png b/projects/ucap-webmessenger-app/src/assets/img/icon_all_close_over.png
new file mode 100644
index 00000000..3193e25a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_all_close_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_clock_s.png b/projects/ucap-webmessenger-app/src/assets/img/icon_clock_s.png
new file mode 100644
index 00000000..c2157f7f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_clock_s.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_contact.png b/projects/ucap-webmessenger-app/src/assets/img/icon_contact.png
new file mode 100644
index 00000000..cfb16c48
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_contact.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/icon_contact_on.png
new file mode 100644
index 00000000..0c74ade3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/icon_contact_over.png
new file mode 100644
index 00000000..05c71132
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_dial.png b/projects/ucap-webmessenger-app/src/assets/img/icon_dial.png
new file mode 100644
index 00000000..612eba32
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_dial.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/icon_dial_on.png
new file mode 100644
index 00000000..d79ccd56
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/icon_dial_over.png
new file mode 100644
index 00000000..66700403
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_fail.png b/projects/ucap-webmessenger-app/src/assets/img/icon_fail.png
new file mode 100644
index 00000000..6d7f1c1f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_fail.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu.png b/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu.png
new file mode 100644
index 00000000..2fa7cd57
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu_over.png
new file mode 100644
index 00000000..7eba0212
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_gray.png b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_gray.png
new file mode 100644
index 00000000..43588650
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_gray.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_green.png b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_green.png
new file mode 100644
index 00000000..7fc97f0b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_green.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_yellow.png b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_yellow.png
new file mode 100644
index 00000000..a7237966
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_leaf_yellow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_log.png b/projects/ucap-webmessenger-app/src/assets/img/icon_log.png
new file mode 100644
index 00000000..41ac9c1f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_log.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/icon_log_on.png
new file mode 100644
index 00000000..76c2d8a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/icon_log_over.png
new file mode 100644
index 00000000..4c7abb63
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_install.png b/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_install.png
new file mode 100644
index 00000000..2e8bb6e7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_install.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_pass.png b/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_pass.png
new file mode 100644
index 00000000..ca71ae71
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_login_change_pass.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_menu.png b/projects/ucap-webmessenger-app/src/assets/img/icon_menu.png
new file mode 100644
index 00000000..cb6d7940
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_receive.png b/projects/ucap-webmessenger-app/src/assets/img/icon_receive.png
new file mode 100644
index 00000000..002d191d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_receive.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_refresh.png b/projects/ucap-webmessenger-app/src/assets/img/icon_refresh.png
new file mode 100644
index 00000000..7a2981f2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_refresh.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_refresh_o.png b/projects/ucap-webmessenger-app/src/assets/img/icon_refresh_o.png
new file mode 100644
index 00000000..86ee720e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_refresh_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_refuse.png b/projects/ucap-webmessenger-app/src/assets/img/icon_refuse.png
new file mode 100644
index 00000000..2a3a4863
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_refuse.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_send.png b/projects/ucap-webmessenger-app/src/assets/img/icon_send.png
new file mode 100644
index 00000000..6fa0ea49
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_state_alarm.png b/projects/ucap-webmessenger-app/src/assets/img/icon_state_alarm.png
new file mode 100644
index 00000000..73640d28
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_state_alarm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_off.png b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_off.png
new file mode 100644
index 00000000..6408c55b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_off.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_on.png b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_on.png
new file mode 100644
index 00000000..fa395825
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_arlam_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit.png b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit.png
new file mode 100644
index 00000000..78f28dab
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..6914db36
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_error_small.png b/projects/ucap-webmessenger-app/src/assets/img/img_error_small.png
new file mode 100644
index 00000000..61cf1df3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_error_small.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_doc.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_doc.png
new file mode 100644
index 00000000..ae376e9f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_doc.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_exe.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_exe.png
new file mode 100644
index 00000000..63c985ea
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_exe.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_file.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_file.png
new file mode 100644
index 00000000..e4a55542
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_file.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_hwp.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_hwp.png
new file mode 100644
index 00000000..4bbc913a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_hwp.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_img.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_img.png
new file mode 100644
index 00000000..ec8b2172
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_img.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_mov.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_mov.png
new file mode 100644
index 00000000..1d0fb64f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_mov.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_ppt.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_ppt.png
new file mode 100644
index 00000000..b04419c3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_ppt.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_xls.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_xls.png
new file mode 100644
index 00000000..4a051727
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_xls.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_zip.png b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_zip.png
new file mode 100644
index 00000000..d405f3a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_filebox_list_zip.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_36.png b/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_36.png
new file mode 100644
index 00000000..1b98d1e1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_36.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_80.png b/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_80.png
new file mode 100644
index 00000000..2f6e938f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_groupphoto_80.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_logo.png b/projects/ucap-webmessenger-app/src/assets/img/img_logo.png
new file mode 100644
index 00000000..64d05f08
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_logo.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_logo1.png b/projects/ucap-webmessenger-app/src/assets/img/img_logo1.png
new file mode 100644
index 00000000..3869890c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_logo1.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_logo_m.png b/projects/ucap-webmessenger-app/src/assets/img/img_logo_m.png
new file mode 100644
index 00000000..d1e1d6aa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_logo_m.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_logo_ucap.png b/projects/ucap-webmessenger-app/src/assets/img/img_logo_ucap.png
new file mode 100644
index 00000000..0b1d30df
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_logo_ucap.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_no_small.png b/projects/ucap-webmessenger-app/src/assets/img/img_no_small.png
new file mode 100644
index 00000000..9b8a66ae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_no_small.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_30.png b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_30.png
new file mode 100644
index 00000000..0db06d25
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_30.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_36.png b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_36.png
new file mode 100644
index 00000000..f4feed19
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_36.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_50.png b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_50.png
new file mode 100644
index 00000000..029f81bd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_50.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_70.png b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_70.png
new file mode 100644
index 00000000..2840dd90
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_70.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_88.png b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_88.png
new file mode 100644
index 00000000..73205f6b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_nophoto_88.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_ok_small.png b/projects/ucap-webmessenger-app/src/assets/img/img_ok_small.png
new file mode 100644
index 00000000..925c1536
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_ok_small.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_profile_default-old.png b/projects/ucap-webmessenger-app/src/assets/img/img_profile_default-old.png
new file mode 100644
index 00000000..2d4105c5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_profile_default-old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_profile_default.png b/projects/ucap-webmessenger-app/src/assets/img/img_profile_default.png
new file mode 100644
index 00000000..b1d0aae4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_profile_default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/img_search_small.png b/projects/ucap-webmessenger-app/src/assets/img/img_search_small.png
new file mode 100644
index 00000000..21e2d9ae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/img_search_small.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/loading.gif b/projects/ucap-webmessenger-app/src/assets/img/loading.gif
new file mode 100644
index 00000000..27dbe011
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/loading.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/login_logo.png b/projects/ucap-webmessenger-app/src/assets/img/login_logo.png
new file mode 100644
index 00000000..79d170e3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/login_logo.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/logot.png b/projects/ucap-webmessenger-app/src/assets/img/logot.png
new file mode 100644
index 00000000..4ceb80f6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/logot.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_message.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_message.png
new file mode 100644
index 00000000..0e2c7949
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_message.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_receive.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_receive.png
new file mode 100644
index 00000000..7f60010e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_receive.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_refuse.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_refuse.png
new file mode 100644
index 00000000..674a5843
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_refuse.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_transfer.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_transfer.png
new file mode 100644
index 00000000..fdd11523
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_call_transfer.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close.png
new file mode 100644
index 00000000..2cdaee37
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close_gray.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close_gray.png
new file mode 100644
index 00000000..0ce0aba0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_close_gray.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/btn_noti_call.png b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_noti_call.png
new file mode 100644
index 00000000..9e695905
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/btn_noti_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/noti/img_nophoto_50.png b/projects/ucap-webmessenger-app/src/assets/img/noti/img_nophoto_50.png
new file mode 100644
index 00000000..029f81bd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/noti/img_nophoto_50.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/profile_text.png b/projects/ucap-webmessenger-app/src/assets/img/profile_text.png
new file mode 100644
index 00000000..f04cfc95
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/profile_text.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_df.png b/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_df.png
new file mode 100644
index 00000000..33f493ae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_df.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_f.png
new file mode 100644
index 00000000..e751a4e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/right_infoimg.png b/projects/ucap-webmessenger-app/src/assets/img/right_infoimg.png
new file mode 100644
index 00000000..edf4b5b8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/right_infoimg.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left.png
new file mode 100644
index 00000000..ed2ee1e4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left_d.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left_d.png
new file mode 100644
index 00000000..7cf04c77
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_left_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right.png
new file mode 100644
index 00000000..18afdb1b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right_d.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right_d.png
new file mode 100644
index 00000000..56cff587
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/btn_arrow_s_right_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00.png
new file mode 100644
index 00000000..48e1a1cf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00_f.png
new file mode 100644
index 00000000..473a1a8f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate00_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01.png
new file mode 100644
index 00000000..2ff79351
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01_f.png
new file mode 100644
index 00000000..1bc1cfcb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate01_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02.png
new file mode 100644
index 00000000..86123917
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02_f.png
new file mode 100644
index 00000000..b97e7e1a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate02_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03.png
new file mode 100644
index 00000000..e2220d73
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03_f.png
new file mode 100644
index 00000000..623c8125
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate03_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04.png
new file mode 100644
index 00000000..06342952
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04_f.png
new file mode 100644
index 00000000..589aef3d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate04_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05.png
new file mode 100644
index 00000000..2038211f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05_f.png
new file mode 100644
index 00000000..9ae1ca3a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate05_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12.png
new file mode 100644
index 00000000..6a4b7ff0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12_f.png
new file mode 100644
index 00000000..763209e1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_cate12_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_default.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_default.png
new file mode 100644
index 00000000..cde8145a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_01.png
new file mode 100644
index 00000000..ae414df2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_02.png
new file mode 100644
index 00000000..d932c0af
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_03.png
new file mode 100644
index 00000000..855cb623
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_04.png
new file mode 100644
index 00000000..7ab1ddf4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_05.png
new file mode 100644
index 00000000..c82b4517
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_06.png
new file mode 100644
index 00000000..265baeea
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_07.png
new file mode 100644
index 00000000..80f055cf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_08.png
new file mode 100644
index 00000000..6e748f77
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_01_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_01.png
new file mode 100644
index 00000000..8d12dc18
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_02.png
new file mode 100644
index 00000000..bc746b36
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_03.png
new file mode 100644
index 00000000..6c248253
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_04.png
new file mode 100644
index 00000000..370cc2f9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_05.png
new file mode 100644
index 00000000..49fc4159
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_06.png
new file mode 100644
index 00000000..b87fa949
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_07.png
new file mode 100644
index 00000000..99863f17
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_08.png
new file mode 100644
index 00000000..f01f6eb3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_02_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_01.png
new file mode 100644
index 00000000..aa41bbc7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_02.png
new file mode 100644
index 00000000..2cd08aaa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_03.png
new file mode 100644
index 00000000..2ae84906
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_04.png
new file mode 100644
index 00000000..b895a38b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_05.png
new file mode 100644
index 00000000..aa693626
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_06.png
new file mode 100644
index 00000000..bceb6fa5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_07.png
new file mode 100644
index 00000000..f0ceb490
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_08.png
new file mode 100644
index 00000000..e573f06f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_03_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_01.png
new file mode 100644
index 00000000..711427db
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_02.png
new file mode 100644
index 00000000..aaad329b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_03.png
new file mode 100644
index 00000000..1db18e3a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_04.png
new file mode 100644
index 00000000..c39a830d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_05.png
new file mode 100644
index 00000000..35fdfaf4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_06.png
new file mode 100644
index 00000000..790d72fa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_07.png
new file mode 100644
index 00000000..27d318e7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_08.png
new file mode 100644
index 00000000..8802c5cc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_04_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_01.png
new file mode 100644
index 00000000..65b114af
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_02.png
new file mode 100644
index 00000000..cd2e6a01
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_03.png
new file mode 100644
index 00000000..e993d1b9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_04.png
new file mode 100644
index 00000000..29d0705c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_05.png
new file mode 100644
index 00000000..ab922e5f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_06.png
new file mode 100644
index 00000000..daa1706c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_07.png
new file mode 100644
index 00000000..2e13de32
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_08.png
new file mode 100644
index 00000000..4a57d895
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_09.png
new file mode 100644
index 00000000..b24769ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_10.png
new file mode 100644
index 00000000..4e04ba64
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_11.png
new file mode 100644
index 00000000..bbe341da
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_12.png
new file mode 100644
index 00000000..a454acbd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_13.png
new file mode 100644
index 00000000..83b96ebd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_14.png
new file mode 100644
index 00000000..4b3f235a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_15.png
new file mode 100644
index 00000000..8f4b20fa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_16.png
new file mode 100644
index 00000000..7d9e169a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_05_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_01.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_01.gif
new file mode 100644
index 00000000..85f276c4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_01.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_02.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_02.gif
new file mode 100644
index 00000000..a26883bf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_02.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_03.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_03.gif
new file mode 100644
index 00000000..eedf12d5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_03.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_04.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_04.gif
new file mode 100644
index 00000000..b7938f65
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_04.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_05.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_05.gif
new file mode 100644
index 00000000..a6a92d06
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_05.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_06.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_06.gif
new file mode 100644
index 00000000..43905c28
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_06.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_07.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_07.gif
new file mode 100644
index 00000000..7830ead0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_07.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_08.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_08.gif
new file mode 100644
index 00000000..331ee690
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_08.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_09.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_09.gif
new file mode 100644
index 00000000..5a30b5c4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_09.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_10.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_10.gif
new file mode 100644
index 00000000..ff48863b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_10.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_11.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_11.gif
new file mode 100644
index 00000000..94ac3ab0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_11.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_12.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_12.gif
new file mode 100644
index 00000000..2b07f860
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_12.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_13.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_13.gif
new file mode 100644
index 00000000..d512a44d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_13.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_14.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_14.gif
new file mode 100644
index 00000000..944c7450
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_14.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_15.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_15.gif
new file mode 100644
index 00000000..ed00c40b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_15.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_16.gif b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_16.gif
new file mode 100644
index 00000000..57aaceae
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker/sticker_s_12_16.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left.png
new file mode 100644
index 00000000..ed2ee1e4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left_d.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left_d.png
new file mode 100644
index 00000000..7cf04c77
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_left_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right.png
new file mode 100644
index 00000000..18afdb1b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right_d.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right_d.png
new file mode 100644
index 00000000..56cff587
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/btn_arrow_s_right_d.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_01.png
new file mode 100644
index 00000000..ca8c3cf7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_02.png
new file mode 100644
index 00000000..ec98cff7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_03.png
new file mode 100644
index 00000000..8f6d3f8a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_04.png
new file mode 100644
index 00000000..0d390237
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_05.png
new file mode 100644
index 00000000..828e1f50
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_06.png
new file mode 100644
index 00000000..649b5380
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_07.png
new file mode 100644
index 00000000..c41650c0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_08.png
new file mode 100644
index 00000000..5ead66e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_09.png
new file mode 100644
index 00000000..aee61845
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_10.png
new file mode 100644
index 00000000..f7afba72
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_11.png
new file mode 100644
index 00000000..76d20ec8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_12.png
new file mode 100644
index 00000000..51e56330
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_13.png
new file mode 100644
index 00000000..9da9b610
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_14.png
new file mode 100644
index 00000000..e9d5da01
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_15.png
new file mode 100644
index 00000000..d88ebe48
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_16.png
new file mode 100644
index 00000000..096dbefd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_17.png
new file mode 100644
index 00000000..fadb703a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_18.png
new file mode 100644
index 00000000..8cfb9b96
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_19.png
new file mode 100644
index 00000000..11620aa2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_20.png
new file mode 100644
index 00000000..36d20238
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_21.png
new file mode 100644
index 00000000..a479ddaa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_22.png
new file mode 100644
index 00000000..58fc751e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_23.png
new file mode 100644
index 00000000..6a31624a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_24.png
new file mode 100644
index 00000000..6bfd6e2c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker12_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_01.png
new file mode 100644
index 00000000..63953d52
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_02.png
new file mode 100644
index 00000000..378d7cd8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_03.png
new file mode 100644
index 00000000..a5d4e30d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_04.png
new file mode 100644
index 00000000..b3333487
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_05.png
new file mode 100644
index 00000000..4563db79
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_06.png
new file mode 100644
index 00000000..cb22b6d3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_07.png
new file mode 100644
index 00000000..fc7fa16c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_08.png
new file mode 100644
index 00000000..2e416449
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_09.png
new file mode 100644
index 00000000..e2a57798
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_10.png
new file mode 100644
index 00000000..8ceec763
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_11.png
new file mode 100644
index 00000000..b9f1dfca
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_12.png
new file mode 100644
index 00000000..28b15cf0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_13.png
new file mode 100644
index 00000000..2b0d21a6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_14.png
new file mode 100644
index 00000000..50e65d0a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_15.png
new file mode 100644
index 00000000..47d47759
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_16.png
new file mode 100644
index 00000000..a96d27e8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_17.png
new file mode 100644
index 00000000..d0a21b4d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_18.png
new file mode 100644
index 00000000..de636d85
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_19.png
new file mode 100644
index 00000000..8aab287e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_20.png
new file mode 100644
index 00000000..a6d1a4bf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_21.png
new file mode 100644
index 00000000..53b5a894
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_22.png
new file mode 100644
index 00000000..545def7a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_23.png
new file mode 100644
index 00000000..dd6fb0e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_24.png
new file mode 100644
index 00000000..1a7c8a3c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker13_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_01.png
new file mode 100644
index 00000000..eeabe1fc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_02.png
new file mode 100644
index 00000000..a12fa33a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_03.png
new file mode 100644
index 00000000..bd1dee0d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_04.png
new file mode 100644
index 00000000..5cdb8cfa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_05.png
new file mode 100644
index 00000000..f3ed0ed5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_06.png
new file mode 100644
index 00000000..a9548f15
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_07.png
new file mode 100644
index 00000000..b795e223
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_08.png
new file mode 100644
index 00000000..0440125f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_09.png
new file mode 100644
index 00000000..df0adab4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_10.png
new file mode 100644
index 00000000..8355fadc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_11.png
new file mode 100644
index 00000000..9f29291d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_12.png
new file mode 100644
index 00000000..4fa972cc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_13.png
new file mode 100644
index 00000000..28659ed3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_14.png
new file mode 100644
index 00000000..a8419bb6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_15.png
new file mode 100644
index 00000000..d4a46f24
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_16.png
new file mode 100644
index 00000000..9f7b023b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_17.png
new file mode 100644
index 00000000..f00fd290
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_18.png
new file mode 100644
index 00000000..f8112903
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_19.png
new file mode 100644
index 00000000..616d6086
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_20.png
new file mode 100644
index 00000000..d3fbb6c5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_21.png
new file mode 100644
index 00000000..9c624866
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_22.png
new file mode 100644
index 00000000..1245bb06
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_23.png
new file mode 100644
index 00000000..b2f7f4c2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_24.png
new file mode 100644
index 00000000..4c18e260
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker14_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_01.png
new file mode 100644
index 00000000..dd709e29
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_02.png
new file mode 100644
index 00000000..47efd42f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_03.png
new file mode 100644
index 00000000..0546aedf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_04.png
new file mode 100644
index 00000000..68675edf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_05.png
new file mode 100644
index 00000000..f6f040bb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_06.png
new file mode 100644
index 00000000..d6a7280f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_07.png
new file mode 100644
index 00000000..9423a000
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_08.png
new file mode 100644
index 00000000..23639b39
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_09.png
new file mode 100644
index 00000000..54e11feb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_10.png
new file mode 100644
index 00000000..e02ccea6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_11.png
new file mode 100644
index 00000000..3e41aec9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_12.png
new file mode 100644
index 00000000..56b9272a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_13.png
new file mode 100644
index 00000000..3f65ac3d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_14.png
new file mode 100644
index 00000000..6118c883
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_15.png
new file mode 100644
index 00000000..76665a29
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_16.png
new file mode 100644
index 00000000..2ec23030
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_17.png
new file mode 100644
index 00000000..fe22c6a2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_18.png
new file mode 100644
index 00000000..0029d0a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_19.png
new file mode 100644
index 00000000..62f8dfa6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_20.png
new file mode 100644
index 00000000..1cbf745e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_21.png
new file mode 100644
index 00000000..6d7c8ed8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_22.png
new file mode 100644
index 00000000..136a769d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_23.png
new file mode 100644
index 00000000..6881a5f0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_24.png
new file mode 100644
index 00000000..7acae49a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker15_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_01.png
new file mode 100644
index 00000000..c3797c10
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_02.png
new file mode 100644
index 00000000..81e42646
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_03.png
new file mode 100644
index 00000000..b503356a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_04.png
new file mode 100644
index 00000000..cee1b207
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_05.png
new file mode 100644
index 00000000..2c9b03e8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_06.png
new file mode 100644
index 00000000..0c5a51e6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_07.png
new file mode 100644
index 00000000..f5247378
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_08.png
new file mode 100644
index 00000000..cd67fc99
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_09.png
new file mode 100644
index 00000000..9b2f22f3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_10.png
new file mode 100644
index 00000000..63e63e43
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_11.png
new file mode 100644
index 00000000..f13d0eda
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_12.png
new file mode 100644
index 00000000..9671f0ed
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_13.png
new file mode 100644
index 00000000..7f4ffdeb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_14.png
new file mode 100644
index 00000000..6ff563aa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_15.png
new file mode 100644
index 00000000..0d6476f3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_16.png
new file mode 100644
index 00000000..40f3a101
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_17.png
new file mode 100644
index 00000000..419ca4d2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_18.png
new file mode 100644
index 00000000..ddabf8c3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_19.png
new file mode 100644
index 00000000..b59adab6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_20.png
new file mode 100644
index 00000000..3cda34b9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_21.png
new file mode 100644
index 00000000..308a992c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_22.png
new file mode 100644
index 00000000..52ec28a5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_23.png
new file mode 100644
index 00000000..cbbed401
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_24.png
new file mode 100644
index 00000000..1438bbee
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker16_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_01.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_01.png
new file mode 100644
index 00000000..89ced6f2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_01.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_02.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_02.png
new file mode 100644
index 00000000..e59dc5e2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_02.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_03.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_03.png
new file mode 100644
index 00000000..9691f849
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_03.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_04.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_04.png
new file mode 100644
index 00000000..27c5b4b2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_04.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_05.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_05.png
new file mode 100644
index 00000000..47bb6020
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_05.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_06.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_06.png
new file mode 100644
index 00000000..183b3347
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_06.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_07.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_07.png
new file mode 100644
index 00000000..9754440f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_07.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_08.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_08.png
new file mode 100644
index 00000000..07777f35
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_08.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_09.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_09.png
new file mode 100644
index 00000000..5b62f823
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_09.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_10.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_10.png
new file mode 100644
index 00000000..3fda1d26
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_10.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_11.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_11.png
new file mode 100644
index 00000000..a7e6b0ff
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_11.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_12.png
new file mode 100644
index 00000000..e968659c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_13.png
new file mode 100644
index 00000000..edfecca1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_14.png
new file mode 100644
index 00000000..fcdacdf5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_15.png
new file mode 100644
index 00000000..73e47d26
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_16.png
new file mode 100644
index 00000000..fb298ccf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_17.png
new file mode 100644
index 00000000..34c2b8cb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_18.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_18.png
new file mode 100644
index 00000000..59119286
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_18.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_19.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_19.png
new file mode 100644
index 00000000..ade70f4f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_19.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_20.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_20.png
new file mode 100644
index 00000000..c08cd93c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_20.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_21.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_21.png
new file mode 100644
index 00000000..2e6d3ec9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_21.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_22.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_22.png
new file mode 100644
index 00000000..9418478f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_22.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_23.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_23.png
new file mode 100644
index 00000000..4b1058dc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_23.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_24.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_24.png
new file mode 100644
index 00000000..1a7f3ac7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_24.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_25.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_25.png
new file mode 100644
index 00000000..53ff8683
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_25.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_26.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_26.png
new file mode 100644
index 00000000..20571361
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_26.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_27.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_27.png
new file mode 100644
index 00000000..1c80ac4d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_27.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_28.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_28.png
new file mode 100644
index 00000000..49a5f558
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_28.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_29.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_29.png
new file mode 100644
index 00000000..ee59592d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_29.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_30.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_30.png
new file mode 100644
index 00000000..b49e08ba
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker17_30.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00.png
new file mode 100644
index 00000000..48e1a1cf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00_f.png
new file mode 100644
index 00000000..89b14a78
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate00_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12.png
new file mode 100644
index 00000000..b3013a1d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12_f.png
new file mode 100644
index 00000000..dd31c3a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate12_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13.png
new file mode 100644
index 00000000..276767ea
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13_f.png
new file mode 100644
index 00000000..6b98244d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate13_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14.png
new file mode 100644
index 00000000..daa55f1c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14_f.png
new file mode 100644
index 00000000..dd3e6fed
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate14_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15.png
new file mode 100644
index 00000000..d069a8c9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15_f.png
new file mode 100644
index 00000000..1ce2e545
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate15_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16.png
new file mode 100644
index 00000000..47e922a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16_f.png
new file mode 100644
index 00000000..61014e8f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17.png
new file mode 100644
index 00000000..c8e48eb6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17_f.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17_f.png
new file mode 100644
index 00000000..baac92ce
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_cate17_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_default.png b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_default.png
new file mode 100644
index 00000000..cde8145a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/sticker_kt/sticker_default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/bg1.png b/projects/ucap-webmessenger-app/src/assets/img/temp/bg1.png
new file mode 100644
index 00000000..22d98c56
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/bg1.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/bg2.png b/projects/ucap-webmessenger-app/src/assets/img/temp/bg2.png
new file mode 100644
index 00000000..1dc5fe6d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/bg2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/bg3.png b/projects/ucap-webmessenger-app/src/assets/img/temp/bg3.png
new file mode 100644
index 00000000..fd86b82e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/bg3.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/bg4.png b/projects/ucap-webmessenger-app/src/assets/img/temp/bg4.png
new file mode 100644
index 00000000..75e8d876
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/bg4.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation.png b/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation.png
new file mode 100644
index 00000000..ea0d9603
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation_p.png b/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation_p.png
new file mode 100644
index 00000000..b2d10eb7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/temp/btn_cooperation_p.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_my.png b/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_my.png
new file mode 100644
index 00000000..773f764f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_my.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_other.png b/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_other.png
new file mode 100644
index 00000000..962c2f54
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/textBalloon_tail_other.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_fileup_o.png
new file mode 100644
index 00000000..1c401009
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_insert.png
new file mode 100644
index 00000000..6e44a931
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send.png
new file mode 100644
index 00000000..b1fa250b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send_o.png
new file mode 100644
index 00000000..b9c6bc2f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_sticker_o.png
new file mode 100644
index 00000000..7fe59472
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..8ed77485
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..78c23944
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_colleague_delete.png
new file mode 100644
index 00000000..e0b91941
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_delete2.png
new file mode 100644
index 00000000..196febc1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_n.png
new file mode 100644
index 00000000..38dac6ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_o.png
new file mode 100644
index 00000000..62297bbb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_edit_confirm.png
new file mode 100644
index 00000000..a8c16bc3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_global.png
new file mode 100644
index 00000000..a84f21dc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add.png
new file mode 100644
index 00000000..0dee4217
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add_o.png
new file mode 100644
index 00000000..bffda38a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_list_call_n.png
new file mode 100644
index 00000000..189067b0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_arrow.png
new file mode 100644
index 00000000..ecd9fa53
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..a3a389f1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..6d6edfb8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_consultation_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_consultation_on.png
new file mode 100644
index 00000000..718dfcee
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_consultation_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..bfc6a930
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..86e42829
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..d66c225b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow.png
new file mode 100644
index 00000000..b6ded754
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow_o.png
new file mode 100644
index 00000000..f07c5395
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..4e8d31a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_c.png
new file mode 100644
index 00000000..c9f3dea8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_h.png
new file mode 100644
index 00000000..31af5b8d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_message_o.png
new file mode 100644
index 00000000..dcbc1dd5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_mobile_o.png
new file mode 100644
index 00000000..b95ebb1b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_phone_o.png
new file mode 100644
index 00000000..e4ec346d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_talking_o.png
new file mode 100644
index 00000000..5014caa5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_vConference_o.png
new file mode 100644
index 00000000..01390bcc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/checkbox18_f.png
new file mode 100644
index 00000000..039366c1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_add.png
new file mode 100644
index 00000000..99ad31a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_on.png
new file mode 100644
index 00000000..0c74ade3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_over.png
new file mode 100644
index 00000000..05c71132
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_on.png
new file mode 100644
index 00000000..d79ccd56
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_over.png
new file mode 100644
index 00000000..66700403
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_group_menu_over.png
new file mode 100644
index 00000000..f3ef2619
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_on.png
new file mode 100644
index 00000000..76c2d8a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_over.png
new file mode 100644
index 00000000..4c7abb63
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o_old.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o_old.png
new file mode 100644
index 00000000..9a113871
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/icon_talk_list_edit_o_old.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_36.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_36.gif
new file mode 100644
index 00000000..0022cf35
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_36.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_80.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_80.gif
new file mode 100644
index 00000000..d0def79f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_groupphoto_80.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_30.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_30.gif
new file mode 100644
index 00000000..1596babc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_30.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_36.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_36.gif
new file mode 100644
index 00000000..00075819
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_36.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.gif
new file mode 100644
index 00000000..0fd5a843
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.png
new file mode 100644
index 00000000..d0f0a816
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_50.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_70.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_70.gif
new file mode 100644
index 00000000..8d0144f0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_70.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_88.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_88.gif
new file mode 100644
index 00000000..4a0013a3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_nophoto_88.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.gif b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.gif
new file mode 100644
index 00000000..a2acb198
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.gif differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.png
new file mode 100644
index 00000000..01412045
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/img_profile_default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/radiobtn16_f.png
new file mode 100644
index 00000000..e751a4e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme01/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_fileup_o.png
new file mode 100644
index 00000000..2ef43192
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_insert.png
new file mode 100644
index 00000000..f6aafb4b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send.png
new file mode 100644
index 00000000..304e0440
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send_o.png
new file mode 100644
index 00000000..dab719f5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_sticker_o.png
new file mode 100644
index 00000000..23a13079
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..67887f35
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..92396ea3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_colleague_delete.png
new file mode 100644
index 00000000..c954c610
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_delete2.png
new file mode 100644
index 00000000..6063ebbd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_n.png
new file mode 100644
index 00000000..0585fb6a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_o.png
new file mode 100644
index 00000000..f155a569
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_edit_confirm.png
new file mode 100644
index 00000000..e2d0f29e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_global.png
new file mode 100644
index 00000000..2c77b9e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add.png
new file mode 100644
index 00000000..55bddf42
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add_o.png
new file mode 100644
index 00000000..276f42fc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_list_call_n.png
new file mode 100644
index 00000000..066bf1c7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_arrow.png
new file mode 100644
index 00000000..f4c27042
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..51dec9b3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..fcc29876
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_consultation_on.PNG b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_consultation_on.PNG
new file mode 100644
index 00000000..98bade68
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_consultation_on.PNG differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..0cdefab9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..c5eb5dc9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..0cd7b8d3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow.png
new file mode 100644
index 00000000..20280f4b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow_o.png
new file mode 100644
index 00000000..871f0fa2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..2ff75320
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_c.png
new file mode 100644
index 00000000..7891fc83
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_h.png
new file mode 100644
index 00000000..07ced65a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_message_o.png
new file mode 100644
index 00000000..87abb40d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_mobile_o.png
new file mode 100644
index 00000000..6645f9a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_phone_o.png
new file mode 100644
index 00000000..575aa664
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_talking_o.png
new file mode 100644
index 00000000..1499c4d7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_vConference_o.png
new file mode 100644
index 00000000..b0261403
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/checkbox18_f.png
new file mode 100644
index 00000000..048a3554
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_add.png
new file mode 100644
index 00000000..86211593
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_on.png
new file mode 100644
index 00000000..309d4866
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_over.png
new file mode 100644
index 00000000..01abd7e8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_on.png
new file mode 100644
index 00000000..3d1be9b5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_over.png
new file mode 100644
index 00000000..54556591
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_group_menu_over.png
new file mode 100644
index 00000000..eb96e1be
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_on.png
new file mode 100644
index 00000000..a95b62ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_over.png
new file mode 100644
index 00000000..a95b62ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/radiobtn16_f.png
new file mode 100644
index 00000000..78b12a03
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme02/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_fileup_o.png
new file mode 100644
index 00000000..b6708a98
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_insert.png
new file mode 100644
index 00000000..0b5f6ac4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send.png
new file mode 100644
index 00000000..3608ae2a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send_o.png
new file mode 100644
index 00000000..29fb6384
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_sticker_o.png
new file mode 100644
index 00000000..85682095
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..67d21dc8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..bd3e7344
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_colleague_delete.png
new file mode 100644
index 00000000..d1a54f8f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_delete2.png
new file mode 100644
index 00000000..1603046e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_n.png
new file mode 100644
index 00000000..c093dad1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_o.png
new file mode 100644
index 00000000..02fd22fd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_edit_confirm.png
new file mode 100644
index 00000000..1194225b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_global.png
new file mode 100644
index 00000000..5e7e99db
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add.png
new file mode 100644
index 00000000..cf3130e5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add_o.png
new file mode 100644
index 00000000..e91a0053
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_list_call_n.png
new file mode 100644
index 00000000..573bb0e6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_arrow.png
new file mode 100644
index 00000000..42ae3c65
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..7e9c3c96
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..28fdb7a8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_consultation_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_consultation_on.png
new file mode 100644
index 00000000..b604ec7f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_consultation_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..869d6942
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..5ccc6c73
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..db425881
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow.png
new file mode 100644
index 00000000..8fa1f663
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow_o.png
new file mode 100644
index 00000000..9059a0c4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..63233fdd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_c.png
new file mode 100644
index 00000000..78d8418b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_h.png
new file mode 100644
index 00000000..5935ae77
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_message_o.png
new file mode 100644
index 00000000..3f5aed46
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_mobile_o.png
new file mode 100644
index 00000000..e3d674d6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_phone_o.png
new file mode 100644
index 00000000..aa7eec7e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_talking_o.png
new file mode 100644
index 00000000..da7eca26
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_vConference_o.png
new file mode 100644
index 00000000..08150ab6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/checkbox18_f.png
new file mode 100644
index 00000000..c1317f9e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_add.png
new file mode 100644
index 00000000..ca221a3a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_on.png
new file mode 100644
index 00000000..d1acd280
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_over.png
new file mode 100644
index 00000000..41504604
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_on.png
new file mode 100644
index 00000000..7c9f8b4c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_over.png
new file mode 100644
index 00000000..d7acc732
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_group_menu_over.png
new file mode 100644
index 00000000..31e7c7c9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_on.png
new file mode 100644
index 00000000..a11fc7a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_over.png
new file mode 100644
index 00000000..a11fc7a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/radiobtn16_f.png
new file mode 100644
index 00000000..06237735
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme03/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_fileup_o.png
new file mode 100644
index 00000000..45f8cd38
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_insert.png
new file mode 100644
index 00000000..a3fc43fe
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send.png
new file mode 100644
index 00000000..5c9a6ccd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send_o.png
new file mode 100644
index 00000000..d3452c05
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_sticker_o.png
new file mode 100644
index 00000000..f5bbaa11
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..1eb3e1fb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..cca7d825
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_colleague_delete.png
new file mode 100644
index 00000000..4d6571aa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_delete2.png
new file mode 100644
index 00000000..4484cfc4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_n.png
new file mode 100644
index 00000000..2e772347
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_o.png
new file mode 100644
index 00000000..b35a526a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_edit_confirm.png
new file mode 100644
index 00000000..2805971f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_global.png
new file mode 100644
index 00000000..54c66af6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add.png
new file mode 100644
index 00000000..0368620d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add_o.png
new file mode 100644
index 00000000..ef60d8ee
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_list_call_n.png
new file mode 100644
index 00000000..a583ff87
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_arrow.png
new file mode 100644
index 00000000..c3a723e1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..1bac2513
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..cd52a5de
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_consultation_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_consultation_on.png
new file mode 100644
index 00000000..29154912
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_consultation_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..ffb916c1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..fb231518
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..14e58504
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow.png
new file mode 100644
index 00000000..b85cf740
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow_o.png
new file mode 100644
index 00000000..2a3351b7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..16b8e050
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_c.png
new file mode 100644
index 00000000..7e1e10ad
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_h.png
new file mode 100644
index 00000000..235b55ac
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_message_o.png
new file mode 100644
index 00000000..7baa8394
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_mobile_o.png
new file mode 100644
index 00000000..8f5b3bb9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_phone_o.png
new file mode 100644
index 00000000..9ccdb72c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_talking_o.png
new file mode 100644
index 00000000..2d9709ee
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_vConference_o.png
new file mode 100644
index 00000000..7c88ae67
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/checkbox18_f.png
new file mode 100644
index 00000000..27a0f138
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_add.png
new file mode 100644
index 00000000..da954a80
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_on.png
new file mode 100644
index 00000000..6b84dbe0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_over.png
new file mode 100644
index 00000000..6d82abeb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_on.png
new file mode 100644
index 00000000..0336a170
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_over.png
new file mode 100644
index 00000000..164f6e9d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_group_menu_over.png
new file mode 100644
index 00000000..927914b5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_on.png
new file mode 100644
index 00000000..6c35bee6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_over.png
new file mode 100644
index 00000000..6c35bee6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/radiobtn16_f.png
new file mode 100644
index 00000000..249ec344
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme04/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_fileup_o.png
new file mode 100644
index 00000000..78e888bb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_insert.png
new file mode 100644
index 00000000..14d62519
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send.png
new file mode 100644
index 00000000..711965a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send_o.png
new file mode 100644
index 00000000..8ad20c78
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_sticker_o.png
new file mode 100644
index 00000000..cabc9f72
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..24eb782e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..46c71717
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_colleague_delete.png
new file mode 100644
index 00000000..0a798e6f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_delete2.png
new file mode 100644
index 00000000..03fcdd10
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_n.png
new file mode 100644
index 00000000..0585fb6a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_o.png
new file mode 100644
index 00000000..f155a569
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_edit_confirm.png
new file mode 100644
index 00000000..1635eec8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_global.png
new file mode 100644
index 00000000..c8741bb1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add.png
new file mode 100644
index 00000000..94b0d6ce
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add_o.png
new file mode 100644
index 00000000..7089eb32
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_list_call_n.png
new file mode 100644
index 00000000..cfbf0e56
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_arrow.png
new file mode 100644
index 00000000..2e1b0074
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..b0ba7d54
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..0ae22b5c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_consultation_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_consultation_on.png
new file mode 100644
index 00000000..d0ee46c6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_consultation_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..e141cfa3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..fd7d9bb3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..ca9d6523
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow.png
new file mode 100644
index 00000000..358e125a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow_o.png
new file mode 100644
index 00000000..28dacc12
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..a5410652
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_c.png
new file mode 100644
index 00000000..ebf7848f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_h.png
new file mode 100644
index 00000000..2604268d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_message_o.png
new file mode 100644
index 00000000..3b7220d4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_mobile_o.png
new file mode 100644
index 00000000..8c920bde
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_phone_o.png
new file mode 100644
index 00000000..e4368e2b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_talking_o.png
new file mode 100644
index 00000000..5e16b4b2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_vConference_o.png
new file mode 100644
index 00000000..64f5952d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/checkbox18_f.png
new file mode 100644
index 00000000..0cccd25b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_add.png
new file mode 100644
index 00000000..b7239614
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_on.png
new file mode 100644
index 00000000..9b260211
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_over.png
new file mode 100644
index 00000000..5cbdaa33
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_on.png
new file mode 100644
index 00000000..6e39c43a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_over.png
new file mode 100644
index 00000000..ebc01a9d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_group_menu_over.png
new file mode 100644
index 00000000..7b71c759
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_on.png
new file mode 100644
index 00000000..908796fe
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_over.png
new file mode 100644
index 00000000..4cb6cbbf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/radiobtn16_f.png
new file mode 100644
index 00000000..bf496f88
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme05/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_fileup_o.png
new file mode 100644
index 00000000..2e124384
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_insert.png
new file mode 100644
index 00000000..31fce981
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send.png
new file mode 100644
index 00000000..ac84d92b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send_o.png
new file mode 100644
index 00000000..72499beb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_sticker_o.png
new file mode 100644
index 00000000..bb2320ad
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..849ac2be
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..d150f935
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_colleague_delete.png
new file mode 100644
index 00000000..099c7ac7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_delete2.png
new file mode 100644
index 00000000..91561cd3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_n.png
new file mode 100644
index 00000000..743c6f51
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_o.png
new file mode 100644
index 00000000..5b9ae565
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_edit_confirm.png
new file mode 100644
index 00000000..b36e2d9d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_global.png
new file mode 100644
index 00000000..4ece4b86
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add.png
new file mode 100644
index 00000000..097e138b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add_o.png
new file mode 100644
index 00000000..85666a34
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_list_call_n.png
new file mode 100644
index 00000000..d2b1c4c3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_arrow.png
new file mode 100644
index 00000000..49ca24b6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..7edbb2be
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..6347e9e9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_consultation_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_consultation_on.png
new file mode 100644
index 00000000..8d52f528
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_consultation_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..53ecc833
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..908010cf
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..4abae40a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow.png
new file mode 100644
index 00000000..a6a03879
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow_o.png
new file mode 100644
index 00000000..9866e3a7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..ae64a79c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_c.png
new file mode 100644
index 00000000..67f29872
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_h.png
new file mode 100644
index 00000000..e33f89a5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_message_o.png
new file mode 100644
index 00000000..fbe6dabc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_mobile_o.png
new file mode 100644
index 00000000..4e366c18
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_phone_o.png
new file mode 100644
index 00000000..576ce164
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_talking_o.png
new file mode 100644
index 00000000..fa658e90
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_vConference_o.png
new file mode 100644
index 00000000..4695a8f2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/checkbox18_f.png
new file mode 100644
index 00000000..307d475d
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_add.png
new file mode 100644
index 00000000..bb5c6065
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_on.png
new file mode 100644
index 00000000..1d2f4f87
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_over.png
new file mode 100644
index 00000000..d75e3332
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_on.png
new file mode 100644
index 00000000..a3f53b0e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_over.png
new file mode 100644
index 00000000..7b017063
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_group_menu_over.png
new file mode 100644
index 00000000..aeb70656
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_on.png
new file mode 100644
index 00000000..fdc3be63
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_over.png
new file mode 100644
index 00000000..fdc3be63
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..aba7a700
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/radiobtn16_f.png
new file mode 100644
index 00000000..481fdda4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme06/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_colleague_word.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_colleague_word.png
new file mode 100644
index 00000000..bdd62bd5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_colleague_word.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_woori.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_woori.png
new file mode 100644
index 00000000..4d363a15
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/bg_woori.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_attendAdd.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_attendAdd.png
new file mode 100644
index 00000000..289ce8a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_attendAdd.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup.png
new file mode 100644
index 00000000..0e9d6233
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup_o.png
new file mode 100644
index 00000000..5b60b99c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_fileup_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_insert.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_insert.png
new file mode 100644
index 00000000..f6aafb4b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_insert.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send.png
new file mode 100644
index 00000000..3e0742e7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send_o.png
new file mode 100644
index 00000000..5747fc79
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_send_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker.png
new file mode 100644
index 00000000..d670efb1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker_o.png
new file mode 100644
index 00000000..e2d2013f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chat_sticker_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_cancel_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_cancel_o.png
new file mode 100644
index 00000000..67887f35
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_cancel_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_exit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_exit_o.png
new file mode 100644
index 00000000..92396ea3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_chatroom_exit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_colleague_delete.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_colleague_delete.png
new file mode 100644
index 00000000..c954c610
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_colleague_delete.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_delete2.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_delete2.png
new file mode 100644
index 00000000..6063ebbd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_delete2.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_n.png
new file mode 100644
index 00000000..0585fb6a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_o.png
new file mode 100644
index 00000000..f155a569
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_dial_del_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_edit_confirm.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_edit_confirm.png
new file mode 100644
index 00000000..e2d0f29e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_edit_confirm.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_global.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_global.png
new file mode 100644
index 00000000..2c77b9e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_global.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add.png
new file mode 100644
index 00000000..55bddf42
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add_o.png
new file mode 100644
index 00000000..276f42fc
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_group_add_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_mail.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_mail.png
new file mode 100644
index 00000000..44a86f56
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_mail.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_sms.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_sms.png
new file mode 100644
index 00000000..b703def8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_invite_sms.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_call.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_call.png
new file mode 100644
index 00000000..539168d6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_signal.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_signal.png
new file mode 100644
index 00000000..5303b3e0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_signal.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_talk.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_talk.png
new file mode 100644
index 00000000..996b7211
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_link_talk.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_list_call_n.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_list_call_n.png
new file mode 100644
index 00000000..066bf1c7
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_list_call_n.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_arrow.png
new file mode 100644
index 00000000..f4c27042
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_change_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_change_arrow_o.png
new file mode 100644
index 00000000..51dec9b3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_login_change_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_adds_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_adds_on.png
new file mode 100644
index 00000000..fcc29876
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_adds_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call.png
new file mode 100644
index 00000000..34c6492a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call_on.png
new file mode 100644
index 00000000..c6ea63d3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_call_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_consultation_on.PNG b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_consultation_on.PNG
new file mode 100644
index 00000000..98bade68
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_consultation_on.PNG differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_group_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_group_on.png
new file mode 100644
index 00000000..0cdefab9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_group_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_organization_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_organization_on.png
new file mode 100644
index 00000000..c5eb5dc9
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_organization_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_talk_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_talk_on.png
new file mode 100644
index 00000000..0cd7b8d3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_mainmenu_talk_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow.png
new file mode 100644
index 00000000..20280f4b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow_o.png
new file mode 100644
index 00000000..871f0fa2
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_member_arrow_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_myprofile_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_myprofile_edit_o.png
new file mode 100644
index 00000000..2ff75320
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_myprofile_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_first_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_first_o.png
new file mode 100644
index 00000000..4b484e46
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_first_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_last_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_last_o.png
new file mode 100644
index 00000000..c3e82ea6
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_last_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_next_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_next_o.png
new file mode 100644
index 00000000..03653267
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_next_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_prev_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_prev_o.png
new file mode 100644
index 00000000..047f8ded
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_page_prev_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_c.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_c.png
new file mode 100644
index 00000000..7891fc83
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_c.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_h.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_h.png
new file mode 100644
index 00000000..07ced65a
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_phone_h.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message.png
new file mode 100644
index 00000000..7a4d01b4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message_o.png
new file mode 100644
index 00000000..d3776078
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_message_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile.png
new file mode 100644
index 00000000..87b26fab
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile_o.png
new file mode 100644
index 00000000..7d2ee8a0
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mobile_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk.png
new file mode 100644
index 00000000..19e2f19f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk_o.png
new file mode 100644
index 00000000..88379e9e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_mytalk_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password.png
new file mode 100644
index 00000000..3265c8b3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password_o.png
new file mode 100644
index 00000000..b1d70327
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_password_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone.png
new file mode 100644
index 00000000..88eb2c9e
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone_o.png
new file mode 100644
index 00000000..5de3649c
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_phone_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking.png
new file mode 100644
index 00000000..23b8b362
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking_o.png
new file mode 100644
index 00000000..6f07a4b3
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_talking_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_vConference_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_vConference_o.png
new file mode 100644
index 00000000..8722854f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btn_profile_vConference_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btnimg_taking_top_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btnimg_taking_top_menu.png
new file mode 100644
index 00000000..42445716
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/btnimg_taking_top_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/checkbox18_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/checkbox18_f.png
new file mode 100644
index 00000000..048a3554
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/checkbox18_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_add.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_add.png
new file mode 100644
index 00000000..86211593
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_add.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_on.png
new file mode 100644
index 00000000..309d4866
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_over.png
new file mode 100644
index 00000000..01abd7e8
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_contact_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_on.png
new file mode 100644
index 00000000..3d1be9b5
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_over.png
new file mode 100644
index 00000000..54556591
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_dial_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu.png
new file mode 100644
index 00000000..60ee1cab
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_on.png
new file mode 100644
index 00000000..fbdd02fb
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_over.png
new file mode 100644
index 00000000..eb96e1be
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_group_menu_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_on.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_on.png
new file mode 100644
index 00000000..a95b62ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_on.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_over.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_over.png
new file mode 100644
index 00000000..a95b62ec
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_log_over.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit.png
new file mode 100644
index 00000000..f2e19bfd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit_o.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit_o.png
new file mode 100644
index 00000000..a9125839
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/icon_talk_list_edit_o.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_36.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_36.png
new file mode 100644
index 00000000..1b98d1e1
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_36.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_80.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_80.png
new file mode 100644
index 00000000..2f6e938f
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_groupphoto_80.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_logo.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_logo.png
new file mode 100644
index 00000000..d1e1d6aa
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_logo.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_36.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_36.png
new file mode 100644
index 00000000..f4feed19
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_36.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_50.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_50.png
new file mode 100644
index 00000000..029f81bd
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_50.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_70.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_70.png
new file mode 100644
index 00000000..2840dd90
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_70.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_88.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_88.png
new file mode 100644
index 00000000..73205f6b
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_nophoto_88.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_profile_default.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_profile_default.png
new file mode 100644
index 00000000..b1d0aae4
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/img_profile_default.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/myprofile.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/myprofile.png
new file mode 100644
index 00000000..822e6e86
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/myprofile.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/radiobtn16_f.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/radiobtn16_f.png
new file mode 100644
index 00000000..78b12a03
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/radiobtn16_f.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_my.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_my.png
new file mode 100644
index 00000000..c4a39713
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_my.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_other.png b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_other.png
new file mode 100644
index 00000000..3ef8dfed
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/img/theme/theme07/textBalloon_tail_other.png differ
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/theme.scss b/projects/ucap-webmessenger-app/src/assets/scss/theme.scss
new file mode 100644
index 00000000..0b86b4c4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/theme.scss
@@ -0,0 +1,10 @@
+@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/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
new file mode 100644
index 00000000..1121fa09
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+import { Environment, build } from './environment.type';
+
+export const environment: Environment = build(true);
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.ts b/projects/ucap-webmessenger-app/src/environments/environment.ts
new file mode 100644
index 00000000..a813ba4d
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/environments/environment.ts
@@ -0,0 +1,16 @@
+import { Environment, build } from './environment.type';
+
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment: Environment = build(false);
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.type.ts b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
new file mode 100644
index 00000000..d60384e8
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
@@ -0,0 +1,329 @@
+import * as url from 'url';
+
+export abstract class UrlConfig {
+  constructor(
+    protected useSsl: boolean,
+    protected domain: string,
+    protected port: number
+  ) {}
+
+  protected getProtocol(): string {
+    return this.useSsl ? 'https:' : 'http:';
+  }
+
+  protected getUrl(extra: url.UrlObject): string {
+    return url.format({
+      ...extra,
+      protocol: this.getProtocol(),
+      hostname: this.domain,
+      port: this.port
+    });
+  }
+}
+
+export class ApiPublicUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get versionInfo(): string {
+    return this.getUrl({
+      pathname: '/Pub/verinfo2.aspx'
+    });
+  }
+
+  public get updateInfo(): string {
+    return this.getUrl({
+      pathname: '/Pub/updinfo.aspx'
+    });
+  }
+}
+
+export class ApiExternalUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get companyList(): string {
+    return this.getUrl({
+      pathname: '/Extern/CompanyList.aspx'
+    });
+  }
+
+  public get urlInfo(): string {
+    return this.getUrl({
+      pathname: '/Extern/urlinfo.aspx'
+    });
+  }
+
+  public get checkUserInfoEx(): string {
+    return this.getUrl({
+      pathname: '/Extern/CheckUserInfoEx.aspx'
+    });
+  }
+
+  public get tokenUpdate(): string {
+    return this.getUrl({
+      pathname: '/Extern/TokenUpdate.aspx'
+    });
+  }
+}
+
+export class ApiCommonUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get fileProfileSave(): string {
+    return this.getUrl({
+      pathname: '/Common/FileProfileSave.aspx'
+    });
+  }
+
+  public get fileTalkSave(): string {
+    return this.getUrl({
+      pathname: '/Common/FileTalkSave.aspx'
+    });
+  }
+
+  public get fileTalkDownload(): string {
+    return this.getUrl({
+      pathname: '/Common/FileTalkDownload.aspx'
+    });
+  }
+
+  public get fileTalkShare(): string {
+    return this.getUrl({
+      pathname: '/Common/FileTalkShare.aspx'
+    });
+  }
+
+  public get massTalkSave(): string {
+    return this.getUrl({
+      pathname: '/Common/MassTalkSave.aspx'
+    });
+  }
+
+  public get massTalkDownload(): string {
+    return this.getUrl({
+      pathname: '/Common/MassTalkDownload.aspx'
+    });
+  }
+
+  public get transMassTalkSave(): string {
+    return this.getUrl({
+      pathname: '/Common/TransMassTalkSave.aspx'
+    });
+  }
+
+  public get transMassTalkDownload(): string {
+    return this.getUrl({
+      pathname: '/Common/TransMassTalkDownload.aspx'
+    });
+  }
+
+  public get translationReq(): string {
+    return this.getUrl({
+      pathname: '/Common/TranslationReq.aspx'
+    });
+  }
+
+  public get translationSave(): string {
+    return this.getUrl({
+      pathname: '/Common/TranslationSave.aspx'
+    });
+  }
+}
+
+export class PiUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get login2(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/login2'
+    });
+  }
+
+  public get passwordInitStep1(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/password/initStep1'
+    });
+  }
+
+  public get passwordChange(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/password/change'
+    });
+  }
+
+  public get policyTotal(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/policy/total'
+    });
+  }
+
+  public get policyService(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/policy/service'
+    });
+  }
+
+  public get policyPrivacy(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/policy/privacy'
+    });
+  }
+
+  public get tokenCheck(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/tokenCheck'
+    });
+  }
+
+  public get userMobileAuth(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/mobileAuth'
+    });
+  }
+
+  public get userUserAuth(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/userAuth'
+    });
+  }
+
+  public get userCall(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/call'
+    });
+  }
+
+  public get userMoblieCallAuth(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/moblieCallAuth'
+    });
+  }
+
+  public get eventSendEventMail(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/event/sendEventMail'
+    });
+  }
+
+  public get userMobileInitial1(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/mobileInitial1'
+    });
+  }
+
+  public get eventSendInvite(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/event/sendInvite'
+    });
+  }
+
+  public get userRoom(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/room'
+    });
+  }
+
+  public get scheduleRetrieveScheduleList(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/schedule/retrieveScheduleList'
+    });
+  }
+
+  public get userScreenCapture(): string {
+    return this.getUrl({
+      pathname: '/uCapPi/user/screenCapture'
+    });
+  }
+}
+
+export class VideoConfrenceUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get create(): string {
+    return this.getUrl({
+      pathname: '/API_CreateConf'
+    });
+  }
+
+  public get join(): string {
+    return this.getUrl({
+      pathname: '/AutoLogin.jsp'
+    });
+  }
+}
+
+export class ClickToCallUrlConfig extends UrlConfig {
+  constructor(useSsl: boolean, domain: string, port: number) {
+    super(useSsl, domain, port);
+  }
+
+  public get cdr(): string {
+    return this.getUrl({
+      pathname: '/clicktocall/api/messenger/cdr'
+    });
+  }
+
+  public get clicktocall(): string {
+    return this.getUrl({
+      pathname: '/clicktocall/api/messenger/clicktocall'
+    });
+  }
+}
+
+export interface Environment {
+  production: boolean;
+  title: string;
+  useSsl: boolean;
+  webDomain: string;
+  webPort: number;
+  urls: {
+    apiPublic: ApiPublicUrlConfig;
+    apiCommon: ApiCommonUrlConfig;
+    apiExternal: ApiExternalUrlConfig;
+    pi: PiUrlConfig;
+    videoConfrence: VideoConfrenceUrlConfig;
+    clickToCall: ClickToCallUrlConfig;
+  };
+}
+
+export function build(production: boolean): Environment {
+  const devServer = false;
+  const useSsl = false;
+  const title = 'Woori TALK';
+
+  const webDomain = devServer ? 'bizucap.uplus.co.kr' : '27.122.224.170';
+  const webPort = devServer ? 80 : 8011;
+
+  return {
+    production,
+    title: devServer ? `[개발]${title}` : title,
+    useSsl,
+    webDomain,
+    webPort,
+    urls: {
+      apiCommon: new ApiCommonUrlConfig(useSsl, webDomain, webPort),
+      apiPublic: new ApiPublicUrlConfig(useSsl, webDomain, webPort),
+      apiExternal: new ApiExternalUrlConfig(useSsl, webDomain, webPort),
+      pi: new PiUrlConfig(useSsl, webDomain, devServer ? 9097 : 9097),
+      videoConfrence: new VideoConfrenceUrlConfig(
+        useSsl,
+        devServer ? '101.55.17.24' : '101.55.17.24',
+        devServer ? 80 : 80
+      ),
+      clickToCall: new ClickToCallUrlConfig(
+        useSsl,
+        devServer ? '169.56.82.147' : '169.56.82.147',
+        devServer ? 9095 : 9095
+      )
+    }
+  };
+}
diff --git a/projects/ucap-webmessenger-app/src/favicon.ico b/projects/ucap-webmessenger-app/src/favicon.ico
new file mode 100644
index 00000000..997406ad
Binary files /dev/null and b/projects/ucap-webmessenger-app/src/favicon.ico differ
diff --git a/projects/ucap-webmessenger-app/src/index.html b/projects/ucap-webmessenger-app/src/index.html
new file mode 100644
index 00000000..166a2e94
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>UcapWebmessengerApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/projects/ucap-webmessenger-app/src/main.ts b/projects/ucap-webmessenger-app/src/main.ts
new file mode 100644
index 00000000..54120239
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/main.ts
@@ -0,0 +1,15 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import 'hammerjs';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/projects/ucap-webmessenger-app/src/polyfills.ts b/projects/ucap-webmessenger-app/src/polyfills.ts
new file mode 100644
index 00000000..aa665d6b
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/polyfills.ts
@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss
new file mode 100644
index 00000000..f5b7b84e
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/styles.scss
@@ -0,0 +1,14 @@
+@import '~@angular/material/theming';
+@import 'assets/scss/theme';
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+  html {
+    font-size: 80%;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/test.ts b/projects/ucap-webmessenger-app/src/test.ts
new file mode 100644
index 00000000..16317897
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-app/tsconfig.app.json b/projects/ucap-webmessenger-app/tsconfig.app.json
new file mode 100644
index 00000000..cfbd9495
--- /dev/null
+++ b/projects/ucap-webmessenger-app/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
+}
diff --git a/projects/ucap-webmessenger-app/tsconfig.spec.json b/projects/ucap-webmessenger-app/tsconfig.spec.json
new file mode 100644
index 00000000..a8ce1d39
--- /dev/null
+++ b/projects/ucap-webmessenger-app/tsconfig.spec.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-app/tslint.json b/projects/ucap-webmessenger-app/tslint.json
new file mode 100644
index 00000000..19e8161a
--- /dev/null
+++ b/projects/ucap-webmessenger-app/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-core/README.md b/projects/ucap-webmessenger-core/README.md
new file mode 100644
index 00000000..751b7be2
--- /dev/null
+++ b/projects/ucap-webmessenger-core/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerCore
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-core`.
+> Note: Don't forget to add `--project ucap-webmessenger-core` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-core` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-core`, go to the dist folder `cd dist/ucap-webmessenger-core` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-core` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-core/karma.conf.js b/projects/ucap-webmessenger-core/karma.conf.js
new file mode 100644
index 00000000..da338afb
--- /dev/null
+++ b/projects/ucap-webmessenger-core/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-core'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-core/ng-package.json b/projects/ucap-webmessenger-core/ng-package.json
new file mode 100644
index 00000000..e2997cd5
--- /dev/null
+++ b/projects/ucap-webmessenger-core/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-core",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-core/package.json b/projects/ucap-webmessenger-core/package.json
new file mode 100644
index 00000000..753e4f2f
--- /dev/null
+++ b/projects/ucap-webmessenger-core/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@ucap-webmessenger/core",
+  "version": "0.0.1"
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/app-type.type.ts b/projects/ucap-webmessenger-core/src/lib/type/app-type.type.ts
new file mode 100644
index 00000000..4ca1c75b
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/app-type.type.ts
@@ -0,0 +1,3 @@
+export enum AppType {
+  uCapMsg = 'UM'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/device-devision.type.ts b/projects/ucap-webmessenger-core/src/lib/type/device-devision.type.ts
new file mode 100644
index 00000000..6748cab8
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/device-devision.type.ts
@@ -0,0 +1,4 @@
+export enum DeviceDevision {
+  PC = 'P',
+  Mobile = 'M'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/device-type.type.ts b/projects/ucap-webmessenger-core/src/lib/type/device-type.type.ts
new file mode 100644
index 00000000..cb4799c9
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/device-type.type.ts
@@ -0,0 +1,9 @@
+export enum DeviceType {
+  Web = 'W',
+  Android = 'A',
+  AndroidCall = 'N',
+  iOS = 'I',
+  iOSCall = 'O',
+  PC = 'P',
+  iMessenger = 'H'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/locale-code.type.ts b/projects/ucap-webmessenger-core/src/lib/type/locale-code.type.ts
new file mode 100644
index 00000000..47493a1b
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/locale-code.type.ts
@@ -0,0 +1,6 @@
+export enum LocaleCode {
+  Korean = 'KO',
+  English = 'EN',
+  Chinese = 'CN',
+  Japanese = 'JP'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/push-type.type.ts b/projects/ucap-webmessenger-core/src/lib/type/push-type.type.ts
new file mode 100644
index 00000000..eca3c0ab
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/push-type.type.ts
@@ -0,0 +1,5 @@
+export enum PushType {
+  FCM = 'F',
+  iOS = 'G',
+  JPush = 'J'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/status-code.type.ts b/projects/ucap-webmessenger-core/src/lib/type/status-code.type.ts
new file mode 100644
index 00000000..abae1509
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/status-code.type.ts
@@ -0,0 +1,13 @@
+export enum StatusCode {
+  Offline = 'X',
+  OnLine = 'O',
+  Away = 'A',
+  Busy = 'B',
+  Away2 = 'P'
+}
+
+export enum StatusCodeMobile {
+  Offline = 'X',
+  OnLine = 'Y',
+  NotInstalled = 'N'
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/status-type.type.ts b/projects/ucap-webmessenger-core/src/lib/type/status-type.type.ts
new file mode 100644
index 00000000..34dd8b20
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/status-type.type.ts
@@ -0,0 +1,7 @@
+export enum StatusType {
+  Messenger = 'M',
+  Phone = 'P',
+  Mobile = 'O',
+  Conference = 'C',
+  iMessenger = 'H'
+}
diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts
new file mode 100644
index 00000000..27d44e5c
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/public-api.ts
@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of ucap-webmessenger-core
+ */
+
+export * from './lib/type/app-type.type';
+export * from './lib/type/device-devision.type';
+export * from './lib/type/device-type.type';
+export * from './lib/type/locale-code.type';
+export * from './lib/type/push-type.type';
+export * from './lib/type/status-code.type';
+export * from './lib/type/status-type.type';
diff --git a/projects/ucap-webmessenger-core/src/test.ts b/projects/ucap-webmessenger-core/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-core/tsconfig.lib.json b/projects/ucap-webmessenger-core/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-core/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-core/tsconfig.spec.json b/projects/ucap-webmessenger-core/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-core/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-core/tslint.json b/projects/ucap-webmessenger-core/tslint.json
new file mode 100644
index 00000000..340ecb0c
--- /dev/null
+++ b/projects/ucap-webmessenger-core/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapCore",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-core",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-native-electron/README.md b/projects/ucap-webmessenger-native-electron/README.md
new file mode 100644
index 00000000..d1068a5f
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerNativeElectron
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-native-electron` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-native-electron`.
+> Note: Don't forget to add `--project ucap-webmessenger-native-electron` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-native-electron` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-native-electron`, go to the dist folder `cd dist/ucap-webmessenger-native-electron` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-native-electron` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-native-electron/karma.conf.js b/projects/ucap-webmessenger-native-electron/karma.conf.js
new file mode 100644
index 00000000..8700b711
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-native-electron'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-native-electron/ng-package.json b/projects/ucap-webmessenger-native-electron/ng-package.json
new file mode 100644
index 00000000..f9f5dc30
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-native-electron",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-native-electron/package.json b/projects/ucap-webmessenger-native-electron/package.json
new file mode 100644
index 00000000..ddf0c463
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/native-electron",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.spec.ts b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.spec.ts
new file mode 100644
index 00000000..d68251ff
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.spec.ts
@@ -0,0 +1,3 @@
+import { ElectronNativeService } from './electron-native.service';
+
+describe('ElectronNativeService', () => {});
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
new file mode 100644
index 00000000..9c95e9b4
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+
+import { ipcRenderer } from 'electron';
+
+import { NativeService } from '@ucap-webmessenger/native';
+import { Channel } from '../types/channel.type';
+
+export class ElectronNativeService implements NativeService {
+  showNotify(
+    roomSeq: number,
+    title: string,
+    contents: string,
+    image: string,
+    useSound: boolean
+  ): void {
+    ipcRenderer.send(
+      Channel.showNotify,
+      roomSeq,
+      title,
+      contents,
+      image,
+      useSound
+    );
+  }
+
+  checkForUpdates(): Promise<boolean> {
+    return new Promise<boolean>((resolve, reject) => {
+      try {
+        resolve(ipcRenderer.sendSync(Channel.checkForUpdates));
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  showImageViewer(): void {
+    ipcRenderer.send(Channel.showImageViewer);
+  }
+
+  saveFile(blob: Blob): void {
+    ipcRenderer.send(Channel.saveFile, blob);
+  }
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
new file mode 100644
index 00000000..72230cbe
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
@@ -0,0 +1,6 @@
+export enum Channel {
+  showNotify = 'UCAP::showNotify',
+  checkForUpdates = 'UCAP::checkForUpdates',
+  showImageViewer = 'UCAP::showImageViewer',
+  saveFile = 'UCAP::saveFile'
+}
diff --git a/projects/ucap-webmessenger-native-electron/src/public-api.ts b/projects/ucap-webmessenger-native-electron/src/public-api.ts
new file mode 100644
index 00000000..20f1dddf
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-native-electron
+ */
+
+export * from './lib/services/electron-native.service';
+
+export * from './lib/types/channel.type';
diff --git a/projects/ucap-webmessenger-native-electron/src/test.ts b/projects/ucap-webmessenger-native-electron/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-native-electron/tsconfig.lib.json b/projects/ucap-webmessenger-native-electron/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-native-electron/tsconfig.spec.json b/projects/ucap-webmessenger-native-electron/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-native-electron/tslint.json b/projects/ucap-webmessenger-native-electron/tslint.json
new file mode 100644
index 00000000..06d4b5bd
--- /dev/null
+++ b/projects/ucap-webmessenger-native-electron/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapNativeElectron",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-native-electron",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-native/README.md b/projects/ucap-webmessenger-native/README.md
new file mode 100644
index 00000000..d3ee29b0
--- /dev/null
+++ b/projects/ucap-webmessenger-native/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerNative
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-native` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-native`.
+> Note: Don't forget to add `--project ucap-webmessenger-native` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-native` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-native`, go to the dist folder `cd dist/ucap-webmessenger-native` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-native` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-native/karma.conf.js b/projects/ucap-webmessenger-native/karma.conf.js
new file mode 100644
index 00000000..27c8d853
--- /dev/null
+++ b/projects/ucap-webmessenger-native/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-native'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-native/ng-package.json b/projects/ucap-webmessenger-native/ng-package.json
new file mode 100644
index 00000000..f49057f1
--- /dev/null
+++ b/projects/ucap-webmessenger-native/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-native",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-native/package.json b/projects/ucap-webmessenger-native/package.json
new file mode 100644
index 00000000..0dde3c25
--- /dev/null
+++ b/projects/ucap-webmessenger-native/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/native",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
new file mode 100644
index 00000000..496a5748
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@@ -0,0 +1,15 @@
+export interface NativeService {
+  showNotify(
+    roomSeq: number,
+    title: string,
+    contents: string,
+    image: string,
+    useSound: boolean
+  ): void;
+
+  checkForUpdates(): Promise<boolean>;
+
+  showImageViewer(): void;
+
+  saveFile(blob: Blob): void;
+}
diff --git a/projects/ucap-webmessenger-native/src/lib/types/token.ts b/projects/ucap-webmessenger-native/src/lib/types/token.ts
new file mode 100644
index 00000000..11550982
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/lib/types/token.ts
@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { NativeService } from '../services/native.service';
+
+export const UCAP_NATIVE_SERVICE = new InjectionToken<NativeService>(
+  '@ucap-webmessenger/native service of native'
+);
diff --git a/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts b/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
new file mode 100644
index 00000000..e094b10d
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  imports: [],
+  exports: [],
+  declarations: []
+})
+export class UCapNativeModule {}
diff --git a/projects/ucap-webmessenger-native/src/public-api.ts b/projects/ucap-webmessenger-native/src/public-api.ts
new file mode 100644
index 00000000..0a83e4cd
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/public-api.ts
@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of ucap-webmessenger-native
+ */
+
+export * from './lib/services/native.service';
+
+export * from './lib/types/token';
+
+export * from './lib/ucap-native.module';
diff --git a/projects/ucap-webmessenger-native/src/test.ts b/projects/ucap-webmessenger-native/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-native/tsconfig.lib.json b/projects/ucap-webmessenger-native/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-native/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-native/tsconfig.spec.json b/projects/ucap-webmessenger-native/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-native/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-native/tslint.json b/projects/ucap-webmessenger-native/tslint.json
new file mode 100644
index 00000000..c23ba3a5
--- /dev/null
+++ b/projects/ucap-webmessenger-native/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapNative",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-native",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-pi/README.md b/projects/ucap-webmessenger-pi/README.md
new file mode 100644
index 00000000..cb5e83a5
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerPi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-pi` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-pi`.
+> Note: Don't forget to add `--project ucap-webmessenger-pi` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-pi` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-pi`, go to the dist folder `cd dist/ucap-webmessenger-pi` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-pi` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-pi/karma.conf.js b/projects/ucap-webmessenger-pi/karma.conf.js
new file mode 100644
index 00000000..a04020c9
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-pi'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-pi/ng-package.json b/projects/ucap-webmessenger-pi/ng-package.json
new file mode 100644
index 00000000..9789afe8
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-pi",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-pi/package.json b/projects/ucap-webmessenger-pi/package.json
new file mode 100644
index 00000000..c856cb0d
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/pi",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/models/login2.ts b/projects/ucap-webmessenger-pi/src/lib/models/login2.ts
new file mode 100644
index 00000000..0a9bdd62
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/models/login2.ts
@@ -0,0 +1,17 @@
+import { PIRequest, PIResponse } from './pi';
+
+export interface Login2Request extends PIRequest {
+  companyCode: string;
+  loginId: string;
+  loginPw: string;
+}
+
+export interface Login2Response extends PIResponse {
+  version: string;
+  passwordHc: string;
+  personalInfoAgreeYn: string;
+  companyCode: string;
+  userId: string;
+  userName: string;
+  userSeq: number;
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/models/pi.ts b/projects/ucap-webmessenger-pi/src/lib/models/pi.ts
new file mode 100644
index 00000000..a0c5432b
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/models/pi.ts
@@ -0,0 +1,10 @@
+import { ResponseStatus } from '../types/response-status.type';
+
+export interface PIRequest {
+  _Id?: string;
+}
+
+export interface PIResponse {
+  _Id?: string;
+  status?: ResponseStatus;
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.spec.ts b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.spec.ts
new file mode 100644
index 00000000..5ea72351
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PiService } from './pi.service';
+
+describe('PiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PiService = TestBed.get(PiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
new file mode 100644
index 00000000..d16b7be8
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
@@ -0,0 +1,48 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { _MODULE_CONFIG } from '../types/token';
+import { ModuleConfig } from '../types/module-config';
+import { Login2Request, Login2Response } from '../models/login2';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PiService {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private httpClient: HttpClient
+  ) {}
+
+  public login2(req: Login2Request): Observable<Login2Response> {
+    return this.httpClient
+      .post<any>(
+        this.moduleConfig.urls.login2,
+        {},
+        {
+          params: {
+            companyCd: req.companyCode,
+            loginId: req.loginId,
+            loginPw: req.loginPw
+          }
+        }
+      )
+      .pipe(
+        map(res => {
+          return {
+            status: res.STATUS,
+            version: res.VER,
+            passwordHc: res.PWD_HC,
+            personalInfoAgreeYn: res.PER_INFO_AGREE_YN,
+            companyCode: res.COMPANY_CODE,
+            userId: res.USER_ID,
+            userName: res.USER_NAME,
+            userSeq: res.USER_SEQ
+          } as Login2Response;
+        })
+      );
+  }
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts b/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
new file mode 100644
index 00000000..860758aa
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
@@ -0,0 +1,5 @@
+export interface ModuleConfig {
+  urls: {
+    login2: string;
+  };
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/types/response-status.type.ts b/projects/ucap-webmessenger-pi/src/lib/types/response-status.type.ts
new file mode 100644
index 00000000..59c4fcd4
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/types/response-status.type.ts
@@ -0,0 +1,4 @@
+export enum ResponseStatus {
+  Success = 'success',
+  Fail = 'fail'
+}
diff --git a/projects/ucap-webmessenger-pi/src/lib/types/token.ts b/projects/ucap-webmessenger-pi/src/lib/types/token.ts
new file mode 100644
index 00000000..236f4ca7
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/types/token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const _MODULE_CONFIG = new InjectionToken(
+  '@ucap-webmessenger/api-public config of module'
+);
diff --git a/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts b/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
new file mode 100644
index 00000000..72224b0f
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { _MODULE_CONFIG } from './types/token';
+
+import { PiService } from './services/pi.service';
+import { ModuleConfig } from './types/module-config';
+
+const SERVICES = [PiService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapPiModule {
+  public static forRoot(
+    config: ModuleConfig
+  ): ModuleWithProviders<UCapPiModule> {
+    return {
+      ngModule: UCapPiModule,
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-pi/src/public-api.ts b/projects/ucap-webmessenger-pi/src/public-api.ts
new file mode 100644
index 00000000..208e8bb9
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/public-api.ts
@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of ucap-webmessenger-pi
+ */
+
+export * from './lib/types/module-config';
+
+export * from './lib/models/pi';
+export * from './lib/models/login2';
+
+export * from './lib/types/response-status.type';
+
+export * from './lib/services/pi.service';
+
+export * from './lib/ucap-pi.module';
diff --git a/projects/ucap-webmessenger-pi/src/test.ts b/projects/ucap-webmessenger-pi/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-pi/tsconfig.lib.json b/projects/ucap-webmessenger-pi/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-pi/tsconfig.spec.json b/projects/ucap-webmessenger-pi/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-pi/tslint.json b/projects/ucap-webmessenger-pi/tslint.json
new file mode 100644
index 00000000..992f7a27
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapPi",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-pi",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/README.md b/projects/ucap-webmessenger-protocol-authentication/README.md
new file mode 100644
index 00000000..338ab1d4
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolAuthentication
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-authentication` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-authentication`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-authentication` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-authentication` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-authentication`, go to the dist folder `cd dist/ucap-webmessenger-protocol-authentication` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-authentication` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-authentication/karma.conf.js b/projects/ucap-webmessenger-protocol-authentication/karma.conf.js
new file mode 100644
index 00000000..f3e8e9e5
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-authentication'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-authentication/ng-package.json b/projects/ucap-webmessenger-protocol-authentication/ng-package.json
new file mode 100644
index 00000000..55be9d08
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-authentication",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-authentication/package.json b/projects/ucap-webmessenger-protocol-authentication/package.json
new file mode 100644
index 00000000..91115dde
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-authentication",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/models/fmc.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/models/fmc.ts
new file mode 100644
index 00000000..5d540659
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/models/fmc.ts
@@ -0,0 +1,16 @@
+import { ProtocolResponse } from '@ucap-webmessenger/protocol';
+
+export interface LoginFmcResponse extends ProtocolResponse {
+  callId?: string;
+  callPw?: string;
+  userName?: string;
+  displayName?: string;
+  domain?: string;
+  prxServerId?: string;
+  prxServerPort?: string;
+  primaryPbxIp?: string;
+  secondaryPbxIp?: string;
+  primaryPbxPort?: number;
+  secondaryPbxPort?: number;
+  protocolType?: string;
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/models/login.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/models/login.ts
new file mode 100644
index 00000000..1f203599
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/models/login.ts
@@ -0,0 +1,81 @@
+import { DeviceType, LocaleCode } from '@ucap-webmessenger/core';
+import { ProtocolRequest, ProtocolResponse } from '@ucap-webmessenger/protocol';
+import { SSOMode } from '../types/sso-mode';
+import { RoleCode } from '../types/role-code';
+
+export interface LoginRequest extends ProtocolRequest {
+  // 0. LoginID(s)
+  loginId: string;
+  // 1. LoginPW(e)
+  loginPw: string;
+  // 2. 단말타입(s) (WEB)
+  deviceType: DeviceType;
+  // 3. 디바이스ID(s) (for mobile)
+  deviceId: string;
+  // 4. Token(n)
+  token: number;
+  // 5. 언어코드(s)
+  localeCode: LocaleCode;
+  // 6. Push ID (for mobile)
+  pushId: string;
+  // 7. 기관코드(s)
+  companyCode: string;
+  // 8. PW_ENC_T
+  passwordEncodingType: number;
+  // 9. Client버전(s)
+  clientVersion: string;
+  // 10. 재연결여부(s)
+  reconnect: boolean;
+  // 11. IP(s)
+  ip: string;
+  // 12. 호스트명(s)
+  hostName: string;
+  // 13. SSO모드(SSO_NONE=0:사용안함, SSO_AUTH=1:사용, SSO_AUTO=2:자동실행, SSO_VALI=3:세션연장)
+  ssoMode: SSOMode;
+  // 14. 사용자고유정보(s)
+  userSpecificInformation: string;
+  // 15. 제품 ID(s)
+  productId: string;
+  // 16. 제품명(s)
+  productName: string;
+  // 17. EncData(s)
+  encriptionData?: string;
+  // 18. AccessToken(s)
+  accessToken?: string;
+}
+
+export interface LoginResponse extends ProtocolResponse {
+  loginId: string;
+  userSeq: number;
+  userInfo: string;
+  token: number;
+  companyCode: string;
+  departmentCode: number;
+  userId: string;
+  passwordEncodingType: number;
+  encriptionKey: string;
+  existingPid: boolean;
+  roleCode: RoleCode;
+  statusMessage1: string;
+  statusMessage2: string;
+  statusMessage3: string;
+  fileDownloadAllow: boolean;
+  fileRetentionPeriod: number;
+  passwordValidityPeriod: number;
+  privateInformationAgree: boolean;
+  madn: string;
+  hardPhoneSadn: string;
+  fmcSadn: string;
+  pbxIndex: number;
+  passwordExpired: boolean;
+  validAccount: boolean;
+  validDevice: boolean;
+  useableDevice: boolean;
+  deviceScreenForcedLock: boolean;
+  tokenString: string;
+  havePermissionsForIntegratedMessageBox: boolean;
+  talkWithMeBotSeq: number;
+  pinCode: string;
+  permissionsForViewSchedule: string;
+  havePermissionsForDevice: boolean;
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.spec.ts
new file mode 100644
index 00000000..90ee00c4
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.spec.ts
@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationProtocolService } from './authentication-protocol.service';
+
+describe('AuthenticationProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthenticationProtocolService = TestBed.get(
+      AuthenticationProtocolService
+    );
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.ts
new file mode 100644
index 00000000..873fbc3d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/services/authentication-protocol.service.ts
@@ -0,0 +1,98 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import {
+  ProtocolService,
+  PacketBody,
+  PacketBodyValue
+} from '@ucap-webmessenger/protocol';
+import { LoginRequest, LoginResponse } from '../models/login';
+import {
+  SVC_TYPE_LOGIN,
+  SSVC_TYPE_LOGIN_REQ,
+  SSVC_TYPE_LOGIN_RES
+} from '../types/service';
+import { RoleCode } from '../types/role-code';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationProtocolService {
+  constructor(private protocolService: ProtocolService) {}
+
+  public login(req: LoginRequest): Observable<LoginResponse> {
+    const bodyList: PacketBody[] = [];
+
+    bodyList.push(
+      { type: PacketBodyValue.String, value: req.loginId },
+      { type: PacketBodyValue.String, value: req.loginPw },
+      { type: PacketBodyValue.String, value: req.deviceType },
+      { type: PacketBodyValue.String, value: req.deviceId },
+      { type: PacketBodyValue.Integer, value: req.token },
+      { type: PacketBodyValue.String, value: req.localeCode },
+      { type: PacketBodyValue.String, value: req.pushId },
+      { type: PacketBodyValue.String, value: req.companyCode },
+      { type: PacketBodyValue.String, value: req.passwordEncodingType },
+      { type: PacketBodyValue.String, value: req.clientVersion },
+      { type: PacketBodyValue.String, value: req.reconnect ? 'Y' : 'N' },
+      { type: PacketBodyValue.String, value: req.ip },
+      { type: PacketBodyValue.String, value: req.hostName },
+      { type: PacketBodyValue.Integer, value: req.encriptionData ? 2 : 1 },
+      { type: PacketBodyValue.String, value: req.userSpecificInformation },
+      { type: PacketBodyValue.String, value: req.productId },
+      { type: PacketBodyValue.String, value: req.productName }
+    );
+
+    if (req.encriptionData) {
+      bodyList.push(
+        { type: PacketBodyValue.String, value: req.encriptionData },
+        { type: PacketBodyValue.String, value: req.accessToken }
+      );
+    }
+
+    return this.protocolService
+      .call(SVC_TYPE_LOGIN, SSVC_TYPE_LOGIN_REQ, ...bodyList)
+      .pipe(
+        map(res => {
+          return {
+            loginId: res.bodyList[0],
+            userSeq: res.bodyList[1],
+            userInfo: res.bodyList[2],
+            token: res.bodyList[3],
+            companyCode: res.bodyList[4],
+            departmentCode: res.bodyList[5],
+            userId: res.bodyList[6],
+            passwordEncodingType: res.bodyList[7],
+            encriptionKey: res.bodyList[8],
+            existingPid: res.bodyList[9] === 'Y' ? true : false,
+            roleCode: res.bodyList[10] as RoleCode,
+            statusMessage1: res.bodyList[11],
+            statusMessage2: res.bodyList[12],
+            statusMessage3: res.bodyList[13],
+            fileDownloadAllow: res.bodyList[14] === 'Y' ? true : false,
+            fileRetentionPeriod: res.bodyList[15],
+            passwordValidityPeriod: res.bodyList[16],
+            privateInformationAgree: res.bodyList[17] === 'Y' ? true : false,
+            madn: res.bodyList[18],
+            hardPhoneSadn: res.bodyList[19],
+            fmcSadn: res.bodyList[20],
+            pbxIndex: res.bodyList[21],
+            passwordExpired: res.bodyList[22] === 'Y' ? true : false,
+            validAccount: res.bodyList[23] === 'Y' ? true : false,
+            validDevice: res.bodyList[24] === 'Y' ? true : false,
+            useableDevice: res.bodyList[25] === 'Y' ? true : false,
+            deviceScreenForcedLock: res.bodyList[26] === 'Y' ? true : false,
+            tokenString: res.bodyList[27],
+            havePermissionsForIntegratedMessageBox:
+              res.bodyList[28] === 'Y' ? true : false,
+            talkWithMeBotSeq: res.bodyList[29],
+            pinCode: res.bodyList[30],
+            permissionsForViewSchedule: res.bodyList[31],
+            havePermissionsForDevice: res.bodyList[32] === 'Y' ? true : false
+          } as LoginResponse;
+        })
+      );
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/types/role-code.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/role-code.ts
new file mode 100644
index 00000000..442b9dc2
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/role-code.ts
@@ -0,0 +1,8 @@
+export enum RoleCode {
+  Self = 100,
+  SelfDepartment = 700,
+  SelfCompany = 800,
+  Company = 900,
+  CompanyExcludeSync = 999,
+  Bot = 1000
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/types/service.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/service.ts
new file mode 100644
index 00000000..6f876941
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/service.ts
@@ -0,0 +1,12 @@
+export const SVC_TYPE_LOGIN = 1;
+export const SSVC_TYPE_LOGIN_REQ = 1; // 로그인 요청
+export const SSVC_TYPE_LOGIN_RES = 2; // 로그인 성공
+export const SSVC_TYPE_FMC_INFO_REQ = 101; // FMC 정보요청
+export const SSVC_TYPE_FMC_INFO = 100; // FMC 정보
+
+export const SVC_TYPE_LOGOUT = 2;
+export const SSVC_TYPE_LOGOUT_REQ = 1; // 로그아웃 요청
+export const SSVC_TYPE_LOGOUT_RES = 2; // 로그아웃 응답
+export const SSVC_TYPE_LOGOUT_REMOTE_REQ = 3; // 원격 로그아웃 요청
+export const SSVC_TYPE_LOGOUT_REMOTE_NOTI = 4; // 원격 로그아웃 알림
+export const SSVC_TYPE_LOGOUT_REMOTE_RES = 5; // 원격 로그아웃 응답
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/types/sso-mode.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/sso-mode.ts
new file mode 100644
index 00000000..6f0cf555
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/types/sso-mode.ts
@@ -0,0 +1,6 @@
+export enum SSOMode {
+  NONE = 0, // 사용안함
+  AUTH = 1, // 사용
+  AUTO = 2, // 자동실행
+  VALI = 3 // 세션연장
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/lib/ucap-authentication-protocol.module.ts b/projects/ucap-webmessenger-protocol-authentication/src/lib/ucap-authentication-protocol.module.ts
new file mode 100644
index 00000000..e17b6043
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/lib/ucap-authentication-protocol.module.ts
@@ -0,0 +1,21 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { AuthenticationProtocolService } from './services/authentication-protocol.service';
+
+const SERVICES = [AuthenticationProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapAuthenticationProtocolModule {
+  public static forRoot(): ModuleWithProviders<
+    UCapAuthenticationProtocolModule
+  > {
+    return {
+      ngModule: UCapAuthenticationProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/public-api.ts b/projects/ucap-webmessenger-protocol-authentication/src/public-api.ts
new file mode 100644
index 00000000..a42e1261
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-authentication
+ */
+
+export * from './lib/services/authentication-protocol.service';
+
+export * from './lib/ucap-authentication-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-authentication/src/test.ts b/projects/ucap-webmessenger-protocol-authentication/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-authentication/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-authentication/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-authentication/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-authentication/tslint.json b/projects/ucap-webmessenger-protocol-authentication/tslint.json
new file mode 100644
index 00000000..e129629f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-authentication/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolAuthentication",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-authentication",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/README.md b/projects/ucap-webmessenger-protocol-buddy/README.md
new file mode 100644
index 00000000..dfccc94a
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolBuddy
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-buddy` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-buddy`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-buddy` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-buddy` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-buddy`, go to the dist folder `cd dist/ucap-webmessenger-protocol-buddy` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-buddy` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-buddy/karma.conf.js b/projects/ucap-webmessenger-protocol-buddy/karma.conf.js
new file mode 100644
index 00000000..405dd419
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-buddy'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-buddy/ng-package.json b/projects/ucap-webmessenger-protocol-buddy/ng-package.json
new file mode 100644
index 00000000..408cc483
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-buddy",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-buddy/package.json b/projects/ucap-webmessenger-protocol-buddy/package.json
new file mode 100644
index 00000000..bc1585d8
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-buddy",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.spec.ts
new file mode 100644
index 00000000..046f38b1
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BuddyProtocolService } from './buddy-protocol.service';
+
+describe('BuddyProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: BuddyProtocolService = TestBed.get(BuddyProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.ts b/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.ts
new file mode 100644
index 00000000..2a0682d9
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/src/lib/services/buddy-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BuddyProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/src/lib/ucap-buddy-protocol.module.ts b/projects/ucap-webmessenger-protocol-buddy/src/lib/ucap-buddy-protocol.module.ts
new file mode 100644
index 00000000..cef37b0e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/src/lib/ucap-buddy-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { BuddyProtocolService } from './services/buddy-protocol.service';
+
+const SERVICES = [BuddyProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapBuddyProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapBuddyProtocolModule> {
+    return {
+      ngModule: UCapBuddyProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/src/public-api.ts b/projects/ucap-webmessenger-protocol-buddy/src/public-api.ts
new file mode 100644
index 00000000..24173dd5
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-buddy
+ */
+
+export * from './lib/services/buddy-protocol.service';
+
+export * from './lib/ucap-buddy-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-buddy/src/test.ts b/projects/ucap-webmessenger-protocol-buddy/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-buddy/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-buddy/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-buddy/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-buddy/tslint.json b/projects/ucap-webmessenger-protocol-buddy/tslint.json
new file mode 100644
index 00000000..ffd0a67d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-buddy/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolBuddy",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-buddy",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-event/README.md b/projects/ucap-webmessenger-protocol-event/README.md
new file mode 100644
index 00000000..8355aea1
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolEvent
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-event` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-event`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-event` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-event` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-event`, go to the dist folder `cd dist/ucap-webmessenger-protocol-event` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-event` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-event/karma.conf.js b/projects/ucap-webmessenger-protocol-event/karma.conf.js
new file mode 100644
index 00000000..8327e82d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-event'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-event/ng-package.json b/projects/ucap-webmessenger-protocol-event/ng-package.json
new file mode 100644
index 00000000..267852bc
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-event",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-event/package.json b/projects/ucap-webmessenger-protocol-event/package.json
new file mode 100644
index 00000000..8e3fa563
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-event",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.spec.ts
new file mode 100644
index 00000000..950d7f82
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventProtocolService } from './event-protocol.service';
+
+describe('EventProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: EventProtocolService = TestBed.get(EventProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts
new file mode 100644
index 00000000..38c8034d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/services/event-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/ucap-event-protocol.module.ts b/projects/ucap-webmessenger-protocol-event/src/lib/ucap-event-protocol.module.ts
new file mode 100644
index 00000000..6d4a8001
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/ucap-event-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { EventProtocolService } from './services/event-protocol.service';
+
+const SERVICES = [EventProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapEventProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapEventProtocolModule> {
+    return {
+      ngModule: UCapEventProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-event/src/public-api.ts b/projects/ucap-webmessenger-protocol-event/src/public-api.ts
new file mode 100644
index 00000000..d2ec1d13
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-event
+ */
+
+export * from './lib/services/event-protocol.service';
+
+export * from './lib/ucap-event-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-event/src/test.ts b/projects/ucap-webmessenger-protocol-event/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-event/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-event/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-event/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-event/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-event/tslint.json b/projects/ucap-webmessenger-protocol-event/tslint.json
new file mode 100644
index 00000000..79b6d292
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-event/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolEvent",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-event",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-file/README.md b/projects/ucap-webmessenger-protocol-file/README.md
new file mode 100644
index 00000000..0cba0622
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolFile
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-file` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-file`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-file` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-file` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-file`, go to the dist folder `cd dist/ucap-webmessenger-protocol-file` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-file` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-file/karma.conf.js b/projects/ucap-webmessenger-protocol-file/karma.conf.js
new file mode 100644
index 00000000..fd89726f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-file'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-file/ng-package.json b/projects/ucap-webmessenger-protocol-file/ng-package.json
new file mode 100644
index 00000000..ace501f7
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-file",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-file/package.json b/projects/ucap-webmessenger-protocol-file/package.json
new file mode 100644
index 00000000..a36bffaa
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-file",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.spec.ts
new file mode 100644
index 00000000..c11ef299
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FileProtocolService } from './file-protocol.service';
+
+describe('FileProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FileProtocolService = TestBed.get(FileProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.ts b/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.ts
new file mode 100644
index 00000000..88b90029
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/src/lib/services/file-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-file/src/lib/ucap-file-protocol.module.ts b/projects/ucap-webmessenger-protocol-file/src/lib/ucap-file-protocol.module.ts
new file mode 100644
index 00000000..fe3cf412
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/src/lib/ucap-file-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { FileProtocolService } from './services/file-protocol.service';
+
+const SERVICES = [FileProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapFileProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapFileProtocolModule> {
+    return {
+      ngModule: UCapFileProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-file/src/public-api.ts b/projects/ucap-webmessenger-protocol-file/src/public-api.ts
new file mode 100644
index 00000000..1b7dc0be
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-file
+ */
+
+export * from './lib/services/file-protocol.service';
+
+export * from './lib/ucap-file-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-file/src/test.ts b/projects/ucap-webmessenger-protocol-file/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-file/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-file/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-file/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-file/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-file/tslint.json b/projects/ucap-webmessenger-protocol-file/tslint.json
new file mode 100644
index 00000000..b1b89761
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-file/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolFile",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-file",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/README.md b/projects/ucap-webmessenger-protocol-fmc/README.md
new file mode 100644
index 00000000..22145afe
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolFmc
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-fmc` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-fmc`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-fmc` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-fmc` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-fmc`, go to the dist folder `cd dist/ucap-webmessenger-protocol-fmc` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-fmc` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-fmc/karma.conf.js b/projects/ucap-webmessenger-protocol-fmc/karma.conf.js
new file mode 100644
index 00000000..420fb1ac
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-fmc'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-fmc/ng-package.json b/projects/ucap-webmessenger-protocol-fmc/ng-package.json
new file mode 100644
index 00000000..4d1efaee
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-fmc",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-fmc/package.json b/projects/ucap-webmessenger-protocol-fmc/package.json
new file mode 100644
index 00000000..449ae822
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-fmc",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.spec.ts
new file mode 100644
index 00000000..28c9dfcb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FmcProtocolService } from './fmc-protocol.service';
+
+describe('FmcProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FmcProtocolService = TestBed.get(FmcProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.ts b/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.ts
new file mode 100644
index 00000000..4d689606
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/src/lib/services/fmc-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FmcProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/src/lib/ucap-fmc-protocol.module.ts b/projects/ucap-webmessenger-protocol-fmc/src/lib/ucap-fmc-protocol.module.ts
new file mode 100644
index 00000000..87613267
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/src/lib/ucap-fmc-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { FmcProtocolService } from './services/fmc-protocol.service';
+
+const SERVICES = [FmcProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapFmcProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapFmcProtocolModule> {
+    return {
+      ngModule: UCapFmcProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/src/public-api.ts b/projects/ucap-webmessenger-protocol-fmc/src/public-api.ts
new file mode 100644
index 00000000..9870c553
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-fmc
+ */
+
+export * from './lib/services/fmc-protocol.service';
+
+export * from './lib/ucap-fmc-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-fmc/src/test.ts b/projects/ucap-webmessenger-protocol-fmc/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-fmc/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-fmc/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-fmc/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-fmc/tslint.json b/projects/ucap-webmessenger-protocol-fmc/tslint.json
new file mode 100644
index 00000000..d726d7cc
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-fmc/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolFmc",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-fmc",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-group/README.md b/projects/ucap-webmessenger-protocol-group/README.md
new file mode 100644
index 00000000..e42d136d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolGroup
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-group` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-group`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-group` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-group` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-group`, go to the dist folder `cd dist/ucap-webmessenger-protocol-group` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-group` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-group/karma.conf.js b/projects/ucap-webmessenger-protocol-group/karma.conf.js
new file mode 100644
index 00000000..4944855e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-group'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-group/ng-package.json b/projects/ucap-webmessenger-protocol-group/ng-package.json
new file mode 100644
index 00000000..a6053c06
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-group",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-group/package.json b/projects/ucap-webmessenger-protocol-group/package.json
new file mode 100644
index 00000000..15e9c394
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-group",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.spec.ts
new file mode 100644
index 00000000..986cf478
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GroupProtocolService } from './group-protocol.service';
+
+describe('GroupProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: GroupProtocolService = TestBed.get(GroupProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.ts b/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.ts
new file mode 100644
index 00000000..20714e3c
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/src/lib/services/group-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-group/src/lib/ucap-group-protocol.module.ts b/projects/ucap-webmessenger-protocol-group/src/lib/ucap-group-protocol.module.ts
new file mode 100644
index 00000000..25a8e597
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/src/lib/ucap-group-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { GroupProtocolService } from './services/group-protocol.service';
+
+const SERVICES = [GroupProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapGroupProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapGroupProtocolModule> {
+    return {
+      ngModule: UCapGroupProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-group/src/public-api.ts b/projects/ucap-webmessenger-protocol-group/src/public-api.ts
new file mode 100644
index 00000000..210cf64d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-group
+ */
+
+export * from './lib/services/group-protocol.service';
+
+export * from './lib/ucap-group-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-group/src/test.ts b/projects/ucap-webmessenger-protocol-group/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-group/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-group/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-group/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-group/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-group/tslint.json b/projects/ucap-webmessenger-protocol-group/tslint.json
new file mode 100644
index 00000000..e5ccc28b
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-group/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolGroup",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-group",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-info/README.md b/projects/ucap-webmessenger-protocol-info/README.md
new file mode 100644
index 00000000..3ead1723
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolInfo
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-info` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-info`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-info` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-info` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-info`, go to the dist folder `cd dist/ucap-webmessenger-protocol-info` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-info` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-info/karma.conf.js b/projects/ucap-webmessenger-protocol-info/karma.conf.js
new file mode 100644
index 00000000..598a9c7e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-info'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-info/ng-package.json b/projects/ucap-webmessenger-protocol-info/ng-package.json
new file mode 100644
index 00000000..ce81f258
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-info",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-info/package.json b/projects/ucap-webmessenger-protocol-info/package.json
new file mode 100644
index 00000000..de8131a2
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-info",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.spec.ts
new file mode 100644
index 00000000..1dc0285d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InfoProtocolService } from './info-protocol.service';
+
+describe('InfoProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: InfoProtocolService = TestBed.get(InfoProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.ts b/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.ts
new file mode 100644
index 00000000..60575e70
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/src/lib/services/info-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InfoProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-info/src/lib/ucap-info-protocol.module.ts b/projects/ucap-webmessenger-protocol-info/src/lib/ucap-info-protocol.module.ts
new file mode 100644
index 00000000..6029f846
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/src/lib/ucap-info-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { InfoProtocolService } from './services/info-protocol.service';
+
+const SERVICES = [InfoProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapInfoProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapInfoProtocolModule> {
+    return {
+      ngModule: UCapInfoProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-info/src/public-api.ts b/projects/ucap-webmessenger-protocol-info/src/public-api.ts
new file mode 100644
index 00000000..dbba1927
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-info
+ */
+
+export * from './lib/services/info-protocol.service';
+
+export * from './lib/ucap-info-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-info/src/test.ts b/projects/ucap-webmessenger-protocol-info/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-info/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-info/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-info/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-info/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-info/tslint.json b/projects/ucap-webmessenger-protocol-info/tslint.json
new file mode 100644
index 00000000..284588b4
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-info/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolInfo",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-info",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-option/README.md b/projects/ucap-webmessenger-protocol-option/README.md
new file mode 100644
index 00000000..8a97f798
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolOption
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-option` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-option`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-option` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-option` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-option`, go to the dist folder `cd dist/ucap-webmessenger-protocol-option` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-option` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-option/karma.conf.js b/projects/ucap-webmessenger-protocol-option/karma.conf.js
new file mode 100644
index 00000000..359b9395
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-option'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-option/ng-package.json b/projects/ucap-webmessenger-protocol-option/ng-package.json
new file mode 100644
index 00000000..a1a33b40
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-option",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-option/package.json b/projects/ucap-webmessenger-protocol-option/package.json
new file mode 100644
index 00000000..60a009bc
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-option",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.spec.ts
new file mode 100644
index 00000000..3f085145
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OptionProtocolService } from './option-protocol.service';
+
+describe('OptionProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: OptionProtocolService = TestBed.get(OptionProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.ts b/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.ts
new file mode 100644
index 00000000..256e68dd
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/src/lib/services/option-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OptionProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-option/src/lib/ucap-option-protocol.module.ts b/projects/ucap-webmessenger-protocol-option/src/lib/ucap-option-protocol.module.ts
new file mode 100644
index 00000000..02233baa
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/src/lib/ucap-option-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { OptionProtocolService } from './services/option-protocol.service';
+
+const SERVICES = [OptionProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapOptionProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapOptionProtocolModule> {
+    return {
+      ngModule: UCapOptionProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-option/src/public-api.ts b/projects/ucap-webmessenger-protocol-option/src/public-api.ts
new file mode 100644
index 00000000..73dfdf23
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-option
+ */
+
+export * from './lib/services/option-protocol.service';
+
+export * from './lib/ucap-option-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-option/src/test.ts b/projects/ucap-webmessenger-protocol-option/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-option/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-option/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-option/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-option/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-option/tslint.json b/projects/ucap-webmessenger-protocol-option/tslint.json
new file mode 100644
index 00000000..d748a5a7
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-option/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolOption",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-option",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/README.md b/projects/ucap-webmessenger-protocol-ping/README.md
new file mode 100644
index 00000000..da82e3c1
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolPing
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-ping` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-ping`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-ping` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-ping` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-ping`, go to the dist folder `cd dist/ucap-webmessenger-protocol-ping` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-ping` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-ping/karma.conf.js b/projects/ucap-webmessenger-protocol-ping/karma.conf.js
new file mode 100644
index 00000000..cbb4402e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-ping'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-ping/ng-package.json b/projects/ucap-webmessenger-protocol-ping/ng-package.json
new file mode 100644
index 00000000..7374bd4b
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-ping",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-ping/package.json b/projects/ucap-webmessenger-protocol-ping/package.json
new file mode 100644
index 00000000..414ab285
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-ping",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.spec.ts
new file mode 100644
index 00000000..d010bee0
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PingProtocolService } from './ping-protocol.service';
+
+describe('PingProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PingProtocolService = TestBed.get(PingProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.ts b/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.ts
new file mode 100644
index 00000000..82e533fd
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/src/lib/services/ping-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PingProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/src/lib/ucap-ping-protocol.module.ts b/projects/ucap-webmessenger-protocol-ping/src/lib/ucap-ping-protocol.module.ts
new file mode 100644
index 00000000..df636688
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/src/lib/ucap-ping-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { PingProtocolService } from './services/ping-protocol.service';
+
+const SERVICES = [PingProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapPingProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapPingProtocolModule> {
+    return {
+      ngModule: UCapPingProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/src/public-api.ts b/projects/ucap-webmessenger-protocol-ping/src/public-api.ts
new file mode 100644
index 00000000..6e0259ee
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-ping
+ */
+
+export * from './lib/services/ping-protocol.service';
+
+export * from './lib/ucap-ping-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-ping/src/test.ts b/projects/ucap-webmessenger-protocol-ping/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-ping/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-ping/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-ping/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-ping/tslint.json b/projects/ucap-webmessenger-protocol-ping/tslint.json
new file mode 100644
index 00000000..b61914f9
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ping/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolPing",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-ping",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-query/README.md b/projects/ucap-webmessenger-protocol-query/README.md
new file mode 100644
index 00000000..eb2d5e29
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolQuery
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-query` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-query`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-query` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-query` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-query`, go to the dist folder `cd dist/ucap-webmessenger-protocol-query` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-query` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-query/karma.conf.js b/projects/ucap-webmessenger-protocol-query/karma.conf.js
new file mode 100644
index 00000000..c6ca1db9
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-query'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-query/ng-package.json b/projects/ucap-webmessenger-protocol-query/ng-package.json
new file mode 100644
index 00000000..0240c9cf
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-query",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-query/package.json b/projects/ucap-webmessenger-protocol-query/package.json
new file mode 100644
index 00000000..6c5c7089
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-query",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.spec.ts
new file mode 100644
index 00000000..66b0ad31
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QueryProtocolService } from './query-protocol.service';
+
+describe('QueryProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: QueryProtocolService = TestBed.get(QueryProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.ts b/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.ts
new file mode 100644
index 00000000..29ffd922
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/src/lib/services/query-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QueryProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-query/src/lib/ucap-query-protocol.module.ts b/projects/ucap-webmessenger-protocol-query/src/lib/ucap-query-protocol.module.ts
new file mode 100644
index 00000000..6f17a6f0
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/src/lib/ucap-query-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { QueryProtocolService } from './services/query-protocol.service';
+
+const SERVICES = [QueryProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapQueryProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapQueryProtocolModule> {
+    return {
+      ngModule: UCapQueryProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-query/src/public-api.ts b/projects/ucap-webmessenger-protocol-query/src/public-api.ts
new file mode 100644
index 00000000..85db4a9d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-query
+ */
+
+export * from './lib/services/query-protocol.service';
+
+export * from './lib/ucap-query-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-query/src/test.ts b/projects/ucap-webmessenger-protocol-query/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-query/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-query/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-query/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-query/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-query/tslint.json b/projects/ucap-webmessenger-protocol-query/tslint.json
new file mode 100644
index 00000000..a7efec76
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-query/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolQuery",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-query",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-room/README.md b/projects/ucap-webmessenger-protocol-room/README.md
new file mode 100644
index 00000000..b13095d8
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolRoom
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-room` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-room`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-room` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-room` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-room`, go to the dist folder `cd dist/ucap-webmessenger-protocol-room` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-room` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-room/karma.conf.js b/projects/ucap-webmessenger-protocol-room/karma.conf.js
new file mode 100644
index 00000000..efaf317a
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-room'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-room/ng-package.json b/projects/ucap-webmessenger-protocol-room/ng-package.json
new file mode 100644
index 00000000..2cfd80ce
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-room",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-room/package.json b/projects/ucap-webmessenger-protocol-room/package.json
new file mode 100644
index 00000000..b17198e5
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-room",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.spec.ts
new file mode 100644
index 00000000..07621252
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RoomProtocolService } from './room-protocol.service';
+
+describe('RoomProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RoomProtocolService = TestBed.get(RoomProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.ts b/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.ts
new file mode 100644
index 00000000..d1d3542c
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/src/lib/services/room-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RoomProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-room/src/lib/ucap-room-protocol.module.ts b/projects/ucap-webmessenger-protocol-room/src/lib/ucap-room-protocol.module.ts
new file mode 100644
index 00000000..79cea576
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/src/lib/ucap-room-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { RoomProtocolService } from './services/room-protocol.service';
+
+const SERVICES = [RoomProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapRoomProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapRoomProtocolModule> {
+    return {
+      ngModule: UCapRoomProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-room/src/public-api.ts b/projects/ucap-webmessenger-protocol-room/src/public-api.ts
new file mode 100644
index 00000000..e3983287
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-room
+ */
+
+export * from './lib/services/room-protocol.service';
+
+export * from './lib/ucap-room-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-room/src/test.ts b/projects/ucap-webmessenger-protocol-room/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-room/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-room/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-room/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-room/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-room/tslint.json b/projects/ucap-webmessenger-protocol-room/tslint.json
new file mode 100644
index 00000000..436defae
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-room/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolRoom",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-room",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-service/README.md b/projects/ucap-webmessenger-protocol-service/README.md
new file mode 100644
index 00000000..897c8e31
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolService
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-service` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-service`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-service` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-service` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-service`, go to the dist folder `cd dist/ucap-webmessenger-protocol-service` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-service` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-service/karma.conf.js b/projects/ucap-webmessenger-protocol-service/karma.conf.js
new file mode 100644
index 00000000..764ed150
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-service'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-service/ng-package.json b/projects/ucap-webmessenger-protocol-service/ng-package.json
new file mode 100644
index 00000000..b277873a
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-service",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-service/package.json b/projects/ucap-webmessenger-protocol-service/package.json
new file mode 100644
index 00000000..01d08e78
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-service",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.spec.ts
new file mode 100644
index 00000000..4c54e5e9
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ServiceProtocolService } from './service-protocol.service';
+
+describe('ServiceProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ServiceProtocolService = TestBed.get(ServiceProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.ts b/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.ts
new file mode 100644
index 00000000..d3b26ac2
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/src/lib/services/service-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServiceProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-service/src/lib/ucap-service-protocol.module.ts b/projects/ucap-webmessenger-protocol-service/src/lib/ucap-service-protocol.module.ts
new file mode 100644
index 00000000..48487ccf
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/src/lib/ucap-service-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { ServiceProtocolService } from './services/service-protocol.service';
+
+const SERVICES = [ServiceProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapServiceProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapServiceProtocolModule> {
+    return {
+      ngModule: UCapServiceProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-service/src/public-api.ts b/projects/ucap-webmessenger-protocol-service/src/public-api.ts
new file mode 100644
index 00000000..94d85a36
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-service
+ */
+
+export * from './lib/services/service-protocol.service';
+
+export * from './lib/ucap-service-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-service/src/test.ts b/projects/ucap-webmessenger-protocol-service/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-service/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-service/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-service/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-service/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-service/tslint.json b/projects/ucap-webmessenger-protocol-service/tslint.json
new file mode 100644
index 00000000..db8ba972
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-service/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolService",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-service",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-status/README.md b/projects/ucap-webmessenger-protocol-status/README.md
new file mode 100644
index 00000000..2a45a61f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolStatus
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-status` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-status`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-status` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-status` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-status`, go to the dist folder `cd dist/ucap-webmessenger-protocol-status` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-status` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-status/karma.conf.js b/projects/ucap-webmessenger-protocol-status/karma.conf.js
new file mode 100644
index 00000000..2662de43
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-status'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-status/ng-package.json b/projects/ucap-webmessenger-protocol-status/ng-package.json
new file mode 100644
index 00000000..c13b02d2
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-status",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-status/package.json b/projects/ucap-webmessenger-protocol-status/package.json
new file mode 100644
index 00000000..adbb9ba8
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-status",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.spec.ts
new file mode 100644
index 00000000..14291c06
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StatusProtocolService } from './status-protocol.service';
+
+describe('StatusProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: StatusProtocolService = TestBed.get(StatusProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.ts b/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.ts
new file mode 100644
index 00000000..d6ee341a
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/src/lib/services/status-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StatusProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-status/src/lib/ucap-status-protocol.module.ts b/projects/ucap-webmessenger-protocol-status/src/lib/ucap-status-protocol.module.ts
new file mode 100644
index 00000000..6ff4816b
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/src/lib/ucap-status-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { StatusProtocolService } from './services/status-protocol.service';
+
+const SERVICES = [StatusProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapStatusProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapStatusProtocolModule> {
+    return {
+      ngModule: UCapStatusProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-status/src/public-api.ts b/projects/ucap-webmessenger-protocol-status/src/public-api.ts
new file mode 100644
index 00000000..9a2a652f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-status
+ */
+
+export * from './lib/services/status-protocol.service';
+
+export * from './lib/ucap-status-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-status/src/test.ts b/projects/ucap-webmessenger-protocol-status/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-status/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-status/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-status/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-status/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-status/tslint.json b/projects/ucap-webmessenger-protocol-status/tslint.json
new file mode 100644
index 00000000..267812e9
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-status/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolStatus",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-status",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/README.md b/projects/ucap-webmessenger-protocol-sync/README.md
new file mode 100644
index 00000000..084b47db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolSync
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-sync` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-sync`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-sync` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-sync` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-sync`, go to the dist folder `cd dist/ucap-webmessenger-protocol-sync` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-sync` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-sync/karma.conf.js b/projects/ucap-webmessenger-protocol-sync/karma.conf.js
new file mode 100644
index 00000000..0088cacd
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-sync'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-sync/ng-package.json b/projects/ucap-webmessenger-protocol-sync/ng-package.json
new file mode 100644
index 00000000..880772c8
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-sync",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-sync/package.json b/projects/ucap-webmessenger-protocol-sync/package.json
new file mode 100644
index 00000000..76ccc4d7
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-sync",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.spec.ts
new file mode 100644
index 00000000..46fe301d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SyncProtocolService } from './sync-protocol.service';
+
+describe('SyncProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SyncProtocolService = TestBed.get(SyncProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.ts b/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.ts
new file mode 100644
index 00000000..65bbd034
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/src/lib/services/sync-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SyncProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/src/lib/ucap-sync-protocol.module.ts b/projects/ucap-webmessenger-protocol-sync/src/lib/ucap-sync-protocol.module.ts
new file mode 100644
index 00000000..802694be
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/src/lib/ucap-sync-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { SyncProtocolService } from './services/sync-protocol.service';
+
+const SERVICES = [SyncProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapSyncProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapSyncProtocolModule> {
+    return {
+      ngModule: UCapSyncProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/src/public-api.ts b/projects/ucap-webmessenger-protocol-sync/src/public-api.ts
new file mode 100644
index 00000000..f98e4736
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-sync
+ */
+
+export * from './lib/services/sync-protocol.service';
+
+export * from './lib/ucap-sync-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-sync/src/test.ts b/projects/ucap-webmessenger-protocol-sync/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-sync/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-sync/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-sync/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-sync/tslint.json b/projects/ucap-webmessenger-protocol-sync/tslint.json
new file mode 100644
index 00000000..3c4bf970
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-sync/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolSync",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-sync",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/README.md b/projects/ucap-webmessenger-protocol-ucti/README.md
new file mode 100644
index 00000000..b56dd5c4
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolUcti
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-ucti` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-ucti`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-ucti` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-ucti` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-ucti`, go to the dist folder `cd dist/ucap-webmessenger-protocol-ucti` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-ucti` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-ucti/karma.conf.js b/projects/ucap-webmessenger-protocol-ucti/karma.conf.js
new file mode 100644
index 00000000..6a3f7e58
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-ucti'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-ucti/ng-package.json b/projects/ucap-webmessenger-protocol-ucti/ng-package.json
new file mode 100644
index 00000000..3eda5648
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-ucti",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-ucti/package.json b/projects/ucap-webmessenger-protocol-ucti/package.json
new file mode 100644
index 00000000..6dada623
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-ucti",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.spec.ts
new file mode 100644
index 00000000..e78720b8
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UctiProtocolService } from './ucti-protocol.service';
+
+describe('UctiProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UctiProtocolService = TestBed.get(UctiProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.ts b/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.ts
new file mode 100644
index 00000000..21fb2fba
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/src/lib/services/ucti-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UctiProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/src/lib/ucap-ucti-protocol.module.ts b/projects/ucap-webmessenger-protocol-ucti/src/lib/ucap-ucti-protocol.module.ts
new file mode 100644
index 00000000..18cb0129
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/src/lib/ucap-ucti-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { UctiProtocolService } from './services/ucti-protocol.service';
+
+const SERVICES = [UctiProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapUctiProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapUctiProtocolModule> {
+    return {
+      ngModule: UCapUctiProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/src/public-api.ts b/projects/ucap-webmessenger-protocol-ucti/src/public-api.ts
new file mode 100644
index 00000000..348bb2ac
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-ucti
+ */
+
+export * from './lib/services/ucti-protocol.service';
+
+export * from './lib/ucap-ucti-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-ucti/src/test.ts b/projects/ucap-webmessenger-protocol-ucti/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-ucti/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-ucti/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-ucti/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-ucti/tslint.json b/projects/ucap-webmessenger-protocol-ucti/tslint.json
new file mode 100644
index 00000000..f01723bb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-ucti/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolUcti",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-ucti",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/README.md b/projects/ucap-webmessenger-protocol-umg/README.md
new file mode 100644
index 00000000..15e069b4
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocolUmg
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol-umg` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol-umg`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol-umg` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol-umg` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol-umg`, go to the dist folder `cd dist/ucap-webmessenger-protocol-umg` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol-umg` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol-umg/karma.conf.js b/projects/ucap-webmessenger-protocol-umg/karma.conf.js
new file mode 100644
index 00000000..b1431326
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol-umg'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol-umg/ng-package.json b/projects/ucap-webmessenger-protocol-umg/ng-package.json
new file mode 100644
index 00000000..80613695
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol-umg",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol-umg/package.json b/projects/ucap-webmessenger-protocol-umg/package.json
new file mode 100644
index 00000000..1d341b39
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol-umg",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.spec.ts b/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.spec.ts
new file mode 100644
index 00000000..241748ab
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UmgProtocolService } from './umg-protocol.service';
+
+describe('UmgProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UmgProtocolService = TestBed.get(UmgProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.ts b/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.ts
new file mode 100644
index 00000000..9f1e800c
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/src/lib/services/umg-protocol.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UmgProtocolService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/src/lib/ucap-umg-protocol.module.ts b/projects/ucap-webmessenger-protocol-umg/src/lib/ucap-umg-protocol.module.ts
new file mode 100644
index 00000000..ecffacc5
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/src/lib/ucap-umg-protocol.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { UmgProtocolService } from './services/umg-protocol.service';
+
+const SERVICES = [UmgProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapUmgProtocolModule {
+  public static forRoot(): ModuleWithProviders<UCapUmgProtocolModule> {
+    return {
+      ngModule: UCapUmgProtocolModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/src/public-api.ts b/projects/ucap-webmessenger-protocol-umg/src/public-api.ts
new file mode 100644
index 00000000..05418359
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol-umg
+ */
+
+export * from './lib/services/umg-protocol.service';
+
+export * from './lib/ucap-umg-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol-umg/src/test.ts b/projects/ucap-webmessenger-protocol-umg/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol-umg/tsconfig.lib.json b/projects/ucap-webmessenger-protocol-umg/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/tsconfig.spec.json b/projects/ucap-webmessenger-protocol-umg/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol-umg/tslint.json b/projects/ucap-webmessenger-protocol-umg/tslint.json
new file mode 100644
index 00000000..0d666350
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol-umg/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocolUmg",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol-umg",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol/README.md b/projects/ucap-webmessenger-protocol/README.md
new file mode 100644
index 00000000..bc26b99b
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerProtocol
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-protocol` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-protocol`.
+> Note: Don't forget to add `--project ucap-webmessenger-protocol` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-protocol` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-protocol`, go to the dist folder `cd dist/ucap-webmessenger-protocol` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-protocol` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-protocol/karma.conf.js b/projects/ucap-webmessenger-protocol/karma.conf.js
new file mode 100644
index 00000000..6b34cefe
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-protocol'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-protocol/ng-package.json b/projects/ucap-webmessenger-protocol/ng-package.json
new file mode 100644
index 00000000..c47a0aca
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-protocol",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-protocol/package.json b/projects/ucap-webmessenger-protocol/package.json
new file mode 100644
index 00000000..ce7e6d9c
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/protocol",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/models/packet.ts b/projects/ucap-webmessenger-protocol/src/lib/models/packet.ts
new file mode 100644
index 00000000..71195797
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/models/packet.ts
@@ -0,0 +1,6 @@
+import { PacketBodyValue } from '../types/packet-body-value.type';
+
+export interface PacketBody {
+  type: PacketBodyValue;
+  value: any;
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/models/protocol.ts b/projects/ucap-webmessenger-protocol/src/lib/models/protocol.ts
new file mode 100644
index 00000000..8c595995
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/models/protocol.ts
@@ -0,0 +1,7 @@
+export interface ProtocolRequest {
+  _id?: string;
+}
+
+export interface ProtocolResponse {
+  _id?: string;
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.spec.ts b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.spec.ts
new file mode 100644
index 00000000..6002671f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProtocolService } from './protocol.service';
+
+describe('ProtocolService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ProtocolService = TestBed.get(ProtocolService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
new file mode 100644
index 00000000..4d092132
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
@@ -0,0 +1,267 @@
+import { Injectable, Inject } from '@angular/core';
+
+import { Subscription, Observable, Subject } from 'rxjs';
+import { share, switchMap, retryWhen, delay } from 'rxjs/operators';
+
+import { QueueingSubject } from 'queueing-subject';
+
+import {
+  makeWebSocketObservable,
+  GetWebSocketResponses,
+  NormalClosureMessage
+} from '@ucap-webmessenger/web-socket';
+
+import { _MODULE_CONFIG } from '../types/token';
+import { ModuleConfig } from '../types/module-config';
+import { PacketBody } from '../models/packet';
+import {
+  PacketBodyValueDivider,
+  PacketBodyDivider
+} from '../types/packet-body-divider';
+import { PacketBodyValue } from '../types/packet-body-value.type';
+
+interface RequestState {
+  subject: Subject<ServerResponse>;
+  request: {
+    serviceType: number;
+    subServiceType: number;
+    bodyList: PacketBody[];
+  };
+}
+
+export interface ServerResponse {
+  serviceType: number;
+  subServiceType: number;
+  senderSeq: number;
+  bodyList: any[];
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProtocolService {
+  // tslint:disable-next-line: variable-name
+  private _requestId: number | null = null;
+  private readonly pendingRequests: Map<number, RequestState>;
+  private readonly input$: QueueingSubject<string>;
+  private socket$: Observable<GetWebSocketResponses<any>>;
+  private messagesSubscription: Subscription | null = null;
+
+  constructor(@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig) {
+    this.pendingRequests = new Map();
+    this.input$ = new QueueingSubject<string>();
+  }
+
+  public connect(): void {
+    this.socket$ = makeWebSocketObservable(this.moduleConfig.url);
+    const messages$ = this.socket$.pipe(
+      switchMap(getResponses => getResponses(this.input$)),
+      retryWhen(errors =>
+        errors.pipe(delay(this.moduleConfig.reconnect.delay))
+      ),
+      share()
+    );
+
+    this.messagesSubscription = messages$.subscribe(
+      (message: string) => {
+        const arg = message.split(PacketBodyDivider);
+        if (2 > arg.length) {
+          // OnError(3);
+          return;
+        }
+
+        const res = this.decodePacket(arg);
+      },
+      (error: Error) => {
+        const { message } = error;
+        if (message === NormalClosureMessage) {
+          console.log('server closed the websocket connection normally');
+        } else {
+          console.log('socket was disconnected due to error:', message);
+        }
+      },
+      () => {
+        // The clean termination only happens in response to the last
+        // subscription to the observable being unsubscribed, any
+        // other closure is considered an error.
+        console.log('the connection was closed in response to the user');
+      }
+    );
+  }
+
+  public disconnect(): void {
+    this.messagesSubscription.unsubscribe();
+  }
+
+  public call(
+    serviceType: number | null,
+    subServiceType: number | null,
+    ...bodyList: PacketBody[]
+  ): Observable<ServerResponse> {
+    return this.sendInternal(true, serviceType, subServiceType, bodyList);
+  }
+
+  public send(
+    serviceType: number,
+    subServiceType: number,
+    ...bodyList: PacketBody[]
+  ): void {
+    this.sendInternal(false, serviceType, subServiceType, bodyList);
+  }
+
+  private sendInternal(
+    hasResponse: boolean,
+    serviceType: number,
+    subServiceType: number,
+    bodyList: PacketBody[]
+  ): Observable<ServerResponse> | undefined {
+    let packet: string;
+    let responseSubject: Subject<ServerResponse> | null = null;
+
+    if (hasResponse) {
+      const requestId = this.requestId;
+
+      packet = this.encodePacket(serviceType, subServiceType, [
+        ...bodyList,
+        { type: PacketBodyValue.RequestId, value: requestId }
+      ]);
+
+      responseSubject = new Subject<ServerResponse>();
+      this.pendingRequests.set(requestId, {
+        subject: responseSubject,
+        request: { serviceType, subServiceType, bodyList }
+      });
+    } else {
+      packet = this.encodePacket(serviceType, subServiceType, bodyList);
+    }
+
+    this.input$.next(packet);
+
+    return responseSubject ? responseSubject.asObservable() : undefined;
+  }
+
+  private get requestId() {
+    if (
+      null === this._requestId ||
+      this.moduleConfig.requestId.max < this._requestId
+    ) {
+      this._requestId = this.moduleConfig.requestId.min;
+    }
+
+    return this._requestId;
+  }
+
+  private decodePacket(
+    arg: string[]
+  ): { requestId: number; response: ServerResponse } | null {
+    const cmdArg = arg[0].split(PacketBodyValueDivider);
+    if (2 > cmdArg.length) {
+      // OnError(3);
+      return null;
+    }
+
+    const seqArg = arg[1].split(PacketBodyValueDivider);
+    if (2 > seqArg.length) {
+      // OnError(3);
+      return null;
+    }
+
+    const bodyList: any[] | null = null;
+    let requestId: number | null = null;
+
+    for (let i = 2; i < arg.length; i++) {
+      const bodyArg = arg[i].split(PacketBodyValueDivider);
+      if (2 > bodyArg.length) {
+        // OnError(3);
+        return null;
+      }
+
+      const valueType: PacketBodyValue = bodyArg[0] as PacketBodyValue;
+      const value = bodyArg[0];
+
+      switch (valueType) {
+        case PacketBodyValue.None:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.Binary:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.Integer:
+          bodyList.push(parseInt(value, 10));
+          break;
+        case PacketBodyValue.String:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.EncodedString:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.MultiByteString:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.WideString:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.IuId:
+          bodyList.push(value);
+          break;
+        case PacketBodyValue.RequestId:
+          requestId = parseInt(value, 10);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  private encodePacket(
+    serviceType: number | null,
+    subServiceType: number | null,
+    bodyList: PacketBody[] = []
+  ): string {
+    const packet: string[] = [];
+    packet.push(serviceType ? serviceType.toString() : '0');
+    packet.push(PacketBodyValueDivider);
+    packet.push(subServiceType ? subServiceType.toString() : '0');
+    packet.push(PacketBodyDivider);
+
+    for (const body of bodyList) {
+      packet.push(body.type);
+      packet.push(PacketBodyValueDivider);
+
+      switch (body.type) {
+        case PacketBodyValue.None:
+          packet.push(body.value.toString());
+          break;
+        case PacketBodyValue.Binary:
+          packet.push(body.value.toString());
+          break;
+        case PacketBodyValue.Integer:
+          packet.push(body.value.toString());
+          break;
+        case PacketBodyValue.String:
+          packet.push(body.value);
+          break;
+        case PacketBodyValue.EncodedString:
+          packet.push(body.value);
+          break;
+        case PacketBodyValue.MultiByteString:
+          packet.push(body.value);
+          break;
+        case PacketBodyValue.WideString:
+          packet.push(body.value);
+          break;
+        case PacketBodyValue.IuId:
+          packet.push(body.value);
+          break;
+        case PacketBodyValue.RequestId:
+          packet.push(body.value.toString());
+          break;
+        default:
+          break;
+      }
+      packet.push(PacketBodyDivider);
+    }
+
+    return packet.join('');
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts b/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
new file mode 100644
index 00000000..37c8affa
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
@@ -0,0 +1,10 @@
+export interface ModuleConfig {
+  url: string;
+  reconnect: {
+    delay: number;
+  };
+  requestId: {
+    min: number;
+    max: number;
+  };
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-divider.ts b/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-divider.ts
new file mode 100644
index 00000000..83b7fa4d
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-divider.ts
@@ -0,0 +1,2 @@
+export const PacketBodyDivider = '\f';
+export const PacketBodyValueDivider = '\t';
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-value.type.ts b/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-value.type.ts
new file mode 100644
index 00000000..3fb1d667
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/types/packet-body-value.type.ts
@@ -0,0 +1,11 @@
+export enum PacketBodyValue {
+  None = '0',
+  Binary = '1',
+  Integer = '2',
+  String = '3',
+  EncodedString = '4',
+  MultiByteString = '5',
+  WideString = '6',
+  IuId = '7',
+  RequestId = '8'
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/token.ts b/projects/ucap-webmessenger-protocol/src/lib/types/token.ts
new file mode 100644
index 00000000..00cae289
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/types/token.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const _MODULE_CONFIG = new InjectionToken(
+  '@ucap-webmessenger/protocol config of module'
+);
diff --git a/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts b/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
new file mode 100644
index 00000000..81e3a3e1
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { ProtocolService } from './services/protocol.service';
+import { ModuleConfig } from './types/module-config';
+import { _MODULE_CONFIG } from './types/token';
+
+const SERVICES = [ProtocolService];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class UCapProtocolModule {
+  public static forRoot(
+    config: ModuleConfig
+  ): ModuleWithProviders<UCapProtocolModule> {
+    return {
+      ngModule: UCapProtocolModule,
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-protocol/src/public-api.ts b/projects/ucap-webmessenger-protocol/src/public-api.ts
new file mode 100644
index 00000000..2085d2ad
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/public-api.ts
@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of ucap-webmessenger-protocol
+ */
+
+export * from './lib/models/packet';
+export * from './lib/models/protocol';
+
+export * from './lib/services/protocol.service';
+
+export * from './lib/types/module-config';
+export * from './lib/types/packet-body-divider';
+export * from './lib/types/packet-body-value.type';
+
+export * from './lib/ucap-protocol.module';
diff --git a/projects/ucap-webmessenger-protocol/src/test.ts b/projects/ucap-webmessenger-protocol/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-protocol/tsconfig.lib.json b/projects/ucap-webmessenger-protocol/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol/tsconfig.spec.json b/projects/ucap-webmessenger-protocol/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-protocol/tslint.json b/projects/ucap-webmessenger-protocol/tslint.json
new file mode 100644
index 00000000..2d59878e
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProtocol",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-protocol",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/README.md b/projects/ucap-webmessenger-ui-account/README.md
new file mode 100644
index 00000000..55c868f1
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerAccount
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-account` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-account`.
+> Note: Don't forget to add `--project ucap-webmessenger-account` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-account` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-account`, go to the dist folder `cd dist/ucap-webmessenger-account` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-account` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-ui-account/karma.conf.js b/projects/ucap-webmessenger-ui-account/karma.conf.js
new file mode 100644
index 00000000..8f40b9b8
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-account'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-ui-account/ng-package.json b/projects/ucap-webmessenger-ui-account/ng-package.json
new file mode 100644
index 00000000..917cdb3c
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-account",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/package.json b/projects/ucap-webmessenger-ui-account/package.json
new file mode 100644
index 00000000..badffe0c
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-account",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
new file mode 100644
index 00000000..c31a54cf
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
@@ -0,0 +1,69 @@
+<div class="login-form">
+  <div class="title">LOGIN TO YOUR ACCOUNT</div>
+
+  <form name="loginForm" [formGroup]="loginForm" novalidate>
+    <mat-form-field appearance="outline">
+      <mat-label>Company</mat-label>
+      <mat-select formControlName="companyCode" required>
+        <mat-option
+          *ngFor="let company of companies"
+          [value]="company.companyCode"
+          >{{ company.companyName }}</mat-option
+        >
+      </mat-select>
+      <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
+        Company is required
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Login ID</mat-label>
+      <input matInput formControlName="loginId" />
+      <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
+        Login ID is required
+      </mat-error>
+      <mat-error *ngIf="!loginForm.get('loginId').hasError('required')">
+        Please enter a valid login id
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Password</mat-label>
+      <input matInput type="password" formControlName="loginPw" #loginPw />
+      <mat-error>
+        Password is required
+      </mat-error>
+    </mat-form-field>
+
+    <div
+      class="remember-forgot-password"
+      fxLayout="row"
+      fxLayout.xs="column"
+      fxLayoutAlign="space-between center"
+    >
+      <mat-checkbox class="remember-me" aria-label="Remember Me">
+        Remember Me
+      </mat-checkbox>
+
+      <a class="forgot-password">
+        Forgot Password?
+      </a>
+    </div>
+
+    <button
+      mat-raised-button
+      color="accent"
+      class="submit-button"
+      aria-label="LOG IN"
+      [disabled]="loginForm.invalid"
+      (click)="onClickLogin()"
+    >
+      LOGIN
+    </button>
+  </form>
+
+  <div class="register" fxLayout="column" fxLayoutAlign="center center">
+    <span class="text">Don't have an account?</span>
+    <a class="link">Create an account</a>
+  </div>
+</div>
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
new file mode 100644
index 00000000..9017f954
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
@@ -0,0 +1,98 @@
+.login-form {
+  width: 384px;
+  max-width: 384px;
+  padding: 32px;
+  text-align: center;
+
+  .title {
+    font-size: 20px;
+    margin: 16px 0 32px 0;
+  }
+
+  form {
+    width: 100%;
+    text-align: left;
+
+    mat-form-field {
+      width: 100%;
+    }
+
+    mat-checkbox {
+      margin: 0;
+    }
+
+    .remember-forgot-password {
+      font-size: 13px;
+      margin-top: 8px;
+
+      .remember-me {
+        margin-bottom: 16px;
+      }
+
+      .forgot-password {
+        font-size: 13px;
+        font-weight: 600;
+        margin-bottom: 16px;
+      }
+    }
+
+    .submit-button {
+      width: 220px;
+      margin: 16px auto;
+      display: block;
+    }
+  }
+
+  .register {
+    margin: 32px auto 24px auto;
+    font-weight: 600;
+
+    .text {
+      margin-right: 8px;
+    }
+  }
+
+  .separator {
+    font-size: 15px;
+    font-weight: 600;
+    margin: 24px auto;
+    position: relative;
+    overflow: hidden;
+    width: 100px;
+
+    .text {
+      display: inline-flex;
+      position: relative;
+      padding: 0 8px;
+      z-index: 9999;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        width: 30px;
+        position: absolute;
+        top: 10px;
+        border-top: 1px solid;
+      }
+
+      &:before {
+        right: 100%;
+      }
+
+      &:after {
+        left: 100%;
+      }
+    }
+  }
+
+  button {
+    &.google,
+    &.facebook {
+      width: 192px;
+      text-transform: none;
+      color: #ffffff;
+      font-size: 13px;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.spec.ts b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.spec.ts
new file mode 100644
index 00000000..439d7a79
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('Account::LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts
new file mode 100644
index 00000000..ab47b00a
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts
@@ -0,0 +1,56 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Company } from '@ucap-webmessenger/api-external';
+
+@Component({
+  selector: 'ucap-account-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+  @Input()
+  companies?: Company[];
+
+  @Output()
+  login = new EventEmitter<{
+    companyCode: string;
+    loginId: string;
+    loginPw: string;
+    rememberMe: boolean;
+    notValid: () => void;
+  }>();
+
+  @ViewChild('loginPw', { static: true }) loginPwElementRef: ElementRef;
+
+  loginForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.loginForm = this.formBuilder.group({
+      companyCode: ['', [Validators.required]],
+      loginId: ['', [Validators.required]],
+      loginPw: ['', Validators.required]
+    });
+  }
+
+  onClickLogin() {
+    this.login.emit({
+      companyCode: this.loginForm.get('companyCode').value,
+      loginId: this.loginForm.get('loginId').value,
+      loginPw: this.loginForm.get('loginPw').value,
+      rememberMe: true,
+      notValid: () => {
+        this.loginPwElementRef.nativeElement.focus();
+      }
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.spec.ts b/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.spec.ts
new file mode 100644
index 00000000..6aab80b2
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AccountService } from './account.service';
+
+describe('AccountService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AccountService = TestBed.get(AccountService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.ts b/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.ts
new file mode 100644
index 00000000..7af1f7f8
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/services/account.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AccountService {
+  constructor() {}
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
new file mode 100644
index 00000000..a314ddc7
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
@@ -0,0 +1,45 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+import { LoginComponent } from './components/login.component';
+
+import { AccountService } from './services/account.service';
+
+const COMPONENTS = [LoginComponent];
+const SERVICES = [AccountService];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+
+    FlexLayoutModule,
+
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiAccountModule {
+  public static forRoot(): ModuleWithProviders<UCapUiAccountModule> {
+    return {
+      ngModule: UCapUiAccountModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/public-api.ts b/projects/ucap-webmessenger-ui-account/src/public-api.ts
new file mode 100644
index 00000000..a5492d12
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-account
+ */
+
+export * from './lib/services/account.service';
+export * from './lib/components/login.component';
+export * from './lib/ucap-ui-account.module';
diff --git a/projects/ucap-webmessenger-ui-account/src/test.ts b/projects/ucap-webmessenger-ui-account/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-ui-account/tsconfig.lib.json b/projects/ucap-webmessenger-ui-account/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-account/tsconfig.spec.json b/projects/ucap-webmessenger-ui-account/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-account/tslint.json b/projects/ucap-webmessenger-ui-account/tslint.json
new file mode 100644
index 00000000..4e44deda
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-account/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapAccount",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-account",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-messenger/README.md b/projects/ucap-webmessenger-ui-messenger/README.md
new file mode 100644
index 00000000..12afd4c3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerUiMessenger
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-messenger` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-messenger`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-messenger` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-messenger` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui-messenger`, go to the dist folder `cd dist/ucap-webmessenger-ui-messenger` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-messenger` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-ui-messenger/karma.conf.js b/projects/ucap-webmessenger-ui-messenger/karma.conf.js
new file mode 100644
index 00000000..1da1718b
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui-messenger'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-ui-messenger/ng-package.json b/projects/ucap-webmessenger-ui-messenger/ng-package.json
new file mode 100644
index 00000000..49c8e3a7
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-messenger",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-messenger/package.json b/projects/ucap-webmessenger-ui-messenger/package.json
new file mode 100644
index 00000000..b87ed342
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-messenger",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-messenger/src/lib/ucap-ui-messenger.module.ts b/projects/ucap-webmessenger-ui-messenger/src/lib/ucap-ui-messenger.module.ts
new file mode 100644
index 00000000..68f6cc62
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/src/lib/ucap-ui-messenger.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+const COMPONENTS = [];
+const SERVICES = [];
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiMessengerModule {
+  public static forRoot(): ModuleWithProviders<UCapUiMessengerModule> {
+    return {
+      ngModule: UCapUiMessengerModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-messenger/src/public-api.ts b/projects/ucap-webmessenger-ui-messenger/src/public-api.ts
new file mode 100644
index 00000000..0bb5b932
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-messenger
+ */
+
+export * from './lib/ucap-ui-messenger.module';
diff --git a/projects/ucap-webmessenger-ui-messenger/src/test.ts b/projects/ucap-webmessenger-ui-messenger/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-ui-messenger/tsconfig.lib.json b/projects/ucap-webmessenger-ui-messenger/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-messenger/tsconfig.spec.json b/projects/ucap-webmessenger-ui-messenger/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-messenger/tslint.json b/projects/ucap-webmessenger-ui-messenger/tslint.json
new file mode 100644
index 00000000..0620bcf3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-messenger/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapMessenger",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-messenger",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-organization/README.md b/projects/ucap-webmessenger-ui-organization/README.md
new file mode 100644
index 00000000..67d301cc
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerUiOrganization
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-organization` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-organization`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-organization` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-organization` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui-organization`, go to the dist folder `cd dist/ucap-webmessenger-ui-organization` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-organization` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-ui-organization/karma.conf.js b/projects/ucap-webmessenger-ui-organization/karma.conf.js
new file mode 100644
index 00000000..696f04f4
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui-organization'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-ui-organization/ng-package.json b/projects/ucap-webmessenger-ui-organization/ng-package.json
new file mode 100644
index 00000000..379e37ae
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-organization",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-organization/package.json b/projects/ucap-webmessenger-ui-organization/package.json
new file mode 100644
index 00000000..d45d326d
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-organization",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts b/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
new file mode 100644
index 00000000..3d270e20
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+const COMPONENTS = [];
+const SERVICES = [];
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiOrganizationModule {
+  public static forRoot(): ModuleWithProviders<UCapUiOrganizationModule> {
+    return {
+      ngModule: UCapUiOrganizationModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-organization/src/public-api.ts b/projects/ucap-webmessenger-ui-organization/src/public-api.ts
new file mode 100644
index 00000000..f9b0a086
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-organization
+ */
+
+export * from './lib/ucap-ui-organization.module';
diff --git a/projects/ucap-webmessenger-ui-organization/src/test.ts b/projects/ucap-webmessenger-ui-organization/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-ui-organization/tsconfig.lib.json b/projects/ucap-webmessenger-ui-organization/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-organization/tsconfig.spec.json b/projects/ucap-webmessenger-ui-organization/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-organization/tslint.json b/projects/ucap-webmessenger-ui-organization/tslint.json
new file mode 100644
index 00000000..ca80d1ad
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-organization/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapOrganization",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-organization",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-profile/README.md b/projects/ucap-webmessenger-ui-profile/README.md
new file mode 100644
index 00000000..dd6970c6
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerUiProfile
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-profile` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-profile`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-profile` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-profile` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui-profile`, go to the dist folder `cd dist/ucap-webmessenger-ui-profile` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-profile` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-ui-profile/karma.conf.js b/projects/ucap-webmessenger-ui-profile/karma.conf.js
new file mode 100644
index 00000000..3433d739
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui-profile'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-ui-profile/ng-package.json b/projects/ucap-webmessenger-ui-profile/ng-package.json
new file mode 100644
index 00000000..4d3d118c
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-profile",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-profile/package.json b/projects/ucap-webmessenger-ui-profile/package.json
new file mode 100644
index 00000000..163e0312
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-profile",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.html
new file mode 100644
index 00000000..815690b4
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.html
@@ -0,0 +1,26 @@
+<button
+  mat-button
+  class="contact"
+  (click)="onClickItem()"
+  ngClass="{'unread':contact.unread}"
+  [@animate]="{ value: '*', params: { y: '100%' } }"
+>
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
+      <img class="avatar" />
+      <mat-icon class="s-16 status"></mat-icon>
+    </div>
+
+    <div fxLayout="row" fxFlex>
+      <div class="pr-4" fxFlex fxLayout="column" fxLayoutAlign="center start">
+        <div class="profile-name"></div>
+        <div class="profile-last-message"></div>
+      </div>
+
+      <div fxLayout="column" fxLayoutAlign="start end">
+        <div class="profile-last-message-time"></div>
+        <div class="mt-4 unread-message-count accent"></div>
+      </div>
+    </div>
+  </div>
+</button>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.scss
new file mode 100644
index 00000000..358a7c6a
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.scss
@@ -0,0 +1,46 @@
+.profile {
+  white-space: normal;
+  text-align: left;
+  letter-spacing: 0.01em;
+  min-height: 88px;
+  border-bottom: 1px solid;
+  padding: 16px;
+  font-weight: 400;
+  border-radius: 0;
+
+  .avatar-wrapper {
+    .avatar {
+      margin-right: 16px;
+    }
+  }
+
+  .profile-name {
+    font-size: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .profile-last-message {
+    line-height: normal;
+    margin-top: 0;
+  }
+
+  .profile-last-message-time {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .profile-mood {
+    line-height: normal;
+    margin: 0;
+  }
+
+  .unread-message-count {
+    font-size: 12px;
+    border-radius: 50%;
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.spec.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.spec.ts
new file mode 100644
index 00000000..8c516af5
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListItemComponent } from './list-item.component';
+
+describe('ListItemComponent', () => {
+  let component: ListItemComponent;
+  let fixture: ComponentFixture<ListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListItemComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.ts
new file mode 100644
index 00000000..133cc5c1
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/list-item.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ucap-profile-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.scss']
+})
+export class ListItemComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickItem() {}
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
new file mode 100644
index 00000000..7ff4f65c
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/ucap-ui-profile.module.ts
@@ -0,0 +1,25 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ListItemComponent } from './components/list-item.component';
+
+const COMPONENTS = [ListItemComponent];
+
+const SERVICES = [];
+
+@NgModule({
+  imports: [CommonModule, MatButtonModule, MatIconModule],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UcapUiProfileModule {
+  public static forRoot(): ModuleWithProviders<UcapUiProfileModule> {
+    return {
+      ngModule: UcapUiProfileModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-profile/src/public-api.ts b/projects/ucap-webmessenger-ui-profile/src/public-api.ts
new file mode 100644
index 00000000..75d7174e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-profile
+ */
+
+export * from './lib/components/list-item.component';
+
+export * from './lib/ucap-ui-profile.module';
diff --git a/projects/ucap-webmessenger-ui-profile/src/test.ts b/projects/ucap-webmessenger-ui-profile/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-ui-profile/tsconfig.lib.json b/projects/ucap-webmessenger-ui-profile/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-profile/tsconfig.spec.json b/projects/ucap-webmessenger-ui-profile/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui-profile/tslint.json b/projects/ucap-webmessenger-ui-profile/tslint.json
new file mode 100644
index 00000000..88421faf
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-profile/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapProfile",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-profile",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/README.md b/projects/ucap-webmessenger-ui/README.md
new file mode 100644
index 00000000..ea7e796a
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerUi
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui`, go to the dist folder `cd dist/ucap-webmessenger-ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-ui/karma.conf.js b/projects/ucap-webmessenger-ui/karma.conf.js
new file mode 100644
index 00000000..c7464019
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-ui/ng-package.json b/projects/ucap-webmessenger-ui/ng-package.json
new file mode 100644
index 00000000..3b16d4e3
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui/package.json b/projects/ucap-webmessenger-ui/package.json
new file mode 100644
index 00000000..2aed2d3f
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
new file mode 100644
index 00000000..219ab6b8
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@@ -0,0 +1,20 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>{{ data.title }}</mat-card-title>
+    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+  </mat-card-header>
+  <mat-card-content>
+    <p class="notice">
+      {{ data.message }}
+    </p>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickConfirm(false)"
+      class="mat-primary"
+    >
+      Confirm
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.spec.ts
new file mode 100644
index 00000000..a87f1d89
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertDialogComponent } from './alert.dialog.component';
+
+describe('ui::AlertDialogComponent', () => {
+  let component: AlertDialogComponent;
+  let fixture: ComponentFixture<AlertDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlertDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.ts b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.ts
new file mode 100644
index 00000000..6806906e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface AlertDialogData {
+  title: string;
+  message?: string;
+}
+
+// tslint:disable-next-line: no-empty-interface
+export interface AlertDialogResult {}
+
+@Component({
+  selector: 'ucap-ui-alert-dialog',
+  templateUrl: './alert.dialog.component.html',
+  styleUrls: ['./alert.dialog.component.scss']
+})
+export class AlertDialogComponent implements OnInit {
+  tempAgeLimits = [];
+
+  constructor(
+    public dialogRef: MatDialogRef<AlertDialogComponent, AlertDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: AlertDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickConfirm(): void {
+    this.dialogRef.close({});
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
new file mode 100644
index 00000000..d8120a78
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@@ -0,0 +1,23 @@
+<mat-card class="confirm-card">
+  <mat-card-header>
+    <mat-card-title>{{ data.title }}</mat-card-title>
+    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+  </mat-card-header>
+  <mat-card-content>
+    <p class="notice">
+      {{ data.message }}
+    </p>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
+      No
+    </button>
+    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+      Yes
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.spec.ts
new file mode 100644
index 00000000..de089c82
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm.dialog.component';
+
+describe('ui::ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ConfirmDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.ts b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.ts
new file mode 100644
index 00000000..63f6de48
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+export interface ConfirmDialogData {
+  title: string;
+  message?: string;
+}
+
+export interface ConfirmDialogResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'ucap-ui-confirm-dialog',
+  templateUrl: './confirm.dialog.component.html',
+  styleUrls: ['./confirm.dialog.component.scss']
+})
+export class ConfirmDialogComponent implements OnInit {
+  tempAgeLimits = [];
+
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent, ConfirmDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
+  ) {}
+
+  ngOnInit(): void {}
+
+  onClickChoice(choice: boolean): void {
+    this.dialogRef.close({
+      choice
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.spec.ts b/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.spec.ts
new file mode 100644
index 00000000..97fb5eb4
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BottomSheetService } from './bottom-sheet.service';
+
+describe('ui::BottomSheetService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: BottomSheetService = TestBed.get(BottomSheetService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.ts
new file mode 100644
index 00000000..edb1138f
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/services/bottom-sheet.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+
+import { MatBottomSheet, MatBottomSheetConfig } from '@angular/material';
+
+import { of } from 'rxjs';
+import { take, map, catchError } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BottomSheetService {
+  public constructor(private matBottomSheet: MatBottomSheet) {}
+
+  public open<T, D = any, R = any>(
+    componentOrTemplateRef: ComponentType<T>,
+    config?: MatBottomSheetConfig<D>
+  ): Promise<R> {
+    return new Promise<R>((resolve, reject) => {
+      const bottomSheetRef = this.matBottomSheet.open<T, D, R>(
+        componentOrTemplateRef,
+        config
+      );
+
+      bottomSheetRef
+        .afterDismissed()
+        .pipe(
+          take(1),
+          map(result => {
+            return resolve(result);
+          }),
+          catchError(err => {
+            return of(reject(err));
+          })
+        )
+        .subscribe();
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.spec.ts b/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.spec.ts
new file mode 100644
index 00000000..fa59ef69
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DialogService = TestBed.get(DialogService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts
new file mode 100644
index 00000000..a6242291
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/services/dialog.service.ts
@@ -0,0 +1,38 @@
+import { TemplateRef, Injectable } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { MatDialog, MatDialogConfig } from '@angular/material';
+
+import { of } from 'rxjs';
+import { take, map, catchError } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+  constructor(private matDialog: MatDialog) {}
+
+  public open<T, D = any, R = any>(
+    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
+    config?: MatDialogConfig<D>
+  ): Promise<R> {
+    return new Promise<R>((resolve, reject) => {
+      const dialogRef = this.matDialog.open<T, D, R>(
+        componentOrTemplateRef,
+        config
+      );
+
+      dialogRef
+        .afterClosed()
+        .pipe(
+          take(1),
+          map(result => {
+            return resolve(result);
+          }),
+          catchError(err => {
+            return of(reject(err));
+          })
+        )
+        .subscribe();
+    });
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
new file mode 100644
index 00000000..5abb75be
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -0,0 +1,29 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+
+import { BottomSheetService } from './services/bottom-sheet.service';
+import { DialogService } from './services/dialog.service';
+const SERVICES = [BottomSheetService, DialogService];
+
+import { AlertDialogComponent } from './dialogs/alert.dialog.component';
+import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
+const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
+
+@NgModule({
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatDialogModule],
+  exports: [],
+  declarations: [...DIALOGS],
+  entryComponents: [...DIALOGS]
+})
+export class UCapUiModule {
+  public static forRoot(): ModuleWithProviders<UCapUiModule> {
+    return {
+      ngModule: UCapUiModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts
new file mode 100644
index 00000000..a9e50357
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/public-api.ts
@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui
+ */
+
+export * from './lib/dialogs/alert.dialog.component';
+export * from './lib/dialogs/confirm.dialog.component';
+
+export * from './lib/services/bottom-sheet.service';
+export * from './lib/services/dialog.service';
+
+export * from './lib/ucap-ui.module';
diff --git a/projects/ucap-webmessenger-ui/src/test.ts b/projects/ucap-webmessenger-ui/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-ui/tsconfig.lib.json b/projects/ucap-webmessenger-ui/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui/tsconfig.spec.json b/projects/ucap-webmessenger-ui/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-ui/tslint.json b/projects/ucap-webmessenger-ui/tslint.json
new file mode 100644
index 00000000..59ebd15e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapUi",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-ui",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-web-socket/README.md b/projects/ucap-webmessenger-web-socket/README.md
new file mode 100644
index 00000000..c6bbeabc
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerWebSocket
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-web-socket` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-web-socket`.
+> Note: Don't forget to add `--project ucap-webmessenger-web-socket` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-web-socket` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-web-socket`, go to the dist folder `cd dist/ucap-webmessenger-web-socket` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-web-socket` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-web-socket/karma.conf.js b/projects/ucap-webmessenger-web-socket/karma.conf.js
new file mode 100644
index 00000000..edfb0bfa
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-web-socket'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-web-socket/ng-package.json b/projects/ucap-webmessenger-web-socket/ng-package.json
new file mode 100644
index 00000000..e502860c
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-web-socket",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-web-socket/package.json b/projects/ucap-webmessenger-web-socket/package.json
new file mode 100644
index 00000000..3c841f6f
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/web-socket",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-web-socket/src/lib/web-socket.ts b/projects/ucap-webmessenger-web-socket/src/lib/web-socket.ts
new file mode 100644
index 00000000..05fb55e9
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/src/lib/web-socket.ts
@@ -0,0 +1,139 @@
+import { Observable, Subscription, Subject } from 'rxjs';
+
+interface EventWithCodeAndReason {
+  code: number;
+  reason: string;
+}
+
+interface EventWithMessage {
+  message?: string;
+}
+
+type WebSocketPayload = string | ArrayBuffer | Blob;
+
+export interface IWebSocket {
+  // TypeScript doesn't seem to apply function bivariance on each property when
+  // comparing an object to an interface so the argument types have to be `any` :(
+  // Ideally would be able to use the EventWith... interfaces
+  onopen: ((event: any) => any) | null;
+  onclose: ((event: any) => any) | null;
+  onmessage: ((event: any) => any) | null;
+  onerror: ((event: any) => any) | null;
+
+  send(data: WebSocketPayload): any;
+  close(): any;
+}
+
+export type WebSocketFactory = (
+  url: string,
+  protocols: string | string[]
+) => IWebSocket;
+
+export type GetWebSocketResponses<T = WebSocketPayload> = (
+  input: Observable<WebSocketPayload>
+) => Observable<T>;
+
+const defaultProtocols: string[] = [];
+
+const defaultWebsocketFactory: WebSocketFactory = (
+  url: string,
+  protocols: string | string[]
+): IWebSocket => new WebSocket(url, protocols);
+
+export interface WebSocketOptions {
+  protocols: string | string[];
+  makeWebSocket: WebSocketFactory;
+}
+
+export const NormalClosureMessage = 'Normal closure';
+
+export function makeWebSocketObservable<
+  T extends WebSocketPayload = WebSocketPayload
+>(
+  url: string,
+  {
+    protocols = defaultProtocols,
+    makeWebSocket = defaultWebsocketFactory
+  }: WebSocketOptions = {
+    protocols: defaultProtocols,
+    makeWebSocket: defaultWebsocketFactory
+  }
+): Observable<GetWebSocketResponses<T>> {
+  return new Observable<GetWebSocketResponses<T>>(observer => {
+    let inputSubscription: Subscription;
+    const messages = new Subject<T>();
+
+    let isSocketOpen = false;
+    let forcedClose = false;
+    const socket = makeWebSocket(url, protocols);
+
+    const setClosedStatus = () => {
+      isSocketOpen = false;
+    };
+
+    const getWebSocketResponses: GetWebSocketResponses<T> = (
+      input: Observable<WebSocketPayload>
+    ) => {
+      if (inputSubscription) {
+        setClosedStatus();
+        const error = new Error(
+          'Web socket message factory function called more than once'
+        );
+        observer.error(error);
+        throw error;
+      } else {
+        inputSubscription = input.subscribe(data => {
+          socket.send(data);
+        });
+        return messages;
+      }
+    };
+
+    socket.onopen = () => {
+      isSocketOpen = true;
+      if (forcedClose) {
+        socket.close();
+      } else {
+        observer.next(getWebSocketResponses);
+      }
+    };
+
+    socket.onmessage = (message: { data: T }) => {
+      messages.next(message.data);
+    };
+
+    socket.onerror = (error: EventWithMessage) => {
+      setClosedStatus();
+      observer.error(new Error(error.message));
+    };
+
+    socket.onclose = (event: EventWithCodeAndReason) => {
+      // prevent observer.complete() being called after observer.error(...)
+      if (!isSocketOpen) {
+        return;
+      }
+
+      setClosedStatus();
+      if (forcedClose) {
+        observer.complete();
+        messages.complete();
+      } else {
+        observer.error(
+          new Error(event.code === 1000 ? NormalClosureMessage : event.reason)
+        );
+      }
+    };
+
+    return () => {
+      forcedClose = true;
+      if (inputSubscription) {
+        inputSubscription.unsubscribe();
+      }
+
+      if (isSocketOpen) {
+        setClosedStatus();
+        socket.close();
+      }
+    };
+  });
+}
diff --git a/projects/ucap-webmessenger-web-socket/src/public-api.ts b/projects/ucap-webmessenger-web-socket/src/public-api.ts
new file mode 100644
index 00000000..de1c94d7
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ucap-webmessenger-web-socket
+ */
+
+export * from './lib/web-socket';
diff --git a/projects/ucap-webmessenger-web-socket/src/test.ts b/projects/ucap-webmessenger-web-socket/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-web-socket/tsconfig.lib.json b/projects/ucap-webmessenger-web-socket/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-web-socket/tsconfig.spec.json b/projects/ucap-webmessenger-web-socket/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-web-socket/tslint.json b/projects/ucap-webmessenger-web-socket/tslint.json
new file mode 100644
index 00000000..6370a3e0
--- /dev/null
+++ b/projects/ucap-webmessenger-web-socket/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapWebSocket",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-web-socket",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/README.md b/projects/ucap-webmessenger-web-storage/README.md
new file mode 100644
index 00000000..9f3c62e4
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/README.md
@@ -0,0 +1,24 @@
+# UcapWebmessengerWebStorage
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-web-storage` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-web-storage`.
+> Note: Don't forget to add `--project ucap-webmessenger-web-storage` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-web-storage` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-web-storage`, go to the dist folder `cd dist/ucap-webmessenger-web-storage` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-web-storage` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ucap-webmessenger-web-storage/karma.conf.js b/projects/ucap-webmessenger-web-storage/karma.conf.js
new file mode 100644
index 00000000..a149fef0
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-web-storage'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/ucap-webmessenger-web-storage/ng-package.json b/projects/ucap-webmessenger-web-storage/ng-package.json
new file mode 100644
index 00000000..cbd140dd
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-web-storage",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-web-storage/package.json b/projects/ucap-webmessenger-web-storage/package.json
new file mode 100644
index 00000000..ac778c59
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/web-storage",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.4",
+    "@angular/core": "^8.2.4"
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.spec.ts b/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.spec.ts
new file mode 100644
index 00000000..ad13e4e3
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LocalStorageService } from './local-storage.service';
+
+describe('LocalStorageService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LocalStorageService = TestBed.get(LocalStorageService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.ts b/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.ts
new file mode 100644
index 00000000..66153552
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/services/local-storage.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService extends StorageService {
+  constructor() {
+    super(localStorage);
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.spec.ts b/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.spec.ts
new file mode 100644
index 00000000..78009454
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SessionStorageService } from './session-storage.service';
+
+describe('SessionStorageService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SessionStorageService = TestBed.get(SessionStorageService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.ts b/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.ts
new file mode 100644
index 00000000..298a9d56
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/services/session-storage.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SessionStorageService extends StorageService {
+  constructor() {
+    super(sessionStorage);
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/services/storage.service.ts b/projects/ucap-webmessenger-web-storage/src/lib/services/storage.service.ts
new file mode 100644
index 00000000..e837ef09
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/services/storage.service.ts
@@ -0,0 +1,48 @@
+import { StorageUtil, ExpiredUnit } from '../utils/storage.util';
+import { fromEvent, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+export class StorageService {
+  constructor(private storage: Storage) {}
+
+  get<T>(key: string): T | null {
+    return StorageUtil.get(this.storage, key);
+  }
+
+  set<T>(
+    key: string,
+    value: T,
+    expiredAt: number = 0,
+    expiredUnit: ExpiredUnit = 'd'
+  ) {
+    return StorageUtil.set(this.storage, key, value, expiredAt, expiredUnit);
+  }
+
+  remove(key: string | RegExp) {
+    if (typeof key === 'string') {
+      StorageUtil.remove(this.storage, key);
+      return;
+    }
+    let index = 0;
+    let next = StorageUtil.key(this.storage, index);
+    const ls: string[] = [];
+    while (next) {
+      if (key.test(next)) {
+        ls.push(next);
+      }
+      next = StorageUtil.key(this.storage, ++index);
+    }
+    ls.forEach(v => StorageUtil.remove(this.storage, v));
+  }
+
+  clear() {
+    this.storage.clear();
+  }
+
+  observe(key: string): Observable<StorageEvent> {
+    return fromEvent<StorageEvent>(window, 'storage').pipe(
+      filter(event => event.storageArea === this.storage),
+      filter(event => event.key === key)
+    );
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/ucap-web-storage.module.ts b/projects/ucap-webmessenger-web-storage/src/lib/ucap-web-storage.module.ts
new file mode 100644
index 00000000..2f1473ef
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/ucap-web-storage.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { LocalStorageService } from './services/local-storage.service';
+import { SessionStorageService } from './services/session-storage.service';
+
+const SERVICES = [LocalStorageService, SessionStorageService];
+
+@NgModule({
+  imports: [],
+  exports: [],
+  declarations: []
+})
+export class UCapWebStorageModule {
+  public static forRoot(): ModuleWithProviders<UCapWebStorageModule> {
+    return {
+      ngModule: UCapWebStorageModule,
+      providers: [...SERVICES]
+    };
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/lib/utils/storage.util.ts b/projects/ucap-webmessenger-web-storage/src/lib/utils/storage.util.ts
new file mode 100644
index 00000000..d0b9386f
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/lib/utils/storage.util.ts
@@ -0,0 +1,91 @@
+/**
+ * s: seconds
+ * m: minutes
+ * h: hours
+ * d: day
+ * w: week
+ * y: year
+ * t: time
+ */
+export type ExpiredUnit = 's' | 'm' | 'h' | 'd' | 'w' | 'y' | 't';
+
+export class StorageUtil {
+  static get(storage: Storage, key: string) {
+    const value = StorageUtil.parse(storage.getItem(key) || 'null') || null;
+    if (value === null) {
+      return null;
+    }
+
+    if (
+      typeof value === 'object' &&
+      typeof value._expired !== 'undefined' &&
+      value._expired !== 0 &&
+      +new Date() > value._expired
+    ) {
+      StorageUtil.remove(storage, key);
+      return null;
+    }
+
+    return value._value || null;
+  }
+
+  static set(
+    storage: Storage,
+    key: string,
+    value: any,
+    expiredAt: number = 0,
+    expiredUnit: ExpiredUnit = 't'
+  ) {
+    storage.setItem(
+      key,
+      StorageUtil.stringify({
+        _expired: StorageUtil.getExpired(expiredAt, expiredUnit),
+        _value: value
+      })
+    );
+  }
+
+  static remove(storage: Storage, key: string) {
+    storage.removeItem(key);
+  }
+
+  static key(storage: Storage, index: number) {
+    return storage.key(index);
+  }
+
+  private static getExpired(val: number, unit: ExpiredUnit): number {
+    if (val <= 0) {
+      return 0;
+    }
+    const now = +new Date();
+    switch (unit) {
+      case 's':
+        return now + 1000 * val;
+      case 'm':
+        return now + 1000 * 60 * val;
+      case 'h':
+        return now + 1000 * 60 * 60 * val;
+      case 'd':
+        return now + 1000 * 60 * 60 * 24 * val;
+      case 'w':
+        return now + 1000 * 60 * 60 * 24 * 7 * val;
+      case 'y':
+        return now + 1000 * 60 * 60 * 24 * 365 * val;
+      case 't':
+        return now + val;
+    }
+    return 0;
+  }
+
+  private static stringify(value: any) {
+    return JSON.stringify(value);
+  }
+
+  private static parse(text: string) {
+    try {
+      return JSON.parse(text) || null;
+    } catch (e) {
+      return text;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-web-storage/src/public-api.ts b/projects/ucap-webmessenger-web-storage/src/public-api.ts
new file mode 100644
index 00000000..92cd7777
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/public-api.ts
@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of ucap-webmessenger-web-storage
+ */
+
+export * from './lib/services/storage.service';
+export * from './lib/services/local-storage.service';
+export * from './lib/services/session-storage.service';
+
+export * from './lib/utils/storage.util';
+
+export * from './lib/ucap-web-storage.module';
diff --git a/projects/ucap-webmessenger-web-storage/src/test.ts b/projects/ucap-webmessenger-web-storage/src/test.ts
new file mode 100644
index 00000000..978c64fb
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ucap-webmessenger-web-storage/tsconfig.lib.json b/projects/ucap-webmessenger-web-storage/tsconfig.lib.json
new file mode 100644
index 00000000..bd23948e
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-web-storage/tsconfig.spec.json b/projects/ucap-webmessenger-web-storage/tsconfig.spec.json
new file mode 100644
index 00000000..16da33db
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/ucap-webmessenger-web-storage/tslint.json b/projects/ucap-webmessenger-web-storage/tslint.json
new file mode 100644
index 00000000..8ae9801a
--- /dev/null
+++ b/projects/ucap-webmessenger-web-storage/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapWebStorage",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-web-storage",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..1db945fd
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,116 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es5",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "paths": {
+      "@ucap-webmessenger/core": [
+        "projects/ucap-webmessenger-core/src/public-api"
+      ],
+      "@ucap-webmessenger/api": [
+        "projects/ucap-webmessenger-api/src/public-api"
+      ],
+      "@ucap-webmessenger/api-common": [
+        "projects/ucap-webmessenger-api-common/src/public-api"
+      ],
+      "@ucap-webmessenger/api-public": [
+        "projects/ucap-webmessenger-api-public/src/public-api"
+      ],
+      "@ucap-webmessenger/api-external": [
+        "projects/ucap-webmessenger-api-external/src/public-api"
+      ],
+      "@ucap-webmessenger/pi": ["projects/ucap-webmessenger-pi/src/public-api"],
+      "@ucap-webmessenger/ui": ["projects/ucap-webmessenger-ui/src/public-api"],
+      "@ucap-webmessenger/ui-account": [
+        "projects/ucap-webmessenger-ui-account/src/public-api"
+      ],
+      "@ucap-webmessenger/ui-messenger": [
+        "projects/ucap-webmessenger-ui-messenger/src/public-api"
+      ],
+      "@ucap-webmessenger/ui-organization": [
+        "projects/ucap-webmessenger-ui-organization/src/public-api"
+      ],
+      "@ucap-webmessenger/ui-profile": [
+        "projects/ucap-webmessenger-ui-profile/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol": [
+        "projects/ucap-webmessenger-protocol/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-authentication": [
+        "projects/ucap-webmessenger-protocol-authentication/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-buddy": [
+        "projects/ucap-webmessenger-protocol-buddy/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-event": [
+        "projects/ucap-webmessenger-protocol-event/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-file": [
+        "projects/ucap-webmessenger-protocol-file/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-fmc": [
+        "projects/ucap-webmessenger-protocol-fmc/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-group": [
+        "projects/ucap-webmessenger-protocol-group/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-info": [
+        "projects/ucap-webmessenger-protocol-info/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-option": [
+        "projects/ucap-webmessenger-protocol-option/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-ping": [
+        "projects/ucap-webmessenger-protocol-ping/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-query": [
+        "projects/ucap-webmessenger-protocol-query/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-room": [
+        "projects/ucap-webmessenger-protocol-room/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-service": [
+        "projects/ucap-webmessenger-protocol-service/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-status": [
+        "projects/ucap-webmessenger-protocol-status/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-sync": [
+        "projects/ucap-webmessenger-protocol-sync/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-utci": [
+        "projects/ucap-webmessenger-protocol-utci/src/public-api"
+      ],
+      "@ucap-webmessenger/protocol-umg": [
+        "projects/ucap-webmessenger-protocol-umg/src/public-api"
+      ],
+      "@ucap-webmessenger/native": [
+        "projects/ucap-webmessenger-native/src/public-api"
+      ],
+      "@ucap-webmessenger/native-electron": [
+        "projects/ucap-webmessenger-native-electron/src/public-api"
+      ],
+      "@ucap-webmessenger/web-socket": [
+        "projects/ucap-webmessenger-web-socket/src/public-api"
+      ],
+      "@ucap-webmessenger/web-storage": [
+        "projects/ucap-webmessenger-web-storage/src/public-api"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 00000000..9c729f99
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,80 @@
+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
+  "rules": {
+    "array-type": false,
+    "arrow-parens": false,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "interface-name": false,
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-use-before-declare": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "object-literal-sort-keys": false,
+    "ordered-imports": false,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "trailing-comma": false,
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true
+  }
+}