diff --git a/helmchart/single-sign-on/values.yaml b/helmchart/single-sign-on/values.yaml
index 9212b893ca3fdc227477f96de87062a234d9085c..009bcce6c589e8a2117c8abd1caedb7e33ddfc11 100644
--- a/helmchart/single-sign-on/values.yaml
+++ b/helmchart/single-sign-on/values.yaml
@@ -91,11 +91,11 @@ kratos:
       tag: v0.7.3-alpha.1
 
   kratos:
-    # TODO: This schema is not complete yet. This schema is 
+    # TODO: This schema is not complete yet. This schema is
     #       put on the config disk as a seperate file by the
     #       helm chart
     identitySchemas:
-      "identity.default.schema.json": | 
+      "identity.default.schema.json": |
         {
           "$schema": "http://json-schema.org/draft-07/schema#",
           "title": "Person",
@@ -129,7 +129,7 @@ kratos:
                   "title": "Full name"
                 }
               },
-              "required": ["email"], 
+              "required": ["email"],
               "additionalProperties": false
             }
           }
diff --git a/login/app.py b/login/app.py
index 1b27dd6d49b89a3a0d8f73c7d502d1ea3d21d161..59c1a9f8a8c0cfe4286a4385375f1d0a0dfa08c9 100644
--- a/login/app.py
+++ b/login/app.py
@@ -5,6 +5,7 @@ import pprint
 import logging
 import os
 import click
+import urllib.parse
 
 # Flask
 from flask import abort, Flask, redirect, request, render_template
@@ -254,7 +255,7 @@ def recover_user(email):
 
 
     if not obj:
-        app.logger.info("Not found")
+        pp.logger.info("Not found")
         return
 
     if not obj.kratos_id:
@@ -301,20 +302,205 @@ def recovery():
     if not flow:
         return redirect(app.config["KRATOS_PUBLIC_URL"] + "self-service/recovery/browser")
 
-
-#    localhost:8080/self-service/recover/browser
-#    return redirect("https://google.com")
-    # /self-service/recovery/browsera
     return render_template(
         'recover.html',
         api_url = app.config["KRATOS_PUBLIC_URL"]
         )
 
 
