diff --git a/hodor/controllers/index.py b/hodor/controllers/index.py
index 44296a4a0b3429d84f1c52acbd8f630f5de77ef9..e0ab0a33825116030dbcdcd80852d4a2cc26c3ea 100644
--- a/hodor/controllers/index.py
+++ b/hodor/controllers/index.py
@@ -14,3 +14,7 @@ class CreateForm(FlaskForm):
def start():
return render_template('index/index.html')
+
+@app.route('/app')
+def application():
+ return render_template('app/app.html')
diff --git a/hodor/static/css/sidebar.css b/hodor/static/css/sidebar.css
new file mode 100644
index 0000000000000000000000000000000000000000..8425555e8c30b19e158085242e05eb153edc01dd
--- /dev/null
+++ b/hodor/static/css/sidebar.css
@@ -0,0 +1,142 @@
+@import
+url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
+}
+@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
+.fa-2x {
+font-size: 2em;
+}
+.fa {
+position: relative;
+display: table-cell;
+width: 60px;
+height: 36px;
+text-align: center;
+vertical-align: middle;
+font-size:20px;
+}
+
+
+.main-menu:hover,nav.main-menu.expanded {
+width:250px;
+overflow:visible;
+}
+
+.main-menu {
+ margin-top: 3.2em;
+ margin-top: 50px !important;
+background:#101010;
+border-right:1px solid #e5e5e5;
+position:absolute;
+top:0;
+bottom:0;
+height:100%;
+left:0;
+width:60px;
+overflow:hidden;
+-webkit-transition:width .05s linear;
+transition:width .05s linear;
+-webkit-transform:translateZ(0) scale(1,1);
+z-index:1000;
+}
+
+.main-menu>ul {
+margin:7px 0;
+}
+
+.main-menu li {
+position:relative;
+display:block;
+width:250px;
+}
+
+.main-menu li>a {
+position:relative;
+display:table;
+border-collapse:collapse;
+border-spacing:0;
+color:#999;
+ font-family: arial;
+font-size: 14px;
+text-decoration:none;
+-webkit-transform:translateZ(0) scale(1,1);
+-webkit-transition:all .1s linear;
+transition:all .1s linear;
+
+}
+
+.main-menu .nav-icon {
+position:relative;
+display:table-cell;
+width:60px;
+height:36px;
+text-align:center;
+vertical-align:middle;
+font-size:18px;
+}
+
+.main-menu .nav-text {
+position:relative;
+display:table-cell;
+vertical-align:middle;
+width:190px;
+ font-family: 'Titillium Web', sans-serif;
+}
+
+.main-menu>ul.logout {
+position:absolute;
+left:0;
+bottom:0;
+}
+
+.no-touch .scrollable.hover {
+overflow-y:hidden;
+}
+
+.no-touch .scrollable.hover:hover {
+overflow-y:auto;
+overflow:visible;
+}
+
+a:hover,a:focus {
+text-decoration:none;
+}
+
+nav {
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+-o-user-select:none;
+user-select:none;
+}
+
+nav ul,nav li {
+outline:0;
+margin:0;
+padding: 0;
+}
+
+li {
+ padding-top: 30px !important
+}
+.main-menu li:hover>a,nav.main-menu
+li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch
+.dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page
+nav.dashboard-menu ul li.active a {
+color:#fff;
+background-color:#5fa2db;
+}
+.area {
+float: left;
+background: #e2e2e2;
+width: 100%;
+height: 100%;
+}
+@font-face {
+ font-family: 'Titillium Web';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Titillium WebLight'), local('TitilliumWeb-Light'),
+url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff)
+format('woff');
+}
+
diff --git a/hodor/templates/app/app.html b/hodor/templates/app/app.html
new file mode 100644
index 0000000000000000000000000000000000000000..52d51c51993ebbb503b990dc701eddb24116705c
--- /dev/null
+++ b/hodor/templates/app/app.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar.css') }}">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+ <link href="https://fonts.googleapis.com/css?family=Lato:300,100" rel="stylesheet">
+ <title> Hodor Security Training</title>
+ </head>
+ <body>
+ {% include 'layout/sidebar.html' %}
+ </body>
+</html>