diff --git a/app/assets/images/dropdown.svg b/app/assets/images/dropdown.svg
new file mode 100644
index 0000000000..e54af8370c
--- /dev/null
+++ b/app/assets/images/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="242" height="104" viewBox="0 0 242 104" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h242L121 104 0 0z" fill="#2d6586" fill-rule="evenodd"/>
+</svg>
diff --git a/app/assets/javascripts/components/table.js b/app/assets/javascripts/components/table.js
new file mode 100644
index 0000000000..89e7678ae1
--- /dev/null
+++ b/app/assets/javascripts/components/table.js
@@ -0,0 +1,17 @@
+$(function() {
+  var keycodes = { space: 32, enter: 13 };
+
+  var visitDataUrl = function(event) {
+    if (event.type=="click" ||
+        event.keyCode == keycodes.space ||
+        event.keyCode == keycodes.enter) {
+
+      if(!event.target.href) {
+        window.location = $(event.target).closest("tr").data("url");
+      }
+    }
+  };
+
+  $("table").on("click", ".table-row", visitDataUrl);
+  $("table").on("keydown", ".table-row", visitDataUrl);
+});
diff --git a/app/assets/stylesheets/_sidebar.sass b/app/assets/stylesheets/_sidebar.sass
deleted file mode 100644
index 679ec683d4..0000000000
--- a/app/assets/stylesheets/_sidebar.sass
+++ /dev/null
@@ -1,26 +0,0 @@
-$sidebar-color: #2A3B4C
-
-.sidebar
-  background-color: $sidebar-color
-  height: 100%
-  overflow-y: scroll
-  .logo
-    height: 6em
-    background-color: lighten($sidebar-color, 60%)
-    img
-      padding-top: 1em
-      display: block
-      margin-left: auto
-      margin-right: auto
-      height: 80%
-  ul
-    @include fill-parent
-  a
-    display: block
-    padding: $gutter/2
-    @include fill-parent
-    color: white
-    &.active
-      background-color: lighten($sidebar-color, 10%)
-    &:hover
-      background-color: lighten($sidebar-color, 20%)
diff --git a/app/assets/stylesheets/_sidebar.scss b/app/assets/stylesheets/_sidebar.scss
new file mode 100644
index 0000000000..30f8739548
--- /dev/null
+++ b/app/assets/stylesheets/_sidebar.scss
@@ -0,0 +1,48 @@
+.sidebar {
+  flex: 0 0 280px;
+  height: 100%;
+  overflow-y: auto;
+
+  &-logo {
+    align-items: center;
+    display: flex;
+    height: 6em;
+    justify-content: space-between;
+    padding: 0 1em;
+
+    img {
+      display: block;
+      height: 80%;
+      padding-top: 1em;
+    }
+
+    &-heading {
+      color: $grey-0;
+      font-size: 1.6em;
+    }
+  }
+
+  &-list {
+    @include fill-parent;
+  }
+
+  a {
+    @include fill-parent;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    color: $grey-0;
+    display: block;
+    padding: 0.5em 1em;
+    transition: background-color 0.05s linear;
+
+    &.active {
+      @include card(1);
+      background-color: $sidebar-active-color;
+    }
+
+    &:hover {
+      @include card(1);
+      background-color: $sidebar-hover-color;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index a8503d2abb..0439767dc7 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -4,9 +4,12 @@
 @import "bourbon";
 @import "base/grid-settings";
 @import "neat";
+@import "mixins/mixins";
 @import "base/base";
 @import "refills/flashes";
 
 @import "layout";
 @import "sidebar";
 @import "show";
+
+@import "components/components";
diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
index 3319426e2d..c1d852c48c 100644
--- a/app/assets/stylesheets/base/_buttons.scss
+++ b/app/assets/stylesheets/base/_buttons.scss
@@ -1,5 +1,6 @@
 button,
-input[type="submit"] {
+input[type="submit"],
+.button {
   @extend %button;
   @include appearance(none);
   border: none;
diff --git a/app/assets/stylesheets/base/_forms.scss b/app/assets/stylesheets/base/_forms.scss
index 42fc888dc2..1dd97c9fa8 100644
--- a/app/assets/stylesheets/base/_forms.scss
+++ b/app/assets/stylesheets/base/_forms.scss
@@ -28,7 +28,7 @@ label {
 
 textarea,
 #{$all-text-inputs},
-select[multiple=multiple] {
+select {
   @include box-sizing(border-box);
   @include transition(border-color);
   background-color: white;
@@ -72,7 +72,7 @@ input[type="file"] {
 }
 
 select {
+  @include appearance(none);
+  background: image-url("dropdown.svg") no-repeat 97% 50% / 10px;
   margin-bottom: $base-spacing;
-  max-width: 100%;
-  width: auto;
 }
diff --git a/app/assets/stylesheets/base/_grid-settings.scss b/app/assets/stylesheets/base/_grid-settings.scss
index c42bdaf623..152f7829a8 100644
--- a/app/assets/stylesheets/base/_grid-settings.scss
+++ b/app/assets/stylesheets/base/_grid-settings.scss
@@ -2,10 +2,11 @@
 
 // Neat Overrides
 // $column: 90px;
-// $gutter: 30px;
 // $grid-columns: 12;
 // $max-width: em(1088);
 
+$gutter: 2em;
+
 // Neat Breakpoints
 $medium-screen: em(640);
 $large-screen: em(860);
diff --git a/app/assets/stylesheets/base/_tables.scss b/app/assets/stylesheets/base/_tables.scss
index 9efb3c4da6..f430496dfc 100644
--- a/app/assets/stylesheets/base/_tables.scss
+++ b/app/assets/stylesheets/base/_tables.scss
@@ -1,26 +1,72 @@
 table {
-  border-collapse: collapse;
+  border: $base-border;
+  border-collapse: separate;
+  border-radius: $base-border-radius;
   margin: ($base-spacing / 2) 0;
   table-layout: fixed;
   width: 100%;
 }
 
+thead {
+  background-color: $grey-0;
+}
+
 th {
-  border-bottom: 1px solid darken($base-border-color, 15);
-  font-weight: bold;
+  border-bottom: $dark-border;
+  color: $grey-4;
+  font-size: $small-font-size;
+  font-weight: $normal-font-weight;
+  letter-spacing: 0.0357em;
   padding: ($base-spacing / 2) 0;
   text-align: left;
+  text-transform: uppercase;
 }
 
 td {
   border-bottom: $base-border;
+  overflow: hidden;
   padding: ($base-spacing / 2) 0;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   word-wrap: normal;
 }
 
+tr {
+  &:first-child {
+    td {
+      &:first-child {
+        border-top-left-radius: $base-border-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $base-border-radius;
+      }
+    }
+  }
+
+  &:last-child {
+    td {
+      border-bottom: 0;
+
+      &:first-child {
+        border-bottom-left-radius: $base-border-radius;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: $base-border-radius;
+      }
+    }
+  }
+}
+
+
+td,
+th {
+  &:first-child {
+    padding-left: 1em;
+  }
+}
+
 tr,
 td,
 th {
diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss
index 00cfb10fe8..f9fbad721d 100644
--- a/app/assets/stylesheets/base/_variables.scss
+++ b/app/assets/stylesheets/base/_variables.scss
@@ -1,11 +1,12 @@
 // Typography
-$sans-serif: $helvetica;
+$sans-serif: "Lato", $helvetica;
 $serif: $georgia;
 $base-font-family: $sans-serif;
 $header-font-family: $base-font-family;
 
 // Font Sizes
 $base-font-size: 1em;
+$small-font-size: 0.875em;
 $h1-font-size: $base-font-size * 2.25;
 $h2-font-size: $base-font-size * 2;
 $h3-font-size: $base-font-size * 1.75;
@@ -13,6 +14,11 @@ $h4-font-size: $base-font-size * 1.5;
 $h5-font-size: $base-font-size * 1.25;
 $h6-font-size: $base-font-size;
 
+// Font Weights
+$light-font-weight: 300;
+$normal-font-weight: 400;
+$bold-font-weight: 900;
+
 // Line height
 $base-line-height: 1.5;
 $header-line-height: 1.25;
@@ -22,28 +28,47 @@ $base-border-radius: 3px;
 $base-spacing: $base-line-height * 1em;
 $base-z-index: 0;
 
+// Transitions
+$base-easing: cubic-bezier(0.215, 0.610, 0.355, 1);
+$base-timing: 0.25s;
+$base-transition: all $base-timing $base-easing;
+
 // Colors
-$blue: #477DCA;
-$dark-gray: #333;
-$medium-gray: #999;
-$light-gray: #DDD;
-$light-red: #FBE3E4;
-$light-yellow: #FFF6BF;
-$light-green: #E6EFC2;
+$dark-blue: #293f53;
+$blue: #2a94d6;
+$light-blue: #4eb1cb;
+$light-red: #cf5c60;
+$light-yellow: #f3ae4e;
+$light-green: #4ab471;
+
+$form-field-background-color: #fff;
+$white: #fff;
+$grey-0: #f6f7f7;
+$grey-1: #dfe0e1;
+$grey-2: #cfd8dc;
+$grey-3: #90acad;
+$grey-4: #7b808c;
+$grey-5: #4e6a68;
+$grey-6: #344346;
+$grey-7: #293f54;
 
 // Background Color
-$base-background-color: white;
+$base-background-color: $dark-blue;
 
 // Font Colors
-$base-font-color: $dark-gray;
+$base-font-color: $grey-7;
 $base-accent-color: $blue;
 
 // Link Colors
-$base-link-color: $base-accent-color;
-$hover-link-color: darken($base-accent-color, 15);
+$base-link-color: $blue;
+$hover-link-color: shade($blue, 10);
 $base-button-color: $base-link-color;
 $hover-button-color: $hover-link-color;
 
+// Sidebar Colors
+$sidebar-active-color: $base-link-color;
+$sidebar-hover-color: $hover-link-color;
+
 // Flash Colors
 $alert-color: $light-yellow;
 $error-color: $light-red;
@@ -51,8 +76,11 @@ $notice-color: lighten($base-accent-color, 40);
 $success-color: $light-green;
 
 // Border color
-$base-border-color: $light-gray;
-$base-border: 1px solid $base-border-color;
+$base-border-color: $grey-1;
+$base-border-size: 1px;
+$base-border: $base-border-size solid $base-border-color;
+$dark-border-color: $grey-2;
+$dark-border: $base-border-size solid $dark-border-color;
 
 // Forms
 $form-border-color: $base-border-color;
diff --git a/app/assets/stylesheets/base/extends/_button.scss b/app/assets/stylesheets/base/extends/_button.scss
index 8f2e9edee1..bb1e64a32f 100644
--- a/app/assets/stylesheets/base/extends/_button.scss
+++ b/app/assets/stylesheets/base/extends/_button.scss
@@ -9,6 +9,7 @@
   line-height: 1;
   padding: 0.75em 1em;
   text-decoration: none;
+  transition: background-color $base-timing $base-easing;
 
   &:hover {
     background-color: $hover-button-color;
diff --git a/app/assets/stylesheets/components/_components.scss b/app/assets/stylesheets/components/_components.scss
new file mode 100644
index 0000000000..295764bce5
--- /dev/null
+++ b/app/assets/stylesheets/components/_components.scss
@@ -0,0 +1,3 @@
+@import "form";
+@import "header";
+@import "table";
diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
new file mode 100644
index 0000000000..d39af4b2cd
--- /dev/null
+++ b/app/assets/stylesheets/components/_form.scss
@@ -0,0 +1,31 @@
+.form {
+  &-actions {
+    margin-left: 12em;
+  }
+
+  &-heading {
+    font-size: 1.75em;
+    margin: 0;
+    padding-bottom: 0.5em;
+  }
+
+  &-field {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-start;
+    margin: 1.2em 0;
+    width: 100%;
+
+    label {
+      margin-right: 2em;
+      text-align: right;
+      width: 10em;
+    }
+
+    input,
+    select {
+      background-color: $form-field-background-color;
+      max-width: 30em;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_header.scss b/app/assets/stylesheets/components/_header.scss
new file mode 100644
index 0000000000..50e7306376
--- /dev/null
+++ b/app/assets/stylesheets/components/_header.scss
@@ -0,0 +1,10 @@
+.header {
+  @include display(flex);
+  @include justify-content(space-between);
+  @include align-items(flex-end);
+  padding: $base-spacing 0;
+
+  &-heading {
+    margin-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
new file mode 100644
index 0000000000..ed31a4cc4a
--- /dev/null
+++ b/app/assets/stylesheets/components/_table.scss
@@ -0,0 +1,11 @@
+.table-row {
+  background-color: $white;
+  border-left: 2px solid transparent;
+  transition: $base-transition;
+
+  &:hover {
+    background-color: $grey-0;
+    border-left-color: $blue;
+    cursor: pointer;
+  }
+}
diff --git a/app/assets/stylesheets/layout.sass b/app/assets/stylesheets/layout.sass
deleted file mode 100644
index e4e4f4793f..0000000000
--- a/app/assets/stylesheets/layout.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-html
-  height: 100%
-
-body
-  @include outer-container(100%)
-  height: 100%
-
-.sidebar
-  @include span-columns(2 of 12)
-
-.content
-  height: 100%
-  overflow-y: scroll
-  @include span-columns(10 of 12)
-  @include omega
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
new file mode 100644
index 0000000000..d00592ab71
--- /dev/null
+++ b/app/assets/stylesheets/layout.scss
@@ -0,0 +1,28 @@
+html,
+body,
+.main {
+  height: 100%;
+  min-height: 100%;
+}
+
+body {
+  background: $base-background-color;
+}
+
+.main {
+  @include clearfix;
+  @include align-items(stretch);
+  @include display(flex);
+  margin: 0 auto;
+  max-width: 100em;
+}
+
+.content {
+  @include flex(1);
+  @include card(2);
+  background-color: $grey-0;
+  height: 100%;
+  min-height: 100%;
+  overflow-y: auto;
+  padding: 0 $gutter;
+}
diff --git a/app/assets/stylesheets/mixins/_mixins.scss b/app/assets/stylesheets/mixins/_mixins.scss
new file mode 100644
index 0000000000..f4ee7b2526
--- /dev/null
+++ b/app/assets/stylesheets/mixins/_mixins.scss
@@ -0,0 +1 @@
+@import "shadow";
diff --git a/app/assets/stylesheets/mixins/_shadow.scss b/app/assets/stylesheets/mixins/_shadow.scss
new file mode 100644
index 0000000000..b6305346d7
--- /dev/null
+++ b/app/assets/stylesheets/mixins/_shadow.scss
@@ -0,0 +1,35 @@
+@mixin shadow {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+/// Computes a top-shadow for a card effect.
+/// @param {Number} $depth - depth level
+/// @return {List}
+@function top-shadow($depth) {
+  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
+  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
+  $color: rgba($grey-7, nth(0.12 0.16 0.19 0.25 0.30, $depth));
+
+  @return 0 $primary-offset $blur $color;
+}
+
+/// Computes a bottom-shadow for a card effect.
+/// @param {Number} $depth - depth level
+/// @return {List}
+@function bottom-shadow($depth) {
+  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
+  $blur: nth(1 3 3 5 6, $depth) * 4px;
+  $color: rgba($grey-7, nth(0.24 0.23 0.23 0.22 0.22, $depth));
+
+  @return 0 $primary-offset $blur $color;
+}
+
+@mixin card($depth) {
+  @if $depth < 1 {
+    box-shadow: none;
+  } @else if $depth > 5 {
+    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
+  } @else {
+    box-shadow: bottom-shadow($depth), top-shadow($depth);  
+  }
+}
diff --git a/app/models/order.rb b/app/models/order.rb
index 73e33e0567..999eb1fc61 100644
--- a/app/models/order.rb
+++ b/app/models/order.rb
@@ -11,7 +11,7 @@ class Order < ActiveRecord::Base
   validates :address_zip, presence: true
 
   def to_s
-    id
+    "Order ##{id}"
   end
 
   def total_price
diff --git a/app/views/application/_sidebar.html.erb b/app/views/application/_sidebar.html.erb
index c49eb80dfe..11c841a678 100644
--- a/app/views/application/_sidebar.html.erb
+++ b/app/views/application/_sidebar.html.erb
@@ -1,6 +1,7 @@
-<ul class="sidebar">
-  <div class="logo">
+<ul class="sidebar-list">
+  <div class="sidebar-logo">
     <%= image_tag "logo.svg" %>
+    <h1 class="sidebar-logo-heading">Administrate</h1>
   </div>
 
   <% [:customers, :line_items, :orders, :products].each do |resource| %>
diff --git a/app/views/dashboard/_form.html.erb b/app/views/dashboard/_form.html.erb
index 72ce1e7c7d..379f973314 100644
--- a/app/views/dashboard/_form.html.erb
+++ b/app/views/dashboard/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(@page.resource) do |f| %>
+<%= form_for(@page.resource, class: "form") do |f| %>
   <% if @page.resource.errors.any? %>
     <div id="error_explanation">
       <h2>
@@ -7,16 +7,16 @@
       </h2>
 
       <ul>
-      <% @page.resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
-      <% end %>
+        <% @page.resource.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
       </ul>
     </div>
   <% end %>
 
   <div class="form-inputs">
     <% @page.attributes.each do |attribute| -%>
-      <div class="field">
+      <div class="form-field">
         <%= render attribute, f: f %>
       </div>
     <% end -%>
diff --git a/app/views/dashboard/_table.html.erb b/app/views/dashboard/_table.html.erb
index 164f39d786..f4f8b80602 100644
--- a/app/views/dashboard/_table.html.erb
+++ b/app/views/dashboard/_table.html.erb
@@ -1,30 +1,39 @@
 <table>
   <thead>
     <tr>
-      <th><%= table_presenter.resource_name.titleize %></th>
-
       <% table_presenter.attribute_names.each do |attr_name| %>
         <th><%= attr_name.to_s.titleize %></th>
       <% end %>
-      <th colspan="2"></th>
+      <th colspan="3"></th>
     </tr>
   </thead>
 
   <tbody>
     <% resources.each do |resource| %>
-      <tr>
-        <td><%= link_to resource.to_s, resource %></td>
-
+      <tr class="table-row" role="link" tabindex="0" data-url="<%= polymorphic_path(resource) -%>">
         <% table_presenter.attributes_for(resource).each do |attribute| %>
           <td><%= render attribute %></td>
         <% end %>
-        <td><%= link_to t("administrate.actions.edit"), [:edit, resource] %></td>
+
+        <td><%= link_to(
+          t("administrate.actions.show"),
+          resource,
+          class: "action-show",
+        ) %></td>
+
+        <td><%= link_to(
+          t("administrate.actions.edit"),
+          [:edit, resource],
+          class: "action-edit",
+        ) %></td>
+
         <td><%= link_to(
           t("administrate.actions.destroy"),
           resource,
+          class: "action-destroy",
           method: :delete,
           data: { confirm: t("administrate.actions.confirm") }
-          ) %></td>
+        ) %></td>
       </tr>
     <% end %>
   </tbody>
diff --git a/app/views/dashboard/edit.html.erb b/app/views/dashboard/edit.html.erb
index e22262246a..5adc3931ff 100644
--- a/app/views/dashboard/edit.html.erb
+++ b/app/views/dashboard/edit.html.erb
@@ -1,6 +1,6 @@
-<h1>Editing <%= @page.page_title %></h1>
+<header class="header">
+  <h1 class="header-heading">Edit <%= @page.page_title %></h1>
+  <%= link_to "Show #{@page.resource}", @page.resource, class: "button" %>
+</header>
 
-<%= render 'form' %>
-
-<%= link_to 'Show', @page.resource %> |
-<%= link_to 'Back', @page.resource_name.pluralize %>
+<%= render "form" %>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 3d4d5e5e15..1aff9720c1 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,7 +1,10 @@
-<p id="notice"><%= notice %></p>
-
-<h1><%= @page.resource_name.pluralize.titleize %></h1>
-<%= link_to "New #{@page.resource_name.titleize.downcase}",
-  [:new, @page.resource_name] %>
+<header class="header">
+  <h1 class="header-heading"><%= @page.resource_name.pluralize.titleize %></h1>
+  <%= link_to(
+    "New #{@page.resource_name.titleize.downcase}",
+    [:new, @page.resource_name],
+    class: "button",
+  ) %>
+</header>
 
 <%= render "table", table_presenter: @page, resources: @resources %>
diff --git a/app/views/dashboard/new.html.erb b/app/views/dashboard/new.html.erb
index 83da661c27..336e71f4df 100644
--- a/app/views/dashboard/new.html.erb
+++ b/app/views/dashboard/new.html.erb
@@ -1,5 +1,6 @@
-<h1>New <%= @page.resource_name.titleize %></h1>
+<header class="header">
+  <h1 class="header-heading">New <%= @page.resource_name.titleize %></h1>
+  <%= link_to 'Back', @page.resource_name.pluralize, class: "button" %>
+</header>
 
 <%= render 'form' %>
-
-<%= link_to 'Back', @page.resource_name.pluralize %>
diff --git a/app/views/dashboard/show.html.erb b/app/views/dashboard/show.html.erb
index bd5b7a7d43..0971130f2d 100644
--- a/app/views/dashboard/show.html.erb
+++ b/app/views/dashboard/show.html.erb
@@ -1,8 +1,7 @@
-<p id="notice"><%= notice %></p>
-
-<%= link_to 'Edit', [:edit, @page.resource] %>
-
-<h1><%= @page.page_title %></h1>
+<header class="header">
+  <h1 class="header-heading"><%= @page.page_title %></h1>
+  <%= link_to 'Edit', [:edit, @page.resource], class: "button" %>
+</header>
 
 <dl>
   <% @page.attributes.each do |attribute| %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 0a87aaf00c..f59e26da61 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,20 +10,24 @@
     https://github.com/calebthompson/title#usage
   %>
   <title><%= title %></title>
+  <%= stylesheet_link_tag "//fonts.googleapis.com/css?family=Lato:300,400,900", media: "all" %>
   <%= stylesheet_link_tag :application, media: "all" %>
   <%= csrf_meta_tags %>
 </head>
+
 <body class="<%= body_class %>">
-  <div class="sidebar">
-    <%= render "sidebar" -%>
-  </div>
+  <main class="main">
+    <div class="sidebar">
+      <%= render "sidebar" -%>
+    </div>
 
-  <div class="content">
-    <%= render "flashes" -%>
+    <div class="content">
+      <%= render "flashes" -%>
 
-    <%= yield %>
+      <%= yield %>
 
-    <%= render "javascript" %>
-  </div>
+      <%= render "javascript" %>
+    </div>
+  </main>
 </body>
 </html>
diff --git a/config/locales/administrate.en.yml b/config/locales/administrate.en.yml
index a9d97f57cb..7d271b7e8c 100644
--- a/config/locales/administrate.en.yml
+++ b/config/locales/administrate.en.yml
@@ -1,6 +1,7 @@
 en:
   administrate:
     actions:
+      show: Show
       edit: Edit
       destroy: Destroy
       confirm: Are you sure?
diff --git a/spec/features/edit_page_spec.rb b/spec/features/edit_page_spec.rb
index 017622b593..3624a7af92 100644
--- a/spec/features/edit_page_spec.rb
+++ b/spec/features/edit_page_spec.rb
@@ -6,7 +6,7 @@
 
     visit edit_customer_path(customer)
 
-    expect(page).to have_header("Editing #{customer.name}")
+    expect(page).to have_header("Edit #{customer.name}")
   end
 
   it "has forms for the customer's attributes" do
diff --git a/spec/features/index_page_spec.rb b/spec/features/index_page_spec.rb
index e0cc16f7c5..43f2f036d0 100644
--- a/spec/features/index_page_spec.rb
+++ b/spec/features/index_page_spec.rb
@@ -1,6 +1,6 @@
 require "rails_helper"
 
-RSpec.describe "customer index page" do
+describe "customer index page" do
   it "displays customers' name and email" do
     customer = create(:customer)
 
@@ -15,9 +15,9 @@
     customer = create(:customer)
 
     visit customers_path
-    click_on customer.name
+    find(index_row_css_for(customer)).click
 
-    expect(current_path).to eq(customer_path(customer))
+    expect(page).to have_header(customer.to_s)
     expect(page).to have_content(customer.name)
     expect(page).to have_content(customer.email)
   end
diff --git a/spec/features/line_items_spec.rb b/spec/features/line_items_spec.rb
index 709837cf9a..8dbf61c8af 100644
--- a/spec/features/line_items_spec.rb
+++ b/spec/features/line_items_spec.rb
@@ -7,7 +7,7 @@
     visit line_items_path
 
     expect(page).to have_header("Line Items")
-    expect(page).to have_content(line_item.to_s)
+    expect(page).to have_content(line_item.unit_price)
     expect(page).to have_content(line_item.product.to_s)
   end
 
@@ -15,9 +15,9 @@
     line_item = create(:line_item)
 
     visit line_items_path
-    click_on line_item.to_s
+    find(index_row_css_for(line_item)).click
 
-    expect(current_path).to eq(line_item_path(line_item))
+    expect(page).to have_header(line_item.to_s)
     expect(page).to have_content(line_item.to_s)
     expect(page).to have_content(line_item.product.to_s)
   end
diff --git a/spec/features/orders_index_spec.rb b/spec/features/orders_index_spec.rb
index bf293bfc89..dba7b6fc21 100644
--- a/spec/features/orders_index_spec.rb
+++ b/spec/features/orders_index_spec.rb
@@ -23,9 +23,9 @@
     order = create(:order)
 
     visit orders_path
-    click_on order.id
+    find(index_row_css_for(order)).click
 
-    expect(current_path).to eq(order_path(order))
+    expect(page).to have_header(order.to_s)
     expect(page).to have_link(order.customer.name)
   end
 
diff --git a/spec/features/orders_show_spec.rb b/spec/features/orders_show_spec.rb
index 28051ad8b0..7e47fa0e1a 100644
--- a/spec/features/orders_show_spec.rb
+++ b/spec/features/orders_show_spec.rb
@@ -9,14 +9,13 @@
     expect(page).to have_content(line_item.unit_price)
     expect(page).to have_content(line_item.quantity)
     expect(page).to have_content(line_item.total_price)
-    expect(page).to have_link(line_item.product.to_s)
   end
 
   scenario "links to line items" do
     line_item = create(:line_item)
 
     visit order_path(line_item.order)
-    click_on(line_item.to_s)
+    find(index_row_css_for(line_item)).click
 
     expect(page).to have_header(line_item.to_s)
   end
diff --git a/spec/features/products_index_spec.rb b/spec/features/products_index_spec.rb
index ddf4aa4a9e..1abba9647f 100644
--- a/spec/features/products_index_spec.rb
+++ b/spec/features/products_index_spec.rb
@@ -15,7 +15,7 @@
     product = create(:product)
 
     visit products_path
-    click_on product.name
+    find(index_row_css_for(product)).click
 
     expect(current_path).to eq(product_path(product))
     expect(page).to have_content(product.name)
diff --git a/spec/features/show_page_spec.rb b/spec/features/show_page_spec.rb
index d1a341bbd9..ce6db43439 100644
--- a/spec/features/show_page_spec.rb
+++ b/spec/features/show_page_spec.rb
@@ -27,11 +27,21 @@
     visit customer_path(customer)
 
     orders.each do |order|
-      expect(page).to have_link(order.to_s)
       expect(page).to have_content(order.total_price)
     end
   end
 
+  it "links to the customer's orders" do
+    customer = create(:customer)
+    order = create(:order, customer: customer)
+
+    visit customer_path(customer)
+
+    find(index_row_css_for(order)).click
+
+    expect(page).to have_header(order.to_s)
+  end
+
   it "link-ifies the email" do
     customer = create(:customer)
 
diff --git a/spec/support/table.rb b/spec/support/table.rb
new file mode 100644
index 0000000000..e4bdf50805
--- /dev/null
+++ b/spec/support/table.rb
@@ -0,0 +1,11 @@
+module Features
+  def index_row_css_for(model)
+    "tr[data-url='#{url_for(model)}'] .action-show"
+  end
+
+  private
+
+  def url_for(model)
+    "/#{model.class.to_s.underscore.pluralize}/#{model.id}"
+  end
+end