diff --git a/package-lock.json b/package-lock.json
index 080216d..09bf810 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
         "@angular/platform-browser": "^16.1.4",
         "@angular/platform-browser-dynamic": "^16.1.4",
         "@angular/router": "^16.1.4",
+        "@azure/msal-angular": "^3.0.0-beta.0",
+        "@azure/msal-browser": "^3.0.0-beta.0",
         "@ng-bootstrap/ng-bootstrap": "^15.1.0",
         "bootstrap": "^5.3.0",
         "express-rate-limit": "^6.7.0",
@@ -1146,6 +1148,37 @@
       "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
       "dev": true
     },
+    "node_modules/@azure/msal-angular": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-angular/-/msal-angular-3.0.0-beta.1.tgz",
+      "integrity": "sha512-tAbGUykoJStru4yR1s7JOUyvZfm7CqjaSbOFjVpNT/jpnIuhFdLcT8URIuDHeT2TDX+4DgGsjprUFcWjpcyJaA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@azure/msal-browser": "^3.0.0-beta.1",
+        "rxjs": "^7.0.0"
+      }
+    },
+    "node_modules/@azure/msal-browser": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.0.0-beta.1.tgz",
+      "integrity": "sha512-dgAGPQS6Ae/krVyTjJ6WPBZelGrkrq3mqesu2GGHGG9WMNsH/Eofy1wOfkc2XQ1F/wY7q7Za+BpzBFfYhdGUrg==",
+      "dependencies": {
+        "@azure/msal-common": "14.0.0-beta.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@azure/msal-common": {
+      "version": "14.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.0.0-beta.1.tgz",
+      "integrity": "sha512-zU68eqVJOLh+CQlo8GF5EKYtzYPF/0fOVgXP3lrEa9YqFt4A9sI2Qd2VBaDaA4jGWwddSqquDp6NQbNdO3Wb5Q==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
diff --git a/package.json b/package.json
index a5a1967..d2fd5ff 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,8 @@
     "@angular/platform-browser": "^16.1.4",
     "@angular/platform-browser-dynamic": "^16.1.4",
     "@angular/router": "^16.1.4",
+    "@azure/msal-angular": "^3.0.0-beta.0",
+    "@azure/msal-browser": "^3.0.0-beta.0",
     "@ng-bootstrap/ng-bootstrap": "^15.1.0",
     "bootstrap": "^5.3.0",
     "express-rate-limit": "^6.7.0",
diff --git a/src/app/app.component.css b/src/app/app.component.css
index fbb743f..b22bde9 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -71,3 +71,13 @@ button {
 .navigation button {
   font-weight: bold;
 }
+
+.login-button {
+  color: white;
+  font-weight: bold;
+}
+
+.logout-button {
+  color: white;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7147149..ae2f479 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -27,7 +27,28 @@
           alt="Neurodiversity in Buisness Logo"
         />
       </div>
+
       <div class="col" style="text-align: right">
+        <div>
+          <button
+            class="login-button btn btn-primary"
+            *ngIf="!loginDisplay"
+            (click)="loginRedirect()"
+          >
+            Login
+          </button>
+          <p *ngIf="loginDisplay">
+            Welcome {{ username }}
+            <button
+              class="logout-button btn btn-secondary"
+              *ngIf="loginDisplay"
+              (click)="logout()"
+            >
+              Logout
+            </button>
+          </p>
+        </div>
+        <br /><br />
         <div [(ngbCollapse)]="isMenuCollapsed" class="collapse navbar-collapse">
           <ul
             [keyboard]="true"
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index 6cb78ca..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, NgbNavModule],
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'neurodiversity-main'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('Neurodiversity in Business');
-  });
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8d667b5..b22dbef 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,28 +2,52 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  Inject,
+  OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { DisplayContentService } from './display-content.service';
-
+import {
+  MsalService,
+  MsalBroadcastService,
+  MSAL_GUARD_CONFIG,
+  MsalGuardConfiguration,
+} from '@azure/msal-angular';
+import {
+  AuthenticationResult,
+  InteractionStatus,
+  PopupRequest,
+  RedirectRequest,
+  EventMessage,
+  EventType,
+} from '@azure/msal-browser';
+import { Subject } from 'rxjs/internal/Subject';
+import { filter, takeUntil } from 'rxjs/operators';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent implements OnInit, AfterViewInit {
+export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('nav') nav: ElementRef;
   title = 'Neurodiversity in Business';
   navActiveId = 1;
   isContentShown = true;
   isMenuCollapsed = window.innerWidth <= 991;
+  loginDisplay = false;
+  username = "";
+  private readonly _destroying$ = new Subject<void>();
+
   public isMobileLayout = false;
 
   constructor(
     private displayContentService: DisplayContentService,
-    private router: Router
+    private router: Router,
+    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
+    private authService: MsalService,
+    private msalBroadcastService: MsalBroadcastService
   ) {}
 
   ngOnInit() {
@@ -34,6 +58,41 @@ export class AppComponent implements OnInit, AfterViewInit {
       this.isMobileLayout = window.innerWidth <= 991;
       this.isMenuCollapsed = this.isMobileLayout;
     };
+    this.setLoginDisplay();
+    this.authService.handleRedirectObservable().subscribe((res) => {
+      this.isContentShown = true;
+      this.username  =  this.authService.instance.getActiveAccount()?.name!;
+      console.log(res);
+    });
+
+    this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
+    this.msalBroadcastService.msalSubject$
+      .pipe(
+        filter(
+          (msg: EventMessage) =>
+            msg.eventType === EventType.ACCOUNT_ADDED ||
+            msg.eventType === EventType.ACCOUNT_REMOVED
+        )
+      )
+      .subscribe((result: EventMessage) => {
+        if (this.authService.instance.getAllAccounts().length === 0) {
+          window.location.pathname = '/';
+        } else {
+          this.setLoginDisplay();
+        }
+      });
+
+    this.msalBroadcastService.inProgress$
+      .pipe(
+        filter(
+          (status: InteractionStatus) => status === InteractionStatus.None
+        ),
+        takeUntil(this._destroying$)
+      )
+      .subscribe(() => {
+        this.setLoginDisplay();
+        this.checkAndSetActiveAccount();
+      });
   }
 
   ngAfterViewInit(): void {
@@ -58,7 +117,49 @@ export class AppComponent implements OnInit, AfterViewInit {
       },
     });
   }
