diff --git a/lib/app/js/app.js b/lib/app/js/app.js
index da01be45..cf2d2ab0 100644
--- a/lib/app/js/app.js
+++ b/lib/app/js/app.js
@@ -19,7 +19,7 @@ angular.module('sgApp', [
         controller: 'MainCtrl'
       })
       .state('app.index.overview', {
-        url: '/overview',
+        url: '/',
         templateUrl: 'overview.html',
         controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
@@ -39,7 +39,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.index.section', {
-        url: '/:section',
+        url: '/section/:section',
         templateUrl: 'views/sections.html',
         controller: 'SectionsCtrl',
         resolve: {
@@ -63,7 +63,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.fullscreen', {
-        url: '/:section/fullscreen',
+        url: '/section/:section/fullscreen',
         templateUrl: 'views/element-fullscreen.html',
         controller: 'ElementCtrl',
         resolve: {
@@ -73,6 +73,9 @@ angular.module('sgApp', [
             }
           }
         }
+      }).state('app.index.404', {
+        url: '/:all',
+        templateUrl: 'views/404.html'
       });
 
     $locationProvider.html5Mode(true);
diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
index 74b2ea6f..db579116 100644
--- a/lib/app/js/controllers/main.js
+++ b/lib/app/js/controllers/main.js
@@ -35,7 +35,7 @@ angular.module('sgApp')
     // Change route to /all when searching
     $scope.$watch('search.$', function(newVal) {
       if (newVal && newVal.length > 0) {
-        $location.url('all');
+        $state.go('app.index.section', {section: 'all'});
       }
     });
 
diff --git a/lib/app/views/404.html b/lib/app/views/404.html
new file mode 100644
index 00000000..12a88895
--- /dev/null
+++ b/lib/app/views/404.html
@@ -0,0 +1 @@
+<p class="sg">Page not found</p>
\ No newline at end of file
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
index 1c762059..bdbd4013 100644
--- a/lib/app/views/main.html
+++ b/lib/app/views/main.html
@@ -35,7 +35,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
         <a class="sg"
           ng-class="currentSection === 'overview' ? 'active' : ''"
           ng-click="clearSearch()"
-          href="overview">
+          ui-sref="app.index.overview">
           Overview
         </a>
       </li>
@@ -43,14 +43,14 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
         <a class="sg"
           ng-class="$root.currentSection === section.reference ? 'active' : ''"
           ng-click="clearSearch()"
-          href="{{ section.reference }}">
+          ui-sref="app.index.section({section: {{section.reference}}})">
           {{ section.reference }} {{ section.header }}
         </a>
       </li>
       <li>
         <a class="sg"
           ng-class="currentSection === 'all' ? 'active' : ''"
-          href="all">
+          ui-sref="app.index.section({section: 'all'})">
           Show all sections
         </a>
       </li>
diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html
index 876f978d..ee143381 100644
--- a/lib/app/views/partials/section.html
+++ b/lib/app/views/partials/section.html
@@ -1,7 +1,7 @@
 <section class="sg section"
   ng-class="{active: isActive(section), main: isEmptyMainSection(section)}">
   <header class="sg section-header">
-    <a ng-href="{{section.reference}}">
+    <a ui-sref="app.index.section({section: '{{section.reference}}'})">
       <i class="fa fa-link"></i>
       <h1 class="sg">
         <span class="reference-number">{{ section.reference }}</span>
@@ -21,7 +21,7 @@ <h1 class="sg">
   <div ng-repeat-start="mod in section.modifiers"></div>
   <div class="sg section-partial">
     <div class="sg label">
-      <a ng-href="{{section.reference}}-{{mod.id}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}-{{mod.id}}'})" target="_blank">
         <span class="sg name" ng-bind-html="mod.name | unsafe"></span><i class="fa fa-arrows-alt"></i>
       </a>
     </div>
@@ -32,7 +32,7 @@ <h1 class="sg">
     class="sg section-partial"
     ng-if="!section.modifiers.length && section.markup">
     <div class="sg label">
-      <a ng-href="{{section.reference}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}'})" target="_blank">
         <i class="fa fa-arrows-alt"></i>
       </a>
     </div>
diff --git a/test/angular/unit/controllers/element.test.js b/test/angular/unit/controllers/element.test.js
index 65356738..79c4bdd8 100644
--- a/test/angular/unit/controllers/element.test.js
+++ b/test/angular/unit/controllers/element.test.js
@@ -56,8 +56,10 @@ describe('ElementCtrl', function() {
       section: '1.1-1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('ElementCtrl', {
       $scope: scope,
       $stateParams: stateParams
diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
index ada74428..0dc83f1b 100644
--- a/test/angular/unit/controllers/main.test.js
+++ b/test/angular/unit/controllers/main.test.js
@@ -51,8 +51,10 @@ describe('Controller: MainCtrl', function() {
       Variables: variablesService
     });
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     httpBackend.flush();
     localStorageService.clearAll();
   }));
diff --git a/test/angular/unit/controllers/sections.test.js b/test/angular/unit/controllers/sections.test.js
index 16f79f45..4090a9c7 100644
--- a/test/angular/unit/controllers/sections.test.js
+++ b/test/angular/unit/controllers/sections.test.js
@@ -49,8 +49,10 @@ describe('SectionsCtrl', function() {
       section: '1.1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('SectionsCtrl', {
       $scope: scope,
       $stateParams: stateParams