diff --git a/web/app/templates/settings/edit_general_settings.html.j2 b/web/app/templates/settings/edit_general_settings.html.j2
index 4126ee8eb4b289bcbcb2494d29855faed0386361..18eff4d7b34822bd0be54eda7ac9395ed7917eb2 100644
--- a/web/app/templates/settings/edit_general_settings.html.j2
+++ b/web/app/templates/settings/edit_general_settings.html.j2
@@ -20,11 +20,27 @@
             {{ form.hidden_tag() }}
             {{ wtf.render_field(form.username, data_length='64', material_icon='person') }}
             {{ wtf.render_field(form.email, data_length='254', material_icon='email') }}
-            {{ wtf.render_field(form.dark_mode, material_icon='brightness_3') }}
+            <div class="row">
+              <div class="col s12"><p>&nbsp;</p></div>
+              <div class="col s1">
+                <p><i class="material-icons">brightness_3</i></p>
+              </div>
+              <div class="col s8">
+                <p>{{ form.dark_mode.label.text }}</p>
+                <p class="light">Enable dark mode to ease your eyes.</p>
+              </div>
+              <div class="col s3 right-align">
+                <div class="switch">
+                  <label>
+                    {{ form.dark_mode() }}
+                    <span class="lever"></span>
+                  </label>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="card-action">
             <div class="right-align">
-
               {{ wtf.render_field(form.submit, material_icon='send') }}
             </div>
           </div>