diff --git a/angular-spa/angular.json b/angular-spa/angular.json
index a0f1509e..fbeb8f68 100644
--- a/angular-spa/angular.json
+++ b/angular-spa/angular.json
@@ -21,7 +21,11 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json"
+            "tsConfig": "tsconfig.app.json",
+            "styles": [
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ]
           },
           "configurations": {
             "development": {
diff --git a/angular-spa/package-lock.json b/angular-spa/package-lock.json
index 9b542a7e..af751aca 100644
--- a/angular-spa/package-lock.json
+++ b/angular-spa/package-lock.json
@@ -18,6 +18,7 @@
         "@angular/router": "~12.2.0",
         "@azure/msal-angular": "^2.1.1",
         "@azure/msal-browser": "^2.22.0",
+        "bootstrap": "^5.3.1",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -2482,6 +2483,16 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "12.2.16",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.16.tgz",
@@ -3452,6 +3463,24 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -17406,6 +17435,12 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true
+    },
     "@schematics/angular": {
       "version": "12.2.16",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.16.tgz",
@@ -18206,6 +18241,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/angular-spa/package.json b/angular-spa/package.json
index 6d6bda8d..ae01e72a 100644
--- a/angular-spa/package.json
+++ b/angular-spa/package.json
@@ -20,6 +20,7 @@
     "@angular/router": "~12.2.0",
     "@azure/msal-angular": "^2.1.1",
     "@azure/msal-browser": "^2.22.0",
+    "bootstrap": "^5.3.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
diff --git a/angular-spa/src/app/app.component.html b/angular-spa/src/app/app.component.html
index d0eae0df..3645bb15 100644
--- a/angular-spa/src/app/app.component.html
+++ b/angular-spa/src/app/app.component.html
@@ -1,7 +1,13 @@
-<a href="/">Home</a> |
-<a [routerLink]="['profile']">View Profile</a> |
-<button *ngIf="!loginDisplay" (click)="login()">Login</button>
-<button *ngIf="loginDisplay" (click)="logout()">Logout</button>
+<a class="navbar navbar-dark bg-primary " variant="dark" href="/">
+	<a class="navbar-brand" > Microsoft Identity Platform </a>
+		<a>
+			<button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
+			<button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Signout</button>
+		</a>
+</a>
+	<a class="profileButton">
+		<a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a> 
+	</a>
 <div class="container">
 	<router-outlet></router-outlet>
 </div>
\ No newline at end of file
diff --git a/angular-spa/src/app/app.module.ts b/angular-spa/src/app/app.module.ts
index e6d816a3..c442c2a0 100644
--- a/angular-spa/src/app/app.module.ts
+++ b/angular-spa/src/app/app.module.ts
@@ -23,13 +23,11 @@ export function MSALInstanceFactory(): IPublicClientApplication {
   return new PublicClientApplication({
     auth: {
       // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
-      clientId: '',
-    
+      clientId: "Enter_the_Application_Id_Here",
       // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
-      authority: '',
-
+      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
       // Must be the same redirectUri as what was provided in your AD app registration.
-      redirectUri: ''
+      redirectUri: "http://localhost:4200",
     },
     cache: {
       cacheLocation: BrowserCacheLocation.LocalStorage,
diff --git a/angular-spa/src/app/home/home.component.html b/angular-spa/src/app/home/home.component.html
index 8d2cd7ae..e70d5d6b 100644
--- a/angular-spa/src/app/home/home.component.html
+++ b/angular-spa/src/app/home/home.component.html
@@ -1,5 +1,6 @@
-<div>
-    <p>This sample demonstrates how to configure MSAL for Angular to login, logout, protect a route, and acquire an access token for a protected API (Microsoft Graph).</p>
-
-    <p>View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
+<div class="title">
+    <h5>
+        Welcome to the Microsoft Authentication Library For Javascript - Angular SPAx
+    </h5>
+    <p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
 </div>
\ No newline at end of file
diff --git a/angular-spa/src/app/profile/profile.component.html b/angular-spa/src/app/profile/profile.component.html
index a9505b9d..16d0a402 100644
--- a/angular-spa/src/app/profile/profile.component.html
+++ b/angular-spa/src/app/profile/profile.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="profile">
     <p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
     <p><strong>Display Name:</strong> {{profile?.displayName}}</p>
     <p><strong>Given Name:</strong> {{profile?.givenName}}</p>
diff --git a/angular-spa/src/index.html b/angular-spa/src/index.html
index a9fe758d..b2bad65d 100644
--- a/angular-spa/src/index.html
+++ b/angular-spa/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Angular 12 - MSAL Example</title>
+    <title>MSAL For Javascript - Angular SPA</title>
   </head>
   <body>
     <app-root></app-root>
diff --git a/angular-spa/src/styles.css b/angular-spa/src/styles.css
new file mode 100644
index 00000000..15736aaf
--- /dev/null
+++ b/angular-spa/src/styles.css
@@ -0,0 +1,35 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.app {
+  text-align: center;
+  padding: 8px;
+}
+
+.title{
+  text-align: center;
+  padding: 18px;
+}
+
+
+.profile{
+  text-align: center;
+  padding: 18px;
+}
+
+.profileButton{
+  display: flex;
+  justify-content: center;
+  padding: 18px;
+}
\ No newline at end of file