diff --git a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
index c7a4228..5b8fc52 100644
--- a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
+++ b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
@@ -82,7 +82,6 @@ tuskar.boxes = (function () {
           ui.draggable.find('input.boxes-flavor'
               ).val($(this).closest('.boxes-flavor').data('flavor'));
           $count.trigger('change');
-          ui.draggable.find('a[name^=role-edit]').removeClass('hidden');
           window.setTimeout(update_boxes, 0);
         }
     });
@@ -95,7 +94,6 @@ tuskar.boxes = (function () {
           ui.draggable.appendTo(this);
           ui.draggable.find('input.boxes-flavor').val('');
           ui.draggable.find('input.number-picker').trigger('change').val(0);
-          ui.draggable.find('a[name^=role-edit]').addClass('hidden');
           window.setTimeout(update_boxes, 0);
         }
     });
diff --git a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
index 6a3750a..ba9ebd2 100644
--- a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
+++ b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
@@ -38,6 +38,26 @@
     min-width: 120px;
     display: inline-block;
     padding: 4px 0 0 4px;
+    .boxes-role {
+        display: inline-block;
+        text-align: center;
+        width: 120px;
+        margin: 0 4px 4px 0;
+        border: 1px solid #999;
+        background: #eee;
+        color: #666;
+        .deploy-role-icon, .deploy-role-count, .form-control {
+            display: none;
+        }
+        .deploy-role-label {
+            display: block;
+            width: 100%;
+            .deployment-roles-label {
+                margin: 0;
+                font-weight: normal;
+            }
+        }
+    }
 }
 .boxes-role {
     opacity: 0.75;
@@ -53,18 +73,6 @@
 .deploy-role-status .boxes-role {
     cursor: default;
 }
-.boxes-available-roles .boxes-role {
-    display: inline-block;
-    text-align: center;
-    width: 120px;
-    margin: 0 4px 4px 0;
-    border: 1px solid #999;
-    background: #eee;
-    color: #666;
-}
-.boxes-available-roles .boxes-role .form-control {
-    display: none;
-}
 .boxes-role-controller {
     background-color: #fcaf3e;
     border-color: #f57900;
@@ -88,6 +96,7 @@
 .boxes-role .number_picker {
   border-color: inherit;
 }
+.boxes-role .deploy-role-icon a,
 .boxes-role .number_picker,
 .boxes-role .number_picker a {
   color: inherit;
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
new file mode 100644
index 0000000..efe6aed
--- /dev/null
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/_role_info.html
@@ -0,0 +1,26 @@
+{% spaceless %}
+{% load i18n %}
+{% load url from future %}
+{% load form_helpers %}
+<div
+  class="boxes-role-{{ role.name|slugify }} boxes-role"
+  data-name="{{ role.name|slugify }}"
+>
+  <div class="row">
+    <div class="col-xs-3 deploy-role-count">
+      {{ role.field|add_bootstrap_class }}
+      {{ role.flavor_field|add_bootstrap_class }}
+    </div>
+    <div class="col-xs-6 deploy-role-label">
+      <div class="deployment-roles-label">{{ role.name|title }}</div>
+    </div>
+    <div class="col-xs-3 deploy-role-icon">
+      <a name="role-edit-{{role.name|slugify}}"
+      href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
+      class="btn">
+        <b class="fa fa-lg fa-fw fa-pencil"></b>
+      </a>
+    </div>
+  </div>
+</div>
+{% endspaceless %}
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
index 22ab9fd..29869d3 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
@@ -8,18 +8,7 @@
 
 <div class="boxes-available-roles">
 {% for role in free_roles %}{% spaceless %}
-    <div class="boxes-role-{{ role.name|slugify }} boxes-role" data-name="{{ role.name|slugify }}">
-        {{ role.field|add_bootstrap_class }}
-        {{ role.flavor_field|add_bootstrap_class }}
-        {{ role.name|title }}
-      <a
-        name="role-edit-{{role.name|slugify}}"
-        href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
-        class="btn pull-right hidden">
-        <b class="fa fa-lg fa-fw fa-pencil"></b>
-      </a>
-
-    </div>
+  {% include "tuskar_boxes/overview/_role_info.html" with role=role %}
 {% endspaceless %}{% endfor %}
 </div>
 
@@ -51,17 +40,7 @@
         <div class="col-xs-5">
             <div class="boxes-drop-roles">
             {% for role in flavor.roles %}{% spaceless %}
-                <div class="boxes-role-{{ role.name|slugify }} boxes-role" data-name="{{ role.name|slugify }}">
-                    {{ role.field|add_bootstrap_class }}
-                    {{ role.flavor_field|add_bootstrap_class }}
-                    {{ role.name|title }}
-                  <a
-                    name="role-edit-{{role.name|slugify}}"
-                    href="{% url 'horizon:infrastructure:roles:update' role_id=role.id %}"
-                    class="btn pull-right">
-                    <b class="fa fa-lg fa-fw fa-pencil"></b>
-                  </a>
-                </div>
+              {% include "tuskar_boxes/overview/_role_info.html" with role=role %}
             {% endspaceless %}{% endfor %}
             </div>
             <div class="btn-group boxes-drop-group">