diff --git a/static/css/vanth.css b/static/css/vanth.css
new file mode 100644
index 0000000..25ab1cb
--- /dev/null
+++ b/static/css/vanth.css
@@ -0,0 +1,4 @@
+.main-content {
+  position: relative;
+  top: 50px;
+}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..21db34e
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
+
+<link rel="stylesheet" href="/static/css/vanth.css">
+
+</head>
+<body>
+<div class="container">
+	{% block body %}
+	default stuff
+	{% endblock %}
+</div>
+<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index ba1cd31..1e04f79 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 {% extends 'layout.html' %}
-{% block body %}
+{% block main_content %}
 <h1>Hello {{ current_user.name }} from Vanth</h1>
 <form action="/logout/" method="POST">
 	<input type="submit">Log out</input>
diff --git a/templates/layout.html b/templates/layout.html
index 5d9d9ba..b4b242b 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -1,22 +1,9 @@
-<html>
-<head>
-<!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
-</head>
-<body>
-<div class="container">
-	{% block body %}
-	default stuff
-	{% endblock %}
+{% extends 'base.html' %}
+{% block body %}
+{% include 'navbar.html' %}
+<div class="main-content">
+{% block main_content %}
+Main content goes here
+{% endblock %}
 </div>
-<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-
-</body>
-</html>
+{% endblock %}
diff --git a/templates/login.html b/templates/login.html
index e845b94..03f949b 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,4 +1,4 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 {% block body %}
 <h1>Welcome to Vanth</h1>
 <h2>Please log in</h2>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..f37b7f4
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,31 @@
+<nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Vanth</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
