diff --git a/apps/online_oidc_provider/templatetags/__init__.py b/apps/online_oidc_provider/templatetags/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/online_oidc_provider/templatetags/zip_lists.py b/apps/online_oidc_provider/templatetags/zip_lists.py
new file mode 100644
index 000000000..7e1815207
--- /dev/null
+++ b/apps/online_oidc_provider/templatetags/zip_lists.py
@@ -0,0 +1,8 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter
+def zip_lists(a, b):
+    return zip(a, b)
diff --git a/assets/sso/index.js b/assets/sso/index.js
new file mode 100644
index 000000000..917550bd8
--- /dev/null
+++ b/assets/sso/index.js
@@ -0,0 +1 @@
+import './less/sso.less';
diff --git a/assets/sso/less/sso.less b/assets/sso/less/sso.less
new file mode 100644
index 000000000..ca22280d6
--- /dev/null
+++ b/assets/sso/less/sso.less
@@ -0,0 +1,120 @@
+#sso-container {
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+body,
+html {
+  min-height: 100%;
+  background-color: white;
+}
+
+#sso-panel {
+  //border: 1px solid #004b80;
+  margin: 60px 0 32px;
+  padding-bottom: 10px;
+
+  @media screen and (max-width: 767px) {
+    margin: 16px;
+  }
+}
+
+#sso-panel-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 110px;
+
+  img {
+    background-color: #004b80;
+    border-radius: 50% 50%;
+    max-height: 90px;
+    max-width: 90px;
+    padding: 10px;
+    z-index: 1; // To stay on top of the empty div with blue background named blue-header-top
+  }
+
+  #sso-blue-header-top {
+    position: absolute;
+    bottom: 0;
+    background-color: #004b80;
+    min-height: 50px;
+    height: 50%;
+    width: 100%;
+    border-radius: 15px 15px 0 0;
+    box-shadow:
+      0 6px 10px 0 rgba(0, 0, 0, 0.15),
+      0 6px 10px 0 rgba(0, 0, 0, 0.11);
+  }
+}
+
+#sso-panel-body {
+  position: relative;
+  z-index: 1; // For staying on top of the shadow from the header
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.15), 0 6px 10px 0 rgba(0, 0, 0, 0.11);
+  background-color: #eee;
+  padding: 20px 20px 0 20px;
+  border: 4px #004b80 solid;
+  border-top: none;
+  border-radius: 0 0 15px 15px;
+
+  & > h4 {
+    text-align: center;
+    margin-top: 5px;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 16px;
+  }
+}
+
+#sso-authorization-form {
+  & > section > p {
+    text-align: center;
+    font-size: 16px;
+
+    &::after {
+      content: ' ';
+      display: block;
+      margin: 10px auto;
+      width: 30%;
+      border-bottom: 1px #636363 solid;
+    }
+  }
+
+  .sso-permissions {
+    background-color: #fff;
+    padding: 15px;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+
+    li {
+      padding: 5px 0;
+    }
+  }
+}
+
+#sso-control-buttons {
+  display: flex;
+  margin: 10px 0;
+  justify-content: space-around;
+}
+
+#sso-app-display {
+  padding: 20px 0 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 0;
+
+  & h4 {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  & img {
+    max-width: 130px;
+  }
+}
diff --git a/esbuild.mjs b/esbuild.mjs
index a5d579344..50958f712 100644
--- a/esbuild.mjs
+++ b/esbuild.mjs
@@ -33,6 +33,7 @@ let entryPoints = [
     { out: 'hobbygroups', in: 'assets/hobbygroups/index.js' },
     { out: 'mailinglists', in: 'assets/mailinglists/index.js' },
     { out: 'profiles', in: 'assets/profiles/index.js' },
+    { out: 'sso', in: 'assets/sso/index.js' },
     { out: 'resourcecenter', in: 'assets/resourcecenter/index.js' },
     { out: 'webshop', in: 'assets/webshop/index.js' },
     { out: 'wiki', in: 'assets/wiki/index.js' },