-    #login_form=login_form, logo=login_request.client.logo_uri, application_name=login_request.client.client_name)
+@app.route('/settings', methods=['GET', 'POST'])
+def settings():
+
+    flow = request.args.get("flow")
+    if not flow:
+        return redirect(app.config["KRATOS_PUBLIC_URL"] + "self-service/settings/browser")
+
+    return render_template(
+        'settings.html',
+        api_url = app.config["KRATOS_PUBLIC_URL"]
+        )
+
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+
+    # Check if we are logged in:
+    id = getid()
+
+    if id:
+        return render_template(
+            'loggedin.html',
+            api_url = app.config["KRATOS_PUBLIC_URL"],
+            id = id)
+
+    # 
+    flow = request.args.get("flow")
+    return_to =  request.args.get("return_to")
+    if not flow:
+
+        if return_to:
+            arg = "?return_to=" + urllib.parse.quote_plus(return_to)
+        else:
+            arg = ""
+
+        return redirect(app.config["KRATOS_PUBLIC_URL"] + "self-service/login/browser" + arg)
+
+    return render_template(
+        'login.html',
+        api_url = app.config["KRATOS_PUBLIC_URL"]
+        )
+
+
+@app.route('/auth', methods=['GET', 'POST'])
+def auth():
+
+    challenge = None
+
+    # Retrieve the challenge id from the request. Depending on the method it is  
+    # saved in the form (POST) or in a GET variable. If this variable is not set 
+    # we can not continue.
+    if request.method == 'GET':
+        challenge = request.args.get("login_challenge")
+    if request.method == 'POST':
+        challenge = request.args.post("login_challenge")
+
+    if not challenge:
+        app.logger.error("No challange given. Error in request")
+        abort(404)
+
+
+    # Check if we are logged in:
+    id = getid()
+
+
+    if not id:
+        url = app.config["PUBLIC_URL"] + "/auth?login_challenge=" + challenge;
+        url = urllib.parse.quote_plus(url)
+        return redirect("login?auth=" +url)
+
+
+
+    app.logger.info("We have ID and AUTH, can authorize user") 
+
+    try:
+        login_request = HYDRA.login_request(challenge)
+    except hydra_client.exceptions.NotFound:
+        app.logger.error("Not Found. Login request not found. challenge={0}".format(challenge))
+        abort(404)
+    except hydra_client.exceptions.HTTPError:
+        app.logger.error("Conflict. Login request has been used already. challenge={0}".format(challenge))
+        abort(503)
+
+    redirect_to = login_request.accept(
+                id['email'],
+                remember=True,
+                # Remember session fof 7d
+                remember_for=60*60*24*7)
+
+    return redirect(redirect_to)  
+
+
+@app.route('/consent', methods=['GET', 'POST'])
+def consent():
+
+    challenge = request.args.get("consent_challenge")
+    if not challenge:
+        abort(403)
+    try:
+        consent_request = HYDRA.consent_request(challenge)
+    except hydra_client.exceptions.NotFound:
+        app.logger.error("Not Found. Consent request not found. challenge={0}".format(challenge))
+        abort(404)
+    except hydra_client.exceptions.HTTPError:
+        app.logger.error("Conflict. Consent request has been used already. challenge={0}".format(challenge))
+        abort(503)
+
+    app_name = consent_request.client.client_name
+    username = consent_request.subject
+
+    app.logger.info("Providing consent to %s for %s" % (app_name, username))
+
+
+    obj = User.query.filter_by(email=username).first()
+    if not obj:
+        app.logger.error("User not found in database: {0}".format(username))
+        abort(401)
+
+    claims = obj.getClaims(app_name)
+
+
+    # TODO: Check permission check and set admin scopes
+
+    app.logger.info("{0} was granted access to {1}".format(username, app_name))
+
+    return redirect(consent_request.accept(
+        grant_scope=consent_request.requested_scope,
+        grant_access_token_audience=consent_request.requested_access_token_audience,
+        session=claims,
+    ))
+
+    # Error
+
+
+@app.route('/status', methods=['GET', 'POST'])
+def status():
+    id = getid()
+
+    return id['email']
+
+
+
+
+def getid():
+
+    # Get login cookie from session
+    try:
+        cookie = request.cookies.get('ory_kratos_session');
+        cookie = "ory_kratos_session=" + cookie
+    except TypeError:
+        app.logger.info("User not logged in or cookie corrupted")
+        return False
+
+    # Given a cookie, check if it is valued and get Id object
+    try:
+        api_response = KRATOS_PUBLIC.to_session(
+            cookie = cookie)
+
+        # Get all traits from ID
+        id =  api_response.identity.traits
+        return id
+
+    except ory_kratos_client.ApiException as error:
+        app.logger.error("Exception when calling" +
+            "V0alpha2Api->to_session(): %s\n" % error)
+
+    return False
 
 
 
 
 if __name__ == '__main__':
     app.run()
+
+
+#{'active': True,
+# 'authenticated_at': datetime.datetime(2021, 11, 18, 4, 29, 30, 774169, tzinfo=tzutc()),
+# 'expires_at': datetime.datetime(2021, 11, 19, 4, 29, 30, 774169, tzinfo=tzutc()),
+# 'id': '786314a1-7ab6-4e7c-8877-639c6f182652',
+# 'identity': {'created_at': datetime.datetime(2021, 11, 18, 0, 31, 38, 14836, tzinfo=tzutc()),
+#              'id': '10f0bc39-5b64-4dbf-aa9e-9bbb0de31b9b',
+#              'recovery_addresses': [{'created_at': datetime.datetime(2021, 11, 18, 0, 31, 38, 21785, tzinfo=tzutc()),
+#                                      'id': '7632a0aa-8106-41ff-a057-8661fc1a9de5',
+#                                      'updated_at': datetime.datetime(2021, 11, 18, 4, 28, 25, 667128, tzinfo=tzutc()),
+#                                      'value': 'mart@greenhost.nl',
+#                                      'via': 'email'}],
+#              'schema_id': 'default',
+#              'schema_url': 'http://localhost/api/schemas/default',
+#              'state': 'active',
+#              'state_changed_at': None,
+#              'traits': {'email': 'mart@greenhost.nl',
+#                         'name': 'Mart van Santen',
+#                         'uuid': ''},
+#              'updated_at': datetime.datetime(2021, 11, 18, 0, 31, 38, 14836, tzinfo=tzutc())},
+# 'issued_at': datetime.datetime(2021, 11, 18, 4, 29, 30, 774211, tzinfo=tzutc())}
+
diff --git a/login/config.py b/login/config.py
index 9e3950cd4a187d3f81ec55ef35995fe96b3dc5cf..57c900d61e21e897518fc331ef76451123615819 100644
--- a/login/config.py
+++ b/login/config.py
@@ -13,6 +13,9 @@ class Config(object):
     SQLALCHEMY_DATABASE_URI = os.environ['DATABASE_URL']
     SQLALCHEMY_TRACK_MODIFICATIONS = False
 
