diff --git a/src/app/assets/styles/_color_variables.scss b/src/app/frontend/_variables.scss
similarity index 74%
rename from src/app/assets/styles/_color_variables.scss
rename to src/app/frontend/_variables.scss
index 2d5a07f04a60d53539c626ac9be0bd1ddcca264e..ee0c4758e85e521ca6e6e0f722cfe18ac5cf736f 100644
--- a/src/app/assets/styles/_color_variables.scss
+++ b/src/app/frontend/_variables.scss
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// TODO(floreks): Find appropriate place for global color definitions.
 $primary: #326de6;
 $delicate: #aaa;
 $muted: #888;
@@ -20,6 +19,8 @@ $hover-primary: #1254df;
 $body: #eee;
 $emphasis: #000;
 $content-background: #fff;
-// TODO(bryk): Reference angular_material/src/core/style/variables.scss instead of having
-// this variable here.
-$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, .26) !default;
+
+// TODO(bryk): Get those variables from Angular Material scss files.
+$layout-breakpoint-lg: 1280px;
+$whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+$baseline-grid: 8px;
diff --git a/src/app/frontend/chrome/chrome.html b/src/app/frontend/chrome/chrome.html
index 81f2ea84ed45a148fe9f3358f42afb2e6e3baa91..d6fd31f41c8aa3ee3a487fcc473ced2e07fe7c47 100644
--- a/src/app/frontend/chrome/chrome.html
+++ b/src/app/frontend/chrome/chrome.html
@@ -16,7 +16,7 @@ limitations under the License.
 
 <md-content class="kd-content">
   <md-toolbar class="kd-toolbar">
-    <div class="md-toolbar-tools">
+    <div class="md-toolbar-tools kd-toolbar-tools">
       <a ui-sref="replicasets">
         <md-icon md-svg-icon="assets/images/kubernetes-logo.svg" class="kd-toolbar-logo"></md-icon>
       </a>
@@ -26,5 +26,7 @@ limitations under the License.
       <div flex ui-view="toolbar"></div>
     </div>
   </md-toolbar>
-  <div ng-transclude></div>
+  <div class="kd-app-content-wrapper">
+    <div ng-transclude class="kd-app-content"></div>
+  </div>
 </md-content>
