diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 4891e08d..a87e7cbf 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -5,12 +5,11 @@ $gray-3: #F9F9F9;
 $white: #FFFFFF;
 $blue: #01788E;
 $red: #C93047;
+$light-blue: #FAFCFD;
 
 $teal: #00B0B3;
 $mint: #B2D236;
 
-$beige: #EFEBE1;
-
 $warning: #FF73C0;
 $watch: #F096AD;
 $growth: #E0BA9A;
@@ -33,8 +32,8 @@ $ideal: #C0FF73;
   color: $blue;
 }
 
-.bg-color-beige {
-  background-color: $beige;
+.bg-color-light-blue {
+  background-color: $light-blue;
 }
 
 .bg-color-blue {
diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss
index 108101b9..43a150b7 100644
--- a/app/assets/stylesheets/sqm_application.scss
+++ b/app/assets/stylesheets/sqm_application.scss
@@ -1,13 +1,13 @@
 $spacer: 0.5rem;
 $spacers: (
-        0: 0,
-        1: ($spacer * .25),
-        2: ($spacer * .5),
-        3: $spacer,
-        4: ($spacer * 2),
-        5: ($spacer * 3),
-        6: ($spacer * 4),
-        7: ($spacer * 5),
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 2),
+    5: ($spacer * 3),
+    6: ($spacer * 4),
+    7: ($spacer * 5),
 );
 
 @import "bootstrap";
@@ -21,3 +21,10 @@ $spacers: (
 .height-56 {
   height: 56px;
 }
+
+.card {
+  @extend .bg-color-white;
+  @extend .p-5;
+  border-radius: 8px;
+  box-shadow: 0 0 6px rgba($black, 0.25);
+}
diff --git a/app/helpers/variance_helper.rb b/app/helpers/variance_helper.rb
index 7620f99a..e66fbcb3 100644
--- a/app/helpers/variance_helper.rb
+++ b/app/helpers/variance_helper.rb
@@ -28,7 +28,7 @@ module VarianceHelper
   end
 
   def label_width_percentage
-    25
+    30
   end
 
   def graph_width_percentage
diff --git a/app/views/dashboard/_variance_graph.erb b/app/views/dashboard/_variance_graph.erb
index 39d1b8a3..bf5b9928 100644
--- a/app/views/dashboard/_variance_graph.erb
+++ b/app/views/dashboard/_variance_graph.erb
@@ -1,128 +1,125 @@
-<div class="bg-color-white p-4 border-radius-8">
+<svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
 
-  <svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
+  <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
+    <feComponentTransfer in=SourceAlpha>
+      <feFuncA type="table" tableValues="1 0"/>
+    </feComponentTransfer>
+    <feGaussianBlur stdDeviation="4"/>
+    <feOffset dx="0" dy="5" result="offsetblur"/>
+    <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feComposite in2="SourceAlpha" operator="in"/>
+    <feMerge>
+      <feMergeNode in="SourceGraphic"/>
+      <feMergeNode/>
+    </feMerge>
+  </filter>
 
-    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
-      <feComponentTransfer in=SourceAlpha>
-        <feFuncA type="table" tableValues="1 0"/>
-      </feComponentTransfer>
-      <feGaussianBlur stdDeviation="4"/>
-      <feOffset dx="0" dy="5" result="offsetblur"/>
-      <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
-      <feComposite in2="offsetblur" operator="in"/>
-      <feComposite in2="SourceAlpha" operator="in"/>
-      <feMerge>
-        <feMergeNode in="SourceGraphic"/>
-        <feMergeNode/>
-      </feMerge>
-    </filter>
-
-    <svg
-      id="graph-background"
-      x="<%= label_width_percentage %>%"
-      y="0"
-      width="<%= graph_width_percentage %>%"
-      height=<%= graph_background_height(number_of_rows: presenters.size) %>
-    >
-      <g id="zone-headings">
-        <%= zones.each_with_index do |zone, index| %>
-          <text
-            class="zone-header"
-            x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
-            y="<%= heading_gutter / 2 %>"
-            text-anchor="middle"
-            dominant-baseline="middle"
-          >
-            <%= zone.capitalize %>
-          </text>
-        <% end %>
-      </g>
-
-      <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
-        <%= zones.each_with_index do |zone, index| %>
-          <rect
-            id="<%= zone %>-zone"
-            class="zone-background fill-<%= zone %>"
-            x="<%= index * zone_width_percentage %>%"
-            y="0"
-            width="<%= zone_width_percentage %>%"
-            height="100%"
-            opacity="0.2"
-            filter="url(#inset-shadow)"
-            />
-        <% end %>
-      </g>
-    </svg>
-
-    <g id="measure-rows">
-      <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
-        <%= presenters.each_with_index do |presenter, index| %>
-          <text
-            class="font-cabin"
-            x="<%= label_width_percentage %>%"
-            dx="<%= -1 * label_padding_right %>"
-            y="<%= index * measure_row_height + measure_row_height / 2 %>"
-            text-anchor="end"
-            dominant-baseline="middle"
-          >
-            <%= presenter.measure_name %>
-          </text>
-        <% end %>
-      </svg>
-
-      <svg
-        id="measure-row-bars"
-        x="<%= label_width_percentage %>%"
-        y="<%= heading_gutter %>"
-        width="<%= graph_width_percentage %>%"
-      >
-        <%= presenters.each_with_index do |presenter, index| %>
-          <rect
-            class="measure-row-bar <%= presenter.bar_color %>"
-            x="<%= presenter.x_offset %>"
-            y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
-            width="<%= presenter.bar_width %>"
-            height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
-            stroke="none"
-            />
-        <% end %>
-      </svg>
+  <svg
+    id="graph-background"
+    x="<%= label_width_percentage %>%"
+    y="0"
+    width="<%= graph_width_percentage %>%"
+    height=<%= graph_background_height(number_of_rows: presenters.size) %>
+  >
+    <g id="zone-headings">
+      <%= zones.each_with_index do |zone, index| %>
+        <text
+          class="zone-header weight-600"
+          x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
+          y="<%= heading_gutter / 2 %>"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          <%= zone.capitalize %>
+        </text>
+      <% end %>
     </g>
 
-    <svg
-      id="key-benchmark"
-      x="<%= label_width_percentage %>%"
-      y="0"
-      width="<%= graph_width_percentage %>%"
-      height="<%= graph_background_height(number_of_rows: presenters.size) %>"
-    >
-      <g transform="translate(0, <%= heading_gutter %>)">
+    <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
+      <%= zones.each_with_index do |zone, index| %>
         <rect
-          id="key-benchmark"
-          x="60%"
-          transform="translate(-1, 0)"
+          id="<%= zone %>-zone"
+          class="zone-background fill-<%= zone %>"
+          x="<%= index * zone_width_percentage %>%"
           y="0"
-          width="4"
+          width="<%= zone_width_percentage %>%"
           height="100%"
-          fill="black"
-        />
-      </g>
+          opacity="0.2"
+          filter="url(#inset-shadow)"
+          />
+      <% end %>
+    </g>
+  </svg>
+
+  <g id="measure-rows">
+    <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
+      <%= presenters.each_with_index do |presenter, index| %>
+        <text
+          class="font-cabin"
+          x="<%= label_width_percentage %>%"
+          dx="<%= -1 * label_padding_right %>"
+          y="<%= index * measure_row_height + measure_row_height / 2 %>"
+          text-anchor="end"
+          dominant-baseline="middle"
+        >
+          <%= presenter.measure_name %>
+        </text>
+      <% end %>
     </svg>
 
     <svg
-      id="legend"
+      id="measure-row-bars"
       x="<%= label_width_percentage %>%"
-      y="0"
+      y="<%= heading_gutter %>"
       width="<%= graph_width_percentage %>%"
     >
-      <text
-        class="graph-footer"
-        x="60%"
-        y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
-        text-anchor="middle"
-      >
-        Benchmark
-      </text>
+      <%= presenters.each_with_index do |presenter, index| %>
+        <rect
+          class="measure-row-bar <%= presenter.bar_color %>"
+          x="<%= presenter.x_offset %>"
+          y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
+          width="<%= presenter.bar_width %>"
+          height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
+          stroke="none"
+          />
+      <% end %>
     </svg>
+  </g>
+
+  <svg
+    id="key-benchmark"
+    x="<%= label_width_percentage %>%"
+    y="0"
+    width="<%= graph_width_percentage %>%"
+    height="<%= graph_background_height(number_of_rows: presenters.size) %>"
+  >
+    <g transform="translate(0, <%= heading_gutter %>)">
+      <rect
+        id="key-benchmark"
+        x="60%"
+        transform="translate(-1, 0)"
+        y="0"
+        width="4"
+        height="100%"
+        fill="black"
+        />
+    </g>
+  </svg>
+
+  <svg
+    id="legend"
+    x="<%= label_width_percentage %>%"
+    y="0"
+    width="<%= graph_width_percentage %>%"
+  >
+    <text
+      class="graph-footer"
+      x="60%"
+      y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
+      text-anchor="middle"
+    >
+      Benchmark
+    </text>
   </svg>
-</div>
+</svg>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index a3c42891..0eac4587 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -2,13 +2,10 @@
   <h2 class="h1 color-white">Areas Of Interest</h2>
 <% end %>
 
-<div class="bg-color-beige mt-4 p-5">
-
-  <div>
-    <h2 class="h1 color-red">Distance from benchmark</h2>
-    <p class="body-large mb-6">This graph shows how much a score is above or below the benchmark of any given scale.</p>
+<div class="card">
+  <div class="mb-5">
+    <h2 class="h2 color-black">Distance from benchmark</h2>
   </div>
 
   <%= render partial: "variance_graph", locals: { presenters: @presenters } %>
-
 </div>
diff --git a/app/views/layouts/sqm/_header.html.erb b/app/views/layouts/sqm/_header.html.erb
index 5b119b30..c6663c2e 100644
--- a/app/views/layouts/sqm/_header.html.erb
+++ b/app/views/layouts/sqm/_header.html.erb
@@ -2,13 +2,9 @@
   <div class="container">
     <div class="row py-4 justify-content-between align-items-center">
       <div class="col d-flex justify-content-start align-items-center">
-        <p class="me-6"><%= link_to image_tag('logo.png', class: 'height-56'), root_path %></p>
-        <p class="me-4">
-          <a class="h3 link <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
-        </p>
-        <p>
-          <a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
-        </p>
+        <%= link_to image_tag('logo.png', class: 'height-56 me-7'), root_path %>
+        <a class="h3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
+        <a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
       </div>
 
       <div class="col d-flex justify-content-end">
diff --git a/app/views/layouts/sqm/application.html.erb b/app/views/layouts/sqm/application.html.erb
index 41e92873..497843a0 100644
--- a/app/views/layouts/sqm/application.html.erb
+++ b/app/views/layouts/sqm/application.html.erb
@@ -30,10 +30,12 @@
   <%= render partial: 'layouts/sqm/header' %>
 </div>
 
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      <%= yield %>
+<div class="bg-color-light-blue">
+  <div class="container">
+    <div class="row">
+      <div class="col mt-7">
+        <%= yield %>
+      </div>
     </div>
   </div>
 </div>