diff --git a/app/experimenter/static/css/experimenter.css b/app/experimenter/static/css/experimenter.css
index a319c0df2..844cbea34 100644
--- a/app/experimenter/static/css/experimenter.css
+++ b/app/experimenter/static/css/experimenter.css
@@ -1,48 +1,55 @@
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
 body {
   background-color: #F8F8F8;
   color: #212121;
 }
 
+.light-text {
+  font-weight: lighter;
+}
+
+.no-padding {
+  padding: 0px;
+}
+
 #header {
-  height: 60px;
   background: #002d5a;
   color: #dedede;
   fill: #dedede;
+  padding: 10px 0px;
   box-shadow: 0 2px 10px 0 rgba(6, 6, 6, 0.3);
 }
 
-#experimenter_logo {
-  margin-top: 14px;
+#site-logo {
+  font-size: 30px;
   font-weight: lighter;
   transition: color ease-in-out .15s, fill ease-in-out .15s;
 }
 
-#experimenter_logo:hover {
+#site-logo:hover {
   color: #fff;
   fill: #fff;
 }
 
-#header a {
-  color: #dedede;
-  text-decoration: none;
-}
-
-#header a:hover {
-  color: #dedede;
-}
-
-#header_icon_svg {
+#site-icon {
   height: 30px;
   margin-bottom: -4px;
   margin-right: -3px;
 }
 
-#header #header_right {
-  margin-top: 14px;
-}
-
-#header #header_right a {
-  margin-left: 5px;
+#header-user-name {
+  display: inline-block;
+  height: 34px;
+  line-height: 34px;
 }
 
 footer {
@@ -50,17 +57,12 @@ footer {
   margin-bottom: 20px;
 }
 
-#content_header {
+#content-header {
   margin-top: 15px;
   font-size: 28px;
-  font-weight: lighter;
 }
 
