diff --git a/src/cards/ha-badges-card.html b/src/cards/ha-badges-card.html
index a272dc5df7..67b69895d6 100644
--- a/src/cards/ha-badges-card.html
+++ b/src/cards/ha-badges-card.html
@@ -4,6 +4,12 @@
 
 <dom-module id='ha-badges-card'>
   <template>
+    <style>
+      ha-state-label-badge {
+        display: inline-block;
+        margin-bottom: var(--ha-state-label-badge-margin-bottom, 16px);
+      }
+    </style>
     <template is='dom-repeat' items='[[states]]'>
       <ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
     </template>
diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index 2e5d589b28..232165258f 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -215,7 +215,7 @@
       // Find column with < 5 entities, else column with lowest count
       function getIndex(size) {
         var minIndex = 0;
-        for (i = minIndex; i < entityCount.length; i++) {
+        for (i = 0; i < entityCount.length; i++) {
           if (entityCount[i] < 5) {
             minIndex = i;
             break;
@@ -229,6 +229,7 @@
 
         return minIndex;
       }
+
       if (showIntroduction) {
         cards.columns[getIndex(5)].push({
           hass: hass,
@@ -262,7 +263,7 @@
         });
 
         // Add 1 to the size if we're rendering entities card
-        size += other.length > 1;
+        size += other.length > 0;
 
         curIndex = getIndex(size);
 
diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index 7fd428d9da..47df5cbeb8 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -8,7 +8,6 @@
       display: inline-block;
       text-align: center;
       vertical-align: top;
-      margin-bottom: 16px;
     }
     .label-badge {
       position: relative;