diff --git a/src/css/main.css b/src/css/main.css
index 1656574..6e8976d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -22,6 +22,19 @@ html, body {
   bottom: 0;
   top: 0;
   position: absolute;
+  background-color: rgb(255, 250, 233);
+}
+
+.scheme-red {
+  background-color: #ff7373;
+}
+
+.scheme-green {
+  background-color: #65E17B;
+}
+
+.scheme-blue {
+  background-color: #6899d3;
 }
 
 .jiggly {
diff --git a/src/css/page-help.css b/src/css/page-help.css
index e1fe48e..50607fb 100644
--- a/src/css/page-help.css
+++ b/src/css/page-help.css
@@ -12,7 +12,6 @@
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #help-header {
diff --git a/src/css/page-main.css b/src/css/page-main.css
index 8679d71..1daf149 100644
--- a/src/css/page-main.css
+++ b/src/css/page-main.css
@@ -23,7 +23,6 @@
 }
 
 #page-main {
-  background-color: rgb(255, 250, 233); /*(240, 100%, 99%);*/
   overflow: auto;
   top: 0;
   bottom: 0;
diff --git a/src/css/page-options.css b/src/css/page-options.css
index fc0f88c..dcfc34a 100644
--- a/src/css/page-options.css
+++ b/src/css/page-options.css
@@ -16,7 +16,6 @@ a, .tabbar a {
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #options-header {
@@ -157,3 +156,24 @@ a, .tabbar a {
     width: auto;
     height: 30px;
 }
+
+.color-item {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+}
+
+.color-scheme #color-scheme-red {
+  background-color: #ff7373;
+  border: 1px solid #ff4040;
+}
+
+.color-scheme #color-scheme-green {
+  background-color: #65E17B;
+  border: 1px solid #38E156;
+}
+
+.color-scheme #color-scheme-blue {
+  background-color: #6899d3;
+  border: 1px solid #4284d3;
+}
diff --git a/src/js/templates.js b/src/js/templates.js
index 98b8c58..be7302f 100644
--- a/src/js/templates.js
+++ b/src/js/templates.js
@@ -137,6 +137,13 @@ __p+='<textarea class="searchbar" placeholder="Search">'+
 }
 return __p;
 };
+ListIt.templates['options/color-scheme'] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
+with(obj||{}){
+__p+='<h3>Change Your Color Scheme</h3>\n<ul class="color-scheme hlist">\n  <li class="color-item" id="color-scheme-red"></li>\n  <li class="color-item" id="color-scheme-green"></li>\n  <li class="color-item" id="color-scheme-blue"></li>\n</ul>';
+}
+return __p;
+};
 ListIt.templates['options/importexport'] = function(obj){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
 with(obj||{}){
diff --git a/src/js/views/color-scheme.js b/src/js/views/color-scheme.js
new file mode 100644
index 0000000..4b7c45a
--- /dev/null
+++ b/src/js/views/color-scheme.js
@@ -0,0 +1,37 @@
+(function(L) {
+  'use strict';
+
+  L.views.ColorSchemeView = Backbone.View.extend({
+    id: 'options-color-scheme',
+    className: 'options-item', 
+    render: function() {
+      this.$el.html(L.templates["options/color-scheme"]());
+      return this;
+    },
+
+    events: {
+      'click #color-scheme-red': 'red',
+      'click #color-scheme-blue': 'blue',
+      'click #color-scheme-green': 'green'
+    },
+
+    red: function(event){
+      L.pages['options'].change_color("scheme-red");
+      // L.pages['help'].change_color("scheme-red");
+      // L.pages['main'].change_color("scheme-red");
+    },
+
+    blue: function(event){
+      L.pages['options'].change_color("scheme-blue");
+      // L.pages['help'].change_color("scheme-blue");
+      // L.pages['main'].change_color("scheme-blue");
+    },
+
+    green: function(event){
+      L.pages['options'].change_color("scheme-green");
+      // L.pages['help'].change_color("scheme-green");
+      // L.pages['main'].change_color("scheme-green");
+    }
+
+  });
+})(ListIt);
\ No newline at end of file
diff --git a/src/js/views/help.js b/src/js/views/help.js
index c3d65ab..161e7ed 100644
--- a/src/js/views/help.js
+++ b/src/js/views/help.js
@@ -19,6 +19,10 @@
       }
 
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);
diff --git a/src/js/views/main.js b/src/js/views/main.js
index c4b16d0..ae27b9f 100644
--- a/src/js/views/main.js
+++ b/src/js/views/main.js
@@ -34,6 +34,10 @@
         view.render();
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);
diff --git a/src/js/views/options.js b/src/js/views/options.js
index adef333..63fc0a1 100644
--- a/src/js/views/options.js
+++ b/src/js/views/options.js
@@ -17,7 +17,8 @@
           new L.views.ServerView({model: L.server}),
           new L.views.InfoView(),
           new L.views.PreferencesView({model: L.preferences}),
-          new L.views.ImportExportView()
+          new L.views.ImportExportView(),
+          new L.views.ColorSchemeView()
         ];
       }
     },
@@ -29,6 +30,10 @@
         body.append(panel.render().el);
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 
diff --git a/src/templates/options/color-scheme.html b/src/templates/options/color-scheme.html
new file mode 100644
index 0000000..a59927b
--- /dev/null
+++ b/src/templates/options/color-scheme.html
@@ -0,0 +1,6 @@
+<h3>Change Your Color Scheme</h3>
+<ul class="color-scheme hlist">
+  <li class="color-item" id="color-scheme-red"></li>
+  <li class="color-item" id="color-scheme-green"></li>
+  <li class="color-item" id="color-scheme-blue"></li>
+</ul>
\ No newline at end of file