diff --git a/src/components/not-found/not-found.css b/src/components/not-found/not-found.css
new file mode 100644
index 0000000..1f9374c
--- /dev/null
+++ b/src/components/not-found/not-found.css
@@ -0,0 +1,13 @@
+
+/**
+ * @author Jamie jamie.h@inwinstack.com
+ */
+
+.notFound {
+  margin: auto;
+  top: -88px;
+}
+
+.notFound .md-headline {
+  color: #777;
+}
\ No newline at end of file
diff --git a/src/components/not-found/not-found.html b/src/components/not-found/not-found.html
index 03bc5b0..e404d19 100644
--- a/src/components/not-found/not-found.html
+++ b/src/components/not-found/not-found.html
@@ -1,3 +1,4 @@
-<md-content class="notFound" flex-offset="20" flex="60" layout="column">
-  <h3 class="md-headline">404 Not Found.</h3>
-</md-content>
+<md-content class="notFound" layout="column" layout-align="center center">
+  <div class="md-display-4">404</div>
+  <div class="md-headline" translate>Oops! That file can't be found...</div>
+</md-content>
\ No newline at end of file
diff --git a/src/components/not-found/not-found.js b/src/components/not-found/not-found.js
index 1315a5a..5412bc2 100644
--- a/src/components/not-found/not-found.js
+++ b/src/components/not-found/not-found.js
@@ -2,6 +2,8 @@ import { module } from 'angular';
 import router from 'angular-ui-router';
 import NotFoundTemplate from './not-found.html';
 
+import './not-found.css';
+
 /** @ngInject */
 const route = $stateProvider => {
   $stateProvider.state('not-found', {