diff --git a/flower-card.js b/flower-card.js
index 3a7bfa1..66734de 100644
--- a/flower-card.js
+++ b/flower-card.js
@@ -33,8 +33,10 @@ class FlowerCard extends cardTools.LitElement {
       height: 72px;
     }
     .header > img {
+      border-radius: 50%;
       width: 88px;
-      border-radius: var(--ha-card-border-radius, 2px);
+      height: 88px;
+      object-fit: cover;
       margin-left: 16px;
       margin-right: 16px;
       margin-top: -32px;
@@ -84,6 +86,37 @@ class FlowerCard extends cardTools.LitElement {
       margin-left: 8px;
       margin-right: 8px;
     }
+
+    .tooltip {
+      position: relative;
+    }
+    .tooltip:after {
+      opacity: 0;
+      visibility: hidden;
+      position: absolute;
+      content: attr(data-tooltip);
+      padding: 6px 10px;
+      top: 1.4em;
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-180%);
+              transform: translateX(-50%) translateY(-180%);
+      background: grey;
+      color: white;
+      white-space: nowrap;
+      z-index: 2;
+      border-radius: 2px;
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+    }
+    .tooltip:hover:after, .tooltip:active:after {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transform: translateX(-50%) translateY(-200%);
+              transform: translateX(-50%) translateY(-200%);
+    }
+    
     `;
   }
 
@@ -93,10 +126,14 @@ class FlowerCard extends cardTools.LitElement {
     if(!this.stateObj)
       return cardTools.LitHtml``;
 
-    const attribute = (icon, val, min, max) => {
+    const attribute = (icon, attr, min, max) => {
+      const unit = this.stateObj.attributes.unit_of_measurement_dict[attr];
+      const val = this.stateObj.attributes[attr];
       const pct = 100*Math.max(0, Math.min(1, (val-min)/(max-min)));
       return cardTools.LitHtml`
-        <div class="attribute">
+        <div class="attribute tooltip"
+        data-tooltip="${val + " "+ unit + " | " + min + " ~ " + max + " " + unit}"
+        @click="${() => cardTools.moreInfo(this.stateObj.attributes.sensors[attr])}">
           <ha-icon .icon="${icon}"></ha-icon>
           <div class="meter red">
             <span
@@ -133,12 +170,12 @@ class FlowerCard extends cardTools.LitElement {
     <div class="divider"></div>
 
     <div class="attributes">
-    ${attribute('mdi:thermometer', this.stateObj.attributes.temperature, Flower[4], Flower[5])}
-    ${attribute('mdi:white-balance-sunny', this.stateObj.attributes.brightness, Flower[2], Flower[3])}
+    ${attribute('mdi:thermometer', 'temperature', Flower[4], Flower[5])}
+    ${attribute('mdi:white-balance-sunny', 'brightness', Flower[2], Flower[3])}
     </div>
     <div class="attributes">
-    ${attribute('mdi:water-percent', this.stateObj.attributes.moisture, Flower[6], Flower[7])}
-    ${attribute('mdi:leaf', this.stateObj.attributes.conductivity, Flower[8], Flower[9])}
+    ${attribute('mdi:water-percent', 'moisture', Flower[6], Flower[7])}
+    ${attribute('mdi:leaf', 'conductivity', Flower[8], Flower[9])}
     </div>
 
     </ha-card>