diff --git a/src/app/frontend/chrome/chrome.scss b/src/app/frontend/chrome/chrome.scss
index 62718bc81f1f5b6c519933ad049b9fdef5c80e12..ca651fa9976ccf58349d1ae0c59030bbcac9707c 100644
--- a/src/app/frontend/chrome/chrome.scss
+++ b/src/app/frontend/chrome/chrome.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-toolbar-logo {
   height: 42px;
@@ -21,7 +21,7 @@
 }
 
 .kd-toolbar {
-  box-shadow: $whiteframe-shadow-z1;
+  box-shadow: $whiteframe-shadow-1dp;
 }
 
 body {
@@ -32,3 +32,12 @@ body {
 a {
   text-decoration: inherit;
 }
+
+.kd-toolbar-tools,
+.kd-app-content-wrapper {
+  margin: 0 auto;
+}
+
+.kd-app-content {
+  position: relative;
+}
diff --git a/src/app/frontend/deploy/deploy.scss b/src/app/frontend/deploy/deploy.scss
index 202633a4c19d49acd5d7fdb187ff1190c42401e3..4783a15787dd74e1e86a15f6b34ec56219895d59 100644
--- a/src/app/frontend/deploy/deploy.scss
+++ b/src/app/frontend/deploy/deploy.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-deploy-whiteframe {
   background: $content-background;
diff --git a/src/app/frontend/deploy/helpsection/userhelp.scss b/src/app/frontend/deploy/helpsection/userhelp.scss
index 83b1861f635857f0a292cb9d6182c0b410fa2be0..41b435ed625e5f6533256eaed5c8954abb71d043 100644
--- a/src/app/frontend/deploy/helpsection/userhelp.scss
+++ b/src/app/frontend/deploy/helpsection/userhelp.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../../assets/styles/color_variables';
+@import '../../variables';
 
 .kd-user-help {
   * {
diff --git a/src/app/frontend/replicasetdetail/replicasetdetail.scss b/src/app/frontend/replicasetdetail/replicasetdetail.scss
index 2342068b575417ba0c3d76bba56771adb0912c2c..f3c1d507cb2e34b2dbf524c04a82ae7f999cfddf 100644
--- a/src/app/frontend/replicasetdetail/replicasetdetail.scss
+++ b/src/app/frontend/replicasetdetail/replicasetdetail.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 $replicasetdetails-sidebar-bg: #fafafa;
 $replicasetdetails-border: #ddd;
diff --git a/src/app/frontend/replicasetdetail/sortedheader.scss b/src/app/frontend/replicasetdetail/sortedheader.scss
index a4b965c8534569c0c565e6dad1cd02ececcaaf5e..aacbb5b72697bb631f6e38ee320b6bda0e6e13d8 100644
--- a/src/app/frontend/replicasetdetail/sortedheader.scss
+++ b/src/app/frontend/replicasetdetail/sortedheader.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 $sortedheader-font-size: 14px;
 
diff --git a/src/app/frontend/replicasetlist/replicasetcard.scss b/src/app/frontend/replicasetlist/replicasetcard.scss
index 99e9d811efcee82af1402f2036c1b60a374ff91a..14872b9a4aa7ac584cd760b0c568f062516a51b2 100644
--- a/src/app/frontend/replicasetlist/replicasetcard.scss
+++ b/src/app/frontend/replicasetlist/replicasetcard.scss
@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
-.kd-replicaset-card {        
-  width: 400px;  
+.kd-replicaset-card {
+  margin: $baseline-grid;
+  width: ($layout-breakpoint-lg - (2 * $baseline-grid) * 2) / 3;  
 }
 
 // This override button style to make it look like a link.
@@ -43,7 +44,7 @@
 }
 
 .kd-replicaset-card-section {
-  margin-top: 1em;
+  margin-top: 2 * $baseline-grid;
 }
 
 .kd-replicaset-card-section-image {
@@ -53,7 +54,7 @@
 }
 
 .kd-replicaset-card-label {
-  margin-right: 1em;
+  margin-right: 2 * $baseline-grid;
 }
 
 .kd-menu-logs-md-menu-item {
@@ -75,5 +76,5 @@
 
 .kd-menu-logs-link-icon {
   font-size: 1em;
-  margin-left: 5px;
+  margin-left: $baseline-grid;
 }
diff --git a/src/app/frontend/replicasetlist/replicasetlist.html b/src/app/frontend/replicasetlist/replicasetlist.html
index 367d9105d29c904e09c34c0cfe4deec10f3724b8..d3eaf16d8d88b49071756fdd00552eca84bb7340 100644
--- a/src/app/frontend/replicasetlist/replicasetlist.html
+++ b/src/app/frontend/replicasetlist/replicasetlist.html
@@ -19,6 +19,6 @@ limitations under the License.
 </md-button>
 
 <kd-replica-set-list-container>
-    <kd-replica-set-card ng-repeat="replicaSet in ::ctrl.replicaSets" replica-set="::replicaSet">
-    </kd-replica-set-card>
+  <kd-replica-set-card ng-repeat="replicaSet in ::ctrl.replicaSets" replica-set="::replicaSet">
+  </kd-replica-set-card>
 </kd-replica-set-list-container>
diff --git a/src/app/frontend/replicasetlist/replicasetlist.scss b/src/app/frontend/replicasetlist/replicasetlist.scss
index 741145cd5a441103b3f630ca2c4b72538fe7c8b2..742210eb8185a20c32b8e50eb0f86969e8ab8fbf 100644
--- a/src/app/frontend/replicasetlist/replicasetlist.scss
+++ b/src/app/frontend/replicasetlist/replicasetlist.scss
@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../variables';
+
 .md-fab {
   &.kd-replicaset-deploy {
     position: absolute;
-    right: 5px;
-    top: 28px;
+    right: 0;
+    top: -56px / 2 - $baseline-grid;
   }
 }
diff --git a/src/app/frontend/replicasetlist/replicasetlistcontainer.scss b/src/app/frontend/replicasetlist/replicasetlistcontainer.scss
index b3ccc652267e9f2dd88858a20c2e74bf139a1de4..a7f7b368399f8f258f2dd05dadddd590d09c4a33 100644
--- a/src/app/frontend/replicasetlist/replicasetlistcontainer.scss
+++ b/src/app/frontend/replicasetlist/replicasetlistcontainer.scss
@@ -17,5 +17,5 @@
   align-items: center;
   display: flex;
   flex-flow: column wrap;
-  justify-content: top;  
+  justify-content: top;
 }
diff --git a/src/app/frontend/zerostate/zerostate.scss b/src/app/frontend/zerostate/zerostate.scss
index d70bcb4de11286355c0071ed21b23ea0840a032b..8a88f535713729f47139ff58a00a8f84f0e2ddbf 100644
--- a/src/app/frontend/zerostate/zerostate.scss
+++ b/src/app/frontend/zerostate/zerostate.scss
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-content {
   background-color: $body;