diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade
index b2a61b6..f7cc3e6 100755
--- a/app/views/includes/foot.jade
+++ b/app/views/includes/foot.jade
@@ -2,5 +2,30 @@
   .container
     p.text-muted Place sticky footer content here.
         
-script(type='text/javascript', src='/lib/jquery/jquery.min.js')
-script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.min.js')
+//script(type='text/javascript', src='/lib/jquery/jquery.min.js')
+//script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.min.js')
+
+//AngularJS
+script(type='text/javascript', src='/lib/angular/angular.js')
+script(type='text/javascript', src='/lib/angular-cookies/angular-cookies.js')
+script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
+script(type='text/javascript', src='/lib/angular-route/angular-route.js')
+
+//Angular UI
+script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.js')
+script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.js')
+script(type='text/javascript', src='/lib/angular-ui-utils/ui-utils.js')
+
+//Application Init
+script(type='text/javascript', src='/js/app.js')
+script(type='text/javascript', src='/js/config.js')
+script(type='text/javascript', src='/js/directives.js')
+script(type='text/javascript', src='/js/filters.js')
+
+//Application Services
+script(type='text/javascript', src='/js/services/global.js')
+
+//Application Controllers
+script(type='text/javascript', src='/js/controllers/index.js')
+script(type='text/javascript', src='/js/controllers/header.js')
+script(type='text/javascript', src='/js/init.js')
diff --git a/app/views/includes/navbar.jade b/app/views/includes/navbar.jade
index eabfbb9..a1b2b1c 100644
--- a/app/views/includes/navbar.jade
+++ b/app/views/includes/navbar.jade
@@ -1,17 +1 @@
-.navbar.navbar-default.navbar-fixed-top(role='navigation')
-  .container
-    .navbar-header
-      button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
-        span.sr-only Toggle navigation
-        span.icon-bar
-        span.icon-bar
-        span.icon-bar
-      a.navbar-brand(href='#') Mystery
-    .collapse.navbar-collapse
-      ul.nav.navbar-nav
-        li.active
-          a(href='#') Home
-        li
-          a(href='#about') About
-        li
-          a(href='#contact') Contact
+.navbar.navbar-default.navbar-fixed-top(data-ng-include="'views/header.html'", role='navigation')
diff --git a/app/views/index.jade b/app/views/index.jade
index cd0eb69..7f33718 100755
--- a/app/views/index.jade
+++ b/app/views/index.jade
@@ -1,24 +1,25 @@
 extends layouts/default
 
 block content
-  .page-header
-    h1 Hello BitPay!
-  p ˈmɪst(ə)ri/'
-    | noun
-    audio(src="https://ssl.gstatic.com/dictionary/static/sounds/de/0/mystery.mp3",preload="auto",data-dobid="aud",id="aud")
-    button(onclick="document.getElementById('aud').play()") Play
-  
-  ol
-    li 
-      strong something that is difficult or impossible to understand or explain.
-      p "the mysteries of outer space"
-      | synonyms:	puzzle, enigma, conundrum, riddle, secret, unsolved problem, problem, question, question mark, closed book; secrecy or obscurity.
-      p "much of her past is shrouded in mystery"
-      | synonyms:	secrecy, darkness, obscurity, ambiguity, ambiguousness, uncertainty, impenetrability, vagueness, nebulousness; More
-    li
-      strong a person or thing whose identity or nature is puzzling or unknown.
-      p "‘He's a bit of a mystery,’ said Nina"
-    li 
-      strong  a novel, play, or film dealing with a puzzling crime, especially a murder.
-      p "the 1920s murder mystery, The Ghost Train"
-      | synonyms:	thriller, detective story/novel, murder story; More
+  section.container(data-ng-view)
+
+  section.container
+    p ˈmɪst(ə)ri/'
+      | noun
+      audio(src="https://ssl.gstatic.com/dictionary/static/sounds/de/0/mystery.mp3",preload="auto",data-dobid="aud",id="aud")
+      button(onclick="document.getElementById('aud').play()") Play
+    
+    ol
+      li 
+        strong something that is difficult or impossible to understand or explain.
+        p "the mysteries of outer space"
+        | synonyms:	puzzle, enigma, conundrum, riddle, secret, unsolved problem, problem, question, question mark, closed book; secrecy or obscurity.
+        p "much of her past is shrouded in mystery"
+        | synonyms:	secrecy, darkness, obscurity, ambiguity, ambiguousness, uncertainty, impenetrability, vagueness, nebulousness; More
+      li
+        strong a person or thing whose identity or nature is puzzling or unknown.
+        p "‘He's a bit of a mystery,’ said Nina"
+      li 
+        strong  a novel, play, or film dealing with a puzzling crime, especially a murder.
+        p "the 1920s murder mystery, The Ghost Train"
+        | synonyms:	thriller, detective story/novel, murder story; More
diff --git a/app/views/layouts/default.jade b/app/views/layouts/default.jade
index 186b81c..64e2713 100755
--- a/app/views/layouts/default.jade
+++ b/app/views/layouts/default.jade
@@ -4,6 +4,5 @@ html(lang='en', xmlns='http://www.w3.org/1999/xhtml')
   body
     #wrap
       include ../includes/navbar
