diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 284a6e73b6..45b6ecd342 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -24,9 +24,27 @@
 	}
 }
 
-//
-// Mixins
-// --------------------------------------------------
+@mixin list-style($bgColor, $borderColor, $color) {
+  color: $color;
+	background-color: $bgColor;
+	border-color: $borderColor;
+
+  // Give desktop users something to play with
+	&:hover {
+    color: $color;
+    text-decoration: none;
+
+    // TODO: Verify if we should keep this or not. Feels weird on Safari
+    // Since the button shows the hover state after clicking, but we only
+    // want it on desktop
+		//background-color: lighten($bgColor, 10%);
+  }
+	&.active, &:active {
+		background-color: darken($bgColor, 8%);
+    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
+    border-color: darken($borderColor, 10%);
+	}
+}
 
 
 // UTILITY MIXINS
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 85caadc89a..758b5bf957 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2,11 +2,14 @@
 // Brand Colors
 // -------------------------------
 
-$brand-primary:         #428bca;
-$brand-success:         #5cb85c;
-$brand-warning:         #f0ad4e;
-$brand-danger:          #d9534f;
-$brand-info:            #5bc0de;
+$brand-default:            #fff;
+$brand-secondary:            #f5f5f5;
+$brand-primary:         #6999e9;
+$brand-success:         #89c163;
+$brand-warning:         #f0b840;
+$brand-danger:          #de5645;
+$brand-info:            #60d2e6;
+$brand-dark:            #444;
 
 // Scaffolding
 // -------------------------------
@@ -225,6 +228,30 @@ $list-divider-bg:       #f5f5f5;
 $list-divider-color:    #222;
 $list-item-border:      1px solid #ddd;
 
+$list-default-background: $brand-default;
+$list-default-border: #ddd;
+
+$list-secondary-background: $brand-secondary;
+$list-secondary-border: #ddd;
+
+$list-success-background: $brand-success;
+$list-success-border: $brand-success;
+
+$list-primary-background: $brand-primary;
+$list-primary-border: $brand-primary;
+
+$list-info-background: $brand-info;
+$list-info-border: $brand-info;
+
+$list-warning-background: $brand-warning;
+$list-warning-border: $brand-warning;
+
+$list-danger-background: $brand-danger;
+$list-danger-border: $brand-danger;
+
+$list-dark-background: $brand-dark;
+$list-dark-border: $brand-dark;
+
 
 // Form States and Alerts
 // -------------------------------
diff --git a/scss/ionic/_base.scss b/scss/ionic/_base.scss
index c727721e01..96e57b6b49 100644
--- a/scss/ionic/_base.scss
+++ b/scss/ionic/_base.scss
@@ -38,8 +38,9 @@ body {
   right: 0;
   bottom: 0;
   left: 0;
-  height: auto;
   overflow: auto;
+  // TODO: Fix the dynamic content height issue
+  //height: 100%;
 }
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
    Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 982b22e966..8e08ae98f9 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -2,6 +2,12 @@
   // No need to set list-style: none; since .list-item is block level
   margin-bottom: 20px;
   padding-left: 0; // reset padding because ul and ol
+
+  @include list-style($list-default-background, $list-default-border, $gray-dark);
+
+  &.list-success {
+    @include list-style($list-success-background, $list-success-border, $white);
+  }
 }
 
 // Individual list items
@@ -14,7 +20,7 @@
   margin-bottom: -1px;
   padding: 15px 15px;
 
-  //background-color: $list-group-bg;
+  background-color: $list-default-background;
   border: $list-item-border;
 
   // Round the first and last items
@@ -59,6 +65,7 @@
       //color: lighten($list-group-active-bg, 40%);
     }
   }
+
 }
 
 // Linked list items
@@ -81,6 +88,7 @@ a.list-item {
   font-weight: bold;
 }
 
+
 // Custom content options
 // -------------------------