diff --git a/src/app/domain/config.ts b/src/app/domain/config.ts
index e8816370a8d..c067be2bee4 100644
--- a/src/app/domain/config.ts
+++ b/src/app/domain/config.ts
@@ -3,6 +3,7 @@ export class Config {
   googleAnalyticsId?: string;
   googleClientId?: string;
   isGoogleClassroomEnabled?: boolean;
+  microsoftClientId?: string;
   recaptchaPublicKey?: string;
   logOutURL: string;
   currentTime: number;
diff --git a/src/app/domain/user.ts b/src/app/domain/user.ts
index 2b0119ac1e0..cb64a9233ce 100644
--- a/src/app/domain/user.ts
+++ b/src/app/domain/user.ts
@@ -7,6 +7,7 @@ export class User {
   isRecaptchaRequired: boolean;
   language: string;
   lastName: string;
+  microsoftUserId: string;
   permissions: number[];
   roles: string[];
   token: string;
diff --git a/src/app/login/login-home/login-home.component.html b/src/app/login/login-home/login-home.component.html
index 735a4c5adf0..8dcefb13eb4 100644
--- a/src/app/login/login-home/login-home.component.html
+++ b/src/app/login/login-home/login-home.component.html
@@ -60,9 +60,9 @@ <h2 class="standalone__title accent" i18n>Sign in to WISE</h2>
         </button>
       </p>
     </form>
-    <div *ngIf="isGoogleAuthenticationEnabled && isShowGoogleLogin">
+    <div *ngIf="showSocialLogin">
       <p class="center mat-headline-6">- <span i18>or</span> -</p>
-      <p class="center">
+      <p class="center" *ngIf="googleAuthenticationEnabled">
         <button
           class="button--social-login button--google"
           color="accent"
@@ -73,6 +73,17 @@ <h2 class="standalone__title accent" i18n>Sign in to WISE</h2>
           <ng-container i18n>Sign in with Google</ng-container>
         </button>
       </p>
+      <p class="center" *ngIf="microsoftAuthenticationEnabled">
+        <button
+          class="button--social-login button--microsoft"
+          color="accent"
+          mat-flat-button
+          (click)="socialSignIn('microsoft')"
+        >
+          <img src="assets/img/icons/ms-logo.svg" alt="Microsoft logo" />
+          <ng-container i18n>Sign in with Microsoft</ng-container>
+        </button>
+      </p>
     </div>
   </mat-card-content>
   <mat-divider></mat-divider>
diff --git a/src/app/login/login-home/login-home.component.ts b/src/app/login/login-home/login-home.component.ts
index 72488209543..0bf14e203d8 100644
--- a/src/app/login/login-home/login-home.component.ts
+++ b/src/app/login/login-home/login-home.component.ts
@@ -13,14 +13,15 @@ import { lastValueFrom } from 'rxjs';
 export class LoginHomeComponent implements OnInit {
   accessCode: string = '';
   credentials: any = { username: '', password: '', recaptchaResponse: null };
-  isGoogleAuthenticationEnabled: boolean = false;
+  protected googleAuthenticationEnabled: boolean = false;
   isRecaptchaEnabled: boolean = false;
   isRecaptchaVerificationFailed: boolean = false;
   isReLoginDueToErrorSavingData: boolean;
-  isShowGoogleLogin: boolean = true;
+  protected microsoftAuthenticationEnabled: boolean;
   passwordError: boolean = false;
   processing: boolean = false;
   @ViewChild('recaptchaRef', { static: false }) recaptchaRef: any;
+  protected showSocialLogin: boolean;
 
   constructor(
     private configService: ConfigService,
@@ -33,16 +34,19 @@ export class LoginHomeComponent implements OnInit {
   ngOnInit(): void {
     this.configService.getConfig().subscribe((config) => {
       if (config != null) {
-        this.isGoogleAuthenticationEnabled = config.googleClientId != '';
+        this.googleAuthenticationEnabled = config.googleClientId != '';
+        this.microsoftAuthenticationEnabled = config.microsoftClientId != '';
       }
       if (this.userService.isSignedIn()) {
         this.router.navigateByUrl(this.getRedirectUrl(''));
       }
+      this.showSocialLogin =
+        this.googleAuthenticationEnabled || this.microsoftAuthenticationEnabled;
     });
     this.route.params.subscribe((params) => {
       if (params['username'] != null) {
         this.credentials.username = params['username'];
-        this.isShowGoogleLogin = false;
+        this.showSocialLogin = false;
       }
     });
     this.route.queryParams.subscribe((params) => {
@@ -97,6 +101,8 @@ export class LoginHomeComponent implements OnInit {
     let redirectUrl = '';
     if (social === 'google') {
       redirectUrl = `${this.configService.getContextPath()}/api/google-login?redirectUrl=${this.userService.getRedirectUrl()}`;
+    } else if (social === 'microsoft') {
+      redirectUrl = `/api/microsoft-login?redirectUrl=/`;
     } else {
       redirectUrl = this.userService.getRedirectUrl();
     }
diff --git a/src/app/register/abstract-register-user.component.ts b/src/app/register/abstract-register-user.component.ts
new file mode 100644
index 00000000000..dd03d70719c
--- /dev/null
+++ b/src/app/register/abstract-register-user.component.ts
@@ -0,0 +1,53 @@
+import { Router } from '@angular/router';
+import { UserService } from '../services/user.service';
+import { ConfigService } from '../services/config.service';
+import { Directive, OnInit } from '@angular/core';
+import { GoogleUser } from '../modules/google-sign-in/GoogleUser';
+
+@Directive()
+export abstract class AbstractRegisterUserComponent implements OnInit {
+  protected googleAuthenticationEnabled: boolean = false;
+  protected abstract joinFormPath: string;
+  protected microsoftAuthenticationEnabled: boolean = false;
+
+  constructor(
+    private configService: ConfigService,
+    private router: Router,
+    private userService: UserService
+  ) {}
+
+  ngOnInit(): void {
+    this.configService.getConfig().subscribe((config) => {
+      if (config != null) {
+        this.googleAuthenticationEnabled = this.isSet(config.googleClientId);
+        this.microsoftAuthenticationEnabled = this.isSet(config.microsoftClientId);
+      }
+    });
+  }
+
+  private isSet(value: string): boolean {
+    return value != null && value != '';
+  }
+
+  protected googleSignIn(credential: GoogleUser): void {
+    this.userService.isGoogleIdExists(credential.sub).subscribe((isExists) => {
+      if (isExists) {
+        this.router.navigate(['join/googleUserAlreadyExists']);
+      } else {
+        this.router.navigate([this.joinFormPath, this.getGoogleFormParams(credential)]);
+      }
+    });
+  }
+
+  protected signUp(): void {
+    this.router.navigate([this.joinFormPath, this.getFormParams()]);
+  }
+
+  protected microsoftSignIn(): void {
+    window.location.href = `/api/microsoft-login?redirectUrl=${this.joinFormPath}`;
+  }
+
+  protected abstract getFormParams(): any;
+
+  protected abstract getGoogleFormParams(credential: GoogleUser): any;
+}
diff --git a/src/app/register/register-google-user-already-exists/register-google-user-already-exists.component.html b/src/app/register/register-google-user-already-exists/register-google-user-already-exists.component.html
index efb1f191db8..e65b59ec4ef 100644
--- a/src/app/register/register-google-user-already-exists/register-google-user-already-exists.component.html
+++ b/src/app/register/register-google-user-already-exists/register-google-user-already-exists.component.html
@@ -2,7 +2,7 @@
   <mat-card-content>
     <h2 class="standalone__title accent" i18n>Create Account</h2>
     <p class="mat-subtitle-2" i18n>Hi! This Google user already has a WISE account.</p>
-    <mat-card-actions>
+    <mat-card-actions fxLayout="row" fxLayoutAlign="center center">
       <button
         class="button--social-login button--google"
         color="accent"
diff --git a/src/app/register/register-home/register-home.component.html b/src/app/register/register-home/register-home.component.html
index ffd7265baf9..f8ce9f36d37 100644
--- a/src/app/register/register-home/register-home.component.html
+++ b/src/app/register/register-home/register-home.component.html
@@ -2,6 +2,9 @@
   <p *ngIf="googleUserNotFoundError" class="mat-subtitle-1 warn center" i18n>
     Sorry, your Google User ID was not found in WISE.
   </p>
+  <p *ngIf="microsoftUserNotFoundError" class="mat-subtitle-1 warn center" i18n>
+    Sorry, your Microsoft User ID was not found in WISE.
+  </p>
   <h1 class="standalone__title accent" i18n>Create WISE Account</h1>
   <div
     class="standalone__content register"
diff --git a/src/app/register/register-home/register-home.component.ts b/src/app/register/register-home/register-home.component.ts
index a55ea0b0a00..a0784917c31 100644
--- a/src/app/register/register-home/register-home.component.ts
+++ b/src/app/register/register-home/register-home.component.ts
@@ -9,12 +9,14 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class RegisterHomeComponent implements OnInit {
   googleUserNotFoundError: boolean;
+  protected microsoftUserNotFoundError: boolean;
 
   constructor(private activatedRoute: ActivatedRoute) {}
 
   ngOnInit() {
     this.activatedRoute.queryParams.subscribe((params) => {
       this.googleUserNotFoundError = params['googleUserNotFound'] === 'true';
+      this.microsoftUserNotFoundError = params['microsoftUserNotFound'] === 'true';
     });
   }
 }
diff --git a/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html
new file mode 100644
index 00000000000..1be1a441b67
--- /dev/null
+++ b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html
@@ -0,0 +1,21 @@
+<mat-card
+  appearance="outlined"
+  class="standalone__content standalone__content--sm mat-elevation-z4 center"
+>
+  <mat-card-content>
+    <h2 class="standalone__title accent" i18n>Create Account</h2>
+    <p class="mat-subtitle-2" i18n>Hi! This Microsoft user already has a WISE account.</p>
+    <mat-card-actions fxLayout="row" fxLayoutAlign="center center">
+      <button
+        class="button--social-login button--microsoft"
+        color="accent"
+        mat-flat-button
+        (click)="login()"
+      >
+        <img src="assets/img/icons/ms-logo.svg" i18n-alt alt="Microsoft logo" /><ng-container i18n
+          >Sign in with Microsoft</ng-container
+        >
+      </button>
+    </mat-card-actions>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.spec.ts b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.spec.ts
new file mode 100644
index 00000000000..b1acdfb7593
--- /dev/null
+++ b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RegisterMicrosoftUserAlreadyExistsComponent } from './register-microsoft-user-already-exists.component';
+import { MatCardModule } from '@angular/material/card';
+
+describe('RegisterMicrosoftUserAlreadyExistsComponent', () => {
+  let component: RegisterMicrosoftUserAlreadyExistsComponent;
+  let fixture: ComponentFixture<RegisterMicrosoftUserAlreadyExistsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RegisterMicrosoftUserAlreadyExistsComponent],
+      imports: [MatCardModule]
+    });
+    fixture = TestBed.createComponent(RegisterMicrosoftUserAlreadyExistsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.ts b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.ts
new file mode 100644
index 00000000000..0d804ce7e8d
--- /dev/null
+++ b/src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './register-microsoft-user-already-exists.component.html'
+})
+export class RegisterMicrosoftUserAlreadyExistsComponent {
+  protected login(): void {
+    window.location.href = `/api/microsoft-login?redirectUrl=/`;
+  }
+}
diff --git a/src/app/register/register-routing.module.ts b/src/app/register/register-routing.module.ts
index cf29240769f..2b157aba6f8 100644
--- a/src/app/register/register-routing.module.ts
+++ b/src/app/register/register-routing.module.ts
@@ -10,6 +10,7 @@ import { RegisterTeacherFormComponent } from './register-teacher-form/register-t
 import { RegisterTeacherCompleteComponent } from './register-teacher-complete/register-teacher-complete.component';
 import { RegisterStudentComponent } from './register-student/register-student.component';
 import { RegisterGoogleUserAlreadyExistsComponent } from './register-google-user-already-exists/register-google-user-already-exists.component';
+import { RegisterMicrosoftUserAlreadyExistsComponent } from './register-microsoft-user-already-exists/register-microsoft-user-already-exists.component';
 
 const registerRoutes: Routes = [
   {
@@ -23,7 +24,8 @@ const registerRoutes: Routes = [
       { path: 'teacher', component: RegisterTeacherComponent },
       { path: 'teacher/complete', component: RegisterTeacherCompleteComponent },
       { path: 'teacher/form', component: RegisterTeacherFormComponent },
-      { path: 'googleUserAlreadyExists', component: RegisterGoogleUserAlreadyExistsComponent }
+      { path: 'googleUserAlreadyExists', component: RegisterGoogleUserAlreadyExistsComponent },
+      { path: 'microsoftUserAlreadyExists', component: RegisterMicrosoftUserAlreadyExistsComponent }
     ]
   }
 ];
diff --git a/src/app/register/register-student-complete/register-student-complete.component.html b/src/app/register/register-student-complete/register-student-complete.component.html
index 1babadc8939..95d206afcd4 100644
--- a/src/app/register/register-student-complete/register-student-complete.component.html
+++ b/src/app/register/register-student-complete/register-student-complete.component.html
@@ -1,15 +1,15 @@
 <mat-card class="standalone__content standalone__content--sm mat-elevation-z4 center">
   <mat-card-content>
     <h2 class="standalone__title accent" i18n>Your WISE account has been created!</h2>
-    <p *ngIf="!isUsingGoogleId" class="mat-subtitle-2" i18n>
+    <p *ngIf="!socialAccount" class="mat-subtitle-2" i18n>
       Your username is: <span class="mat-headline-6">{{ username }}</span
       >.
     </p>
-    <p *ngIf="!isUsingGoogleId" i18n>
+    <p *ngIf="!socialAccount" i18n>
       Please write this down. You will need it when signing in to WISE in the future.
     </p>
     <p>
-      <a *ngIf="!isUsingGoogleId" mat-flat-button color="primary" (click)="login()" i18n
+      <a *ngIf="!socialAccount" mat-flat-button color="primary" (click)="login()" i18n
         >Sign In to Get Started</a
       >
       <a
@@ -23,6 +23,17 @@ <h2 class="standalone__title accent" i18n>Your WISE account has been created!</h
           >Sign in with Google</ng-container
         >
       </a>
+      <a
+        *ngIf="isUsingMicrosoftId"
+        class="button--social-login button--microsoft"
+        href="{{ microsoftLogInURL }}"
+        color="accent"
+        mat-raised-button
+      >
+        <img src="assets/img/icons/ms-logo.svg" i18n-alt alt="Microsoft logo" /><ng-container i18n
+          >Sign in with Microsoft</ng-container
+        >
+      </a>
     </p>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/register/register-student-form/register-student-form.component.html b/src/app/register/register-student-form/register-student-form.component.html
index 15415ac3044..5f37430309e 100644
--- a/src/app/register/register-student-form/register-student-form.component.html
+++ b/src/app/register/register-student-form/register-student-form.component.html
@@ -93,7 +93,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
           >
         </mat-form-field>
       </p>
-      <div *ngIf="user.googleUserId == null">
+      <div *ngIf="user.googleUserId == null && user.microsoftUserId == null">
         <p>
           <mat-form-field appearance="fill" fxFlex>
             <mat-label i18n>Security Question</mat-label>
@@ -130,7 +130,10 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
           </mat-form-field>
         </p>
       </div>
-      <div *ngIf="user.googleUserId == null" formGroupName="passwords">
+      <div
+        *ngIf="user.googleUserId == null && user.microsoftUserId == null"
+        formGroupName="passwords"
+      >
         <new-password-and-confirm
           [formGroup]="passwordsFormGroup"
           [passwordLabel]="passwordLabel"
diff --git a/src/app/register/register-student-form/register-student-form.component.spec.ts b/src/app/register/register-student-form/register-student-form.component.spec.ts
index eeafb1e2c50..f4917cca088 100644
--- a/src/app/register/register-student-form/register-student-form.component.spec.ts
+++ b/src/app/register/register-student-form/register-student-form.component.spec.ts
@@ -148,7 +148,7 @@ async function createAccount() {
         await component.createAccount();
         expect(routerNavigateSpy).toHaveBeenCalledWith([
           'join/student/complete',
-          { username: username, isUsingGoogleId: false }
+          { username: username, isUsingGoogleId: false, isUsingMicrosoftId: false }
         ]);
       })
     );
diff --git a/src/app/register/register-student-form/register-student-form.component.ts b/src/app/register/register-student-form/register-student-form.component.ts
index 4aa2f5d2d51..096346bec87 100644
--- a/src/app/register/register-student-form/register-student-form.component.ts
+++ b/src/app/register/register-student-form/register-student-form.component.ts
@@ -67,7 +67,8 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
   ngOnInit() {
     this.route.params.subscribe((params) => {
       this.user.googleUserId = params['gID'];
-      if (!this.isUsingGoogleId()) {
+      this.user.microsoftUserId = params['mID'];
+      if (!this.isSocialAccount()) {
         this.createStudentAccountFormGroup.addControl('passwords', this.passwordsFormGroup);
         this.createStudentAccountFormGroup.addControl(
           'securityQuestion',
@@ -99,10 +100,18 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
     this.changeDetectorRef.detectChanges();
   }
 
+  private isSocialAccount(): boolean {
+    return this.isUsingGoogleId() || this.isUsingMicrosoftId();
+  }
+
   isUsingGoogleId() {
     return this.user.googleUserId != null;
   }
 
+  private isUsingMicrosoftId(): boolean {
+    return this.user.microsoftUserId != null;
+  }
+
   async createAccount() {
     if (this.createStudentAccountFormGroup.valid) {
       this.processing = true;
@@ -121,7 +130,11 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
   createAccountSuccess(response: any): void {
     this.router.navigate([
       'join/student/complete',
-      { username: response.username, isUsingGoogleId: this.isUsingGoogleId() }
+      {
+        username: response.username,
+        isUsingGoogleId: this.isUsingGoogleId(),
+        isUsingMicrosoftId: this.isUsingMicrosoftId()
+      }
     ]);
     this.processing = false;
   }
@@ -138,10 +151,11 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
       const token = await this.recaptchaV3Service.execute('importantAction').toPromise();
       this.user['token'] = token;
     }
-    if (!this.isUsingGoogleId()) {
+    if (!this.isSocialAccount()) {
       this.user['password'] = this.getPassword();
       delete this.user['passwords'];
       delete this.user['googleUserId'];
+      delete this.user['microsoftUserId'];
     }
   }
 
diff --git a/src/app/register/register-student/register-student.component.html b/src/app/register/register-student/register-student.component.html
index 134d9b2e636..06924c17306 100644
--- a/src/app/register/register-student/register-student.component.html
+++ b/src/app/register/register-student/register-student.component.html
@@ -18,12 +18,28 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
         <ng-container i18n>Sign Up</ng-container>
       </button>
     </p>
-    <span *ngIf="isGoogleAuthenticationEnabled">
+    <ng-container *ngIf="googleAuthenticationEnabled || microsoftAuthenticationEnabled">
       <p class="center mat-headline-6">- or -</p>
       <p class="center">
-        <google-sign-in-button (signedIn)="googleSignIn($event)" text="signup_with">
+        <google-sign-in-button
+          *ngIf="googleAuthenticationEnabled"
+          (signedIn)="googleSignIn($event)"
+          text="signup_with"
+        >
         </google-sign-in-button>
       </p>
-    </span>
+      <p class="center">
+        <button
+          *ngIf="microsoftAuthenticationEnabled"
+          class="button--social-login button--microsoft"
+          color="accent"
+          mat-flat-button
+          (click)="microsoftSignIn()"
+        >
+          <img src="assets/img/icons/ms-logo.svg" alt="Microsoft logo" />
+          <ng-container i18n>Sign up with Microsoft</ng-container>
+        </button>
+      </p>
+    </ng-container>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/register/register-student/register-student.component.ts b/src/app/register/register-student/register-student.component.ts
index 8d2955d7979..9a85a6bc34b 100644
--- a/src/app/register/register-student/register-student.component.ts
+++ b/src/app/register/register-student/register-student.component.ts
@@ -1,47 +1,22 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { UserService } from '../../services/user.service';
-import { ConfigService } from '../../services/config.service';
+import { Component } from '@angular/core';
 import { GoogleUser } from '../../modules/google-sign-in/GoogleUser';
+import { AbstractRegisterUserComponent } from '../abstract-register-user.component';
 
 @Component({
   selector: 'app-register-student',
   templateUrl: './register-student.component.html',
   styleUrls: ['./register-student.component.scss']
 })
-export class RegisterStudentComponent implements OnInit {
-  firstName: string = '';
-  lastName: string = '';
-  isGoogleAuthenticationEnabled: boolean = false;
+export class RegisterStudentComponent extends AbstractRegisterUserComponent {
+  protected firstName: string = '';
+  protected joinFormPath: string = '/join/student/form';
+  protected lastName: string = '';
 
-  constructor(
-    private configService: ConfigService,
-    private router: Router,
-    private userService: UserService
-  ) {}
-
-  ngOnInit(): void {
-    this.configService.getConfig().subscribe((config) => {
-      if (config != null) {
-        this.isGoogleAuthenticationEnabled = config.googleClientId != null;
-      }
-    });
-  }
-
-  public signUp(): void {
-    this.router.navigate([
-      'join/student/form',
-      { firstName: this.firstName, lastName: this.lastName }
-    ]);
+  protected getFormParams(): any {
+    return { firstName: this.firstName, lastName: this.lastName };
   }
 
-  public googleSignIn(credential: GoogleUser): void {
-    this.userService.isGoogleIdExists(credential.sub).subscribe((isExists) => {
-      if (isExists) {
-        this.router.navigate(['join/googleUserAlreadyExists']);
-      } else {
-        this.router.navigate(['join/student/form', { gID: credential.sub, name: credential.name }]);
-      }
-    });
+  protected getGoogleFormParams(credential: GoogleUser): any {
+    return { gID: credential.sub, name: credential.name };
   }
 }
diff --git a/src/app/register/register-teacher-complete/register-teacher-complete.component.html b/src/app/register/register-teacher-complete/register-teacher-complete.component.html
index 4c9af227829..d2734c369b2 100644
--- a/src/app/register/register-teacher-complete/register-teacher-complete.component.html
+++ b/src/app/register/register-teacher-complete/register-teacher-complete.component.html
@@ -1,13 +1,13 @@
 <mat-card class="standalone__content standalone__content--sm mat-elevation-z4 center">
   <mat-card-content>
     <h2 class="standalone__title accent" i18n>Your WISE account has been created!</h2>
-    <p *ngIf="!isUsingGoogleId" class="mat-subtitle-2" i18n>
+    <p *ngIf="!socialAccount" class="mat-subtitle-2" i18n>
       Your username is: <span class="mat-headline-6">{{ username }}</span
       >.
     </p>
     <p i18n>You should receive an email with your account details shortly.</p>
     <p>
-      <a *ngIf="!isUsingGoogleId" mat-flat-button color="primary" (click)="login()" i18n
+      <a *ngIf="!socialAccount" mat-flat-button color="primary" (click)="login()" i18n
         >Sign In to Get Started</a
       >
       <a
@@ -21,6 +21,17 @@ <h2 class="standalone__title accent" i18n>Your WISE account has been created!</h
           >Sign in with Google</ng-container
         >
       </a>
+      <a
+        *ngIf="isUsingMicrosoftId"
+        class="button--social-login button--microsoft"
+        href="{{ microsoftLogInURL }}"
+        color="accent"
+        mat-raised-button
+      >
+        <img src="assets/img/icons/ms-logo.svg" i18n-alt alt="Microsoft logo" /><ng-container i18n
+          >Sign in with Microsoft</ng-container
+        >
+      </a>
     </p>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.html b/src/app/register/register-teacher-form/register-teacher-form.component.html
index 467a5d2a797..0a300b5c236 100644
--- a/src/app/register/register-teacher-form/register-teacher-form.component.html
+++ b/src/app/register/register-teacher-form/register-teacher-form.component.html
@@ -141,7 +141,10 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
           />
         </mat-form-field>
       </p>
-      <div *ngIf="user.googleUserId == null" formGroupName="passwords">
+      <div
+        *ngIf="user.googleUserId == null && user.microsoftUserId == null"
+        formGroupName="passwords"
+      >
         <new-password-and-confirm
           [formGroup]="passwordsFormGroup"
           [passwordLabel]="passwordLabel"
diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts b/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts
index 44a57b1ccf9..fb7a0c4b941 100644
--- a/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts
+++ b/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts
@@ -144,7 +144,7 @@ async function createAccount() {
         await component.createAccount();
         expect(routerNavigateSpy).toHaveBeenCalledWith([
           'join/teacher/complete',
-          { username: username, isUsingGoogleId: false }
+          { username: username, isUsingGoogleId: false, isUsingMicrosoftId: false }
         ]);
       })
     );
diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.ts b/src/app/register/register-teacher-form/register-teacher-form.component.ts
index 68a747f537e..3a8435353ff 100644
--- a/src/app/register/register-teacher-form/register-teacher-form.component.ts
+++ b/src/app/register/register-teacher-form/register-teacher-form.component.ts
@@ -57,7 +57,8 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
       this.user.googleUserId = params['gID'];
-      if (!this.isUsingGoogleId()) {
+      this.user.microsoftUserId = params['mID'];
+      if (!this.isSocialAccount()) {
         this.createTeacherAccountFormGroup.addControl('passwords', this.passwordsFormGroup);
       }
       const name = params['name'];
@@ -73,10 +74,18 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
     this.changeDetectorRef.detectChanges();
   }
 
+  private isSocialAccount(): boolean {
+    return this.isUsingGoogleId() || this.isUsingMicrosoftId();
+  }
+
   private isUsingGoogleId(): boolean {
     return this.user.googleUserId != null;
   }
 
+  private isUsingMicrosoftId(): boolean {
+    return this.user.microsoftUserId != null;
+  }
+
   private setControlFieldValue(name: string, value: string): void {
     this.createTeacherAccountFormGroup.controls[name].setValue(value);
   }
@@ -100,7 +109,11 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   private createAccountSuccess(response: any): void {
     this.router.navigate([
       'join/teacher/complete',
-      { username: response.username, isUsingGoogleId: this.isUsingGoogleId() }
+      {
+        username: response.username,
+        isUsingGoogleId: this.isUsingGoogleId(),
+        isUsingMicrosoftId: this.isUsingMicrosoftId()
+      }
     ]);
     this.processing = false;
   }
@@ -113,10 +126,11 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
       const token = await this.recaptchaV3Service.execute('importantAction').toPromise();
       this.user['token'] = token;
     }
-    if (!this.isUsingGoogleId()) {
+    if (!this.isSocialAccount()) {
       this.user['password'] = this.getPassword();
       delete this.user['passwords'];
       delete this.user['googleUserId'];
+      delete this.user['microsoftUserId'];
     }
   }
 
diff --git a/src/app/register/register-teacher/register-teacher.component.html b/src/app/register/register-teacher/register-teacher.component.html
index b3692bfebc6..29c073652d6 100644
--- a/src/app/register/register-teacher/register-teacher.component.html
+++ b/src/app/register/register-teacher/register-teacher.component.html
@@ -12,12 +12,28 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
         <ng-container i18n>Sign Up</ng-container>
       </button>
     </p>
-    <span *ngIf="isGoogleAuthenticationEnabled">
+    <ng-container *ngIf="googleAuthenticationEnabled || microsoftAuthenticationEnabled">
       <p class="center mat-headline-6" i18n>- or -</p>
       <p class="center">
-        <google-sign-in-button (signedIn)="googleSignIn($event)" text="signup_with">
+        <google-sign-in-button
+          *ngIf="googleAuthenticationEnabled"
+          (signedIn)="googleSignIn($event)"
+          text="signup_with"
+        >
         </google-sign-in-button>
       </p>
-    </span>
+      <p class="center">
+        <button
+          *ngIf="microsoftAuthenticationEnabled"
+          class="button--social-login button--microsoft"
+          color="accent"
+          mat-flat-button
+          (click)="microsoftSignIn()"
+        >
+          <img src="assets/img/icons/ms-logo.svg" alt="Microsoft logo" />
+          <ng-container i18n>Sign up with Microsoft</ng-container>
+        </button>
+      </p>
+    </ng-container>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/register/register-teacher/register-teacher.component.ts b/src/app/register/register-teacher/register-teacher.component.ts
index 37fd47f8c09..d85dedbe35e 100644
--- a/src/app/register/register-teacher/register-teacher.component.ts
+++ b/src/app/register/register-teacher/register-teacher.component.ts
@@ -1,46 +1,21 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { UserService } from '../../services/user.service';
-import { ConfigService } from '../../services/config.service';
+import { Component } from '@angular/core';
 import { GoogleUser } from '../../modules/google-sign-in/GoogleUser';
+import { AbstractRegisterUserComponent } from '../abstract-register-user.component';
 
 @Component({
   selector: 'app-register-teacher',
   templateUrl: './register-teacher.component.html',
   styleUrls: ['./register-teacher.component.scss']
 })
-export class RegisterTeacherComponent implements OnInit {
-  email: string = '';
-  isGoogleAuthenticationEnabled: boolean = false;
+export class RegisterTeacherComponent extends AbstractRegisterUserComponent {
+  protected email: string = '';
+  protected joinFormPath: string = '/join/teacher/form';
 
-  constructor(
-    private configService: ConfigService,
-    private router: Router,
-    private userService: UserService
-  ) {}
-
-  ngOnInit() {
-    this.configService.getConfig().subscribe((config) => {
-      if (config != null) {
-        this.isGoogleAuthenticationEnabled = config.googleClientId != null;
-      }
-    });
-  }
-
-  public signUp() {
-    this.router.navigate(['join/teacher/form', { email: this.email }]);
+  protected getFormParams(): any {
+    return { email: this.email };
   }
 
-  public googleSignIn(credential: GoogleUser): void {
-    this.userService.isGoogleIdExists(credential.sub).subscribe((isExists) => {
-      if (isExists) {
-        this.router.navigate(['join/googleUserAlreadyExists']);
-      } else {
-        this.router.navigate([
-          'join/teacher/form',
-          { gID: credential.sub, name: credential.name, email: credential.email }
-        ]);
-      }
-    });
+  protected getGoogleFormParams(credential: GoogleUser): any {
+    return { gID: credential.sub, name: credential.name, email: credential.email };
   }
 }
diff --git a/src/app/register/register-user-complete.component.ts b/src/app/register/register-user-complete.component.ts
index 393d4e09a1a..32713669010 100644
--- a/src/app/register/register-user-complete.component.ts
+++ b/src/app/register/register-user-complete.component.ts
@@ -7,7 +7,10 @@ import { ConfigService } from '../services/config.service';
 })
 export abstract class RegisterUserCompleteComponent implements OnInit {
   protected googleLogInURL = `${this.configService.getContextPath()}/api/google-login`;
+  protected microsoftLogInURL = `${this.configService.getContextPath()}/api/microsoft-login?redirectUrl=/`;
+  protected socialAccount: boolean;
   protected isUsingGoogleId: boolean;
+  protected isUsingMicrosoftId: boolean;
   protected username: string;
 
   constructor(
@@ -17,9 +20,11 @@ export abstract class RegisterUserCompleteComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.subscribe(({ username, isUsingGoogleId }) => {
+    this.route.params.subscribe(({ username, isUsingGoogleId, isUsingMicrosoftId }) => {
       this.username = username;
       this.isUsingGoogleId = isUsingGoogleId === 'true';
+      this.isUsingMicrosoftId = isUsingMicrosoftId === 'true';
+      this.socialAccount = this.isUsingGoogleId || this.isUsingMicrosoftId;
     });
   }
 
diff --git a/src/app/register/register.module.ts b/src/app/register/register.module.ts
index 2650356bfc2..022ed0c1527 100644
--- a/src/app/register/register.module.ts
+++ b/src/app/register/register.module.ts
@@ -22,6 +22,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSelectModule } from '@angular/material/select';
 import { GoogleSignInModule } from '../modules/google-sign-in/google-sign-in.module';
 import { PasswordModule } from '../password/password.module';
+import { RegisterMicrosoftUserAlreadyExistsComponent } from './register-microsoft-user-already-exists/register-microsoft-user-already-exists.component';
 
 const materialModules = [
   MatButtonModule,
@@ -54,7 +55,8 @@ const materialModules = [
     RegisterStudentFormComponent,
     RegisterStudentCompleteComponent,
     RegisterStudentComponent,
-    RegisterGoogleUserAlreadyExistsComponent
+    RegisterGoogleUserAlreadyExistsComponent,
+    RegisterMicrosoftUserAlreadyExistsComponent
   ],
   exports: [RegisterComponent]
 })
diff --git a/src/assets/img/icons/ms-logo.svg b/src/assets/img/icons/ms-logo.svg
new file mode 100644
index 00000000000..1f739764834
--- /dev/null
+++ b/src/assets/img/icons/ms-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
\ No newline at end of file
diff --git a/src/messages.xlf b/src/messages.xlf
index a5fefe8ae19..f952e1cd361 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -2008,7 +2008,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
-          <context context-type="linenumber">27</context>
+          <context context-type="linenumber">30</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f24b47c26f17b04695929c82f78baeafbbd1f599" datatype="html">
@@ -2110,11 +2110,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-student-form/register-student-form.component.html</context>
-          <context context-type="linenumber">152</context>
+          <context context-type="linenumber">155</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">175</context>
+          <context context-type="linenumber">178</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8af130692c59ce32c501fdbb8b80a9dd6be2f056" datatype="html">
@@ -2538,7 +2538,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
-          <context context-type="linenumber">17</context>
+          <context context-type="linenumber">20</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9b59fedafe883c50e868d884b7a0faeca8f2ccc9" datatype="html">
@@ -2672,11 +2672,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-student-form/register-student-form.component.html</context>
-          <context context-type="linenumber">145,149</context>
+          <context context-type="linenumber">148,152</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">168,172</context>
+          <context context-type="linenumber">171,175</context>
         </context-group>
       </trans-unit>
       <trans-unit id="18036423310428495" datatype="html">
@@ -4991,18 +4991,37 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">21</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="59389e278152912fc2e41ca16431d02d667262d8" datatype="html">
+        <source>Sign in with Microsoft</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/login/login-home/login-home.component.html</context>
+          <context context-type="linenumber">84</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-student-complete/register-student-complete.component.html</context>
+          <context context-type="linenumber">34</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-teacher-complete/register-teacher-complete.component.html</context>
+          <context context-type="linenumber">32</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="cabe636014527fb69951e0f36b7aec9697e00c71" datatype="html">
         <source>Forgot username or password?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/login/login-home/login-home.component.html</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">91</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c6c31f501feef87ab274bd3a000b99eeb7434cff" datatype="html">
         <source>New to WISE? <x id="START_LINK" ctype="x-a" equiv-text="&lt;a routerLink=&quot;/join&quot;&gt;"/>Join for free!<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/login/login-home/login-home.component.html</context>
-          <context context-type="linenumber">81,82</context>
+          <context context-type="linenumber">92,93</context>
         </context-group>
       </trans-unit>
       <trans-unit id="acd82db1a5e5f81b87f6a6b1639f028a4d106d49" datatype="html">
@@ -5038,13 +5057,17 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/register/register-google-user-already-exists/register-google-user-already-exists.component.html</context>
           <context context-type="linenumber">3</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-student-form/register-student-form.component.html</context>
-          <context context-type="linenumber">164</context>
+          <context context-type="linenumber">167</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">187</context>
+          <context context-type="linenumber">190</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6cdb1fea93d77c07950c0c76c6e0ad79ebbef084" datatype="html">
@@ -6964,25 +6987,54 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">2,4</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="34ae6eff5696c4c8367c3b748dc04f539f4d6be1" datatype="html">
+        <source> Sorry, your Microsoft User ID was not found in WISE. </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
+          <context context-type="linenumber">5,7</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="0374570fb5bc65ef42fa03c5923070a11d7f0b5e" datatype="html">
         <source>Create WISE Account</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
-          <context context-type="linenumber">5</context>
+          <context context-type="linenumber">8</context>
         </context-group>
       </trans-unit>
       <trans-unit id="de4f0be5b99420e05b27c9fc347488dd6babca71" datatype="html">
         <source>Students can view and complete WISE lessons offered by teachers.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">22</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5d440e046aeae72880c188414cdafa69bf9b4f97" datatype="html">
         <source>Teachers can select, author, and run WISE lessons with their students.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-home/register-home.component.html</context>
-          <context context-type="linenumber">29</context>
+          <context context-type="linenumber">32</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="9cf37b81962ddd2eb54d8f4e813d0fd1d5a1787b" datatype="html">
+        <source>Hi! This Microsoft user already has a WISE account.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="377993b426ef138f79016dfddae1265fdb30015f" datatype="html">
+        <source>Microsoft logo</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-microsoft-user-already-exists/register-microsoft-user-already-exists.component.html</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-student-complete/register-student-complete.component.html</context>
+          <context context-type="linenumber">33</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-teacher-complete/register-teacher-complete.component.html</context>
+          <context context-type="linenumber">31</context>
         </context-group>
       </trans-unit>
       <trans-unit id="89a4722a9d6828f6aa9e3600033561ffad582c36" datatype="html">
@@ -7093,18 +7145,18 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> By clicking &quot;Create Account&quot;, you agree to our <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;privacy&quot; target=&quot;_blank&quot;&gt;"/>Privacy Policy &amp; Terms of Use<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-student-form/register-student-form.component.html</context>
-          <context context-type="linenumber">141,144</context>
+          <context context-type="linenumber">144,147</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eff46e15d30eee98b8bb31d835447d6fd4890837" datatype="html">
         <source> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-student-form/register-student-form.component.html</context>
-          <context context-type="linenumber">154</context>
+          <context context-type="linenumber">157</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">177</context>
+          <context context-type="linenumber">180</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5667840900782067941" datatype="html">
@@ -7139,6 +7191,17 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">12</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="4d52b342afecb0f1390df3bb9671aca12bc71777" datatype="html">
+        <source>Sign up with Microsoft</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-student/register-student.component.html</context>
+          <context context-type="linenumber">40</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/register/register-teacher/register-teacher.component.html</context>
+          <context context-type="linenumber">34</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="b6c571f49a9876275382c366aabd8aac85dbbd8f" datatype="html">
         <source>You should receive an email with your account details shortly.</source>
         <context-group purpose="location">
@@ -7292,14 +7355,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>I agree to the <x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;privacy&quot; target=&quot;_blank&quot;&gt;"/>WISE Privacy Policy &amp; Terms of Use<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> *</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">156,158</context>
+          <context context-type="linenumber">159,161</context>
         </context-group>
       </trans-unit>
       <trans-unit id="63fa2c4efa44cd8a08579763cdd62f981a8b1aaa" datatype="html">
         <source>You must agree to the Privacy Policy &amp; Terms of Use</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-teacher-form/register-teacher-form.component.html</context>
-          <context context-type="linenumber">164</context>
+          <context context-type="linenumber">167</context>
         </context-group>
       </trans-unit>
       <trans-unit id="223846e3b440a5bf278a46411d71586ac79cc6ec" datatype="html">
diff --git a/src/style/components/_buttons.scss b/src/style/components/_buttons.scss
index dac1c5f963d..ac847603860 100644
--- a/src/style/components/_buttons.scss
+++ b/src/style/components/_buttons.scss
@@ -48,14 +48,31 @@
   img {
     width: 16px;
     height: auto;
-    margin: 0 16px 0 -14px;
+    margin-left: -16px;
     padding: 8px;
-    background-color: #fff;
-    border-radius: 2px;
   }
 }
 
 .button--google {
   background-color: #1a73e8 !important;
-  text-transform: none;
+  text-transform: none !important;
+
+  img {
+    background-color: #ffffff;
+    border-radius: 2px;
+    margin: 0 16px 0 -14px;
+  }
+}
+
+.button--microsoft {
+  background-color: #2f2f2f !important;
+  color: #ffffff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+  border-radius: 0 !important;
+
+  img {
+    margin: 0 4px 0 -12px;
+  }
 }