diff --git a/bigbluebutton-html5/imports/ui/components/kicked-screen/component.jsx b/bigbluebutton-html5/imports/ui/components/kicked-screen/component.jsx
new file mode 100644
index 0000000000..9036f12d59
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/kicked-screen/component.jsx
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import styles from './styles.scss';
+
+import Icon from '../icon/component';
+
+class KickedScreen extends Component {
+  render() {
+    return (
+      <div className={styles.background}>
+        <Icon iconName="sad" className={styles.icon}/>
+        <div className={styles.message}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
+export default KickedScreen;
diff --git a/bigbluebutton-html5/imports/ui/components/kicked-screen/styles.scss b/bigbluebutton-html5/imports/ui/components/kicked-screen/styles.scss
new file mode 100644
index 0000000000..82dc94643e
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/kicked-screen/styles.scss
@@ -0,0 +1,28 @@
+@import '../../stylesheets/variables/palette';
+
+$bg: $color-gray-dark;
+$color: $color-white;
+
+.background {
+  position: fixed;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: $bg;
+  color: $color;
+  text-align: center;
+}
+
+.icon {
+  width: 100%;
+  font-size: 10rem;
+  margin-bottom: 2rem;
+}
+
+.message {
+  text-transform: uppercase;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
diff --git a/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx b/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx
new file mode 100644
index 0000000000..1495106fba
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import styles from './styles.scss';
+
+class LoadingScreen extends Component {
+  render() {
+    return (
+      <div className={styles.background}>
+        <div className={styles.spinner}>
+          <div className={styles.bounce1}></div>
+          <div className={styles.bounce2}></div>
+          <div className={styles.bounce3}></div>
+        </div>
+      </div>
+    );
+  }
+}
+export default LoadingScreen;
diff --git a/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
new file mode 100644
index 0000000000..c3825f1e59
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
@@ -0,0 +1,60 @@
+@import '../../stylesheets/variables/palette';
+
+/* Variables
+ * ==========
+ */
+$loader-bg: $color-gray-dark;
+$loader-bullet: $color-white;
+
+.background {
+  position: fixed;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: $loader-bg;
+}
+
+.spinner {
+  width: 100%;
+  text-align: center;
+  height: 22px;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  margin: 0 5px;
+  background-color: $loader-bullet;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}