+  setLoginDisplay() {
+    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
+  }
+  checkAndSetActiveAccount() {
+    /**
+     * If no active account set but there are accounts signed in, sets first account to active account
+     * To use active account set here, subscribe to inProgress$ first in your component
+     * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
+     */
+    let activeAccount = this.authService.instance.getActiveAccount();
 
+    if (
+      !activeAccount &&
+      this.authService.instance.getAllAccounts().length > 0
+    ) {
+      let accounts = this.authService.instance.getAllAccounts();
+      this.authService.instance.setActiveAccount(accounts[0]);
+    }
+  }
+  loginRedirect() {
+    if (this.msalGuardConfig.authRequest) {
+      this.authService.loginRedirect({
+        ...this.msalGuardConfig.authRequest,
+      } as RedirectRequest);
+    } else {
+      this.authService.loginRedirect();
+    }
+  }
+
+  logout(popup?: boolean) {
+    if (popup) {
+      this.authService.logoutPopup({
+        mainWindowRedirectUri: '/',
+      });
+    } else {
+      this.authService.logoutRedirect();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this._destroying$.next(undefined);
+    this._destroying$.complete();
+  }
   toggleContent(flag: string) {
     if (flag == 'hide') {
       this.isContentShown = false;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d212757..6203e87 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,6 +19,82 @@ import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.componen
 import { CookiePolicyComponent } from './cookie-policy/cookie-policy.component';
 import { SlaveryPolicyComponent } from './slavery-policy/slavery-policy.component';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import {
+  MsalInterceptorConfiguration,
+  MsalGuardConfiguration,
+  MsalModule,
+  MSAL_GUARD_CONFIG,
+  MSAL_INSTANCE,
+  MSAL_INTERCEPTOR_CONFIG,
+  MsalBroadcastService,
+  MsalGuard,
+  MsalInterceptor,
+  MsalService,
+  MsalRedirectComponent,
+} from '@azure/msal-angular';
+import {
+  LogLevel,
+  IPublicClientApplication,
+  PublicClientApplication,
+  BrowserCacheLocation,
+  InteractionType,
+} from '@azure/msal-browser';
+import { environment } from 'src/environments/environment';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+
+const isIE =
+  window.navigator.userAgent.indexOf('MSIE ') > -1 ||
+  window.navigator.userAgent.indexOf('Trident/') > -1; // Remove this line to use Angular Universal
+
+export function loggerCallback(logLevel: LogLevel, message: string) {
+  console.log(message);
+}
+
+export function MSALInstanceFactory(): IPublicClientApplication {
+  return new PublicClientApplication({
+    auth: {
+      clientId: environment.msalConfig.auth.clientId,
+      authority: environment.msalConfig.auth.authority,
+      redirectUri: '/',
+      postLogoutRedirectUri: '/',
+    },
+    cache: {
+      cacheLocation: BrowserCacheLocation.LocalStorage,
+      storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal
+    },
+    system: {
+      allowNativeBroker: false, // Disables WAM Broker
+      loggerOptions: {
+        loggerCallback,
+        logLevel: LogLevel.Info,
+        piiLoggingEnabled: false,
+      },
+    },
+  });
+}
+
+export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
+  const protectedResourceMap = new Map<string, Array<string>>();
+  protectedResourceMap.set(
+    environment.apiConfig.uri,
+    environment.apiConfig.scopes
+  );
+
+  return {
+    interactionType: InteractionType.Redirect,
+    protectedResourceMap,
+  };
+}
+
+export function MSALGuardConfigFactory(): MsalGuardConfiguration {
+  return {
+    interactionType: InteractionType.Redirect,
+    authRequest: {
+      scopes: [...environment.apiConfig.scopes],
+    },
+    loginFailedRoute: '/',
+  };
+}
 
 @NgModule({
   declarations: [
@@ -41,9 +117,32 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
     NgbModule,
     NgbCarouselModule,
     PdfViewerModule,
+    MsalModule,
   ],
   exports: [],
-  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
-  bootstrap: [AppComponent],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: MsalInterceptor,
+      multi: true,
+    },
+    {
+      provide: MSAL_INSTANCE,
+      useFactory: MSALInstanceFactory,
+    },
+    {
+      provide: MSAL_GUARD_CONFIG,
+      useFactory: MSALGuardConfigFactory,
+    },
+    {
+      provide: MSAL_INTERCEPTOR_CONFIG,
+      useFactory: MSALInterceptorConfigFactory,
+    },
+    MsalService,
+    MsalGuard,
+    MsalBroadcastService,
+  ],
+  bootstrap: [AppComponent, MsalRedirectComponent, HomeComponent],
 })
 export class AppModule {}
