diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
new file mode 100644
index 00000000..31b9f485
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
@@ -0,0 +1,45 @@
+.wrapper-splash {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  height: 100%;
+  background: #eaeff1;
+  background: linear-gradient(to top, #93a3af, #eaeff1);
+  margin: 0;
+  padding: 0;
+}
+.svg-img {
+  position: absolute;
+  width: 240px;
+  height: 120px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+.credit {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+#plug,
+#socket {
+  fill: #ffffff;
+}
+
+#loop-normal {
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 12;
+}
+
+#loop-offset {
+  display: none;
+}
diff --git a/projects/ucap-webmessenger-app/src/index.html b/projects/ucap-webmessenger-app/src/index.html
index 9b059414..4253f4e1 100644
--- a/projects/ucap-webmessenger-app/src/index.html
+++ b/projects/ucap-webmessenger-app/src/index.html
@@ -7,8 +7,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link href="assets/images/icons/material/style.css" rel="stylesheet" />
+    <link href="assets/scss/partials/splash.css" rel="stylesheet" />
   </head>
   <body class="theme-default">
     <app-root></app-root>
+
+    <div class="wrapper-splash">
+      <svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120" class="svg-img">
+        <path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
+    L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
+          <animate attributeName="stroke-dasharray" attributeType="XML" from="500, 50" to="450 50" begin="0s" dur="2s"
+            repeatCount="indefinite" />
+          <animate attributeName="stroke-dashoffset" attributeType="XML" from="-40" to="-540" begin="0s" dur="2s"
+            repeatCount="indefinite" />
+        </path>
+
+        <path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
+    L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
+    L146.48,87.02z" />
+
+        <path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z" />
+
+        <path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z" />
+
+        <animateMotion xlink:href="#plug" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
+          keySplines="0.42, 0, 0.58, 1">
+          <mpath xlink:href="#loop-normal" />
+        </animateMotion>
+
+        <animateMotion xlink:href="#socket" dur="2s" rotate="auto" repeatCount="indefinite" calcMode="linear" keyTimes="0;1"
+          keySplines="0.42, 0, 0.58, 1">
+          <mpath xlink:href="#loop-offset" />
+        </animateMotion>
+      </svg>
+      <div class="credit">Welcome to M-Messenger</div>
+
+    </div>
   </body>
 </html>