+
+    PUBLIC_URL = os.environ['PUBLIC_URL'];
+
     HYDRA_ADMIN_URL = os.environ['HYDRA_ADMIN_URL'];
 
     KRATOS_ADMIN_URL = os.environ['KRATOS_ADMIN_URL'];
diff --git a/login/models.py b/login/models.py
index 3bc8f2657139f0428e8e6d30471fe6644363df41..fa35af5408de390e9c7d0dbdcb5860317f066d6a 100644
--- a/login/models.py
+++ b/login/models.py
@@ -2,6 +2,8 @@
 from app import db
 from sqlalchemy.dialects.postgresql import JSON
 
+from typing import Dict, List
+
 from sqlalchemy.orm import relationship
 from sqlalchemy import Column, Integer, String, ForeignKey, Boolean
 
@@ -17,9 +19,44 @@ class User(db.Model):
 
     app_roles = relationship('AppRole', back_populates="user")
 
+
     def __repr__(self):
         return '<id {}>'.format(self.id)
 
+    def getClaims(self, app, mapping = []) -> Dict[str, Dict[str, str]]:
+        """Create openID Connect token
+        Use the userdata stored in the user object to create an OpenID Connect token.
+        The token returned by this function can be passed to Hydra,
+        which will store it and serve it to OpenID Connect Clients to retrieve user information.
+        If you need to relabel a field pass an array of tuples to rename_fields. 
+        Example: getClaims('nextcloud', [("name", "username"),("roles", "groups")])
+
+        Attributes:
+            appname - Name or ID of app to connect to
+            mapping - Mapping of the fields
+
+        Returns:
+            OpenID Connect token of type dict
+        """
+
+        token = {
+            "name": self.email,
+            "preferred_username": self.email,
+            "email": self.email,
+            "roles": '',
+        }
+
+        # Relabel field names
+        for field in mapping:
+            old_field_name = field[0]
+            new_field_name = field[1]
+            token[new_field_name] = token[old_field_name]
+            del token[old_field_name]
+
+        return dict(id_token=token)
+
+
+
 
 # App model
 class App(db.Model):
diff --git a/login/source_env b/login/source_env
index be0d939022d9d621efe80131e3eebfc3c2baf3f5..b20fb4c07c78c37692ce8bccd2bd5b28f6086768 100755
--- a/login/source_env
+++ b/login/source_env
@@ -6,6 +6,7 @@ export FLASK_RUN_PORT=5000
 export HYDRA_ADMIN_URL=http://localhost:4445
 export KRATOS_PUBLIC_URL=http://localhost/api
 export KRATOS_ADMIN_URL=http://localhost:8000
+export PUBLIC_URL=http://localhost/login
 
 export DATABASE_URL="postgresql://stackspin:stackspin@localhost/stackspin"
 export APP_SETTINGS="config.DevelopmentConfig"
