diff --git a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
index 234293a..6a3750a 100644
--- a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
+++ b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
@@ -17,6 +17,20 @@
     color: #666;
     padding: 20px 4px 0 4px;
 }
+.boxes-nodes-medium .boxes-node {
+    width: 30px;
+    height: 30px;
+    font-size: 50%;
+    padding: 10px 2px 0 2px;
+    margin: 0 2px 2px 0;
+}
+.boxes-nodes-small .boxes-node {
+    width: 15px;
+    height: 15px;
+    font-size: 25%;
+    padding: 5px 1px 0 1px;
+    margin: 0 1px 1px 0;
+}
 .boxes-available-roles {
     border-radius: 4px;
     border: 1px dashed #666;
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/index.html b/tuskar_boxes/templates/tuskar_boxes/overview/index.html
index ea9fd49..346f2fa 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/index.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/index.html
@@ -67,7 +67,7 @@
                 {% endif %}
             {% endfor %}
         </div>
-        <div class="boxes-nodes">
+        <div class="boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
             {% for node in nodes %}{% spaceless %}
                 <div class="boxes-node boxes-role-{{ node.role_slug }}"></div>
             {% endspaceless %}{% endfor %}
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 2bae742..22ab9fd 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
@@ -79,7 +79,7 @@
               </ul>
             </div>
         </div>
-        <div class="col-xs-7 boxes-nodes">
+        <div class="col-xs-7 boxes-nodes {% if flavor.nodes|length >= 100 %}boxes-nodes-small{% elif flavor.nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
             {% for node in flavor.nodes %}{% spaceless %}
             {% include "tuskar_boxes/overview/_node_info.html" with node=node %}
             {% endspaceless %}{% endfor %}
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html
index 44518c0..f8ff324 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html
@@ -20,7 +20,7 @@
       </div>
   {% endfor %}
   </div>
-  <div class="col-xs-7 boxes-nodes">
+  <div class="col-xs-7 boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
       {% for node in nodes %}{% spaceless %}
       <div class="boxes-node boxes-role-{{ node.role_slug }} status-{{ node.state_slug }}" title="{{ node.uuid }}">
         <i class="fa fa-lg {{ node.state_icon }}"></i>