diff --git a/src/_app-theme.scss b/src/_app-theme.scss
index 0425d4bfe..498a99009 100644
--- a/src/_app-theme.scss
+++ b/src/_app-theme.scss
@@ -29,6 +29,11 @@
     }
   }
 
+  .docs-footer {
+    background: md-color($primary);
+    color: md-color($primary, default-contrast);
+  }
+
   @include docs-site-typography-theme($theme);
   @include nav-bar-theme($theme);
   @include component-viewer-sidenav-theme($theme);
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index dba7879f9..904715c4b 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -15,6 +15,7 @@ import {ExampleModule} from './examples/example-module';
 import {SharedModule} from './shared/shared-module';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
 import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
+import {Footer} from './shared/footer/footer';
 import {ComponentPageTitle} from './pages/page-title/page-title';
 import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
 
@@ -30,6 +31,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     GuideList,
     GuideViewer,
     Homepage,
+    Footer
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/pages/component-sidenav/component-sidenav.html b/src/app/pages/component-sidenav/component-sidenav.html
index 8bd5fd50a..9e6743e94 100644
--- a/src/app/pages/component-sidenav/component-sidenav.html
+++ b/src/app/pages/component-sidenav/component-sidenav.html
@@ -15,6 +15,9 @@ <h3>{{category.name}}</h3>
     </nav>
   </md-sidenav>
 
-  <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
-  <router-outlet></router-outlet>
+  <div class="docs-component-sidenav-content">   
+    <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </div>
 </md-sidenav-layout>
diff --git a/src/app/pages/component-sidenav/component-sidenav.scss b/src/app/pages/component-sidenav/component-sidenav.scss
index 3ba822c63..27123cbc4 100644
--- a/src/app/pages/component-sidenav/component-sidenav.scss
+++ b/src/app/pages/component-sidenav/component-sidenav.scss
@@ -69,3 +69,14 @@ app-component-sidenav {
     }
   }
 }
+
+.docs-component-sidenav-content {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // The rule will match the element following the router-outlet which will be the routed component.
+  router-outlet + * {
+    flex-grow: 1;
+  }
+}
diff --git a/src/app/pages/guide-list/guide-list.html b/src/app/pages/guide-list/guide-list.html
index 1989caab9..642bcef48 100644
--- a/src/app/pages/guide-list/guide-list.html
+++ b/src/app/pages/guide-list/guide-list.html
@@ -8,3 +8,5 @@ <h1>Guides</h1>
       {{guide.name}}
   </a>
 </md-list>
+
+<app-footer></app-footer>
diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss
index 2b0f9b5b1..8d57d6045 100644
--- a/src/app/pages/guide-list/guide-list.scss
+++ b/src/app/pages/guide-list/guide-list.scss
@@ -1,3 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .docs-guide-list-item {
   margin: 50px;
+  flex-grow: 1;
 }
+
diff --git a/src/app/pages/guide-viewer/guide-viewer.html b/src/app/pages/guide-viewer/guide-viewer.html
index 7419dc08a..30a694ba5 100644
--- a/src/app/pages/guide-viewer/guide-viewer.html
+++ b/src/app/pages/guide-viewer/guide-viewer.html
@@ -3,3 +3,5 @@ <h1>{{guide.name}}</h1>
 </div>
 
 <doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>
+
+<app-footer></app-footer>
diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss
index c8b68b035..735d70cff 100644
--- a/src/app/pages/guide-viewer/guide-viewer.scss
+++ b/src/app/pages/guide-viewer/guide-viewer.scss
@@ -1,4 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .docs-guide-content {
   display: block;
   margin: 20px 0 0 70px;
+  flex-grow: 1;
 }
diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html
index 8b416f8ea..beed2b59c 100644
--- a/src/app/pages/homepage/homepage.html
+++ b/src/app/pages/homepage/homepage.html
@@ -54,3 +54,5 @@ <h2>Optimized for Angular</h2>
     <a md-raised-button routerLink="guide/getting-started">Get started</a>
   </div>
 </div>
+
+<app-footer></app-footer>
diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html
new file mode 100644
index 000000000..d79144321
--- /dev/null
+++ b/src/app/shared/footer/footer.html
@@ -0,0 +1,4 @@
+<footer class="docs-footer">
+  Powered by Google ©2010-2016. Code licensed under an MIT-style License.
+  Documentation licensed under CC BY 4.0.
+</footer>
diff --git a/src/app/shared/footer/footer.scss b/src/app/shared/footer/footer.scss
new file mode 100644
index 000000000..ea8ad6db1
--- /dev/null
+++ b/src/app/shared/footer/footer.scss
@@ -0,0 +1,5 @@
+.docs-footer {
+  margin-top: 40px;
+  padding: 20px;
+  text-align: center;
+}
diff --git a/src/app/shared/footer/footer.ts b/src/app/shared/footer/footer.ts
new file mode 100644
index 000000000..b47f446c0
--- /dev/null
+++ b/src/app/shared/footer/footer.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.html',
+  styleUrls: ['./footer.scss']
+})
+export class Footer { }