diff --git a/login/static/base.js b/login/static/base.js
new file mode 100644
index 0000000000000000000000000000000000000000..0885d234a75b34484af088a658038c4986c99212
--- /dev/null
+++ b/login/static/base.js
@@ -0,0 +1,368 @@
+
+
+
+// Helpers
+
+// $.urlParam get parameters from the URI. Example: id =  $.urlParam('id');
+$.urlParam = function(name) {
+    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
+    if (results==null) {
+        return null;
+    }
+    return decodeURI(results[1]) || 0;
+};
+
+
+function flow_login_auth() {
+        state = Cookies.get('flow_state');
+        url = Cookies.set('auth_url');
+        console.log(state);
+        console.log(url);
+
+
+
+}
+
+function flow_login() {
+
+        var flow = $.urlParam('flow');
+        var auth = $.urlParam('auth');
+        var uri = api_url + 'self-service/login/flows?id=' + flow;
+
+        // Set auth flow_state if set
+        if (auth) {
+            Cookies.set('flow_state', 'auth');
+            Cookies.set('auth_url', auth);
+        }
+
+        $.ajax( {
+            type: "GET",
+            url: uri,
+            success: function(data) {
+
+
+                html = render_messages(data);
+                $("#contentMessages").html(html);
+
+                html = render_form(data, 'password');
+
+                $("#contentLogin").html(html);
+
+
+
+            },
+            complete: function(obj) {
+
+                // Expired flow, refresh
+                if (obj.status == 410) {
+                    alert("flow expired");
+                }
+            }
+        });
+
+}
+
+
+
+function flow_settings_validate() {
+
+        var flow = $.urlParam('flow');
+        var uri = api_url + 'self-service/settings/flows?id=' + flow;
+        console.log("Getting messsages for: " + uri);
+
+        $.ajax( {
+            type: "GET",
+            url: uri,
+            success: function(data) {
+                console.log(data);
+
+                if (data.state == 'success') {
+                    Cookies.set('flow_state', 'settings_saved');
+
+                    // Redirect to generate new flow ID
+                    window.location.href = 'settings';
+                }
+                else {
+
+                     $("#contentProfileSaveFailed").show();
+                }
+            }
+        });
+
+}
+
+function flow_settings() {
+
+        var flow = $.urlParam('flow');
+        var uri = api_url + 'self-service/settings/flows?id=' + flow;
+        console.log("Calling: " + uri);
+
+        $.ajax( {
+            type: "GET",
+            url: uri,
+            success: function(data) {
+                console.log(data);
+
+                state = Cookies.get('flow_state')
+
+                // Hide settings section if we are in recovery state
+                // so the user is not configures
+                if (state == 'recovery') {
+                    $("#contentProfile").hide();
+                }
+
+                if (state == 'settings_saved') {
+                    $("#contentProfileSaved").show();
+                    Cookies.set('flow_state', 'settings');
+                }
+
+                html = render_form(data, 'password');
+                $("#contentPassword").html(html);
+
+                html = render_form(data, 'profile');
+                $("#contentProfile").html(html);
+
+                html = render_messages(data);
+                $("#contentMessages").html(html);
+
+                // Use ajax to sumbit form
+                $("#formpassword").submit(function(e) {
+
+                    // avoid to execute the actual submit of the form.
+                    e.preventDefault(); 
+
+                    var form = $(this);
+                    var url = form.attr('action');
+
+
+                    $.ajax({
+                        type: "POST",
+                        url: url,
+                        data: form.serialize(), // serializes the form's elements.
+                        complete: function(obj) {
+                            flow_settings_validate();
+                        },
+                    });
+                });
+
+
+
+            },
+            complete: function(obj) {
+
+                // Expired flow, refresh
+                if (obj.status == 410) {
+                    alert("flow expired");
+                }
+            }
+        });
+
+}
+
+function flow_recover() {
+        var flow = $.urlParam('flow');
+        var uri = api_url + 'self-service/recovery/flows?id=' + flow;
+        console.log("Calling: " + uri);
+
+        $.ajax( {
+            type: "GET",
+            url: uri,
+            success: function(data) {
+
+                html = render_form(data, 'link');
+                $("#contentRecover").html(html);
+
+                // Do form post as an AJAX call
+                $("#formlink").submit(function(e) {
+
+                    // avoid to execute the actual submit of the form.
+                    e.preventDefault(); 
+
+                    var form = $(this);
+                    var url = form.attr('action');
+
+                    Cookies.set('flow_state', 'recovery');
+                    $.ajax({
+                        type: "POST",
+                        url: url,
+                        data: form.serialize(), // serializes the form's elements.
+                        success: function(data)
+                        {
+                            $("#contentRecover").hide();
+                            $("#contentRecoverRequested").show();
+                        }
+                    });
+                });
+
+
+            },
+            complete: function(obj) {
+
+                // Expired flow, refresh
+                if (obj.status == 410) {
+                    alert("flow expired");
+                }
+            }
+        });
+}
+
+
+
+
+function render_messages(data) {
+
+
+    if (!data.ui.messages) {
+        return '';
+    }
+    html = '';
+    for (msg of data.ui.messages) {
+
+        html += "- " + msg.text + "<br/>";
+    }
+
+    return html;
+}
+
+function render_form(data, group) { 
+
+    // Create form
+    action = data.ui.action;
+    method = data.ui.method;
+    form = "<form id='form"+group+"' method='"+method+"' action='"+action+"'>";
+
+    elements = {}
+    for (const node of data.ui.nodes) {
+
+        if (!elements[node.group]) {
+            elements[node.group] = {}
+        }
+
+        var name = node.attributes.name;
+        var type = node.attributes.type;
+        var value = node.attributes.value;
+        elm = getFormElement(type, name, value);
+
+        if (node.group == 'default' || node.group == group) {
+            form += elm;
+        }
+        elements[node.group][name] = elm;
+    }
+    form += "</form>";
+    return form;
+
+}
+
+
+
+
+
+
+// Return form element based on name, including help etc
+function getFormElement(type, name, value) {
+
+    if (value == undefined) {
+            value = '';
+    }
+    if (name == 'email' || name == 'traits.email') {
+        return getFormInput(
+                'email',
+                name,
+                value,
+                'E-mail address',
+                'Please enter your e-mail address here',
+                'Please provode your e-mail address. We will send a recovery ' +
+                'link to that e-mail address.',
+                );
+    }
+
+
+     if (name == 'traits.name') {
+        return getFormInput(
+                'name',
+                name,
+                value,
+                'Full name',
+                'Please provide your full name',
+                null
+                );
+    }
+
+
+    if (name == 'password_identifier') {
+        return getFormInput(
+                'email',
+                name,
+                value,
+                'E-mail address',
+                'Please provide your e-mail address to login',
+                null
+                );
+    }
+
+    if (name == 'password') {
+        return getFormInput(
+                'password',
+                name,
+                value,
+                'Password',
+                'Please provide your password',
+                null
+                );
+    }
+
+
+
+
+    if (type == 'hidden' || name == 'traits.uuid') {
+
+        return `
+            <input type="hidden" class="form-control" id="`+name+`"
+            name="`+name+`" value='`+value+`'>`;
+    }
+
+    if (type == 'submit') {
+
+        return `<div class="form-group">
+            <input type="hidden" name="`+name+`" value="`+value+`">
+             <button type="submit" class="btn btn-primary">Go!</button>
+            </div>`;
+    }
+
+
+    return getFormInput('input', name, value, name, null,null);
+
+
+}
+function getFormInput(type, name, value, label, placeHolder, help) {
+
+    // Id field for help element
+    nameHelp = name + "Help";
+
+    element = '<div class="form-group">';
+    element += '<label for="'+name+'">'+label+'</label>';
+    element += '<input type="'+type+'" class="form-control" id="'+name+'" name="'+name+'" ';
+
+    if (value) {
+        element += 'value="'+value+'" ';
+    }
+    if (help) {
+        element += 'aria-describedby="' + nameHelp +'" ';
+    }
+    if (placeHolder) {
+        element += 'placeholder="'+placeHolder+'"> ';
+    }
+
+    if (help) {
+        element +=
+        `<small id="`+nameHelp+`" class="form-text text-muted">` + help + `
+        </small>`;
+    }
+
+    element += '</div>';
+
+        return element;
+}
+
+
+
diff --git a/login/static/logo.svg b/login/static/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e33262f8543bf4f2918dff4b6d195e43e6af1327
--- /dev/null
+++ b/login/static/logo.svg
@@ -0,0 +1,9 @@
+<svg width="151" height="44" viewBox="0 0 151 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="151" height="44" fill="transparent"/>
+<path d="M40.8246 11.7373C37.2206 11.7373 34.89 13.5633 34.89 16.6388C34.89 19.7142 36.8842 20.8915 40.4162 21.6604L40.9688 21.7805C43.1312 22.2611 44.2604 22.7416 44.2604 24.1351C44.2604 25.4806 43.1792 26.4417 41.0168 26.4417C38.8544 26.4417 37.5329 25.4326 37.5329 23.4143V23.1741H34.4094V23.4143C34.4094 27.0664 37.1245 29.2288 41.0168 29.2288C44.9092 29.2288 47.3839 27.1145 47.3839 24.039C47.3839 20.9636 45.1014 19.7142 41.5214 18.9454L40.9688 18.8252C38.9025 18.3687 38.0135 17.7921 38.0135 16.5427C38.0135 15.2933 38.9025 14.5244 40.8246 14.5244C42.7468 14.5244 43.9241 15.2933 43.9241 17.2154V17.5998H47.0476V17.2154C47.0476 13.5633 44.4286 11.7373 40.8246 11.7373ZM47.5746 19.4259H50.554V26.2015C50.554 27.8353 51.6112 28.8925 53.1969 28.8925H56.5607V26.4417H54.2541C53.8216 26.4417 53.5814 26.2015 53.5814 25.7209V19.4259H56.849V16.9752H53.5814V13.275H50.554V16.9752H47.5746V19.4259ZM69.9725 28.8925V16.9752H66.9932V18.5849H66.7529C66.0321 17.5518 64.8788 16.6388 62.8125 16.6388C59.9774 16.6388 57.4305 19.0415 57.4305 22.9338C57.4305 26.8261 59.9774 29.2288 62.8125 29.2288C64.8788 29.2288 66.0321 28.3158 66.7529 27.2827H66.9932V28.8925H69.9725ZM63.7256 26.6339C61.8515 26.6339 60.4579 25.2884 60.4579 22.9338C60.4579 20.5792 61.8515 19.2337 63.7256 19.2337C65.5996 19.2337 66.9932 20.5792 66.9932 22.9338C66.9932 25.2884 65.5996 26.6339 63.7256 26.6339ZM71.4505 22.9338C71.4505 26.6339 74.1896 29.2288 77.6495 29.2288C80.9892 29.2288 82.9354 27.2827 83.6081 24.6637L80.6768 23.967C80.4126 25.5047 79.5236 26.5859 77.6975 26.5859C75.8715 26.5859 74.4779 25.2404 74.4779 22.9338C74.4779 20.6272 75.8715 19.2817 77.6975 19.2817C79.5236 19.2817 80.4126 20.435 80.5807 21.8766L83.512 21.2519C82.9834 18.5849 80.9652 16.6388 77.6495 16.6388C74.1896 16.6388 71.4505 19.2337 71.4505 22.9338ZM97.4406 16.9752H92.9716L88.0221 21.348V12.0737H84.9947V28.8925H88.0221V25.0241L89.68 23.6066L93.6204 28.8925H97.3445L91.8424 21.7565L97.4406 16.9752ZM98.2594 20.3149C98.2594 22.6695 100.23 23.5345 102.728 24.015L103.353 24.1351C104.843 24.4235 105.516 24.7839 105.516 25.5527C105.516 26.3216 104.843 26.9223 103.449 26.9223C102.056 26.9223 100.926 26.3456 100.614 24.6157L97.8269 25.3365C98.2354 27.8353 100.326 29.2288 103.449 29.2288C106.477 29.2288 108.447 27.8112 108.447 25.3125C108.447 22.8137 106.429 22.1409 103.738 21.6123L103.113 21.4922C101.863 21.2519 101.191 20.9156 101.191 20.1227C101.191 19.4019 101.815 18.9454 102.969 18.9454C104.122 18.9454 104.939 19.4259 105.227 20.7233L107.966 19.8824C107.39 17.9603 105.636 16.6388 102.969 16.6388C100.134 16.6388 98.2594 17.9603 98.2594 20.3149ZM109.985 33.6978H113.012V27.3547H113.252C113.925 28.3158 115.078 29.2288 117.145 29.2288C119.98 29.2288 122.527 26.8261 122.527 22.9338C122.527 19.0415 119.98 16.6388 117.145 16.6388C115.078 16.6388 113.925 17.5518 113.204 18.5849H112.964V16.9752H109.985V33.6978ZM116.231 26.6339C114.357 26.6339 112.964 25.2884 112.964 22.9338C112.964 20.5792 114.357 19.2337 116.231 19.2337C118.106 19.2337 119.499 20.5792 119.499 22.9338C119.499 25.2884 118.106 26.6339 116.231 26.6339ZM123.38 13.5153C123.38 14.7407 124.317 15.5816 125.518 15.5816C126.72 15.5816 127.657 14.7407 127.657 13.5153C127.657 12.2899 126.72 11.449 125.518 11.449C124.317 11.449 123.38 12.2899 123.38 13.5153ZM127.032 16.9752H124.005V28.8925H127.032V16.9752ZM129.249 16.9752V28.8925H132.277V22.7416C132.277 20.5311 133.358 19.2337 135.208 19.2337C136.842 19.2337 137.755 20.1227 137.755 21.9247V28.8925H140.782V21.7805C140.782 18.8252 138.932 16.7829 136.145 16.7829C133.958 16.7829 132.949 17.744 132.469 18.7531H132.228V16.9752H129.249Z" fill="#2D535A"/>
+<path d="M0 35.1171C0 39.0948 4.18188 41.6853 7.74332 39.9138L22.8687 32.39C24.0424 31.8062 24.7844 30.6083 24.7844 29.2975V20.9534L1.64288 32.4649C0.636359 32.9656 0 33.9929 0 35.1171Z" fill="#2D535A"/>
+<path d="M0 22.8091C0 27.6308 5.06914 30.7709 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L0 22.8091Z" fill="#54C6CC"/>
+<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L2.2161 21.7068Z" fill="#2D535A"/>
+<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L22.5683 22.0664C23.926 21.3911 24.888 19.9545 24.3261 18.546C22.9848 15.1836 18.9385 13.3884 15.398 15.1496L2.2161 21.7068Z" fill="#1E8290"/>
+<path d="M0 22.8121L23.3077 11.2182C24.2124 10.7682 24.7844 9.8448 24.7844 8.83432C24.7844 4.77111 20.5126 2.12495 16.8747 3.93462L2.25625 11.2064C0.873945 11.894 0 13.3048 0 14.8487V22.8121Z" fill="#54C6CC"/>
+</svg>
diff --git a/login/static/style.css b/login/static/style.css
index da5911732db90ce340492aa0b78ee6aec463283d..c563eb2b4a8cf1cd10f5a651a61215e31256f64e 100644
--- a/login/static/style.css
+++ b/login/static/style.css
@@ -5,4 +5,8 @@ div.loginpanel {
     margin-left: auto;
     margin-right: auto;
     margin-top: 100px;
+} 
+
+button {
+    margin-top: 10px;
 }
