diff --git a/app.py b/app.py
index cb8eafb..fc6a3ef 100644
--- a/app.py
+++ b/app.py
@@ -90,6 +90,7 @@ class Calendar:
         self.color = color
 
 @app.route("/calendar")
+@login_required
 def calendar():
     ca1 = Calendar("Hightower", "#30ff30")
     ca2 = Calendar("Toast", "#66e230")
@@ -97,10 +98,6 @@ def calendar():
     return flask.render_template('calendar.html', calendars=calendars)
 
 
-
-
-
-
 @app.route('/test')
 def test_api_request():
   if 'credentials' not in flask.session:
@@ -117,7 +114,9 @@ def test_api_request():
   # ACTION ITEM: In a production app, you likely want to save these
   #              credentials in a persistent database instead.
   flask.session['credentials'] = credentials_to_dict(credentials)
-
+  
+  with open('./userinfo/' + current_user.id + '/calendarevents.json', 'w') as outfile:
+    json.dump(todaysCal, outfile)
   return flask.jsonify(todaysCal)
 
 @app.route("/login/google")
@@ -141,13 +140,11 @@ def login():
     # Create flow instance to manage the OAuth 2.0 Authorization Grant Flow steps.
     flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
         CLIENT_SECRETS_FILE, scopes=SCOPES)
-
     # The URI created here must exactly match one of the authorized redirect URIs
     # for the OAuth 2.0 client, which you configured in the API Console. If this
     # value doesn't match an authorized URI, you will get a 'redirect_uri_mismatch'
     # error.
     flow.redirect_uri = request.base_url + "/callback"