-      section.container
-        block content
+      block content
     include ../includes/foot
diff --git a/bower.json b/bower.json
index 62688af..46be4c5 100644
--- a/bower.json
+++ b/bower.json
@@ -2,6 +2,13 @@
     "name": "Mystery",
     "version": "0.0.1",
     "dependencies": {
-        "bootstrap": "3.0.3"
+      "angular": "latest",
+      "angular-resource": "latest",
+      "angular-cookies": "latest",
+      "angular-mocks": "latest",
+      "angular-route": "latest",
+      "bootstrap": "3.0.3",
+      "angular-bootstrap": "0.9.0",
+      "angular-ui-utils": "0.1.0"
     }
 }
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
new file mode 100755
index 0000000..77b64cb
--- /dev/null
+++ b/public/js/app.js
@@ -0,0 +1,5 @@
+'use strict';
+
+angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system']);
+
+angular.module('mystery.system', []);
\ No newline at end of file
diff --git a/public/js/config.js b/public/js/config.js
new file mode 100755
index 0000000..b86700b
--- /dev/null
+++ b/public/js/config.js
@@ -0,0 +1,21 @@
+'use strict';
+
+//Setting up route
+angular.module('mystery').config(['$routeProvider',
+    function($routeProvider) {
+        $routeProvider.
+        when('/', {
+            templateUrl: 'views/index.html'
+        }).
+        otherwise({
+            redirectTo: '/'
+        });
+    }
+]);
+
+//Setting HTML5 Location Mode
+angular.module('mystery').config(['$locationProvider',
+    function($locationProvider) {
+        $locationProvider.hashPrefix('!');
+    }
+]);
\ No newline at end of file
diff --git a/public/js/controllers/header.js b/public/js/controllers/header.js
new file mode 100755
index 0000000..512cb00
--- /dev/null
+++ b/public/js/controllers/header.js
@@ -0,0 +1,15 @@
+'use strict';
+
+angular.module('mystery.system').controller('HeaderController', ['$scope', 'Global', function ($scope, Global) {
+    $scope.global = Global;
+
+    $scope.menu = [{
+        'title': 'Articles',
+        'link': 'articles'
+    }, {
+        'title': 'Create New Article',
+        'link': 'articles/create'
+    }];
+    
+    $scope.isCollapsed = false;
+}]);
\ No newline at end of file
diff --git a/public/js/controllers/index.js b/public/js/controllers/index.js
new file mode 100755
index 0000000..503829c
--- /dev/null
+++ b/public/js/controllers/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', function ($scope, Global) {
+    $scope.global = Global;
+}]);
\ No newline at end of file
diff --git a/public/js/directives.js b/public/js/directives.js
new file mode 100755
index 0000000..a726efc
--- /dev/null
+++ b/public/js/directives.js
@@ -0,0 +1 @@
+'use strict';
\ No newline at end of file
diff --git a/public/js/filters.js b/public/js/filters.js
new file mode 100755
index 0000000..a726efc
--- /dev/null
+++ b/public/js/filters.js
@@ -0,0 +1 @@
+'use strict';
\ No newline at end of file
diff --git a/public/js/init.js b/public/js/init.js
new file mode 100755
index 0000000..d7c9428
--- /dev/null
+++ b/public/js/init.js
@@ -0,0 +1,9 @@
+'use strict';
+
+angular.element(document).ready(function() {
+    //Fixing facebook bug with redirect
+    if (window.location.hash === '#_=_') window.location.hash = '#!';
+
+    //Then init the app
+    angular.bootstrap(document, ['mystery']);
+});
\ No newline at end of file
diff --git a/public/js/services/global.js b/public/js/services/global.js
new file mode 100755
index 0000000..8dc532e
--- /dev/null
+++ b/public/js/services/global.js
@@ -0,0 +1,14 @@
+'use strict';
+
+//Global service for global variables
+angular.module('mystery.system').factory('Global', [
+    function() {
+        var _this = this;
+        _this._data = {
+            user: window.user,
+            authenticated: !! window.user
+        };
+
+        return _this._data;
+    }
+]);
diff --git a/public/views/header.html b/public/views/header.html
new file mode 100755
index 0000000..70189e7
--- /dev/null
+++ b/public/views/header.html
@@ -0,0 +1,18 @@
+<div class="container" data-ng-controller="HeaderController">
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+      <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="#">Mystery</a>
+  </div>
+  <div class="collapse navbar-collapse">
+    <ul class="nav navbar-nav">
+      <li class="active"><a href="#">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </div>
+</div>
diff --git a/public/views/index.html b/public/views/index.html
new file mode 100644
index 0000000..b92fe02
--- /dev/null
+++ b/public/views/index.html
@@ -0,0 +1,5 @@
+<section data-ng-controller="IndexController">
+  <div class="page-header">
+    <h1>Hello BitPay!</h1>
+  </div>
+</section>