diff --git a/login/templates/base.html b/login/templates/base.html
index 41e76c24861f5e34496f0f4dd85e2c5f258ef593..2700a65227e77df1cb3867cadd4e80134b9b3373 100644
--- a/login/templates/base.html
+++ b/login/templates/base.html
@@ -4,108 +4,19 @@
     <link rel="stylesheet" href="static/style.css">
     <script src="static/js/bootstrap.bundle.min.js"></script>
     <script src="static/js/jquery-3.6.0.min.js"></script>
+    <script src="static/js/js.cookie.min.js"></script>
+    <script src="static/base.js"></script>
     <title>Stackspin Account</title>
 </html>
 
 
 
 <body>
-<script>
-    var api_url = '{{ api_url }}';
 
-
-    // Actions
-    $(document).ready(function() {
-        var flow = $.urlParam('flow');
-        var uri = api_url + 'self-service/recovery/flows?id=' + flow;
-        console.log("Calling: " + uri);
-
-        $.ajax( {
-            type: "GET",
-            url: uri,
-            success: function(data) {
-                for (const node of data.ui.nodes) {
-        
-                    var name = node.attributes.name;
-                    var type = node.attributes.type;
-                    var value = node.attributes.value;
-                    
-                    elm = getFormElement(type, name, value);
-                    console.log(elm);
-                }
-            },
-            complete: function(obj) {
-
-                // Expired flow, refresh
-                if (obj.status == 410) {
-                    alert("flow expired");
-                }
-            }
-            });
-    });
-
-
-    // Return form element based on name, including help etc
-    function getFormElement(type, name, value) {
-
-        if (name == 'email') {
-            return getFormInput(
-                'email',
-                'email', 
-                'E-mail address',
-                'Please enter your e-mail address here',
-                'Please provode your e-mail address. We will send a recovery ' +
-                    'link to that e-mail address.',
-                );
-        }
-
-        if (type == 'hidden') {
-            return `
-               <input type="`+type+`" class="form-control" id="`+name+`"
-                    name="`+name+`" value='`+value+`'>`;
-        }
-
-        if (type == 'submit') {
-            return `<div class="form-group">
-               <input type="`+type+`" class="form-control" id="`+name+`"
-                    name="`+name+`" value='x' text='z'>
-                    </div>`;
-        }
-
-    }
-    function getFormInput(type, name, label, placeHolder, help) {
-
-        // Id field for help element
-        nameHelp = name + "Help";
-
-        element = `
-        <div class="form-group">
-        <label for="`+name+`">`+label+`</label>
-
-        <input type="`+type+`" class="form-control" id="`+name+`" name="`+name+`"
-           aria-describedby="` + nameHelp +`"
-            placeholder="`+placeHolder+`">
-
-        <small id="`+nameHelp+`" class="form-text text-muted">` + help + `
-        </small>
-        </div>`
-
-        return element;
-    }
-
-
-    // Helpers
-    $.urlParam = function(name) {
-        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
-        if (results==null) {
-           return null;
-        }
-        return decodeURI(results[1]) || 0;
-    };
-</script>
+<div class="loginpanel">
 
 
-<div class="loginpanel">
+<img src='static/logo.svg'/><br/><br/>
 
 {% block content %}{% endblock %}
 
