diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js
index efc1293..e255af2 100644
--- a/src/js/components/navbar.js
+++ b/src/js/components/navbar.js
@@ -1,10 +1,19 @@
 var React = require('react');
 
 var NavBar = React.createClass({
-	render: function () {
-		<div id="NavBar">
-			<div className="row" >
-			</div>
-		</div>
-	}
-});
\ No newline at end of file
+  render: function () {
+    return (
+      <nav className="navbar navbar-default navbar-fixed-top">
+        <div className="container-fluid">
+          <a className="navbar-brand">Keyboard Mechanizer</a>
+          <ul className="nav navbar-nav navbar-right">
+            <li><a href="#">Hide</a></li>
+            <li><a href="#"><i className="icon ion-close-round"></i></a></li>
+          </ul>
+        </div>
+      </nav>
+    );
+  }
+});
+
+module.exports = NavBar;
\ No newline at end of file
diff --git a/src/less/style.less b/src/less/style.less
index c78cd99..2305f53 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -1,6 +1,8 @@
 @import 'node_modules/bootstrap/less/bootstrap.less';
 @import 'node_modules/bootstrap/less/theme.less';
+@import 'node_modules/ionicons/less/ionicons.less';
 
-#NavBar {
-	
+body {
+    padding: 5px;
+	padding-top: 50px;
 }
\ No newline at end of file