diff --git a/js/component/card.js b/js/component/card.js
index a5c4255..44ce2e9 100644
--- a/js/component/card.js
+++ b/js/component/card.js
@@ -6,6 +6,8 @@ beestat.component.card = function() {
 };
 beestat.extend(beestat.component.card, beestat.component);
 
+beestat.component.card.prototype.box_shadow_ = true;
+
 /**
  * [get_class_name_recursive_ description]
  *
@@ -47,12 +49,17 @@ beestat.component.card.prototype.decorate_ = function(parent) {
 
   this.contents_ = $.createElement('div')
     .style({
-      'padding': (beestat.style.size.gutter),
+      'padding': beestat.style.size.gutter,
       'height': '100%',
-      'background': beestat.style.color.bluegray.base
+      'background': beestat.style.color.bluegray.base,
+      'border-radius': beestat.style.size.border_radius
     });
-  parent.appendChild(this.contents_);
 
+  if (this.box_shadow_ === true) {
+    this.contents_.style('box-shadow', '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)');
+  }
+
+  parent.appendChild(this.contents_);
   this.decorate_back_(this.contents_);
 
   var top_right = $.createElement('div').style('float', 'right');
diff --git a/js/component/card/footer.js b/js/component/card/footer.js
index 2177bfa..724530f 100644
--- a/js/component/card/footer.js
+++ b/js/component/card/footer.js
@@ -6,6 +6,8 @@ beestat.component.card.footer = function() {
 };
 beestat.extend(beestat.component.card.footer, beestat.component.card);
 
+beestat.component.card.footer.prototype.box_shadow_ = false;
+
 beestat.component.card.footer.prototype.decorate_contents_ = function(parent) {
   parent.style('background', beestat.style.color.bluegray.light);
 
diff --git a/js/component/card/sensors.js b/js/component/card/sensors.js
index 1a236b2..c4dca84 100644
--- a/js/component/card/sensors.js
+++ b/js/component/card/sensors.js
@@ -51,7 +51,8 @@ beestat.component.card.sensors.prototype.decorate_contents_ = function(parent) {
       .style({
         'display': 'grid',
         'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))',
-        'margin': '0 0 ' + beestat.style.size.gutter + 'px -' + beestat.style.size.gutter + 'px'
+        'margin': '0 0 ' + beestat.style.size.gutter + 'px -' + beestat.style.size.gutter + 'px',
+        'border-radius': beestat.style.size.border_radius
       });
     parent.appendChild(sensor_container);
 
diff --git a/js/component/card/system.js b/js/component/card/system.js
index 3e2750a..8c7d32e 100644
--- a/js/component/card/system.js
+++ b/js/component/card/system.js
@@ -349,7 +349,8 @@ beestat.component.card.system.prototype.decorate_time_to_temperature_ = function
     'background': beestat.style.color.bluegray.dark,
     'padding': beestat.style.size.gutter / 2,
     'text-align': 'center',
-    'margin-top': beestat.style.size.gutter
+    'margin-top': beestat.style.size.gutter,
+    'border-radius': beestat.style.size.border_radius
   });
   parent.appendChild(container);
 
diff --git a/js/component/chart.js b/js/component/chart.js
index 135e860..c6d2262 100644
--- a/js/component/chart.js
+++ b/js/component/chart.js
@@ -573,7 +573,9 @@ beestat.component.chart.prototype.tooltip_formatter_helper_ = function(title, se
   var tooltip = $.createElement('div')
     .style({
       'background-color': beestat.style.color.bluegray.dark,
-      'padding': beestat.style.size.gutter / 2
+      'padding': beestat.style.size.gutter / 2,
+      'border-radius': beestat.style.size.border_radius,
+      'box-shadow': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)'
     });
 
   var title_div = $.createElement('div')
diff --git a/js/component/header.js b/js/component/header.js
index a1d13dc..4f25eb6 100644
--- a/js/component/header.js
+++ b/js/component/header.js
@@ -50,7 +50,7 @@ beestat.component.header.prototype.decorate_ = function(parent) {
     'display': 'flex',
     'align-items': 'center',
     'flex-grow': '1',
-    'margin': '-' + gutter + 'px 0 0 -' + gutter + 'px'
+    'margin': '-' + (gutter / 2) + 'px 0 ' + (gutter / 4) + 'px -' + gutter + 'px'
   });
   parent.appendChild(row);