diff --git a/login/templates/loggedin.html b/login/templates/loggedin.html
new file mode 100644
index 0000000000000000000000000000000000000000..5936a924c7b3c8cd331a45dfaef879ebebea4053
--- /dev/null
+++ b/login/templates/loggedin.html
@@ -0,0 +1,28 @@
+
+
+{% extends 'base.html' %}
+
+{% block content %}
+
+<script>
+    var api_url = '{{ api_url }}';
+
+    // Actions
+    $(document).ready(function() {
+        //flow_login();
+        flow_login_auth();
+    });
+
+</script>
+
+
+
+    <div id="contentMessages"></div>
+    <div id="contentWelcome">Welcome {{ id['name'] }},<br/><br/>
+    You are already logged in.
+    
+
+</div>
+
+
+{% endblock %}
diff --git a/login/templates/login.html b/login/templates/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..1985afffa5666c2ded51bc521598f49f28fc836a
--- /dev/null
+++ b/login/templates/login.html
@@ -0,0 +1,25 @@
+
+
+{% extends 'base.html' %}
+
+{% block content %}
+
+<script>
+    var api_url = '{{ api_url }}';
+
+    // Actions
+    $(document).ready(function() {
+        flow_login();
+    });
+
+</script>
+
+
+
+    <div id="contentMessages"></div>
+    <div id="contentLogin"></div>
+    <div id="contentHelp">
+        <a href='recovery'>Forget password?</a> | <a href='https://stackspin.org'>About stackspin</a>
+    </div>
+
+{% endblock %}
diff --git a/login/templates/recover.html b/login/templates/recover.html
index 6001bfb4c6f63fb19f5d26d9d5e694afe7f2adee..63fc587fba74ffda57c493e303c9f2603f7b0f14 100644
--- a/login/templates/recover.html
+++ b/login/templates/recover.html
@@ -4,25 +4,26 @@
 
 {% block content %}
 
