diff --git a/src/index.html b/src/index.html
index bcb65a2f..86107dec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,25 +3,16 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Mattermost</title>
+  <title>electron-mattermost</title>
+  <script src="node_modules/react/dist/react.min.js"></script>
+  <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
+  <script src="node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
+  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
 </head>
 
 <body>
-  <!--
-    'disablewebsecurity' is necessary to display external images.
-    However, it allows also CSS/JavaScript.
-    So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
-  -->
-  <webview id="mainWebview" autosize="on" preload="webview/mattermost.js"></webview>
-  <style>
-    webview {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  </style>
+  <div id="content"></div>
+  <script src="build/index.js"></script>
   <script src="./index.js"></script>
 </body>
 
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 00000000..6f715ae2
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,25 @@
+'use strict';
+
+var MainPage = React.createClass({
+  render: function() {
+    var style = {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    };
+    // 'disablewebsecurity' is necessary to display external images.
+    // However, it allows also CSS/JavaScript.
+    // So webview should use 'allowDisplayingInsecureContent' as same as BrowserWindow.
+    return (
+      <webview style={ style } id="mainWebview" autosize="on" preload="webview/mattermost.js"></webview>
+      );
+  }
+});
+
+
+ReactDOM.render(
+  <MainPage />,
+  document.getElementById('content')
+);