-#projects-list a {
-  text-decoration: none;
-}
-
-.project {
+.tile {
   margin-top: 15px;
   margin-bottom: 15px;
   box-shadow: 0 2px 5px 0 rgba(12, 12, 13, 0.1);
@@ -69,11 +71,15 @@ footer {
   background-color: white;
 }
 
-.project:hover {
+.tile:hover {
   box-shadow: 0 3px 8px 0 rgba(6, 6, 6, 0.2);
+
+.card-preview {
+  padding: 0px;
+}
 }
 
-.project-image {
+.tile-image {
   height: 300px;
   background-repeat: no-repeat;
   background-size: cover;
@@ -84,12 +90,12 @@ footer {
   padding-top: 60px;
 }
 
-.project-default-image {
+.tile-default-image {
   width: 50%;
   opacity: 0.1;
 }
 
-.project-info {
+.tile-info {
   padding: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
@@ -97,11 +103,11 @@ footer {
   border-bottom-left-radius: 5px;
 }
 
-.project_experiment_name {
+.tile-name {
   margin-bottom: 4px;
 }
 
-.project_experiment_count {
+.tile-subheader {
   text-transform: uppercase;
   font-weight: normal;
   color: #888;
@@ -110,11 +116,7 @@ footer {
   margin-top: 0px;
 }
 
-.project-name {
-  font-weight: normal;
-}
-
-.experiment {
+.card {
   margin-top: 10px;
   margin-bottom: 10px;
   box-shadow: 0 2px 5px 0 rgba(12, 12, 13, 0.1);
@@ -125,22 +127,15 @@ footer {
   padding-right: 0px;
 }
 
-.experiment:hover {
+.card:hover {
   box-shadow: 0 3px 8px 0 rgba(6, 6, 6, 0.2);
 }
 
-.experiment-preview {
-  padding-left: 0px;
-  padding-right: 0px;
-  margin-left: 0px;
-  border-radius: 5px;
-}
-
-.experiment-status {
+.card-status {
   border-top-left-radius: 5px;
 }
 
-.experiment-status h4 {
+.card-status h4 {
   padding: 10px;
   margin-top: 0px;
   margin-left: 10px;
@@ -148,68 +143,51 @@ footer {
   color: white;
 }
 
-.experiment-status-Created {
+.card-status-Created {
   background-color: #00c5ff;
 }
 
-.experiment-status-Pending {
+.card-status-Pending {
   background-color: #ffa21e;
 }
 
-.experiment-status-Accepted {
+.card-status-Accepted {
   background-color: #ffa21e;
 }
 
-.experiment-status-Launched {
+.card-status-Launched {
   background-color: #34c834;
 }
 
-.experiment-status-Complete {
+.card-status-Complete {
   background-color: #1c81d8;
 }
 
-.experiment-status-Rejected {
+.card-status-Rejected {
   background-color: #e9433e;
 }
 
-.experiment-image {
+.card-image {
   text-align: center;
 }
 
-.experiment-image img {
+.card-image img {
   opacity: 0.1;
   width: 180px;
 }
 
-.experiment-overview {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-.experiment-overview h4{
+.card-title {
   background-color: #EFEFEF;
   margin-top: 0px;
   margin-bottom: 0px;
   padding: 10px 20px;
 }
 
-.experiment-objectives {
+.card-content {
+  padding: 10px 20px;
+}
+
+.card-content-body {
   overflow: hidden;
   max-height: 120px;
 }
-
-.experiment-population {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-.experiment-population h4 {
-  border-top-right-radius: 5px;
-  background-color: #EFEFEF;
-  margin: 0px;
-  padding: 10px 20px;
-}
-
-.experiment-content {
-  padding: 10px 20px;
-}
diff --git a/app/experimenter/templates/base.html b/app/experimenter/templates/base.html
index 1ab8fa73f..029c7f001 100644
--- a/app/experimenter/templates/base.html
+++ b/app/experimenter/templates/base.html
@@ -27,40 +27,36 @@
       <div class="container">
         <div class="row">
           <div class="col-md-6">
-            <a href="{% url "projects-list" %}">
-              <h2 id="experimenter_logo">
-                <svg id="header_icon_svg" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="GLYPH"><path d="M16,0L1.565,8v16L16,32l14.435-8V8L16,0z M24.237,20.565L16,25.131l-8.237-4.565v-9.131L16,6.869l8.237,4.565V20.565z"/><polygon points="10.364,12.877 16,9.753 21.636,12.877 21.636,19.123 16,22.247 10.364,19.123  "/></g>
-                </svg>
-                Mozilla Experimenter
-              </h2>
+            <a id="site-logo" href="{% url "projects-list" %}">
+              <svg id="site-icon" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="GLYPH"><path d="M16,0L1.565,8v16L16,32l14.435-8V8L16,0z M24.237,20.565L16,25.131l-8.237-4.565v-9.131L16,6.869l8.237,4.565V20.565z"/><polygon points="10.364,12.877 16,9.753 21.636,12.877 21.636,19.123 16,22.247 10.364,19.123  "/></g>
+              </svg>
+              Mozilla Experimenter
             </a>
           </div>
-          <div class="col-md-6 text-right">
-            <div id="header_right">
-              {{ request.user }}
-              <a target="_blank" href="https://github.com/mozilla/experimenter/issues/new">
-                <button class="btn btn-success">Feedback</button>
-              </a>
-            </div>
+          <div id="header-user-info" class="col-md-6 text-right">
+            <span id="header-user-name">{{ request.user }}</span>
+            <a class="btn btn-success" target="_blank" href="https://github.com/mozilla/experimenter/issues/new">
+              Feedback
+            </a>
           </div>
         </div>
       </div>
     </div>
 
-    <div id="content_body" class="container">
+    <div class="container">
       {% block content %}
       {% endblock %}
     </div>
 
     <footer>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 text-center">
-          <hr/>
-          © Mozilla Corporation 2017
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 text-center">
+            <hr/>
+            © Mozilla Corporation 2017
+          </div>
         </div>
       </div>
-    </div>
     </footer>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
diff --git a/app/experimenter/templates/projects/detail.html b/app/experimenter/templates/projects/detail.html
index 3db5d2d75..327cdc0b6 100644
--- a/app/experimenter/templates/projects/detail.html
+++ b/app/experimenter/templates/projects/detail.html
@@ -3,44 +3,44 @@
 {% load static %}
 
 {% block content %}
-  <div id="content_header" class="row">
-    <div class="project-name col-md-6">
+  <div id="content-header" class="row">
+    <div class="col-md-6">
       {{ object.name }}
     </div>
-    <div class="col-md-6 text-right">
+    <div class="col-md-6 text-right light-text">
       {{ object.experiments.count }} Experiment{{ object.experiments.count|pluralize }}
     </div>
   </div>
-  <div id="experiments_list" class="row">
+  <div id="card-list" class="row">
     {% for experiment in object.experiments.most_recently_changed %}
-      <div class="experiment col-md-12">
-        <div class="experiment-preview col-md-2">
-          <div class="experiment-status experiment-status-{{ experiment.status }}">
+      <div class="card col-md-12">
+        <div class="no-padding col-md-2">
+          <div class="card-status card-status-{{ experiment.status }}">
             <h4>{{ experiment.status }}</h4>
           </div>
-          <div class="experiment-image">
+          <div class="card-image">
             <img src="{% static "imgs/experiment.svg" %}" />
           </div>
         </div>
-        <div class="experiment-overview col-md-7">
-          <h4>{{ experiment.name }}</h4>
-          <div class="experiment-content">
+        <div class="no-padding col-md-7">
+          <h4 class="card-title">{{ experiment.name }}</h4>
+          <div class="card-content">
             <p>
               <strong>
                 {{ experiment.changes.latest }}
               </strong>
             </p>
-            <p class="experiment-objectives">{{ experiment.objectives }}</p>
+            <p class="card-content-body">{{ experiment.objectives }}</p>
           </div>
         </div>
-        <div class="experiment-population col-md-3">
-          <h4>
+        <div class="no-padding col-md-3">
+          <h4 class="card-title">
             {{ experiment.population_percent|stringformat:"17g" }}% of
             Firefox 
             {{ experiment.firefox_version }}
             {{ experiment.firefox_channel }} 
           </h4>
-          <div class="experiment-content">
+          <div class="card-content">
             <p>
               <strong>
                 {{ experiment.control.ratio }} 
@@ -49,7 +49,7 @@
                 Variant
               </strong>
             </p>
-            <p>{{ experiment.client_matching }}</p>
+            <p class="card-content-body">{{ experiment.client_matching }}</p>
           </div>
         </div>
       </div>
diff --git a/app/experimenter/templates/projects/list.html b/app/experimenter/templates/projects/list.html
index e5755a236..4934c7754 100644
--- a/app/experimenter/templates/projects/list.html
+++ b/app/experimenter/templates/projects/list.html
@@ -3,27 +3,27 @@
 {% load static %}
 
 {% block content %}
-  <div id="content_header" class="row">
+  <div id="content-header" class="row">
     <div class="col-md-12 text-right">
       <span id="projects_count">{{ object_list.count }} Project{{ object_list.count|pluralize }}</span>
     </div>
   </div>
-  <div id="projects-list" class="row">
+  <div class="row">
     {% for project in object_list %}
       <div class="col-md-4">
         <a href="{% url "projects-detail" slug=project.slug %}">
-          <div class="project">
+          <div class="tile">
             {% if project.image %} 
-              <div class="project-image" style="background-image: url({{ project.image.url }})">
+              <div class="tile-image" style="background-image: url({{ project.image.url }})">
               </div>
             {% else %}
-              <div class="project-image">
-                <img class="project-default-image" src="{% static "imgs/project.svg" %}" />
+              <div class="tile-image">
+                <img class="tile-default-image" src="{% static "imgs/project.svg" %}" />
               </div>
             {% endif %}
-            <div class="project-info">
-              <h4 class="project_experiment_name">{{ project.name }}</h4>
-              <h5 class="project_experiment_count">{{ project.experiments.count }} experiment{{ project.experiments.count|pluralize }}</h5>
+            <div class="tile-info">
+              <h4 class="tile-name">{{ project.name }}</h4>
+              <h5 class="tile-subheader">{{ project.experiments.count }} experiment{{ project.experiments.count|pluralize }}</h5>
             </div>
           </div>
         </a>