diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index e489684e83..429adeeae1 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -6,3 +6,4 @@
 <link rel="import" href="state-card-configurator.html">
 <link rel="import" href="state-card-scene.html">
 <link rel="import" href="state-card-media_player.html">
+<link rel="import" href="state-card-rollershutter.html">
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index adc3eb4800..2e7f72f5af 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -8,6 +8,7 @@ require('./state-card-thermostat');
 require('./state-card-configurator');
 require('./state-card-scene');
 require('./state-card-media_player');
+require('./state-card-rollershutter');
 
 export default new Polymer({
   is: 'state-card-content',
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
new file mode 100644
index 0000000000..667d872df2
--- /dev/null
+++ b/src/state-summary/state-card-rollershutter.html
@@ -0,0 +1,28 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-rollershutter">
+  <style>
+  :host {
+    line-height: 1.5;
+  }
+
+  .state {
+    margin-left: 16px;
+    text-align: right;
+  }
+
+  </style>
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>
+        <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:arrow-down" on-tap='onMoveDownTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:stop" on-tap='onStopTap'></paper-icon-button>
+      </div>
+    </div>
+  </template>
+</dom-module>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
new file mode 100644
index 0000000000..ff77e83a5a
--- /dev/null
+++ b/src/state-summary/state-card-rollershutter.js
@@ -0,0 +1,30 @@
+import { serviceActions } from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+export default new Polymer({
+  is: 'state-card-rollershutter',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  onMoveUpTap() {
+    serviceActions.callService('rollershutter', 'move_up',
+                               {entity_id: this.stateObj.entityId});
+  },
+
+  onMoveDownTap() {
+    serviceActions.callService('rollershutter', 'move_down',
+                               {entity_id: this.stateObj.entityId});
+  },
+
+  onStopTap() {
+    serviceActions.callService('rollershutter', 'stop',
+                               {entity_id: this.stateObj.entityId});
+  },
+});
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 851ea7d097..65b951580f 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -46,6 +46,9 @@ export default function domainIcon(domain, state) {
   case 'updater':
     return 'mdi:cloud-upload';
 
+  case 'rollershutter':
+    return 'mdi:blinds';
+
   case 'scene':
     return 'mdi:google-pages';
 
diff --git a/src/util/state-card-type.js b/src/util/state-card-type.js
index c1032fb598..b457aa4507 100644
--- a/src/util/state-card-type.js
+++ b/src/util/state-card-type.js
@@ -1,7 +1,7 @@
 import canToggle from './can-toggle';
 
 const DOMAINS_WITH_CARD = [
-  'thermostat', 'configurator', 'scene', 'media_player'];
+  'thermostat', 'configurator', 'scene', 'media_player', 'rollershutter'];
 
 export default function stateCardType(state) {
   if (DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {