diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 2cf438b..0a20f58 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -169,6 +169,21 @@ Template.registerHelper('myClasses', () => {
     }
 });
 
+Template.registerHelper('pref', (val) => {
+    if(Object.keys(Meteor.user().profile.preferences).length !== Object.keys(defaults).length) {
+        var array = Meteor.user().profile;
+        array.preferences = defaults;
+        Session.set("serverData",array);
+        sendData("editProfile");
+        if(val === 'timeHide') return defaults[val];
+        return defaults[val].charAt(0).toUpperCase() + defaults[val].slice(1);
+    } else {
+        var preferences = Meteor.user().profile.preferences;
+        if(val === 'timeHide') return preferences[val];
+        return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
+    }
+});
+
 Template.main.helpers({
     schoolName() {
         return " - " + Meteor.user().profile.school;
@@ -401,20 +416,6 @@ Template.main.helpers({
                currClass.banned.indexOf(Meteor.userId()) !== -1
               ) return true;
         }
-    },
-    pref(val) {
-        if(Object.keys(Meteor.user().profile.preferences).length !== Object.keys(defaults).length) {
-            var array = Meteor.user().profile;
-            array.preferences = defaults;
-            Session.set("serverData",array);
-            sendData("editProfile");
-            if(val === 'timeHide') return defaults[val];
-            return defaults[val].charAt(0).toUpperCase() + defaults[val].slice(1);
-        } else {
-            var preferences = Meteor.user().profile.preferences;
-            if(val === 'timeHide') return preferences[val];
-            return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
-        }
     }
 });
 
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index 2c42106..86f04d8 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -660,4 +660,14 @@
 
 #privSubmit:hover {
 	background-color: rgba(0,0,0,0.1);
+}
+
+#profPreferences {
+	width: 30%;
+	float: left;
+	border-top: 5px solid #409333;
+}
+
+#preferences {
+	padding: 5%;
 }
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index c2bf901..6ff6fec 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -19,7 +19,7 @@
 						<div>
 							<div>
 							<p class="profTitle">Grade:</p>
-							<span class="change radio" opc="0" op="0" re="readonly" id="grade">{{grade}}</span>
+							<span class="change radio" re="readonly" id="grade">{{grade}}</span>
 							</div>
 				            <div class="profOptions" style="background-color:{{divColor 'header'}}">
 			                  	<p class="profOptionText">9th</p>
@@ -117,19 +117,19 @@
 						            </div>
 						            <div class="formDiv">
 							            <p class="profTitle">Privacy:</p>
-						              	<input class="creInput radio op" type="text" name="privacy" opc="1" op="1" readonly>
+						              	<input class="creInput radio op" type="text" name="privacy" readonly>
 						              	<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
-						                  	<p class="profOptionText">Public</p>
-						                  	<p class="profOptionText">Private</p>
+						                  	<p class="profOptionText cre">Public</p>
+						                  	<p class="profOptionText cre">Private</p>
 						              	</div>
 					              	</div>
 					              	<div class="formDiv">
 							            <p class="profTitle">Category:</p>
-						              	<input class="creInput radio op" type="text" name="category" opc="1" op="2" readonly>
+						              	<input class="creInput radio op" type="text" name="category" readonly>
 						              	<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
-						                  	<p class="profOptionText">Class</p>
-						                  	<p class="profOptionText">Club</p>
-						                  	<p class="profOptionText">Other</p>
+						                  	<p class="profOptionText cre">Class</p>
+						                  	<p class="profOptionText cre">Club</p>
+						                  	<p class="profOptionText cre">Other</p>
 						              	</div>
 							        </div>
 						        </div>
@@ -139,6 +139,46 @@
 						</div>
 					</div>
 				</div>
