diff --git a/assets/app.js b/assets/app.js
index df993f8..fde98e3 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -9,7 +9,7 @@ const getTemplates = () => {
         })
         .then(function(templates) {
             populateTemplates(templates);
-            getTemplateHtml(templates[0].id, templates[0].primary_color, templates[0].secondary_color);
+            getTemplateHtml(templates[0].id, templates[0].colors);
         });
 };
 
@@ -20,14 +20,15 @@ const populateTemplates = templates => {
        button.setAttribute("class", "themebtn");
        button.setAttribute('id', template.id);
        button.addEventListener("click", () => {
-           getTemplateHtml(template.id, template.primary_color, template.secondary_color);
+           getTemplateHtml(template.id, template.colors);
        });
        button.textContent = template.name + ' (by ' + template.author + ')';
        templatesContainer.appendChild(button);
     });
 };
 
-const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
+const getTemplateHtml = (template, colors = []) => {
+    var i, option_html;
     document.getElementById('iframe').src = "about:blank";
     fetch('template/'+template+'.html')
     .then(function(response) {
@@ -36,13 +37,20 @@ const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ff
     .then(function(html) {
         html = parseContent(html);
         document.getElementById('iframe').contentWindow.document.write(html);
-        primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
-        applyColor(primary_elements, primary_color);
-
-        secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
-        applyColor(secondary_elements, secondary_color);
-        document.getElementById("primary").value = primary_color
-        document.getElementById("secondary").value = secondary_color
+        document.getElementById('themeclrs').classList.add("hidden");
+        if(colors.length > 0)
+        {
+            document.getElementById('themeclrs').classList.remove("hidden");
+            document.getElementById("color_selection").value = colors[0].default;
+        }
+        document.getElementById("object_selection").innerHTML = "";
+        for (i = 0; i < colors.length; i++) { 
+            color = colors[i]
+            elements = document.getElementById('iframe').contentWindow.document.getElementById(color.id);
+            option_html = "<option data-color='" + color.default + "' data-target='" + color.id + "' >" + color.name + "</option>";
+            document.getElementById("object_selection").innerHTML += option_html;
+            applyColor(elements, color.default);
+        }
     });
 };
 
@@ -87,23 +95,24 @@ const loadPlaceholder = () => {
 };
 
 const changeColor = (el) => {
-    color = el.value
-    iframe_doc = document.getElementById('iframe').contentWindow.document
-    if(el.id == "primary")
-    {
-        divs = iframe_doc.getElementsByClassName("primary_color")
-    }
-    else
-    {
-        divs = iframe_doc.getElementsByClassName("secondary_color")
-    }
-    applyColor(divs, color);
+    color = el.value;
+    iframe_doc = document.getElementById('iframe').contentWindow.document;
+    target_option = document.getElementById('object_selection');
+    target_id = target_option.options[target_option.selectedIndex].getAttribute("data-target");
+    div = iframe_doc.getElementById(target_id);
+    applyColor(div, color);
 };
 
-const applyColor = (elements, color) => {
-    var i;
-    for (i = 0; i < elements.length; i++) { 
-      elements[i].style["background-color"] = color;
+const changeSelectedColor = (el) => {
+    target_option = document.getElementById('object_selection');
+    target_color = target_option.options[target_option.selectedIndex].getAttribute("data-color");
+    document.getElementById("color_selection").value = target_color;
+};
+
+const applyColor = (element, color) => {
+    if(element != null && element != undefined)
+    {
+        element.style["background-color"] = color;
     }
 };
 
diff --git a/assets/css.css b/assets/css.css
index 1a97272..d82abf0 100644
--- a/assets/css.css
+++ b/assets/css.css
@@ -37,4 +37,8 @@ input[type=text] {
 	background-color: #E9E9E9;
 	height: 100vh;
 	width: 85vw;
+}
+
+.hidden {
+	display: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f0fddc3..b9ce939 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,8 @@
         
         <link rel="stylesheet" href="assets/css.css">
     </head>
-	<body>
+	<body bgcolor="#E6E6FA">
+		
         <!-- Sidebar -->
         <nav>
             <!-- Buttons for changing theme -->
@@ -21,8 +22,12 @@
             <!-- Colour inputs -->
             <div id="themeclrs">
                 <h2>Colours</h2>
-                <input type="color" class="themeclr" id="primary" onchange="changeColor(this)">
-                <input type="color" class="themeclr" id="secondary" onchange="changeColor(this)">
+                <select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(this)">
+                    <option>Choose an object</option>
+                </select>
+                <input type="color" class="themeclr" id="color_selection" onchange="changeColor(this)">
+
+                <!-- <input type="color" class="themeclr" id="secondary" onchange="changeColor(this)"> -->
             </div>
             <div id="inputs">
                 <h2>Values</h2>
@@ -45,4 +50,4 @@
         <script type="text/javascript" src="assets/app.js"></script>
 	</body>
 </html>
-    
\ No newline at end of file
+    
diff --git a/template/color_test.html b/template/color_test.html
index 62a6de9..8726da0 100644
--- a/template/color_test.html
+++ b/template/color_test.html
@@ -18,9 +18,9 @@
 
   
 </head>
-  <body class="primary_color">
+  <body id="primary_color">
 
-    <div class="secondary_color">
+    <div id="secondary_color">
       <h1><span id="sitename">rep_SNAME</span> will be back soon!</h1>
       <div>
           <p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We&rsquo;ll be back online shortly!</p>
diff --git a/templates.json b/templates.json
index a5053d4..04dc3c5 100644
--- a/templates.json
+++ b/templates.json
@@ -17,8 +17,23 @@
   {
     "id": "color_test",
     "name": "Color Test",
-    "author": "ovidThomas",
-    "primary_color":  "#f5f5dd", 
-    "secondary_color": "#fec1cb"
+    "author": "OvidiuToma",
+    "colors": [
+      {
+        "id": "primary_color",
+        "name": "Main bg",
+        "default": "#f5f5dd"
+      }, 
+      {
+        "id": "secondary_color",
+        "name": "Block bg",
+        "default": "#fec1cb"
+     }
+    ]
+  },
+  {
+    "id": "typewriter",
+    "name": "Typewriter",
+    "author": "macno"
   }
-]
\ No newline at end of file
+]