diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 89d64a58574f..e1205208640e 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -1,3 +1,113 @@
+<h2>Vertical Stepper Demo</h2>
+<md-vertical-stepper>
+  <md-step>
+    <ng-template mdStepLabel>Fill out your name</ng-template>
+    <md-input-container>
+      <input mdInput placeholder="First Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Last Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your phone number</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Phone number">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your address</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Address">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>Confirm your information</ng-template>
+    Everything seems correct.
+    <div>
+      <button md-button>Done</button>
+    </div>
+  </md-step>
+</md-vertical-stepper>
+
+<h2>Horizontal Stepper Demo</h2>
+<md-horizontal-stepper>
+  <md-step>
+    <ng-template mdStepLabel>Fill out your name</ng-template>
+    <md-input-container>
+      <input mdInput placeholder="First Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Last Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your phone number</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Phone number">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your address</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Address">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>Confirm your information</ng-template>
+    Everything seems correct.
+    <div>
+      <button md-button>Done</button>
+    </div>
+  </md-step>
+</md-horizontal-stepper>
+
 <h2>Horizontal Stepper Demo</h2>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps" [label]="step.label">
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
index 4f808fca5ef1..a2ed3f9459ba 100644
--- a/src/lib/core/theming/_all-theme.scss
+++ b/src/lib/core/theming/_all-theme.scss
@@ -23,6 +23,7 @@
 @import '../../sidenav/sidenav-theme';
 @import '../../slide-toggle/slide-toggle-theme';
 @import '../../slider/slider-theme';
+@import '../../stepper/stepper-theme';
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
@@ -57,6 +58,7 @@
   @include mat-sidenav-theme($theme);
   @include mat-slide-toggle-theme($theme);
   @include mat-slider-theme($theme);
+  @include mat-stepper-theme($theme);
   @include mat-tabs-theme($theme);
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);
diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
new file mode 100644
index 000000000000..a55c82c7abbf
--- /dev/null
+++ b/src/lib/stepper/_stepper-theme.scss
@@ -0,0 +1,43 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/_typography-utils.scss';
+
+@mixin mat-stepper-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+
+  .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
+
+    .mat-stepper-label {
+      color: mat-color($foreground, text);
+    }
+
+    .mat-stepper-index {
+      background-color: mat-color($primary);
+      color: mat-color($primary, default-contrast);
+    }
+
+    &[aria-selected='false'] {
+      .mat-stepper-label {
+        color: mat-color($foreground, disabled-text);
+      }
+
+      .mat-stepper-index {
+        background-color: mat-color($foreground, disabled-text);
+      }
+    }
+  }
+
+  .mat-stepper-horizontal, .mat-stepper-vertical {
+    background-color: mat-color($background, card);
+  }
+
+  .vertical-content-container {
+    border-left-color: mat-color($foreground, divider);
+  }
+
+  .connector-line {
+    border-top-color: mat-color($foreground, divider);
+  }
+}
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index e69836b862f1..5937fd04551b 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/src/lib/stepper/stepper-horizontal.html
@@ -1,28 +1,32 @@
-<div #stepHeader *ngFor="let step of _steps; let i = index; let isLast = last"
-     class="mat-stepper-header" role="tab"
-     [id]="_getStepLabelId(i)"
-     [attr.aria-controls]="_getStepContentId(i)"
-     [attr.aria-selected]="selectedIndex == i"
-     [tabIndex]="_focusIndex == i ? 0 : -1"
-     (click)="step.select()"
-     (keydown)="_onKeydown($event)">
-  <div class="mat-stepper-index">
-    {{i + 1}}
-  </div>
+<div class="mat-horizontal-stepper-header-container">
+  <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
+    <div #stepHeader class="mat-horizontal-stepper-header"
+         role="tab"
+         [id]="_getStepLabelId(i)"
+         [attr.aria-controls]="_getStepContentId(i)"
+         [attr.aria-selected]="selectedIndex == i"
+         [tabIndex]="_focusIndex == i ? 0 : -1"
+         (click)="step.select()"
+         (keydown)="_onKeydown($event)">
+      <div class="mat-stepper-index">
+        {{i + 1}}
+      </div>
 
-  <div class="mat-stepper-label">
-    <!-- If there is a label template, use it. -->
-    <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
-    </ng-container>
-    <!-- It there is no label template, fall back to the text label. -->
-    <div *ngIf="!step.stepLabel">{{step.label}}</div>
-  </div>
+      <div class="mat-stepper-label">
+        <!-- If there is a label template, use it. -->
+        <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
+        </ng-container>
+        <!-- It there is no label template, fall back to the text label. -->
+        <div *ngIf="!step.stepLabel">{{step.label}}</div>
+      </div>
+    </div>
 
-  <div *ngIf="!isLast" class="connector-line"></div>
+    <div *ngIf="!isLast" class="connector-line"></div>
+  </ng-container>
 </div>
 
 <div *ngFor="let step of _steps; let i = index"
-     class="mat-stepper-content" role="tabpanel"
+     class="mat-horizontal-stepper-content" role="tabpanel"
      [id]="_getStepContentId(i)"
      [attr.aria-labelledby]="_getStepLabelId(i)"
      [attr.aria-expanded]="selectedIndex == i">
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
index 80f23ad348c2..1609d6a9c7df 100644
--- a/src/lib/stepper/stepper-horizontal.ts
+++ b/src/lib/stepper/stepper-horizontal.ts
@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
   moduleId: module.id,
   selector: 'md-horizontal-stepper, mat-horizontal-stepper',
   templateUrl: 'stepper-horizontal.html',
