diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index 3430e0f9d8..1b867bdbf4 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -176,16 +176,21 @@
         value: false,
       },
 
+      orderedGroups: {
+        type: Array,
+      },
+
       cards: {
         type: Object,
       },
     },
 
     observers: [
-      'updateCards(columns, states, showIntroduction, panelVisible, viewVisible)',
+      'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
     ],
 
-    updateCards: function (columns, states, showIntroduction, panelVisible, viewVisible) {
+    updateCards: function (columns, states, showIntroduction, panelVisible, viewVisible,
+      orderedGroups) {
       /* eslint-disable no-console */
       if (!panelVisible || !viewVisible) {
         return;
@@ -194,12 +199,12 @@
         'updateCards', function () {
           // Things might have changed since it got scheduled.
           if (this.panelVisible && this.viewVisible) {
-            this.cards = this.computeCards(columns, states, showIntroduction);
+            this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
           }
         }.bind(this), 10);
     },
 
-    computeCards: function (columns, states, showIntroduction) {
+    computeCards: function (columns, states, showIntroduction, orderedGroups) {
       var hass = this.hass;
 
       var cards = {
@@ -287,14 +292,20 @@
         });
       }
 
-      var sorted = window.HAWS.splitByGroups(states);
+      var splitted = window.HAWS.splitByGroups(states);
+      if (orderedGroups) {
+        splitted.groups.sort((gr1, gr2) => orderedGroups[gr1.entity_id] -
+          orderedGroups[gr2.entity_id]);
+      } else {
+        splitted.groups.sort((gr1, gr2) => gr1.attributes.order - gr2.attributes.order);
+      }
 
       var badgesColl = {};
       var beforeGroupColl = {};
       var afterGroupedColl = {};
 
-      Object.keys(sorted.ungrouped).forEach(function (key) {
-        var state = sorted.ungrouped[key];
+      Object.keys(splitted.ungrouped).forEach(function (key) {
+        var state = splitted.ungrouped[key];
         var domain = computeDomain(state);
 
         if (domain === 'a') {
@@ -332,7 +343,7 @@
         addEntitiesCard(domain.domain, domain.states);
       });
 
-      sorted.groups.forEach(function (groupState) {
+      splitted.groups.forEach(function (groupState) {
         var entities = window.HAWS.getGroupEntities(states, groupState);
         addEntitiesCard(
           groupState.entity_id,
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 244d9eafd6..0c15658916 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -111,6 +111,7 @@
           columns='[[_columns]]'
           hass='[[hass]]'
           panel-visible='[[panelVisible]]'
+          ordered-groups='[[orderedGroups]]'
         ></ha-cards>
 
         <template is='dom-repeat' items='[[views]]'>
@@ -120,6 +121,7 @@
             columns='[[_columns]]'
             hass='[[hass]]'
             panel-visible='[[panelVisible]]'
+            ordered-groups='[[orderedGroups]]'
           ></ha-cards>
         </template>
 
@@ -196,6 +198,11 @@ Polymer({
       computed: 'computeViewStates(currentView, hass, defaultView)',
     },
 
+    orderedGroups: {
+      type: Array,
+      computed: 'computeOrderedGroups(currentView, hass, defaultView)',
+    },
+
     showTabs: {
       type: Boolean,
       value: false,
@@ -326,6 +333,10 @@ Polymer({
     this.views = views;
   },
 
+  isView: function (currentView, defaultView) {
+    return currentView || defaultView;
+  },
+
   /*
     Compute the states to show for current view.
 
@@ -339,7 +350,7 @@ Polymer({
     var entityIds = Object.keys(hass.states);
 
     // If we base off all entities, only have to filter out hidden
-    if (!currentView && !defaultView) {
+    if (!this.isView(currentView, defaultView)) {
       states = {};
       for (i = 0; i < entityIds.length; i++) {
         entityId = entityIds[i];
@@ -350,6 +361,7 @@ Polymer({
           states[entityId] = state;
         }
       }
+
       return states;
     }
 
@@ -372,5 +384,23 @@ Polymer({
 
     return states;
   },
+
+  /*
+    Compute the ordered list of groups for this view
+  */
+  computeOrderedGroups: function (currentView, hass, defaultView) {
+    if (!this.isView(currentView, defaultView)) {
+      return null;
+    }
+
+    var orderedGroups = {};
+    var entitiesList = hass.states[currentView || this.DEFAULT_VIEW_ENTITY_ID].attributes.entity_id;
+
+    for (var i = 0; i < entitiesList.length; i++) {
+      orderedGroups[entitiesList[i]] = i;
+    }
+
+    return orderedGroups;
+  },
 });
 </script>