diff --git a/client/Accounts/UserMgmt/userInfoModal.js b/client/Accounts/UserMgmt/userInfoModal.js
index c98e961..43519af 100644
--- a/client/Accounts/UserMgmt/userInfoModal.js
+++ b/client/Accounts/UserMgmt/userInfoModal.js
@@ -10,13 +10,16 @@ Template.userInfoModal.onRendered(function() {
     Session.set("userEmailErr", false);
     Session.set("userRoleErr", false);
 
-    Meteor.setTimeout(() => {
-        var elems = document.querySelectorAll('.modal');
-        var instances = M.Modal.init(elems, {});
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
 
-        var elemse = document.querySelectorAll('select');
-        var instancese = M.FormSelect.init(elemse, {});
-    }, 350);
+    var elemse = document.querySelectorAll('select');
+    var instancese = M.FormSelect.init(elemse, {});
+
+    Meteor.setTimeout(() => {
+        instances = M.Modal.init(elems, {});
+        instancese = M.FormSelect.init(elemse, {});
+    }, 500);
 });
 
 Template.userInfoModal.helpers({
diff --git a/client/General/headerBar.html b/client/General/headerBar.html
index ba6ce7a..8893ed9 100644
--- a/client/General/headerBar.html
+++ b/client/General/headerBar.html
@@ -11,6 +11,7 @@
               <li><a href="#" id="mylists" class="navBtn">My Lists</a></li>
               <li><a href="#" id="mymenus" class="navBtn">My Menus</a></li>
               <li><a href="#" id="myTasks" class="navBtn">My Tasks</a></li>
+              <li><a href="#" class="navBtn" id="mySettings">My Settings</a></li>
               {{#if isInRole 'systemadmin'}}
                 <li><a href="#" id="manage" class="navBtn">Manage</a></li>
               {{/if}}
@@ -26,6 +27,7 @@
         <li><a href="#!" id="mylists" class="navBtn">My Lists</a></li>
         <li><a href="#!" id="mymenus" class="navBtn">My Menus</a></li>
         <li><a href="#!" id="myTasks" class="navBtn">My Tasks</a></li>
+        <li><a href="#!" class="navBtn" id="mySettings">My Settings</a></li>
         {{#if isInRole 'systemadmin'}}
           <li><a href="#!" id="manage" class="navBtn">Manage</a></li>
         {{/if}}
diff --git a/client/MainLayout.js b/client/MainLayout.js
index ef2bcff..b86cf0c 100644
--- a/client/MainLayout.js
+++ b/client/MainLayout.js
@@ -9,7 +9,7 @@ Template.MainLayout.onRendered(function() {
         let myId = Meteor.userId();
         let myprefs = UserConfig.findOne({ user: myId });
         if (typeof myprefs != 'undefined') {
-            if (myprefs.darkPref == "light") {
+            if (myprefs.darkMode == "light") {
                 console.log("Found theme as light");
                 // Session.set("myTheme", "light");
                 document.documentElement.setAttribute('theme', "light");
diff --git a/client/UserConfig/userConfig.html b/client/UserConfig/userConfig.html
index 853b4f8..7cdf124 100644
--- a/client/UserConfig/userConfig.html
+++ b/client/UserConfig/userConfig.html
@@ -1,3 +1,21 @@
 <template name="userConfig">
-
+    <h4>My Settings</h4>
+    <div class="row">
+        <div class="col s12 m6 l4">
+            <div class="card">
+                <div class="card-content">
+                  <span class="card-title">Dark / Light Mode</span>
+                  <div class="switch">
+                    <label>
+                      Light
+                      <input type="checkbox" id="darkMode">
+                      <span class="lever"></span>
+                      Dark
+                    </label>
+                  </div>
+                </div>
+              </div>
+        </div>
+    </div>
+    {{> snackbar}}
 </template>
\ No newline at end of file
diff --git a/client/UserConfig/userConfig.js b/client/UserConfig/userConfig.js
index 8a77971..8afff09 100644
--- a/client/UserConfig/userConfig.js
+++ b/client/UserConfig/userConfig.js
@@ -5,7 +5,15 @@ Template.userConfig.onCreated(function() {
 });
 
 Template.userConfig.onRendered(function() {
-
+    let myConfig = UserConfig.findOne({ user: Meteor.userId() });
+    if (typeof myConfig != 'undefined') {
+        console.log("My Pref: " + myConfig.darkPref);
+        if (myConfig.darkMode == 'light') {
+            $("#darkMode").prop('checked', false);
+        } else {
+            $("#darkMode").prop('checked', true);
+        }
+    }
 });
 
 Template.userConfig.helpers({
@@ -13,5 +21,24 @@ Template.userConfig.helpers({
 });
 
 Template.userConfig.events({
-
+    'click #darkMode' (event) {
+        let darkModePref = $("#darkMode").prop('checked');
+        if (darkModePref == true) {
+            Meteor.call('update.darkModePref', 'dark', function(err, reuslt) {
+                if (err) {
+                    console.log("    ERROR: could not set dark mode preference to dark: " + err);
+                } else {
+                    showSnackbar("Dark Mode Preference Set to Dark", "green");
+                }
+            });
+        } else {
+            Meteor.call('update.darkModePref', 'light', function(err, result) {
+                if (err) {
+                    console.log("    ERROR: could not set dark mode preference to light: " + err);
+                } else {
+                    showSnackbar("Dark Mode Preference Set to Light", "green");
+                }
+            });
+        }
+    },
 });
\ No newline at end of file
diff --git a/imports/api/userConfig.js b/imports/api/userConfig.js
index 76ca937..354230a 100644
--- a/imports/api/userConfig.js
+++ b/imports/api/userConfig.js
@@ -32,11 +32,20 @@ Meteor.methods({
             throw new Meteor.Error('Not able to change registration setting. Make sure you are logged in with valid system administrator credentials.');
         }
 
-        return UserConfig.update({ user: this.userId }, {
-            $set: {
-                darkMode: pref,
-                dateUpdate: Date()
-            }
-        });
+        let myConfig = UserConfig.findOne({ user: this.userId });
+        if (typeof myConfig == 'undefined') {
+            Meteor.call('add.darkModePref', pref, function(err, result) {
+                if (err) {
+                    console.log("    ERROR calling the add functioin for dark mode: " + err);
+                } 
+            });
+        } else {
+            return UserConfig.update({ user: this.userId }, {
+                $set: {
+                    darkMode: pref,
+                    dateUpdate: Date()
+                }
+            });
+        }
     }
 });
\ No newline at end of file
diff --git a/lib/routes.js b/lib/routes.js
index c48e24c..6071936 100644
--- a/lib/routes.js
+++ b/lib/routes.js
@@ -122,4 +122,11 @@ FlowRouter.route('/cleanUp', {
     action() {
         BlazeLayout.render('MainLayout', { main: 'cleanUp'});
     }
+});
+
+FlowRouter.route('/mySettings', {
+    name: 'mySettings',
+    action() {
+        BlazeLayout.render('MainLayout', { main: 'userConfig'});
+    }
 });
\ No newline at end of file