+				<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
+					<h3 class="profHea">Preferences</h3>
+					<div id="preferences">
+			            <div>
+			                <div class="inputRadio">
+			                <p class="profTitle">Theme:</p>
+			                <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
+			                </div>
+			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+			                    <p class="profOptionText">Light</p>
+			                    <p class="profOptionText">Dark</p>
+			                </div>
+			            </div>
+			            <br>
+			            <div>
+			                <div class="inputRadio">
+			                <p class="profTitle">Default Mode:</p>
+			                <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
+			                </div>
+			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+			                    <p class="profOptionText">Classes</p>
+			                    <p class="profOptionText">Calendar</p>
+			                </div>
+			            </div>
+			            <br>
+			            <div>
+			                <div  class="inputRadio">
+			                <p class="profTitle">Hide Homework:</p>
+			                <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
+			                </div>
+			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+			                    <p class="profOptionText">1 Day</p>
+			                    <P class="profOptionText">2 Days</p>
+			                    <p class="profOptionText">1 Week</p>
+			                    <p class="profOptionText">1 Month</p>
+			                    <p class="profOptionText">Never</p>
+			                </div>
+			            </div>
+			        </div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
index 328a7ea..e44b731 100644
--- a/hourglass/client/profile/profile.js
+++ b/hourglass/client/profile/profile.js
@@ -7,7 +7,6 @@
 Session.set("profInputOpen", null);
 Session.set("profClassTab", "manClass");
 Session.set("modifying", null);
-Session.set("radioDiv", null);
 Session.set("notsearching", true);
 Session.set("confirm", null);
 Session.set("serverData", null);
@@ -268,17 +267,13 @@ Template.profile.events({
             closeInput(sessval);
         }
         if (!event.target.className.includes("radio") &&
-        !Session.equals("radioDiv", null) &&
         !event.target.parentNode.className.includes("profOptions") &&
-            event.target.readOnly !== true) {
-            var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString();
+        event.target.readOnly !== true) {
             for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) {
                 try {
                     closeDivFade(document.getElementsByClassName("profOptions")[i]);
                 } catch (err) {}
             }
-            Session.set("radioDiv", null);
-            Session.set("radioOffset", null);
         }
         if(!document.getElementById("createdClasses").contains(event.target) &&
         Session.get("code") !== null &&
@@ -328,23 +323,30 @@ Template.profile.events({
     },
     'click .radio' (event) { // Click on an input that has a drop-down menu
         var op = event.target;
-        Session.set("radioDiv", op.getAttribute("op"));
-        Session.set("radioOffset", op.getAttribute("opc"));
         try {
             for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) {
                 var curr = document.getElementsByClassName("profOptions")[i];
-                if (Session.get("radioDiv") !== i.toString()) {
+                if (curr.childNodes[1] !== op.nextSibling.nextSibling.childNodes[1] 
+                    && curr.childNodes[1] !== op.parentNode.parentNode.childNodes[3].childNodes[1]) {
                     closeDivFade(document.getElementsByClassName("profOptions")[i]);
                 }
             }
         } catch (err) {}
-        openDivFade(document.getElementsByClassName("profOptions")[op.getAttribute("op")]);
+
+        if(event.target.className.includes("op")) {
+            openDivFade(op.nextSibling.nextSibling);  
+        } else {
+            openDivFade(op.parentNode.parentNode.childNodes[3]);
+        }
     },
     'click .profOptionText' (event) { // When someone selects "drop-down item"
         var sessval = Session.get("modifying");
         var p = event.target;
-        var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
-        var input = document.getElementsByClassName("op")[opnum];
+        if(p.className.includes("cre")) {
+            var input = p.parentNode.parentNode.childNodes[3]
+        } else {
+            var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
+        }
         input.value = p.childNodes[0].nodeValue;
         try {
             closeInput(sessval);
@@ -352,8 +354,6 @@ Template.profile.events({
 
         closeDivFade(p.parentNode);
         input.focus();
-        Session.set("radioDiv", null);
-        Session.set("radioOffset", null);
     },
     'click .addClass' () {        
         var functionHolder = document.getElementById("profClassInfoHolder");
@@ -568,11 +568,7 @@ Template.profile.events({
 });
 
 function openDivFade(div) {
-    if (div.className === "profOptions") {
-        div.style.display = "inline-block";
-    } else {
-        div.style.display = "block";
-    }
+    div.style.display = "block";
     div.style.opacity = "0";
     setTimeout(function() {
         div.style.opacity = "1";
@@ -617,7 +613,11 @@ function getProfileData() {
     profile.grade = parseInt(gradein.substring(gradein.length - 2, gradein));
     profile.avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
     profile.banner = document.getElementById("profBanner").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
-    profile.preferences = Meteor.user().profile.preferences;
+    profile.preferences = {
+        "theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
+        "mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
+        "timeHide":document.getElementById("prefHide").childNodes[0].nodeValue
+    };
 
     return profile;
 }