diff --git a/src/app/member-start/member-start.component.ts b/src/app/member-start/member-start.component.ts
index e5e04d6..505992b 100644
--- a/src/app/member-start/member-start.component.ts
+++ b/src/app/member-start/member-start.component.ts
@@ -6,10 +6,10 @@ import { Component } from '@angular/core';
   styleUrls: ['./member-start.component.css'],
 })
 export class MemberStartComponent {
-  showContent:boolean = true;
-  showOrgForm:boolean = false;
-  showCorpForm:boolean = false;
-  showIndividualForm:boolean = false;
+  showContent: boolean = true;
+  showOrgForm: boolean = false;
+  showCorpForm: boolean = false;
+  showIndividualForm: boolean = false;
   navigateToForm(locationName: string) {
     switch (locationName) {
       case 'member':
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index c966979..7a6d4dc 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,14 @@
 export const environment = {
   production: true,
+  msalConfig: {
+    auth: {
+      clientId: '6f3bb1f9-e622-4235-a5f7-5a33286d9a4a',
+      authority:
+        'https://login.microsoftonline.com/b03441e2-ab97-45c2-a6dd-c52e3f5934af',
+    },
+  },
+  apiConfig: {
+    scopes: ['user.read'],
+    uri: 'ENTER_URI',
+  },
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 66998ae..0f97528 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,16 +1,14 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
   production: false,
+  msalConfig: {
+    auth: {
+      clientId: 'b5c2e510-4a17-4feb-b219-e55aa5b74144',
+      authority:
+        'https://login.microsoftonline.com/b03441e2-ab97-45c2-a6dd-c52e3f5934af',
+    },
+  },
+  apiConfig: {
+    scopes: ['user.read'],
+    uri: 'http://localhost:4200/',
+  },
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/src/google322471aa35846144.html b/src/google322471aa35846144.html
deleted file mode 100644
index 6c82919..0000000
--- a/src/google322471aa35846144.html
+++ /dev/null
@@ -1 +0,0 @@
-google-site-verification: google322471aa35846144.html
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 587ced0..317b8cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,10 @@
       property="og:description"
       content="Welcome to NiB (Neurodiversity in Business). We are a business forum and industry group for organisations to share industry good practice on ND recruitment, retention and empowerment. We want to support businesses in building a better workplace for Neurodivergent employees, access Neurodivergent talent and support Neurodivergent people to navigate independent, fulfilling careers. We currently count many of the UK's leading employers among our members and are supported by leading thinkers in Neurodiversity. NiB is a voluntary forum, with no membership fees. Our aim is to work collaboratively with our members to improve conditions for Neurodivergent people in employment."
     />
-    <meta property="og:image" content="https://neurodiversity.org/assets/logo.png" />
+    <meta
+      property="og:image"
+      content="https://neurodiversity.org/assets/logo.png"
+    />
     <meta property="og:url" content="https://neurodiversity.org" />
     <title>Neurodiversity in Business</title>
     <meta