diff --git a/app/templates/client/app/main/main(css).css b/app/templates/client/app/main/main(css).css
index c396852d6..b49092ec1 100644
--- a/app/templates/client/app/main/main(css).css
+++ b/app/templates/client/app/main/main(css).css
@@ -1,34 +1,27 @@
 .thing-form {
-    margin: 20px 0;
+  margin: 20px 0;
 }
 
 #banner {
-    border-bottom: none;
-    margin-top: -20px;
+  border-bottom: none;
+  margin-top: -20px;
 }
 
 #banner h1 {
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
+  font-size: 60px;
+  line-height: 1;
+  letter-spacing: -1px;
 }
 
 .hero-unit {
-    position: relative;
-    padding: 30px 15px;
-    color: #F5F5F5;
-    text-align: center;
-    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-    background: #4393B9;
-}
-
-.footer {
-    text-align: center;
-    padding: 30px 0;
-    margin-top: 70px;
-    border-top: 1px solid #E5E5E5;
+  position: relative;
+  padding: 30px 15px;
+  color: #F5F5F5;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: #4393B9;
 }
 
 .navbar-text {
-    margin-left: 15px;
-}
\ No newline at end of file
+  margin-left: 15px;
+}
diff --git a/app/templates/client/app/main/main(html).html b/app/templates/client/app/main/main(html).html
index 9416ef0db..0d745d9a8 100644
--- a/app/templates/client/app/main/main(html).html
+++ b/app/templates/client/app/main/main(html).html
@@ -29,10 +29,4 @@ <h1 class="page-header">Features:</h1>
   </form><% } %>
 </div>
 
-<footer class="footer">
-  <div class="container">
-      <p>Angular Fullstack v<%= pkg.version %> |
-        <a href="https://twitter.com/tyhenkel">@tyhenkel</a> |
-         <a href="https://github.com/DaftMonk/generator-angular-fullstack/issues?state=open">Issues</a></p>
-  </div>
-</footer>
+<footer></footer>
diff --git a/app/templates/client/app/main/main(jade).jade b/app/templates/client/app/main/main(jade).jade
index 0441b000b..e791e96ab 100644
--- a/app/templates/client/app/main/main(jade).jade
+++ b/app/templates/client/app/main/main(jade).jade
@@ -23,11 +23,4 @@ header#banner.hero-unit
       span.input-group-btn
         button.btn.btn-primary(type='submit', ng-click='addThing()') Add New<% } %>
 
-footer.footer
-  .container
-    p
-      | Angular Fullstack v<%= pkg.version %>
-      = ' | '
-      a(href='https://twitter.com/tyhenkel') @tyhenkel
-      = ' | '
-      a(href='https://github.com/DaftMonk/generator-angular-fullstack/issues?state=open') Issues
+footer
diff --git a/app/templates/client/app/main/main(less).less b/app/templates/client/app/main/main(less).less
index 39636ab2d..b49092ec1 100644
--- a/app/templates/client/app/main/main(less).less
+++ b/app/templates/client/app/main/main(less).less
@@ -3,32 +3,25 @@
 }
 
 #banner {
-    border-bottom: none;
-    margin-top: -20px;
+  border-bottom: none;
+  margin-top: -20px;
 }
 
 #banner h1 {
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
+  font-size: 60px;
+  line-height: 1;
+  letter-spacing: -1px;
 }
 
 .hero-unit {
-    position: relative;
-    padding: 30px 15px;
-    color: #F5F5F5;
-    text-align: center;
-    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-    background: #4393B9;
-}
-
-.footer {
-    text-align: center;
-    padding: 30px 0;
-    margin-top: 70px;
-    border-top: 1px solid #E5E5E5;
+  position: relative;
+  padding: 30px 15px;
+  color: #F5F5F5;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: #4393B9;
 }
 
 .navbar-text {
-    margin-left: 15px;
-}
\ No newline at end of file
+  margin-left: 15px;
+}
diff --git a/app/templates/client/app/main/main(sass).scss b/app/templates/client/app/main/main(sass).scss
index aa19c3649..b49092ec1 100644
--- a/app/templates/client/app/main/main(sass).scss
+++ b/app/templates/client/app/main/main(sass).scss
@@ -1,34 +1,27 @@
 .thing-form {
-    margin: 20px 0;
+  margin: 20px 0;
 }
 
 #banner {
-    border-bottom: none;
-    margin-top: -20px;
+  border-bottom: none;
+  margin-top: -20px;
 }
 
 #banner h1 {
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
+  font-size: 60px;
+  line-height: 1;
+  letter-spacing: -1px;
 }
 
 .hero-unit {
-    position: relative;
-    padding: 30px 15px;
-    color: #F5F5F5;
-    text-align: center;
-    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-    background: #4393B9;
-}
-
-.footer {
-    text-align: center;
-    padding: 30px 0;
-    margin-top: 70px;
-    border-top: 1px solid #E5E5E5;
+  position: relative;
+  padding: 30px 15px;
+  color: #F5F5F5;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: #4393B9;
 }
 
 .navbar-text {
   margin-left: 15px;
-}
\ No newline at end of file
+}
diff --git a/app/templates/client/app/main/main(stylus).styl b/app/templates/client/app/main/main(stylus).styl
index 9ba91c3a3..c3915218c 100644
--- a/app/templates/client/app/main/main(stylus).styl
+++ b/app/templates/client/app/main/main(stylus).styl
@@ -1,28 +1,22 @@
 .thing-form
-    margin 20px 0
+  margin 20px 0
 
 #banner
