diff --git a/app/assets/javascripts/admin/routes/admin-badges-index.js.es6 b/app/assets/javascripts/admin/routes/admin-badges-index.js.es6
new file mode 100644
index 00000000000..84a5bee571b
--- /dev/null
+++ b/app/assets/javascripts/admin/routes/admin-badges-index.js.es6
@@ -0,0 +1,23 @@
+import { emojiUrlFor } from "discourse/lib/text";
+
+const badgeIntroLinks = [
+  {
+    text: "admin.badges.badge_intro.what_are_badges_title",
+    href: "https://meta.discourse.org/t/32540",
+    icon: "book"
+  },
+  {
+    text: "admin.badges.badge_intro.badge_query_examples_title",
+    href: "https://meta.discourse.org/t/18978",
+    icon: "book"
+  }
+];
+
+export default Ember.Route.extend({
+  setupController(controller) {
+    controller.setProperties({
+      badgeIntroLinks,
+      badgeIntroEmoji: emojiUrlFor("woman_student:t4")
+    });
+  }
+});
diff --git a/app/assets/javascripts/admin/templates/badges-index.hbs b/app/assets/javascripts/admin/templates/badges-index.hbs
index c0abf3f991f..ebeb2d56439 100644
--- a/app/assets/javascripts/admin/templates/badges-index.hbs
+++ b/app/assets/javascripts/admin/templates/badges-index.hbs
@@ -1,9 +1,16 @@
-{{#d-section class="current-badge content-body"}}
-  <p>{{i18n 'admin.badges.none_selected'}}</p>
-
-  <div>
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
-    {{/link-to}}
+{{#d-section class="current-badges"}}
+  <div class="badge-intro">
+    <img src={{badgeIntroEmoji}} class="badge-intro-emoji">
+    <div class="content-wrapper">
+      <h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>
+      <div class="external-resources">
+        {{#each badgeIntroLinks as |link|}}
+          <a href={{link.href}} class="external-link" target="_blank">
+            {{d-icon link.icon}}
+            <span>{{I18n link.text}}</span>
+          </a>
+        {{/each}}
+      </div>
+    </div>
   </div>
-{{/d-section}}
+{{/d-section}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/badges.hbs b/app/assets/javascripts/admin/templates/badges.hbs
index 04b60d10e20..398a5c08fca 100644
--- a/app/assets/javascripts/admin/templates/badges.hbs
+++ b/app/assets/javascripts/admin/templates/badges.hbs
@@ -1,25 +1,26 @@
 <div class="badges">
-
+  <div class="badges-header">
+    <h3 class="badges-heading">{{i18n 'admin.badges.title'}}</h3>
+    <div class="create-new-badge">
+      {{#link-to 'adminBadges.show' 'new' class="btn btn-primary"}}
+        {{d-icon "plus"}}
+        <span>{{i18n 'admin.badges.new'}}</span>
+      {{/link-to}}
+    </div>
+  </div>
   <div class='content-list'>
-    <h3>{{i18n 'admin.badges.title'}}</h3>
-    <ul>
+    <ul class="admin-badge-list">
       {{#each model as |badge|}}
-      <li>
-        {{#link-to 'adminBadges.show' badge.id}}
-          {{badge-button badge=badge}}
-          {{#if badge.newBadge}}
-            <span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
-          {{/if}}
-        {{/link-to}}
-      </li>
+        <li class="admin-badge-list-item">
+          {{#link-to 'adminBadges.show' badge.id}}
+            {{badge-button badge=badge}}
+            {{#if badge.newBadge}}
+              <span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
+            {{/if}}
+          {{/link-to}}
+        </li>
       {{/each}}
     </ul>
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
-    {{/link-to}}
-    <br>
-    <br>
   </div>
-
   {{outlet}}
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
index 279a805cbc2..9e639f74a97 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
@@ -1,30 +1,30 @@
-{{#d-modal-body title="admin.badges.badge_groupings.modal_title"}}
-  <div>
-    <ul class='badge-groupings'>
-    {{#each workingCopy as |wc|}}
-      <li class="badge-grouping-item">
-        <div class="badge-grouping">
-          {{#if wc.editing}}
-            {{input value=wc.name class="badge-grouping-name-input"}}
-            <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
-          {{else}}
-            {{wc.displayName}}
-          {{/if}}
-        </div>
-        <div class='actions'>
-          <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon "pencil-alt"}}</button>
-          <button {{action "up" wc}} class="btn no-text">{{d-icon 'toggle-up'}}</button>
-          <button {{action "down" wc}} class="btn no-text">{{d-icon 'toggle-down'}}</button>
-          <button {{action "delete" wc}} class="btn no-text btn-danger" disabled={{wc.system}}>{{d-icon 'times'}}</button>
-        </div>
-      </li>
-    {{/each}}
+{{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
+  <div class="badge-groupings">
+    <ul class='badge-groupings-list'>
+      {{#each workingCopy as |wc|}}
+        <li class="badge-grouping-item">
+          <div class="badge-grouping">
+            {{#if wc.editing}}
+              {{input value=wc.name class="badge-grouping-name-input"}}
+              <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
+            {{else}}
+              <span>{{wc.displayName}}</span>
+            {{/if}}
+          </div>
+          <div class='actions'>
+            <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil-alt'}}</button>
+            <button {{action "up" wc}} class="btn no-text">{{d-icon 'chevron-up'}}</button>
+            <button {{action "down" wc}} class="btn no-text">{{d-icon 'chevron-down'}}</button>
+            <button {{action "delete" wc}} class="btn no-text btn-danger"
+             disabled={{wc.system}}>{{d-icon 'times'}}</button>
+          </div>
+        </li>
+      {{/each}}
     </ul>
   </div>
-  <button class='btn' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
+  <button class='btn new-badge-grouping' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
 {{/d-modal-body}}
-
 <div class="modal-footer">
   <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
   {{d-modal-cancel close=(route-action "closeModal")}}
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 399226d7699..ee8b99cd842 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -1,31 +1,95 @@
 // Styles for admin/badges
-
-// Badges area
-.badges {
-  .content-list ul {
-    margin-bottom: 10px;
-    .list-badge {
-      float: right;
-      font-size: $font-down-1;
-      font-weight: normal;
-      padding: 0 6px;
-      color: $secondary;
-      background-color: $tertiary-medium;
-      border-radius: 3px;
+.admin-badges {
+  // flex page layout
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    .badges-header {
+      display: flex;
+      align-items: center;
+      flex: 1 0 100%;
+      .create-new-badge {
+        margin-left: auto;
+      }
+    }
+    .badge-intro {
+      display: inline-flex;
+      flex: 0 1 50%;
+    }
+    .content-list {
+      flex: 0 0 27%;
+    }
+    .current-badges {
+      display: flex;
+      justify-content: center;
+      flex: 1 1 72%;
+    }
+  }
+  .badges-header {
+    padding: 10px 0;
+    border-top: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
+    .badges-heading {
+      margin: 0;
+      padding: 0 10px;
+    }
+  }
+  .content-list {
+    .admin-badge-list {
+      height: 70vh;
+      overflow-y: scroll;
+      border-right: 1px solid $primary-low;
+      border-left: 1px solid $primary-low;
+      border-bottom: 1px solid $primary-low;
+      .admin-badge-list-item {
+        &:first-child {
+          border-top: none;
+        }
+        &:last-child {
+          border-top: none;
+        }
+      }
+      .list-badge {
+        float: right;
+        font-size: $font-down-1;
+        font-weight: normal;
+        padding: 0 6px;
+        color: $secondary;
+        background-color: $tertiary-medium;
+        border-radius: 3px;
+      }
+    }
+    .user-badge {
+      border: none;
+      background-color: unset;
+    }
+  }
+  .badge-intro {
+    margin-top: 10%;
+    .badge-intro-emoji {
+      // it's an emoji so we want fixed deminsions
+      height: 55px;
+      width: 55px;
+      margin-top: 5px;
+      margin-right: 5px;
+      flex: 0 0 auto; // IE flex fix
+    }
+    .external-link {
+      display: block;
+      margin-bottom: 5px;
     }
   }
   .current-badge {
     margin: 20px;
     p.help {
       margin: 0;
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      margin-top: 5px;
+      color: $primary-medium;
       font-size: $font-down-1;
     }
-
     .badge-grouping-control {
       display: flex;
       align-items: center;
-
       .badge-selector {
         margin-right: 5px;
       }
@@ -35,19 +99,12 @@
     .ace-wrapper {
       position: relative;
       height: 270px;
-      margin-bottom: 10px;
       .ace_editor {
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
-        border: 1px solid #e9e9e9;
-        border-radius: 3px;
-        .ace_gutter {
-          border-right: 1px solid #e9e9e9;
-          background: #f4f4f4;
-        }
       }
       &[data-disabled="true"] {
         cursor: not-allowed;
@@ -60,10 +117,6 @@
         }
       }
     }
-    .delete-link {
-      margin-left: 15px;
-      margin-top: 5px;
-    }
     textarea {
       height: 200px;
     }
@@ -71,7 +124,7 @@
   .current-badge-actions {
     margin: 10px;
     padding: 10px;
-    border-top: 1px solid dark-light-choose($primary-low, $secondary-high);
+    border-top: 1px solid $primary-low;
   }
   .buttons {
     float: left;
@@ -85,33 +138,40 @@
   }
 }
 
+// badge-grouping modal
+.badge-groupings-modal {
+  .badge-groupings {
+    margin-bottom: 10px;
+  }
+  .badge-groupings-list {
+    list-style: none;
+    margin: 0;
+    .badge-grouping-item {
+      border-bottom: 1px solid $primary-low;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 0;
+    }
+    .badge-grouping {
+      .badge-grouping-name-input {
+        margin: 0;
+      }
+    }
+  }
+}
+
+// badge preview modal
 .badge-query-preview {
-  .grant-count,
-  .sample,
-  .error-header {
-    margin-left: 10px;
-  }
-  .badge-errors {
-    font-size: $font-0;
-    line-height: $line-height-medium;
-    padding: 4px;
-    background-color: $primary-low;
-  }
+  .badge-errors,
   .badge-query-plan {
-    font-size: $font-down-1;
-    line-height: $line-height-medium;
-    padding: 4px;
+    padding: 5px;
     background-color: $primary-low;
   }
   .count-warning {
-    background-color: dark-light-diff(
-      rgba($danger, 0.7),
-      $secondary,
-      50%,
-      -60%
-    );
-    margin: 0 0 7px 0;
-    padding: 10px 20px;
+    background-color: $danger-low;
+    margin-bottom: 5px;
+    padding: 10px;
     p {
       margin: 0;
     }
@@ -122,28 +182,29 @@
   }
 }
 
-.badge-groupings {
-  list-style: none;
-  margin: 0;
-  padding: 10px 3px;
-
-  .badge-grouping-item {
-    border-bottom: 1px solid #dfdfdf;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .badge-grouping {
-    .badge-grouping-name-input {
-      margin: 0;
+// mobile specific styles - mostly commmon style overrides
+// TODO move to mobile sheet once mobile view has a seprate template.
+.mobile-view {
+  .admin-badges {
+    .badges {
+      margin: 0 0.25em;
     }
-  }
-
-  .actions {
-    float: right;
-    .btn {
-      padding: 3px 6px;
+    .content-list {
+      flex: 0 0 100%;
+      .admin-badge-list {
+        max-height: 40vh;
+        margin-right: 0;
+      }
+    }
+    .badge-intro {
+      flex: 0 1 75%;
+    }
+    .current-badge {
+      margin: 20px 0;
+      width: 100%;
+    }
+    input[type="text"] {
+      width: 100%;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index f4688ec50cb..79033dda03f 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -8,15 +8,16 @@
   align-items: center;
   background-color: $secondary;
   margin: 0 0 3px;
-  .d-icon {
-    margin-right: 0.25em;
-  }
 
   img {
     height: 16px;
     width: 16px;
   }
 
+  .badge-display-name {
+    margin-left: 0.25em;
+  }
+
   &.badge-type-gold .fa {
     color: $gold !important;
   }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 684a54fea98..2c227b8fbab 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4115,6 +4115,11 @@ en:
             with_post: <span class="username">%{username}</span> for post in %{link}
             with_post_time: <span class="username">%{username}</span> for post in %{link} at <span class="time">%{time}</span>
             with_time: <span class="username">%{username}</span> at <span class="time">%{time}</span>
+        badge_intro:
+          title: 'Select an existing badge or create a new one to get started'
+          what_are_badges_title: 'What are badges?'
+          badge_query_examples_title: 'Badge query examples'
+
 
       emoji:
         title: "Emoji"