diff --git a/homeassistant/components/http/www_static/polymer/components/state-info.html b/homeassistant/components/http/www_static/polymer/components/state-info.html
index ac7268a9ae9..ddd696fd235 100755
--- a/homeassistant/components/http/www_static/polymer/components/state-info.html
+++ b/homeassistant/components/http/www_static/polymer/components/state-info.html
@@ -1,11 +1,10 @@
-<script src="../bower_components/moment/moment.js"></script>
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="state-badge.html">
 
-<polymer-element name="state-info" attributes="stateObj">
+<polymer-element name="state-info" attributes="stateObj" noscript>
   <template>
     <style>
     state-badge {
@@ -38,21 +37,11 @@
 
         <div class="time-ago">
           <core-tooltip label="{{stateObj.last_changed}}" position="bottom">
-            {{lastChangedFromNow(stateObj.last_changed)}}
+            {{stateObj.relativeLastChanged}}
           </core-tooltip>
         </div>
         
       </div>
     </div>
   </template>
-
-  <script>
-  Polymer({
-
-    lastChangedFromNow: function(lastChanged) {
-      return moment(lastChanged, "HH:mm:ss DD-MM-YYYY").fromNow();
-    }
-
-  });
-  </script>
 </polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-api.html b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
index 1a904d1a644..fb8dc40d51d 100644
--- a/homeassistant/components/http/www_static/polymer/home-assistant-api.html
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
@@ -1,3 +1,5 @@
+<script src="bower_components/moment/moment.js"></script>
+
 <link rel="import" href="bower_components/polymer/polymer.html">
 <link rel="import" href="bower_components/paper-toast/paper-toast.html">
 
@@ -6,6 +8,28 @@
 <link rel="import" href="dialogs/state-set-dialog.html">
 <link rel="import" href="dialogs/state-card-dialog.html">
 
+<script>
+  var ha = {};
+  ha.util = {};
+
+  ha.util.parseTime = function(timeString) {
+    return moment(timeString, "HH:mm:ss DD-MM-YYYY");
+  };
+
+  ha.util.relativeTime = function(timeString) {
+    return ha.util.parseTime(timeString).fromNow();    
+  };
+
+  PolymerExpressions.prototype.relativeHATime = function(timeString) {
+    return ha.util.relativeTime(timeString);
+  };
+
+  PolymerExpressions.prototype.HATimeStripDate = function(timeString) {
+    return timeString.split(' ')[0];
+  };
+
+</script>
+
 <polymer-element name="home-assistant-api" attributes="auth">
   <template>
     <paper-toast id="toast" role="alert" text=""></paper-toast>
@@ -15,6 +39,7 @@
     <state-card-dialog id="stateCardDialog" api={{api}}></state-card-dialog>
   </template>
   <script>
+  var domainsWithMoreInfo = ['light', 'group', 'sun'];
 
   State = function(json, api) {
       this.api = api;
@@ -77,13 +102,20 @@
     // how to render the more info of this state
     moreInfoType: {
       get: function() {
-        if(this.domain === 'light' || this.domain === 'group') {
+        if(domainsWithMoreInfo.indexOf(this.domain) !== -1) {
           return this.domain;
         } else {
           return 'default';
         }
       }
-    }
+    },
+
+    relativeLastChanged: {
+      get: function() {
+        return ha.util.relativeTime(this.last_changed);
+      }
+    },
+
   });
 
   Polymer({
diff --git a/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html b/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
index 16d336daadb..59dc6623599 100644
--- a/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
+++ b/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
@@ -3,6 +3,7 @@
 <link rel="import" href="more-info-default.html">
 <link rel="import" href="more-info-light.html">
 <link rel="import" href="more-info-group.html">
+<link rel="import" href="more-info-sun.html">
 
 <polymer-element name="more-info-content" attributes="api stateObj" noscript>
 <template>
@@ -26,6 +27,13 @@
     </more-info-group>
   </template>
 
+  <template id="more-info-sun">
+    <more-info-sun
+      api="{{api}}"
+      stateObj="{{stateObj}}">
+    </more-info-sun>
+  </template>
+
   <template id="more-info-default">
     <more-info-default stateObj="{{stateObj}}"></more-info-default>
   </template>
diff --git a/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html b/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html
new file mode 100644
index 00000000000..9bf74b104b9
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html
@@ -0,0 +1,66 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<polymer-element name="more-info-sun" attributes="stateObj api">
+<template>
+  <style>
+    .data-entry {
+      margin-bottom: 8px;
+    }
+
+    .data-entry:last-child {
+      margin-bottom: 0;
+    }
+
+    .data {
+      text-align: right;      
+    }
+
+    .time-ago {
+      color: darkgrey;
+      margin-top: -2px;
+    }
+  </style>
+
+  <div layout vertical id='sunData'>
+
+    <div layout justified horizontal class='data-entry' id='rising'>
+      <div>
+        Rising {{stateObj.attributes.next_rising | relativeHATime}}
+      </div>
+      <div class='data'>
+        {{stateObj.attributes.next_rising | HATimeStripDate}}
+      </div>
+    </div>
+
+    <div layout justified horizontal class='data-entry' id='setting'>
+      <div>
+        Setting {{stateObj.attributes.next_setting | relativeHATime}}
+      </div>
+      <div class='data'>
+        {{stateObj.attributes.next_setting | HATimeStripDate}}
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+Polymer({
+
+  observe: {
+    'stateObj.attributes': 'setOrder'
+  },
+
+  setOrder: function() {
+    var rising = ha.util.parseTime(this.stateObj.attributes.next_rising);
+    var setting = ha.util.parseTime(this.stateObj.attributes.next_setting);
+
+    if(rising > setting) {
+      this.$.sunData.appendChild(this.$.rising);
+    } else {
+      this.$.sunData.appendChild(this.$.setting);
+    }
+  }
+
+});
+</script>
+</polymer-element>