+<script>
+    var api_url = '{{ api_url }}';
 
-    <div id="
-    <div class="form-group">
-    <label  for="email">E-mail address</label>
-
-    <input type="email" class="form-control" id="email" name="email"
-        aria-describedby="emailHelp" 
-        placeholder="Enter your email address to send recover link">
-    <small id="emailHelp" class="form-text text-muted">
-    Please provode your e-mail address. We will send a recovery link to that
-    e-mail address.
-    </small>
-
-    <input type="submit"
-        name="method"
-        values="link"
-        type="button"
-        class="btn btn-primary">Recover
-    </button>
+    // Actions
+    $(document).ready(function() {
+        flow_recover();
+
+    });
+
+</script>
+
+    <div id="contentMessages"></div>
+    <div id="contentRecover"></div>
+    <div id="contentRecoverRequested" style='display:none'>
+        Thank you for your request. We have sent you an email to recover
+        your account. Please check your e-mail and complete the account
+        recovery. You have limited time to complete this</div>
+
+    <div id="contentHelp">
+        <a href='login'>Back to login page</a> | <a href='https://stackspin.org'>About stackspin</a>
     </div>
 
 {% endblock %}
diff --git a/login/templates/settings.html b/login/templates/settings.html
new file mode 100644
index 0000000000000000000000000000000000000000..60ad59534bd36e20ca2579a60e6cf0550b1ccda4
--- /dev/null
+++ b/login/templates/settings.html
@@ -0,0 +1,30 @@
+
+
+{% extends 'base.html' %}
+
+{% block content %}
+
+<script>
+    var api_url = '{{ api_url }}';
+
+    // Actions
+    $(document).ready(function() {
+        flow_settings();
+    });
+
+</script>
+
+
+
+    <div id="contentMessages"></div>
+    <div id="contentProfileSaved" 
+        class='alert alert-success' 
+        style='display:none'>Successfuly saved new settings.</div>
+    <div id="contentProfileSaveFailed" 
+        class='alert alert-danger' 
+        style='display:none'>Your changes are not saved. Please check the fields for errors.</div>
+    <div id="contentProfile"></div>
+    <div id="contentPassword"></div>
+
+
+{% endblock %}