-  styleUrls: ['stepper.scss'],
+  styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-horizontal',
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 993ea0cdb04d..dfc87e4a4eb4 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -1,5 +1,5 @@
-<div *ngFor="let step of _steps; let i = index; let isLast = last">
-  <div #stepHeader class="mat-stepper-header" role="tab"
+<div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
+  <div #stepHeader class="mat-vertical-stepper-header" role="tab"
        [id]="_getStepLabelId(i)"
        [attr.aria-controls]="_getStepContentId(i)"
        [attr.aria-selected]="selectedIndex == i"
@@ -19,11 +19,12 @@
     </div>
 
   </div>
-  <div *ngIf="!isLast" class="connector-line"></div>
-  <div class="mat-stepper-content" role="tabpanel"
-       [id]="_getStepContentId(i)"
-       [attr.aria-labelledby]="_getStepLabelId(i)"
-       [attr.aria-expanded]="selectedIndex == i">
-    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+  <div class="vertical-content-container">
+    <div class="mat-vertical-stepper-content" role="tabpanel"
+         [id]="_getStepContentId(i)"
+         [attr.aria-labelledby]="_getStepLabelId(i)"
+         [attr.aria-expanded]="selectedIndex == i">
+      <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+    </div>
   </div>
 </div>
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
index 25ae4c2de376..52fc6038a44b 100644
--- a/src/lib/stepper/stepper-vertical.ts
+++ b/src/lib/stepper/stepper-vertical.ts
@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
   moduleId: module.id,
   selector: 'md-vertical-stepper, mat-vertical-stepper',
   templateUrl: 'stepper-vertical.html',
-  styleUrls: ['stepper.scss'],
+  styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-vertical',
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 239fda3fb58d..7e2cd497af27 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,7 +1,109 @@
-.mat-stepper-content[aria-expanded='false'] {
-  display: none;
+$mat-horizontal-stepper-header-height: 72px !default;
+$mat-label-header-height: 24px !default;
+$mat-stepper-label-min-width: 50px !default;
+$mat-stepper-side-gap: 24px !default;
+$mat-vertical-stepper-content-margin: 12px !default;
+$mat-vertical-stepper-content-padding: 16px 0 32px $mat-stepper-side-gap !default;
+$mat-vertical-content-container-padding: 8px !default;
+$mat-connector-line-width: 1px !default;
+$mat-connector-line-gap: 8px !default;
+$mat-horizontal-connector-line-size: 5% !default;
+$mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-gap !default;
+
+:host {
+  display: block;
+  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
+}
+
+.mat-stepper-label {
+  display: inline-flex;
+  white-space: nowrap;
+  overflow: hidden;
+  // TODO(jwshin): text-overflow does not work as expected.
+  text-overflow: ellipsis;
+  min-width: $mat-stepper-label-min-width;
+}
+
+.mat-stepper-index {
+  border-radius: 50%;
+  height: $mat-label-header-height;
+  width: $mat-label-header-height;
+  text-align: center;
+  line-height: $mat-label-header-height;
+}
+
+.mat-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.mat-horizontal-stepper-header {
+  display: inline-flex;
+  line-height: $mat-horizontal-stepper-header-height;
+  overflow: hidden;
+  align-items: center;
+
+  .mat-stepper-index {
+    margin-right: $mat-connector-line-gap;
+    display: inline-block;
+    flex: none;
+  }
+}
+
+.mat-vertical-stepper-header {
+  display: flex;
+  align-items: center;
+  margin: $mat-connector-line-gap 0;
+
+  .mat-stepper-index {
+    margin-right: $mat-vertical-stepper-content-margin;
+  }
 }
 
-.mat-stepper-index, .mat-stepper-label {
-  display: inline-block;
+.connector-line {
+  border-top-width: $mat-connector-line-width;
+  border-top-style: solid;
+  width: $mat-horizontal-connector-line-size;
+  flex: auto;
+  margin: 0 $mat-connector-line-gap;
+  height: 0;
+}
+
+.mat-horizontal-stepper-content[aria-expanded='false'] {
+    display: none;
+}
+
+.vertical-content-container {
+  border-left-width: $mat-connector-line-width;
+  border-left-style: solid;
+  margin-left: $mat-vertical-stepper-content-margin;
+  padding: $mat-vertical-content-container-padding 0;
+}
+
+.mat-vertical-stepper-content {
+  padding-left: $mat-stepper-side-gap;
+
+  &[aria-expanded='false'] {
+    display: none;
+  }
+
+  &[aria-expanded='true'] {
+    padding: $mat-vertical-stepper-content-padding;
+  }
+}
+
+.mat-step {
+  margin-top: $mat-connector-line-gap;
+
+  &:last-child {
+    .vertical-content-container {
+      border: none;
+    }
+  }
+
+  &:first-child {
+    margin-top: 0;
+    padding-top: $mat-vertical-stepper-margin-top;
+  }
 }
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index 29923d7857ee..f76c63bdd6c0 100644
--- a/src/lib/stepper/stepper.ts
+++ b/src/lib/stepper/stepper.ts
@@ -23,7 +23,7 @@ import {MdStepLabel} from './step-label';
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',
-  templateUrl: 'step.html',
+  templateUrl: 'step.html'
 })
 export class MdStep extends CdkStep {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */