diff --git a/server.py b/server.py
index 26e29a1..abdf91d 100755
--- a/server.py
+++ b/server.py
@@ -88,8 +88,68 @@ class UserSettings(db.Model):
     show_tmnf            = Column(Boolean)
     show_tm_2020_current = Column(Boolean)
 
-    notifcations_all     = Column(Boolean)
-    notifcations_self    = Column(Boolean)
+    notifications_all     = Column(Boolean)
+    notifications_self    = Column(Boolean)
+
+@app.route("/update-user-settings", methods=["GET", "POST"])
+def update_user_settings():
+
+    user = flask.request.headers.get("X-Forwarded-Preferred-Username")
+    user_helper = user or "anonymous"
+
+    settings = db.session.query(UserSettings).filter(UserSettings.user==user_helper).first()
+
+    # handle new settings #/
+    if not settings:
+        settings = UserSettings(user=user_helper, show_tm_2020=False, show_tmnf=False,
+                                    show_tm_2020_current=True, notifications_self=True,
+                                    notifications_all=False)
+        db.session.add(settings)
+        db.session.commit()
+        settings = db.session.query(UserSettings).fitler(UserSettings.user==user_helper).first()
+
+
+    if flask.request.method == "GET":
+
+        key = flask.request.args.get("key")
+
+        # some sanity checks #
+        if not key:
+            return ("key missing in args", 422)
+        if key == "user" or key.startswith("_") or "sql" in key:
+            return ("key {} is not allowed".format(key), 422)
+
+        # return attribute #
+        return (str(getattr(settings, key)), 200)
+
+    elif flask.request.method == "POST":
+        json_dict = flask.request.json
+        key_value_list = json_dict.get("payload")
+
+        if not key_value_list:
+            return ("'payload' field empty", 422)
+
+        for el in key_value_list:
+
+            key = el.get("key")
+            value = el.get("value")
+
+            if key == "user" or key.startswith("_") or "sql" in key:
+                return ("key {} is not allowed".format(key), 422)
+
+            if key is None or value is None:
+                return ("element in payload list does not contain key and value", 422)
+          
+            try:
+                getattr(settings, key)
+                setattr(settings, key, bool(value))
+                db.session.merge(settings)
+                db.session.commit()
+                return ("", 204)
+            except AttributeError:
+                return ("key {} not part of user settings".format(key), 422)
+    else:
+        raise AssertionError("Unsupported Method: {}".format(flask.request.method))
 
 class ParsedReplay(db.Model):
 
@@ -436,7 +496,7 @@ def check_replay_trigger(replay):
         return
 
     settings = db.session.query(UserSettings).filter(UserSettings.user == second.uploader).first()
-    if settings and settings.notifcations_self:
+    if settings and settings.notifications_self:
         notifications.send_notification(app, settings.user, map_obj.map_uid, second, replay)
 
 def create_app():
diff --git a/static/user_settings.js b/static/user_settings.js
new file mode 100644
index 0000000..4525294
--- /dev/null
+++ b/static/user_settings.js
@@ -0,0 +1,45 @@
+/* event listener for all sliders */
+const sliders = Array.from(document.getElementsByClassName("form-check-input"))
+
+/* safety switch -> never run set before get */
+var sliders_set = false
+
+/* defer */
+sliders_load_all()
+
+/* get initial values & set listeners */
+function sliders_load_all(){
+    Promise.all(sliders.map(s => {
+        fetch("/update-user-settings?key=" + s.id, { credentials: "include" }).then(response => {
+            response.text().then(data => {
+                if(data == "True"){
+                    s.checked = true
+                }
+            })
+        })
+        s.addEventListener("change", submit)
+    })).then(
+        sliders_set = true
+    )
+}
+
+/* submit settings */
+function submit(e){
+
+    console.log("submit")
+    if(!sliders_set){
+        return
+    }
+
+    const s = e.target
+    console.log(s)
+    const json_data = JSON.stringify({ payload : [ { key : s.id, value : s.checked } ] })
+    console.log(json_data)
+    fetch("/update-user-settings", { 
+                method: "POST",
+                credentials: "include",
+                headers: {'Content-Type': 'application/json'},
+                body: json_data
+            }
+    ).then(response => {})
+}
diff --git a/templates/index.html b/templates/index.html
index 9286897..5610971 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,15 +3,22 @@
 </head>
 <body>
     {% include "upload-button.html" %}
-    <button class="ml-4 mt-4 mb-4 btn btn-info" onclick="window.location.href='/?game=tmnf'">
-        TMNF
-    </button>
-    <button class="mt-4 mb-4 btn btn-info" onclick="window.location.href='/?game=tm2020'">
-        TM2020
-    </button>
-    <button class="mt-4 mb-4 btn btn-info" onclick="window.location.href='/'">
-        All
-    </button>
+
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="show_tm_2020">
+        <label class="form-check-label" for="show_tm_2020">Show All TM2020</label>
+    </div>
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="show_tmnf">
+        <label class="form-check-label" for="show_tmnf">Show All TMNF</label>
+    </div>
+    <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" id="notifications_self">
+        <label class="form-check-label" for="notifications_self">Send notifcations</label>
+    </div>
+
+    <script src="/static/user_settings.js" defer></script>
+    
     <table class="m-auto">
 	<thead>
 		<tr>