-    border-bottom none
-    margin-top -20px
+  border-bottom none
+  margin-top -20px
 
 #banner h1
-    font-size 60px
-    letter-spacing -1px
-    line-height 1
+  font-size 60px
+  letter-spacing -1px
+  line-height 1
 
 .hero-unit
-    background #4393B9
-    color #F5F5F5
-    padding 30px 15px
-    position relative
-    text-align center
-    text-shadow 0 1px 0 rgba(0, 0, 0, 0.1)
-
-.footer
-    border-top 1px solid #E5E5E5
-    margin-top 70px
-    padding 30px 0
-    text-align center
+  background #4393B9
+  color #F5F5F5
+  padding 30px 15px
+  position relative
+  text-align center
+  text-shadow 0 1px 0 rgba(0, 0, 0, 0.1)
 
 .navbar-text
-    margin-left 15px
\ No newline at end of file
+  margin-left 15px
diff --git a/app/templates/client/components/footer/footer(css).css b/app/templates/client/components/footer/footer(css).css
new file mode 100644
index 000000000..cd1753eed
--- /dev/null
+++ b/app/templates/client/components/footer/footer(css).css
@@ -0,0 +1,6 @@
+footer.footer {
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 70px;
+  border-top: 1px solid #E5E5E5;
+}
diff --git a/app/templates/client/components/footer/footer(html).html b/app/templates/client/components/footer/footer(html).html
new file mode 100644
index 000000000..3f9f7ffb9
--- /dev/null
+++ b/app/templates/client/components/footer/footer(html).html
@@ -0,0 +1,6 @@
+<div class="container">
+  <p>Angular Fullstack v<%= pkg.version %> |
+    <a href="https://twitter.com/tyhenkel">@tyhenkel</a> |
+    <a href="https://github.com/DaftMonk/generator-angular-fullstack/issues?state=open">Issues</a>
+  </p>
+</div>
diff --git a/app/templates/client/components/footer/footer(jade).jade b/app/templates/client/components/footer/footer(jade).jade
new file mode 100644
index 000000000..a0bd84a1d
--- /dev/null
+++ b/app/templates/client/components/footer/footer(jade).jade
@@ -0,0 +1,7 @@
+.container
+  p
+    | Angular Fullstack v<%= pkg.version %>
+    = ' | '
+    a(href='https://twitter.com/tyhenkel') @tyhenkel
+    = ' | '
+    a(href='https://github.com/DaftMonk/generator-angular-fullstack/issues?state=open') Issues
diff --git a/app/templates/client/components/footer/footer(less).less b/app/templates/client/components/footer/footer(less).less
new file mode 100644
index 000000000..cd1753eed
--- /dev/null
+++ b/app/templates/client/components/footer/footer(less).less
@@ -0,0 +1,6 @@
+footer.footer {
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 70px;
+  border-top: 1px solid #E5E5E5;
+}
diff --git a/app/templates/client/components/footer/footer(sass).scss b/app/templates/client/components/footer/footer(sass).scss
new file mode 100644
index 000000000..cd1753eed
--- /dev/null
+++ b/app/templates/client/components/footer/footer(sass).scss
@@ -0,0 +1,6 @@
+footer.footer {
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 70px;
+  border-top: 1px solid #E5E5E5;
+}
diff --git a/app/templates/client/components/footer/footer(stylus).styl b/app/templates/client/components/footer/footer(stylus).styl
new file mode 100644
index 000000000..ad725136b
--- /dev/null
+++ b/app/templates/client/components/footer/footer(stylus).styl
@@ -0,0 +1,5 @@
+footer.footer
+  border-top 1px solid #E5E5E5
+  margin-top 70px
+  padding 30px 0
+  text-align center
diff --git a/app/templates/client/components/footer/footer.directive(coffee).coffee b/app/templates/client/components/footer/footer.directive(coffee).coffee
new file mode 100644
index 000000000..467006759
--- /dev/null
+++ b/app/templates/client/components/footer/footer.directive(coffee).coffee
@@ -0,0 +1,8 @@
+'use strict'
+
+angular.module '<%= scriptAppName %>'
+.directive 'footer', ->
+  templateUrl: 'components/footer/footer.html'
+  restrict: 'E',
+  link: (scope, element) ->
+    element.addClass('footer')
diff --git a/app/templates/client/components/footer/footer.directive(js).js b/app/templates/client/components/footer/footer.directive(js).js
new file mode 100644
index 000000000..a640e2289
--- /dev/null
+++ b/app/templates/client/components/footer/footer.directive(js).js
@@ -0,0 +1,12 @@
+'use strict';
+
+angular.module('<%= scriptAppName %>')
+  .directive('footer', function () {
+    return {
+      templateUrl: 'components/footer/footer.html',
+      restrict: 'E',
+      link: function (scope, element) {
+        element.addClass('footer');
+      }
+    };
+  });
diff --git a/test/test-file-creation.js b/test/test-file-creation.js
index da8c26695..bf5f00301 100644
--- a/test/test-file-creation.js
+++ b/test/test-file-creation.js
@@ -172,6 +172,9 @@ describe('angular-fullstack generator', function () {
       'client/app/main/main.controller.' + script,
       'client/app/main/main.controller.spec.' + script,
       'client/assets/images/yeoman.png',
+      'client/components/footer/footer.' + stylesheet,
+      'client/components/footer/footer.' + markup,
+      'client/components/footer/footer.directive.' + script,
       'client/components/navbar/navbar.' + markup,
       'client/components/navbar/navbar.controller.' + script,
       'client/components/navbar/navbar.directive.' + script,