diff --git a/app/styles/main.scss b/app/styles/main.scss
diff --git a/app/views/about.html b/app/views/about.html
diff --git a/app/views/main.html b/app/views/main.html
diff --git a/assets/bathroom.jpg b/assets/bathroom.jpg
diff --git a/assets/checkmark.svg b/assets/checkmark.svg
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,74 @@
+var socket = io();
+
+var App = function () {
+    return this.init();
+};
+
+App.prototype.init = function () {
+    return this
+        .setupHandlers()
+        .createChildren()
+        .enable();
+};
+
+App.prototype.setupHandlers = function () {
+    this.onOpenMessageHandler = this.onOpenMessage.bind(this);
+    this.onCloseMessageHandler = this.onCloseMessage.bind(this);
+    this.onErrorMessageHandler = this.onErrorMessage.bind(this);
+
+    return this;
+};
+
+App.prototype.createChildren = function () {
+    this.box = document.querySelector('.box');
+    this.icon = document.querySelector('.icon');
+
+    return this;
+};
+
+App.prototype.enable = function () {
+    socket.connect();
+
+    socket.on('open', this.onOpenMessageHandler);
+    socket.on('close', this.onCloseMessageHandler);
+    socket.on('error', this.onErrorMessageHandler);
+
+    return this;
+};
+
+App.prototype.onOpenMessage = function () {
+    this.box.classList.remove('box_isActive');
+    this.icon.classList.remove('icon_isActive');
+
+    this.box.classList.add('box_isInActive');
+    this.icon.classList.add('icon_isInActive');
+
+    return this;
+};
+
+App.prototype.onCloseMessage = function () {
+
+    this.box.classList.remove('box_isInActive');
+    this.icon.classList.remove('icon_isInActive');
+
+    this.box.classList.add('box_isActive');
+    this.icon.classList.add('icon_isActive');
+
+    // $.ajax({
+    //     url: "http://api.hipchat.com/v2/user/791183/message?auth_token=8UROiGoVPpedH0yHUcSIzNjvokE0Qu53Qo2e0OJA",
+    //     type: 'POST',
+    //     headers: {"content-type": "application/json"},
+    //     dataType: 'json',
+    //     data: JSON.stringify({"message": "@all Restroom Guy is here"})
+    // });
+
+    return this;
+};
+
+App.prototype.onErrorMessage = function (result) {
+    console.error('Ermah G. Herde: ', result);
+
+    return this;
+};
+
+this.app = new App();
diff --git a/assets/x.svg b/assets/x.svg
diff --git a/bower.json b/bower.json
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<html lang="">
+    <head>
+        <meta name="viewport" content="width=device-width, minimal-ui, user-scalable=no, initial-scale=1.0" />
+        <meta charset="utf-8" />
+        <title>Men's Bathroom Status</title>
+        <style>
+            body {
+                margin: 0;
+            }
+
+            .box {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                display: -webkit-flex;
+                -webkit-align-items: center;
+                -webkit-justify-content: center;
+                background: transparent url(assets/bathroom.jpg) 0 0 / cover no-repeat;
+            }
+
+            .box_isInActive {
+                background:
+                    linear-gradient(
+                        rgba(101, 196, 113, 0.8),
+                        rgba(101, 196, 113, 0.8)
+                    ),
+                    url(assets/bathroom.jpg) 0 0 / cover no-repeat;
+            }
+
+            .box_isActive {
+                background:
+                    linear-gradient(
+                        rgba(216, 88, 69, 0.8),
+                        rgba(216, 88, 69, 0.8)
+                    ),
+                    url(assets/bathroom.jpg) 0 0 / cover no-repeat;
+            }
+
+            .icon {}
+
+            .icon_isInActive {
+                width: 207px;
+                height: 162px;
+                background: transparent url(assets/checkmark.svg) 0 0 no-repeat;
+            }
+
+            .icon_isActive {
+                width: 162px;
+                height: 162px;
+                background-image: url(assets/x.svg);
+            }
+        </style>
+        <script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
+        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+        <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', 'UA-55667857-1', 'auto');
+        ga('send', 'pageview');
+        </script>
+    </head>
+    <body>
+        <div class="box">
+            <span class="icon"></span>
+        </div>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
diff --git a/server.js b/server.js
@@ -0,0 +1,13 @@
+/*jslint node: true */
+
+'use strict';
+
+var http = require('http');
+var express = require('express');
+var app = module.exports.app = express();
+
+app.use(express.static(__dirname));
+
+var server = http.createServer(app);
+
+module.exports = server;
diff --git a/test/.jshintrc b/test/.jshintrc
diff --git a/test/karma.conf.js b/test/karma.conf.js
diff --git a/test/spec/controllers/about.js b/test/spec/controllers/about.js
diff --git a/test/spec/controllers/main.js b/test/spec/controllers/main.js