diff --git a/frontend/src/app/_theme.html b/frontend/src/app/_theme.html
index e627cb73a..9c84d9099 100644
--- a/frontend/src/app/_theme.html
+++ b/frontend/src/app/_theme.html
@@ -214,6 +214,7 @@
                             <button class="btn btn-twitter"><i class="icon-twitter icon-decent"></i> Twitter</button>
                             <button class="btn btn-microsoft"><i class="icon-microsoft icon-decent"></i> Microsoft</button>
                             <button class="btn btn-github"><i class="icon-github icon-decent"></i> Github</button>
+                            <button class="btn btn-externaloidc"><i class="icon-externaloidc icon-decent"></i> OIDC</button>
                         </div>
                     </div>
 
diff --git a/frontend/src/app/theme/_bootstrap.scss b/frontend/src/app/theme/_bootstrap.scss
index 3770e3237..6a7c765ed 100644
--- a/frontend/src/app/theme/_bootstrap.scss
+++ b/frontend/src/app/theme/_bootstrap.scss
@@ -382,6 +382,10 @@ a {
         @include button-variant($color-extern-twitter, $color-extern-twitter);
     }
 
+    &-externaloidc {
+        @include button-variant($color-extern-oidc, $color-extern-oidc);
+    }
+
     // Special radio button.
     &-radio {
         & {
diff --git a/frontend/src/app/theme/_vars.scss b/frontend/src/app/theme/_vars.scss
index 928e0274e..d9d009b32 100644
--- a/frontend/src/app/theme/_vars.scss
+++ b/frontend/src/app/theme/_vars.scss
@@ -21,6 +21,7 @@ $color-extern-github:       #353535;
 $color-extern-google:       #d34836;
 $color-extern-microsoft:    #004185;
 $color-extern-twitter:      #1da1f2;
+$color-extern-oidc:         #526484;
 
 $color-theme-brand:         #3389ff;
 $color-theme-brand-dark:    #3284f4;
diff --git a/frontend/src/app/theme/icomoon/style.css b/frontend/src/app/theme/icomoon/style.css
index b3565a764..e56279ca6 100644
--- a/frontend/src/app/theme/icomoon/style.css
+++ b/frontend/src/app/theme/icomoon/style.css
@@ -109,6 +109,9 @@
 .icon-external-link:before {
   content: "\e96d";
 }
+.icon-externaloidc:before {
+  content: "\e96d";
+}
 .icon-minus-square:before {
   content: "\e969";
 }