diff --git a/src/components/UI/card/Card.css b/src/components/UI/card/Card.css
index 67dd471b..000dfe40 100644
--- a/src/components/UI/card/Card.css
+++ b/src/components/UI/card/Card.css
@@ -3,6 +3,7 @@
 .card {
   composes: base container rounded depth;
   overflow: hidden;
+  border: 1px solid #F7F8F8;
 }
 
 .card > *:not(iframe, video, img, header, footer) {
diff --git a/src/components/UI/theme.css b/src/components/UI/theme.css
index e4f0ea10..4032f7ad 100644
--- a/src/components/UI/theme.css
+++ b/src/components/UI/theme.css
@@ -1,30 +1,27 @@
 :root {
   --defaultColor: #333;
-  --defaultColorLight: #eee;
+  --defaultColorLight: #fff;
   --backgroundColor: #fff;
   --backgroundColorShaded: #eee;
-  --shadowColor: rgba(0, 0, 0, .25);
+  --shadowColor: rgba(19, 39, 48, .12);
   --infoColor: #69c;
   --successColor: #1c7;
   --warningColor: #fa0;
   --errorColor: #f52;
-  --textColor: #272e30;
-  --borderRadius: 2px;
-  --borderRadiusLarge: 10px;
-  --dropShadow:
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  --textColor: #191919;
+  --borderRadius: 4px;
+  --borderRadiusLarge: 8px;
+  --dropShadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
-  --backgroundAltColor: #272e30;
+  --backgroundAltColor: #191919;
   --textFieldBorderColor: #e7e7e7;
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
   --highlightFGAltColor: #eee;
   --controlLabelColor: var(--textColor);
   --controlBGColor: #fff;
-  --backgroundTertiaryColor: #f2f5f4;
+  --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
 }
 
@@ -42,7 +39,7 @@
 }
 
 .depth {
-  box-shadow: var(--shadowColor) 0 1px 6px;
+  box-shadow: var(--dropShadow);
 }
 
 .clearfix:after {
diff --git a/src/index.css b/src/index.css
index 0c66dcd8..cbfa2c28 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,6 @@ html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  font-family: Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
 }
 
 *, *:before, *:after {
@@ -13,15 +12,16 @@ html {
 }
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   height: 100%;
-  background-color: #f2f5f4;
+  background-color: #fff;
   color: #7c8382;
   margin: 0;
 }
 
 h1, h2, h3, h4, h5, h6, p {
   margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 h1 {