-
     authorization_url, state = flow.authorization_url(
         # Enable offline access so that you can refresh an access token without
         # re-prompting the user for permission. Recommended for web server apps.
@@ -183,7 +180,7 @@ def callback():
     session = flow.authorized_session()
 
     userinfo = session.get('https://www.googleapis.com/userinfo/v2/me').json()
-    
+
     # Create a user in your db with the information provided
     # by Google
     user = User(
@@ -200,7 +197,7 @@ def callback():
     # Begin user session by logging the user in
     login_user(user)
     return flask.redirect(flask.url_for('index'))
-    
+
 @app.route("/logout")
 @login_required
 def logout():
@@ -216,14 +213,40 @@ def credentials_to_dict(credentials):
           'scopes': credentials.scopes}
 
 
-@app.route("/userinfo/107971745944668140075/calendarevents.json")
-def downloader():
-    path = "/home/raphael/dev/website_ws/website/login/userinfo/107971745944668140075"
+@app.route("/userinfo/<path:user>/calendarevents.json")
+def downloader(user):
+    print(user)
+    path = "/home/raphael/dev/website_ws/website/userinfo/" + user
     return flask.send_from_directory(path, "calendarevents.json")
 
+# POST
+
+@app.route('/calendar', methods = ['POST', 'DELETE'])
+@login_required
+def user():
+    if request.method == 'POST':
+        calId = request.json.get('calendar_id')
+        color = request.json.get('color')
+        toggle = request.json.get('toggle')
+        
+        print(calId)
+        if color != None:
+            print(color)
+        if toggle != None:
+            print(toggle)
+        # toggle specific calendar of user
+    elif request.method == 'DELETE':
+        # do nothing
+        return 'NONE'
+    else:
+        # POST Error 405
+        print("405")
+
+    return 'OK'
+
 if __name__ == "__main__":
     context = ('certificate/xip.io.crt', 'certificate/xip.io.key')#certificate and key files
-    app.run('192.168.68.103.xip.io', 1234, ssl_context=context, debug=True)
+    app.run('0.0.0.0', 1234, ssl_context=context, debug=True)
 
 
 
diff --git a/database/sqlite_db b/database/sqlite_db
index 01e423b..0f1b7df 100644
Binary files a/database/sqlite_db and b/database/sqlite_db differ
diff --git a/template/calendar.html b/template/calendar.html
index d0de596..288bdaf 100644
--- a/template/calendar.html
+++ b/template/calendar.html
@@ -1,35 +1,108 @@
 {% extends "sidebar.html" %}
 {% block body%}
+
+<div style="height: 50px">
+    <div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
+    <div style="width: 30%; float: left">Show on device</div>
+    <div style="width: 30%; float: left">Color</div>
+</div>
+
 <div>
-    <div style="width: 30%; float: left" align="center" >Calendar</div>
-    <div style="width: 30%; float: left" align="center">Show on device</div>
-    <div style="width: 30%; float: left" align="center">Color</div>
-</div>
-
-<div style="margin-top: 50px">
     {% for item in calendars %}
-    <div style="width: 30%; float: left" align="center" >{{ item.name }}</div>
+    <div style="height: 30px">
+        <!--Name-->
+        <div style="width: 30%; float: left; font-size: 24px; text-align: left; margin-left: 10%">{{ item.name }}</div>
 
-    <div style="width: 30%; float: left" align="center">
-    <!-- Rounded switch -->
-    <label class="switch">
-        <input type="checkbox">
-        <span class="slider round"></span>
-    </label>
-    </div>
+        <!--Toggle-->
+        <div style="width: 30%; float: left">
+            <!-- Rounded switch -->
+            <label class="switch">
+                <input type="checkbox">
+                <span id={{item.name}}  class="slider round" onclick="toggleReaction(this)"></span>
+            </label>
+        </div>
 
-    <div style="width: 30%; float: left" align="center">
-    <div>
-        <input type="color" id="head" name="head"
-                value="#e66465">
-        <label for="head">Test</label>
+        <!--Color Selector-->
+        <div style="width: 30%; float: left">
+            <div class="colorPickSelector" id={{item.name}}></div>
+            <!--svg height="20" width="20">
+                <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
+            </svg--> 
+        </div>
+        
     </div>
-    <!--svg height="20" width="20">
-    <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
-    </svg--> 
-    </div>
-
     {% endfor %}
-
+ 
 </div>
+
+<script type="text/javascript">
+    $(".colorPickSelector").colorPick({
+    'initialColor': '#3498db',
+    'allowRecent': true,
+    'recentMax': 5,
+    'allowCustomColor': false,
+    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
+    'onColorSelected': function() {
+
+        // Todo getting the element id is currently done over [0] [#02]
+        this.element.css({'backgroundColor': this.color, 'color': this.color});
+        console.log(this.element[0].id);
+        console.log(this.color);
+        post("color", this.element[0].id, this.color);
+    }
+    });
+
+    function post(type, id, data) {
+        var url = "https://192.168.68.103.xip.io:1234/calendar";
+        var method = "POST";
+        switch (type) {
+            case "color":
+                var postData = JSON.stringify({"calendar_id": id.toString(), "color": data.toString()});
+                break;
+            case "toggle":
+                var postData = JSON.stringify({"calendar_id": id.toString(), "toggle": data.toString()})        
+                break;
+            default:
+                break;
+        }
+        console.log(postData);
+
+        var shouldBeAsync = true;
+
+        var request = new XMLHttpRequest();
+        request.onload = function () {
+            var status = request.status;
+            var data = request.responseText;
+        }
+
+        request.open(method, url, shouldBeAsync);
+        // content type json makes app do error 400
+        request.setRequestHeader("Content-Type", "application/json");
+        request.send(postData);
+    }
+
+    function toggleReaction(self) {
+        // the slider used defaults to inverted information [#01]
+        post("toggle", self.id, !self.previousElementSibling.checked);
+        
+        /*console.log(self.id);
+        var url = "https://192.168.68.103.xip.io:1234/calendar";
+        var method = "POST";
+        var postData = JSON.stringify({"calendar_id": self.id.toString() });
+        console.log(postData);
+        var shouldBeAsync = true;
+
+        var request = new XMLHttpRequest();
+        request.onload = function () {
+            var status = request.status;
+            var data = request.responseText;
+        }
+
+        request.open(method, url, shouldBeAsync);
+        // content type json makes app do error 400
+        request.setRequestHeader("Content-Type", "application/json");
+        request.send(postData);*/
+    }
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/template/sidebar.html b/template/sidebar.html
index e2791ec..2d8fc66 100644
--- a/template/sidebar.html
+++ b/template/sidebar.html
@@ -6,10 +6,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="/static/css/main.css">
+  <script src="static/js/jquery-3.5.0.min.js"></script>
+
+  <link rel="stylesheet" href="static/css/colorPick.css">
+  <!-- OPTIONAL DARK THEME -->
+  <link rel="stylesheet" href="static/css/colorPick.dark.theme.css">
+  <script src="static/js/colorPick.js"></script>
+
   <title>Index</title>
 </head>
 
 <body>
+  
+
      <!-- Side navigation -->
     <div class="sidenav">
     <a href="/view">View</a>
@@ -20,12 +29,15 @@
   
   <!-- Page content -->
   <div class="main">
-
+  
     {% block body %}
     // content here
     {% endblock %}
 
   </div>
+
 </body>
 
+
+
 </html>