From b1eb6b832fb13f5e436061be439a8d3aceef5a50 Mon Sep 17 00:00:00 2001
From: Won Song <wosong@microsoft.com>
Date: Mon, 16 Sep 2024 19:57:05 -0400
Subject: [PATCH] Dark theme, telemetry, spinner, refactoring

---
 Client/package-lock.json                      | 132 ++++++++++
 Client/package.json                           |   5 +-
 .../src/components/Form/Button/BaseButton.tsx |  22 ++
 .../components/Form/Button/DefaultButton.tsx  |  13 +-
 .../components/Form/Button/PrimaryButton.tsx  |   9 +-
 Client/src/components/Form/Button/button.scss |  10 +-
 .../components/Form/Button/button.types.ts    |   2 +
 .../components/Form/TextField/TextField.scss  |  20 ++
 .../components/Form/TextField/TextField.tsx   |  12 +-
 .../src/components/Layout/Footer/Footer.scss  |  10 +-
 .../src/components/Layout/Header/Header.scss  |  37 ++-
 .../src/components/Layout/Header/Header.tsx   |   4 +-
 Client/src/components/Layout/Layout.tsx       |   5 +-
 Client/src/components/Layout/Nav/Nav.scss     |   8 +-
 Client/src/components/Layout/Nav/Nav.tsx      |   8 +-
 .../Layout/SkipToMain/SkipToMain.scss         |  42 ++--
 .../Layout/SkipToMain/SkipToMain.tsx          |   8 +-
 Client/src/components/Spinner/Spinner.scss    |  41 +++
 Client/src/components/Spinner/Spinner.tsx     |  17 ++
 Client/src/components/Spinner/index.ts        |   1 +
 Client/src/hooks/usePageTracking.ts           |  16 +-
 Client/src/hooks/usePrompts.ts                |  17 +-
 Client/src/hooks/useScreenRouting.ts          |  15 --
 Client/src/index.scss                         | 149 ++---------
 Client/src/index.tsx                          |   1 +
 Client/src/models/ScreenType.ts               |   5 -
 Client/src/reset.scss                         | 237 ++++++++++++++++++
 .../src/screens/AdminScreen/AdminScreen.tsx   |  21 +-
 Client/src/screens/GameScreen/GameScreen.tsx  |  11 +-
 .../src/screens/ResultScreen/ResultScreen.tsx |   3 +
 .../src/screens/StartScreen/StartScreen.tsx   |  37 ++-
 Client/src/services/Http.ts                   |   2 +
 Client/src/services/Telemetry.ts              |  53 ++++
 Client/src/variables.scss                     |  15 ++
 README.md                                     |   3 -
 35 files changed, 740 insertions(+), 251 deletions(-)
 create mode 100644 Client/src/components/Form/Button/BaseButton.tsx
 create mode 100644 Client/src/components/Spinner/Spinner.scss
 create mode 100644 Client/src/components/Spinner/Spinner.tsx
 create mode 100644 Client/src/components/Spinner/index.ts
 delete mode 100644 Client/src/hooks/useScreenRouting.ts
 delete mode 100644 Client/src/models/ScreenType.ts
 create mode 100644 Client/src/reset.scss
 create mode 100644 Client/src/variables.scss

diff --git a/Client/package-lock.json b/Client/package-lock.json
index 641edfb..0a90e2f 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -2112,6 +2112,138 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "@microsoft/applicationinsights-analytics-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-3.3.2.tgz",
+      "integrity": "sha512-btFX0IfmKfIZRWQVIRMfYqvLSmsYUTQhx3hcbAgPhNSfLlm1AXko4+dIiE5uBKdXa0iGcHXM4g95/SwKFVd2+w==",
+      "requires": {
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-cfgsync-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-cfgsync-js/-/applicationinsights-cfgsync-js-3.3.2.tgz",
+      "integrity": "sha512-ns6QjGyHT82EZ+LXnisAKyrZW3JcHfkhV9f810c0TF0SlRcyJKxMRoLTtaVIz4FHnKS9Jp/O2DeM6F2xL009lg==",
+      "requires": {
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-async": ">= 0.5.2 < 2.x",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-channel-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-channel-js/-/applicationinsights-channel-js-3.3.2.tgz",
+      "integrity": "sha512-ic1oCQgGzitCLMYMHOgGuQvqd8G81s8R7ynI0NBgXc7pkzGiatCkLGx2lDiIYTYWV+Cd/3+cJwPB+3N8/yTGew==",
+      "requires": {
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-async": ">= 0.5.2 < 2.x",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-common": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-common/-/applicationinsights-common-3.3.2.tgz",
+      "integrity": "sha512-RR6LpIC9JLQGTcgUaAXhuIZW69W00T6sF7GC6LvLy5PRjvg4m3MqflpQfNHt7yGy72ZHFG/TpLH5zJIghrNRew==",
+      "requires": {
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-core-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-core-js/-/applicationinsights-core-js-3.3.2.tgz",
+      "integrity": "sha512-Jo3Mkl6zPswjS90SBbe+TxAOjQqHbwpD00VPca1ZeICc+31dbVNIBgkK42G0DbMB/ml1kqwkFV2/kpAH8QJCrw==",
+      "requires": {
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-async": ">= 0.5.2 < 2.x",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-dependencies-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-dependencies-js/-/applicationinsights-dependencies-js-3.3.2.tgz",
+      "integrity": "sha512-Zd3BI7vQ96kIGiDOxX7tmNUnpSVBmx1OG8Vi3vappo3oswyiQWdOI3cwEfEeQil1qiODZOYTr8WRMSuTC9zQWg==",
+      "requires": {
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-async": ">= 0.5.2 < 2.x",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-properties-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-properties-js/-/applicationinsights-properties-js-3.3.2.tgz",
+      "integrity": "sha512-tG96jiVwD5Z+b684O8hYdqXtEMEAev84kE7P35uYzHPmBKHgCJ4y6rmZQOyxaqTkpGZ8ahcFNzcxJgh+p0ahvQ==",
+      "requires": {
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-shims": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-shims/-/applicationinsights-shims-3.0.1.tgz",
+      "integrity": "sha512-DKwboF47H1nb33rSUfjqI6ryX29v+2QWcTrRvcQDA32AZr5Ilkr7whOOSsD1aBzwqX0RJEIP1Z81jfE3NBm/Lg==",
+      "requires": {
+        "@nevware21/ts-utils": ">= 0.9.4 < 2.x"
+      }
+    },
+    "@microsoft/applicationinsights-web": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web/-/applicationinsights-web-3.3.2.tgz",
+      "integrity": "sha512-qixMWKoymNtqvEzHkxpD6brABbejjUA/pFS9FRSeYAzGpNY0pfEWmlmuFfenqasphXl+5R+81TG0fS+n6fGWmQ==",
+      "requires": {
+        "@microsoft/applicationinsights-analytics-js": "3.3.2",
+        "@microsoft/applicationinsights-cfgsync-js": "3.3.2",
+        "@microsoft/applicationinsights-channel-js": "3.3.2",
+        "@microsoft/applicationinsights-common": "3.3.2",
+        "@microsoft/applicationinsights-core-js": "3.3.2",
+        "@microsoft/applicationinsights-dependencies-js": "3.3.2",
+        "@microsoft/applicationinsights-properties-js": "3.3.2",
+        "@microsoft/applicationinsights-shims": "3.0.1",
+        "@microsoft/dynamicproto-js": "^2.0.3",
+        "@nevware21/ts-async": ">= 0.5.2 < 2.x",
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@microsoft/dynamicproto-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@microsoft/dynamicproto-js/-/dynamicproto-js-2.0.3.tgz",
+      "integrity": "sha512-JTWTU80rMy3mdxOjjpaiDQsTLZ6YSGGqsjURsY6AUQtIj0udlF/jYmhdLZu8693ZIC0T1IwYnFa0+QeiMnziBA==",
+      "requires": {
+        "@nevware21/ts-utils": ">= 0.10.4 < 2.x"
+      }
+    },
+    "@nevware21/ts-async": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@nevware21/ts-async/-/ts-async-0.5.2.tgz",
+      "integrity": "sha512-Zf2vUNjCw2vJsiVKhWXA9hCNHsn59AOSGa5jGP4tWrp/vTH9XrI4eG/65khuoAgrS83migj0Xv5/j6fUAz69Zw==",
+      "requires": {
+        "@nevware21/ts-utils": ">= 0.11.3 < 2.x"
+      }
+    },
+    "@nevware21/ts-utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@nevware21/ts-utils/-/ts-utils-0.11.3.tgz",
+      "integrity": "sha512-oipW+tyKN68bREjoESYAzOZiatM+1LF+ez1TX3BaeinhCkI18xsLgmpH9tvwHaVgKf1Tsth25sdbXVtYmgRYvQ=="
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
diff --git a/Client/package.json b/Client/package.json
index da0ca54..c90eabb 100644
--- a/Client/package.json
+++ b/Client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@microsoft/applicationinsights-web": "^3.3.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,10 +13,10 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "react-router-dom": "^6.2.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/Client/src/components/Form/Button/BaseButton.tsx b/Client/src/components/Form/Button/BaseButton.tsx
new file mode 100644
index 0000000..b815840
--- /dev/null
+++ b/Client/src/components/Form/Button/BaseButton.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import "./button.scss";
+import { ButtonProps } from "./button.types";
+import { Telemetry } from "../../../services/Telemetry";
+
+export function BaseButton(props: ButtonProps): React.ReactElement {
+  const { onClick, classNames } = props;
+
+  const handleButtonClicked = () => {
+    Telemetry.getInstance().event("ButtonClicked", {
+      buttonName: props.label,
+    });
+
+    onClick();
+  };
+
+  return (
+    <button className={classNames} onClick={handleButtonClicked}>
+      {props.label}
+    </button>
+  );
+}
diff --git a/Client/src/components/Form/Button/DefaultButton.tsx b/Client/src/components/Form/Button/DefaultButton.tsx
index e7f91fe..86c2780 100644
--- a/Client/src/components/Form/Button/DefaultButton.tsx
+++ b/Client/src/components/Form/Button/DefaultButton.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 import "./button.scss";
 import { ButtonProps } from "./button.types";
+import { BaseButton } from "./BaseButton";
 
-export function DefaultButton(
-  props: React.PropsWithChildren<ButtonProps>
-): React.ReactElement {
-  const { onClick, children } = props;
-
-  return (
-    <button className="default-button button" onClick={onClick}>
-      {children}
-    </button>
-  );
+export function DefaultButton(props: ButtonProps): React.ReactElement {
+  return <BaseButton {...props} classNames="default-button button" />;
 }
diff --git a/Client/src/components/Form/Button/PrimaryButton.tsx b/Client/src/components/Form/Button/PrimaryButton.tsx
index 7faf13b..8e4a1b6 100644
--- a/Client/src/components/Form/Button/PrimaryButton.tsx
+++ b/Client/src/components/Form/Button/PrimaryButton.tsx
@@ -1,15 +1,10 @@
 import React from "react";
 import "./button.scss";
 import { ButtonProps } from "./button.types";
+import { BaseButton } from "./BaseButton";
 
 export function PrimaryButton(
   props: React.PropsWithChildren<ButtonProps>
 ): React.ReactElement {
-  const { onClick, children } = props;
-
-  return (
-    <button className="primary-button button" onClick={onClick}>
-      {children}
-    </button>
-  );
+  return <BaseButton {...props} classNames="primary-button button" />;
 }
diff --git a/Client/src/components/Form/Button/button.scss b/Client/src/components/Form/Button/button.scss
index 48d6f8d..136e08b 100644
--- a/Client/src/components/Form/Button/button.scss
+++ b/Client/src/components/Form/Button/button.scss
@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 @mixin base-button-style {
   display: inline-block;
   padding: 0.5rem 1rem;
@@ -12,8 +14,8 @@
 .primary-button {
   @include base-button-style;
 
-  background-color: #007bff;
-  border: 2px solid #007bff;
+  background-color: $primary-color;
+  border: 2px solid $primary-color;
   color: white;
 }
 
@@ -21,6 +23,6 @@
   @include base-button-style;
 
   background-color: white;
-  border: 2px solid #007bff;
-  color: #007bff;
+  border: 2px solid $primary-color;
+  color: $primary-color;
 }
diff --git a/Client/src/components/Form/Button/button.types.ts b/Client/src/components/Form/Button/button.types.ts
index 2cb24d0..a6f1e4c 100644
--- a/Client/src/components/Form/Button/button.types.ts
+++ b/Client/src/components/Form/Button/button.types.ts
@@ -1,4 +1,6 @@
 export type ButtonProps = {
   onClick(): void;
   title: string;
+  label: string;
+  classNames?: string;
 };
diff --git a/Client/src/components/Form/TextField/TextField.scss b/Client/src/components/Form/TextField/TextField.scss
index eddc5f6..64cc02b 100644
--- a/Client/src/components/Form/TextField/TextField.scss
+++ b/Client/src/components/Form/TextField/TextField.scss
@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 .text-field-container {
   margin-bottom: 20px;
 }
@@ -13,10 +15,28 @@
   display: block;
   width: 100%;
   font-size: 1em;
+  padding: 12px;
+  border: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-background-dark;
+    border: 1px solid $border-color-dark;
+    color: $font-text-dark;
+  }
 }
 
 .text-area {
   width: 100%;
   min-height: 200px;
   font-size: 1em;
+  line-height: 1.5;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-background-dark;
+    border: 1px solid $border-color-dark;
+    color: $font-text-dark;
+  }
 }
diff --git a/Client/src/components/Form/TextField/TextField.tsx b/Client/src/components/Form/TextField/TextField.tsx
index 9ccef2d..c6e6b28 100644
--- a/Client/src/components/Form/TextField/TextField.tsx
+++ b/Client/src/components/Form/TextField/TextField.tsx
@@ -14,9 +14,12 @@ export function TextField(props: TextFieldProps): React.ReactElement {
     return (
       <div className="text-field-container">
         {props.label && (
-          <label className="text-field-label">{props.label}</label>
+          <label htmlFor={props.name} className="text-field-label">
+            {props.label}
+          </label>
         )}
         <textarea
+          name={props.name}
           className="text-area"
           onChange={(e) => {
             props.onChange(props.name, e.currentTarget.value);
@@ -29,8 +32,13 @@ export function TextField(props: TextFieldProps): React.ReactElement {
 
   return (
     <div className="text-field-container">
-      {props.label && <label className="text-field-label">{props.label}</label>}
+      {props.label && (
+        <label htmlFor={props.name} className="text-field-label">
+          {props.label}
+        </label>
+      )}
       <input
+        name={props.name}
         type="text"
         className="text-field"
         onChange={(e) => {
diff --git a/Client/src/components/Layout/Footer/Footer.scss b/Client/src/components/Layout/Footer/Footer.scss
index f50f061..6282f41 100644
--- a/Client/src/components/Layout/Footer/Footer.scss
+++ b/Client/src/components/Layout/Footer/Footer.scss
@@ -1,5 +1,11 @@
+@import "../../../variables.scss";
+
 .footer {
   height: 50px;
   padding: 20px;
-  border-top: 1px solid #e0e0e0;
-}
+  border-top: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid $border-color-dark;
+  }
+}
\ No newline at end of file
diff --git a/Client/src/components/Layout/Header/Header.scss b/Client/src/components/Layout/Header/Header.scss
index b07d817..f14f4df 100644
--- a/Client/src/components/Layout/Header/Header.scss
+++ b/Client/src/components/Layout/Header/Header.scss
@@ -1,14 +1,31 @@
+@import "../../../variables.scss";
+
 .header-root {
-    height: 50px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-    padding-right: 20px;
-    border-bottom: 1px solid #e0e0e0;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-bottom: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid $border-color-dark;
+  }
+}
+
+.brand-link {
+  text-decoration: none;
+  color: default;
 }
 
 .brand {
-    font-size: 1.125em;  
-    font-weight: 600;
-}
\ No newline at end of file
+  font-size: 1.125em;
+  font-weight: 600;
+
+  color: $font-text-light;
+
+  @media (prefers-color-scheme: dark) {
+    color: $font-text-dark;
+  }
+}
diff --git a/Client/src/components/Layout/Header/Header.tsx b/Client/src/components/Layout/Header/Header.tsx
index 71c8d71..716e3f7 100644
--- a/Client/src/components/Layout/Header/Header.tsx
+++ b/Client/src/components/Layout/Header/Header.tsx
@@ -4,7 +4,9 @@ import "./Header.scss";
 export function Header(): React.ReactElement {
   return (
     <header className="header-root">
-      <div className="brand">Header area if needed</div>
+      <a href="/" title="Go to CareerCraft home page" className="brand-link">
+        <div className="brand">CareerCraft</div>
+      </a>
     </header>
   );
 }
diff --git a/Client/src/components/Layout/Layout.tsx b/Client/src/components/Layout/Layout.tsx
index 98990b9..42333f5 100644
--- a/Client/src/components/Layout/Layout.tsx
+++ b/Client/src/components/Layout/Layout.tsx
@@ -4,7 +4,6 @@ import { Nav } from "./Nav";
 import { SkipToMain } from "./SkipToMain";
 import "./Layout.scss";
 import { Header } from "./Header";
-import { usePageTracking } from "../../hooks/usePageTracking";
 
 export type LayoutProps = {
   children: React.ReactNode;
@@ -13,8 +12,6 @@ export type LayoutProps = {
 export function Layout(props: LayoutProps): React.ReactElement {
   const { children } = props;
 
-  usePageTracking();
-
   return (
     <>
       <SkipToMain />
@@ -24,7 +21,7 @@ export function Layout(props: LayoutProps): React.ReactElement {
       <div className="content-container">
         <Nav />
         <div className="main-container">
-          <main className="main" id="main">
+          <main className="main" id="main" tabIndex={-1}>
             {children}
           </main>
           <div className="footer-container">
diff --git a/Client/src/components/Layout/Nav/Nav.scss b/Client/src/components/Layout/Nav/Nav.scss
index 2f18db1..d49ce54 100644
--- a/Client/src/components/Layout/Nav/Nav.scss
+++ b/Client/src/components/Layout/Nav/Nav.scss
@@ -1,6 +1,12 @@
+@import "../../../variables.scss";
+
 .nav-root {
   width: 400px;
   padding: 20px;
   height: 100%;
-  border-right: 1px solid #e0e0e0;
+  border-right: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    border-right: 1px solid $border-color-dark;
+  }
 }
diff --git a/Client/src/components/Layout/Nav/Nav.tsx b/Client/src/components/Layout/Nav/Nav.tsx
index 3157e93..a939c39 100644
--- a/Client/src/components/Layout/Nav/Nav.tsx
+++ b/Client/src/components/Layout/Nav/Nav.tsx
@@ -8,10 +8,14 @@ export function Nav(): React.ReactElement {
       <nav>
         <ul>
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/" title="Go to CareerCraft home page">
+              Home
+            </Link>
           </li>
           <li>
-            <Link to="/admin">Admin</Link>
+            <Link to="/admin" title="Go to CareerCraft admin page">
+              Admin
+            </Link>
           </li>
         </ul>
       </nav>
diff --git a/Client/src/components/Layout/SkipToMain/SkipToMain.scss b/Client/src/components/Layout/SkipToMain/SkipToMain.scss
index d74f006..d1e27f7 100644
--- a/Client/src/components/Layout/SkipToMain/SkipToMain.scss
+++ b/Client/src/components/Layout/SkipToMain/SkipToMain.scss
@@ -1,21 +1,21 @@
-.root {
-    position: absolute;
-    top: -1000px;
-    left: -1000px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: -1;
-    &:focus {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: auto;
-        height: auto;
-        overflow: visible;
-        z-index: 9999;
-        background-color: #fff;
-        padding: 10px;
-        border: 1px solid #000;
-    }
-}
\ No newline at end of file
+.skip-to-main-root {
+  position: absolute;
+  top: -1000px;
+  left: -1000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: -1;
+  &:focus {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    z-index: 9999;
+    background-color: #fff;
+    padding: 10px;
+    border: 1px solid #000;
+  }
+}
diff --git a/Client/src/components/Layout/SkipToMain/SkipToMain.tsx b/Client/src/components/Layout/SkipToMain/SkipToMain.tsx
index 32fb03f..ab7976a 100644
--- a/Client/src/components/Layout/SkipToMain/SkipToMain.tsx
+++ b/Client/src/components/Layout/SkipToMain/SkipToMain.tsx
@@ -2,9 +2,13 @@ import React from "react";
 import "./SkipToMain.scss";
 
 export function SkipToMain(): React.ReactElement {
+  const handleSkipToMainClicked = () => {
+    document.getElementById("main")?.focus();
+  };
+
   return (
-    <a href="#main" className="root">
+    <button onClick={handleSkipToMainClicked} className="skip-to-main-root">
       Skip to main content
-    </a>
+    </button>
   );
 }
diff --git a/Client/src/components/Spinner/Spinner.scss b/Client/src/components/Spinner/Spinner.scss
new file mode 100644
index 0000000..3ce79f4
--- /dev/null
+++ b/Client/src/components/Spinner/Spinner.scss
@@ -0,0 +1,41 @@
+@import "../../variables.scss";
+
+.spinner-full-screen-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.8);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+.spinner-root {
+  border: 8px solid $border-color-light;
+  border-top: 8px solid $primary-color;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 1s linear infinite;
+
+  @media (prefers-color-scheme: dark) {
+    border: 8px solid $border-color-dark;
+    border-top: 8px solid $primary-color;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/Client/src/components/Spinner/Spinner.tsx b/Client/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..0fb63e2
--- /dev/null
+++ b/Client/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import "./Spinner.scss";
+
+export type SpinnerProps = {
+  show: boolean;
+};
+
+export function Spinner(props: SpinnerProps): React.ReactElement {
+  const { show } = props;
+  if (!show) return <></>;
+
+  return (
+    <div className="spinner-full-screen-root">
+      <div className="spinner-root" />
+    </div>
+  );
+}
diff --git a/Client/src/components/Spinner/index.ts b/Client/src/components/Spinner/index.ts
new file mode 100644
index 0000000..2f83b96
--- /dev/null
+++ b/Client/src/components/Spinner/index.ts
@@ -0,0 +1 @@
+export * from "./Spinner";
diff --git a/Client/src/hooks/usePageTracking.ts b/Client/src/hooks/usePageTracking.ts
index d1af651..70a9e07 100644
--- a/Client/src/hooks/usePageTracking.ts
+++ b/Client/src/hooks/usePageTracking.ts
@@ -1,17 +1,13 @@
 import React from "react";
-// import { Telemetry } from "../services/Telemetry";
-// import { IAppContext } from "../models/IAppContext";
-// import { AppContext } from "../context/AppContext";
-
-export function usePageTracking() {
-  // const { currentScreen } = React.useContext<IAppContext>(AppContext);
+import { Telemetry } from "../services/Telemetry";
 
+export function usePageTracking(pageName: string) {
   React.useEffect(() => {
-    // const telemetry = Telemetry.getInstance();
-    // telemetry.trackPageView(window.location.pathname);
+    const telemetry = Telemetry.getInstance();
+    telemetry.startTrackPage(pageName);
 
     return () => {
-      //   telemetry.stopTrackPageView(window.location.pathname);
+      telemetry.stopTrackPage(pageName);
     };
-  }, []);
+  }, [pageName]);
 }
diff --git a/Client/src/hooks/usePrompts.ts b/Client/src/hooks/usePrompts.ts
index 6adb28e..5c7b06f 100644
--- a/Client/src/hooks/usePrompts.ts
+++ b/Client/src/hooks/usePrompts.ts
@@ -6,30 +6,41 @@ export function usePrompts(): [
   GamePrompts,
   React.Dispatch<React.SetStateAction<GamePrompts>>,
   (newPrompts: GamePrompts) => void,
-  () => void
+  () => void,
+  boolean
 ] {
+  const [isLoading, setLoading] = React.useState<boolean>(false);
   const [prompts, setPrompts] = React.useState<GamePrompts>({
     preGamePrompt: null,
     userResponsePrompt: null,
   });
 
   const loadGamePrompts = () => {
+    setLoading(true);
     Http.getInstance()
       .get<GamePrompts>("/api/career-game/admin/prompts")
       .then((response) => {
         if (response.ok) setPrompts(response.data as GamePrompts);
+      })
+      .finally(() => {
+        setLoading(false);
       });
   };
 
   const saveGamePrompts = (newPrompts: GamePrompts) => {
+    setLoading(true);
+
     Http.getInstance()
       .post<GamePrompts>("/api/career-game/admin/prompts", newPrompts)
-      .then(loadGamePrompts);
+      .then(loadGamePrompts)
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   React.useEffect(() => {
     loadGamePrompts();
   }, []);
 
-  return [prompts, setPrompts, saveGamePrompts, loadGamePrompts];
+  return [prompts, setPrompts, saveGamePrompts, loadGamePrompts, isLoading];
 }
diff --git a/Client/src/hooks/useScreenRouting.ts b/Client/src/hooks/useScreenRouting.ts
deleted file mode 100644
index f44d021..0000000
--- a/Client/src/hooks/useScreenRouting.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { ScreenType } from "../models/ScreenType";
-
-// Maybe we will change to something like react-router later if more complex routing is needed
-export function useScreenRouting() {
-  const [currentScreen, setCurrentSecreen] = React.useState<ScreenType>(
-    ScreenType.StartScreen
-  );
-
-  const go = (screen: ScreenType) => {
-    setCurrentSecreen(screen);
-  };
-
-  return { currentScreen, go };
-}
diff --git a/Client/src/index.scss b/Client/src/index.scss
index 6231a39..5e2027d 100644
--- a/Client/src/index.scss
+++ b/Client/src/index.scss
@@ -1,106 +1,4 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
+@import "./variables.scss";
 
 html {
   height: 100%;
@@ -109,10 +7,18 @@ html {
 body {
   line-height: 1;
   height: 100%;
+  background-color: $default-color;
+  color: $font-text-light;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $background-dark;
+    color: $font-text-dark;
+  }
 }
 
 body,
-button {
+button,
+input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }
@@ -121,28 +27,19 @@ button {
   height: 100%;
 }
 
-ul {
-  list-style: none;
+a {
+  color: $primary-color;
 }
 
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-* {
-  box-sizing: border-box;
+a,
+button,
+input,
+textarea {
+  &:focus {
+    outline: 2px dashed $background-dark;
+
+    @media (prefers-color-scheme: dark) {
+      outline: 2px dashed $background-light;
+    }
+  }
 }
diff --git a/Client/src/index.tsx b/Client/src/index.tsx
index 29afd5f..b4b4afb 100644
--- a/Client/src/index.tsx
+++ b/Client/src/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "./reset.scss";
 import "./index.scss";
 import { AppContextProvider } from "./context/AppContext";
 import { BrowserRouter } from "react-router-dom";
diff --git a/Client/src/models/ScreenType.ts b/Client/src/models/ScreenType.ts
deleted file mode 100644
index e04a3ba..0000000
--- a/Client/src/models/ScreenType.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum ScreenType {
-  StartScreen,
-  GameScreen,
-  ResultScreen,
-}
diff --git a/Client/src/reset.scss b/Client/src/reset.scss
new file mode 100644
index 0000000..e0c1357
--- /dev/null
+++ b/Client/src/reset.scss
@@ -0,0 +1,237 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/Client/src/screens/AdminScreen/AdminScreen.tsx b/Client/src/screens/AdminScreen/AdminScreen.tsx
index 0626228..aeec963 100644
--- a/Client/src/screens/AdminScreen/AdminScreen.tsx
+++ b/Client/src/screens/AdminScreen/AdminScreen.tsx
@@ -5,9 +5,13 @@ import { H1 } from "../../components/Typography";
 import { ButtonBar } from "../../components/Form/Button/ButtonBar";
 import { PrimaryButton } from "../../components/Form/Button";
 import { DefaultButton } from "../../components/Form/Button/DefaultButton";
+import { usePageTracking } from "../../hooks/usePageTracking";
+import { Spinner } from "../../components/Spinner";
 
 export function AdminScreen(): React.ReactElement {
-  const [prompt, setPrompt, savePrompts, reloadPrompts] = usePrompts();
+  usePageTracking("AdminScreen");
+  const [prompt, setPrompt, savePrompts, reloadPrompts, isLoading] =
+    usePrompts();
 
   const handlePromptUpdated = (name: string, value: string) => {
     setPrompt({ ...prompt, [name]: value });
@@ -39,13 +43,16 @@ export function AdminScreen(): React.ReactElement {
           onClick={() => {
             savePrompts(prompt);
           }}
-        >
-          Save
-        </PrimaryButton>
-        <DefaultButton title="Reset prompts" onClick={reloadPrompts}>
-          Reset
-        </DefaultButton>
+          label="Save"
+        />
+        <DefaultButton
+          title="Reset prompts"
+          onClick={reloadPrompts}
+          label="Reset"
+        />
       </ButtonBar>
+
+      <Spinner show={isLoading} />
     </>
   );
 }
diff --git a/Client/src/screens/GameScreen/GameScreen.tsx b/Client/src/screens/GameScreen/GameScreen.tsx
index 4244b29..ea5bc7a 100644
--- a/Client/src/screens/GameScreen/GameScreen.tsx
+++ b/Client/src/screens/GameScreen/GameScreen.tsx
@@ -3,8 +3,11 @@ import { IAppContext } from "../../models/IAppContext";
 import { AppContext } from "../../context/AppContext";
 import { DefaultButton } from "../../components/Form/Button/DefaultButton";
 import { useNavigate } from "react-router-dom";
+import { usePageTracking } from "../../hooks/usePageTracking";
 
 export function GameScreen(): React.ReactElement {
+  usePageTracking("GameScreen");
+
   const navigate = useNavigate();
   const { gameScenarios } = React.useContext<IAppContext>(AppContext);
 
@@ -21,9 +24,11 @@ export function GameScreen(): React.ReactElement {
         <code>{JSON.stringify(gameScenarios, null, 4)}</code>
       </pre>
 
-      <DefaultButton onClick={handleEndButtonClicked} title="End game">
-        End
-      </DefaultButton>
+      <DefaultButton
+        onClick={handleEndButtonClicked}
+        title="End game"
+        label="End"
+      />
     </div>
   );
 }
diff --git a/Client/src/screens/ResultScreen/ResultScreen.tsx b/Client/src/screens/ResultScreen/ResultScreen.tsx
index 75e604b..88c389a 100644
--- a/Client/src/screens/ResultScreen/ResultScreen.tsx
+++ b/Client/src/screens/ResultScreen/ResultScreen.tsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { usePageTracking } from "../../hooks/usePageTracking";
 
 export function ResultScreen(): React.ReactElement {
+  usePageTracking("ResultScreen");
+
   return (
     <div>
       <h1>Result Screen</h1>
diff --git a/Client/src/screens/StartScreen/StartScreen.tsx b/Client/src/screens/StartScreen/StartScreen.tsx
index 57966f5..4dc3c9f 100644
--- a/Client/src/screens/StartScreen/StartScreen.tsx
+++ b/Client/src/screens/StartScreen/StartScreen.tsx
@@ -5,13 +5,21 @@ import { PrimaryButton } from "../../components/Form/Button";
 import { Http } from "../../services/Http";
 import { GameScenarios } from "../../models/GameResponse";
 import { useNavigate } from "react-router-dom";
+import { H1 } from "../../components/Typography";
+import { TextField } from "../../components/Form/TextField/TextField";
+import { ButtonBar } from "../../components/Form/Button/ButtonBar";
+import { usePageTracking } from "../../hooks/usePageTracking";
+import { Spinner } from "../../components/Spinner";
 
 export function StartScreen(): React.ReactElement {
+  usePageTracking("StartScreen");
+  const [isSaving, setSaving] = React.useState<boolean>(false);
   const { setGameScenarios } = React.useContext<IAppContext>(AppContext);
   const [title, setTitle] = React.useState<string>("");
   const navigate = useNavigate();
 
   const handleStartButtonClicked = async () => {
+    setSaving(true);
     const response = await Http.getInstance().post<GameScenarios>(
       "/api/career-game/start",
       {
@@ -23,24 +31,31 @@ export function StartScreen(): React.ReactElement {
       setGameScenarios(response.data);
       navigate(`/career-game/something`);
     }
-  };
 
+    setSaving(false);
+  };
   return (
     <div>
-      <h1>Start Screen</h1>
-      <p>This is the start screen</p>
+      <H1>Start Screen</H1>
 
-      <input
-        type="text"
-        value={title}
-        onChange={(e) => {
-          setTitle(e.currentTarget.value);
+      <TextField
+        label="Title"
+        name="title"
+        onChange={(name, title: string) => {
+          setTitle(title);
         }}
+        value={title}
       />
 
-      <PrimaryButton onClick={handleStartButtonClicked} title="Start game">
-        Start Game
-      </PrimaryButton>
+      <ButtonBar>
+        <PrimaryButton
+          onClick={handleStartButtonClicked}
+          title="Start game"
+          label="Start game"
+        />
+      </ButtonBar>
+
+      <Spinner show={isSaving} />
     </div>
   );
 }
diff --git a/Client/src/services/Http.ts b/Client/src/services/Http.ts
index e672849..79c916f 100644
--- a/Client/src/services/Http.ts
+++ b/Client/src/services/Http.ts
@@ -9,6 +9,7 @@ export class Http {
   private static instance: Http;
   private readonly base_url: string;
   private readonly default_header: { [key: string]: string };
+  private readonly telemetry: Telemetry;
 
   private constructor(
     base_url: string,
@@ -19,6 +20,7 @@ export class Http {
       ...default_header,
       "x-correlation-id": Telemetry.getInstance().getCorrelationId(),
     };
+    this.telemetry = Telemetry.getInstance();
   }
 
   public static getInstance(): Http {
diff --git a/Client/src/services/Telemetry.ts b/Client/src/services/Telemetry.ts
index 99d8312..841d62f 100644
--- a/Client/src/services/Telemetry.ts
+++ b/Client/src/services/Telemetry.ts
@@ -1,8 +1,14 @@
+import {
+  ApplicationInsights,
+  ICustomProperties,
+} from "@microsoft/applicationinsights-web";
+
 export class Telemetry {
   private static instance: Telemetry;
   private defaultProps: {
     [key: string]: string | boolean | number | undefined;
   };
+  private readonly appInsights: ApplicationInsights;
 
   private constructor() {
     this.defaultProps = {
@@ -10,6 +16,12 @@ export class Telemetry {
       appName: "CareerCraftUI",
       isProduction: process.env.REACT_APP_IS_PRODUCTION,
     };
+    this.appInsights = new ApplicationInsights({
+      config: {
+        instrumentationKey: "ec3e098b-8f7f-4a8d-8cbe-ca2048af3875",
+      },
+    });
+    this.appInsights.loadAppInsights();
   }
 
   public getCorrelationId(): string {
@@ -24,6 +36,47 @@ export class Telemetry {
     return Telemetry.instance;
   }
 
+  public info(message: string, properties: ICustomProperties = {}) {
+    this.appInsights.trackTrace({
+      message,
+      properties: {
+        ...this.defaultProps,
+        ...properties,
+      },
+    });
+  }
+
+  public event(eventName: string, properties: ICustomProperties = {}) {
+    this.appInsights.trackEvent({
+      name: eventName,
+      properties: {
+        ...this.defaultProps,
+        ...properties,
+      },
+    });
+  }
+
+  public exception(ex: Error, properties: ICustomProperties = {}) {
+    this.appInsights.trackException({
+      exception: ex,
+      properties: {
+        ...this.defaultProps,
+        ...properties,
+      },
+    });
+  }
+
+  public startTrackPage(name: string) {
+    this.appInsights.startTrackPage(name);
+  }
+
+  public stopTrackPage(name: string, properties: ICustomProperties = {}) {
+    this.appInsights.stopTrackPage(name, document.location.pathname, {
+      ...this.defaultProps,
+      ...properties,
+    });
+  }
+
   private generateCorrelationId(): string {
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
       /[xy]/g,
diff --git a/Client/src/variables.scss b/Client/src/variables.scss
new file mode 100644
index 0000000..326638d
--- /dev/null
+++ b/Client/src/variables.scss
@@ -0,0 +1,15 @@
+// Primary colors
+$primary-color: #007bff;
+$default-color: white;
+
+// Light theme colors
+$background-light: white;
+$font-text-light: #1a1a1a;
+$border-color-light: #e0e0e0;
+$input-background-light: white;
+
+// Dark theme colors
+$background-dark: rgba(0, 0, 0, 0.9);
+$font-text-dark: white;
+$border-color-dark: #333;
+$input-background-dark: #222;
diff --git a/README.md b/README.md
index 9c30b05..639eb66 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,6 @@
 ### Pre-requisites
 
 1. Install Azure CLI and authenticate to Azure subscription using `az login`
-
-   - Reach out to [Won](mailto:wosong@microsoft.com) for permissions
-
 2. Install python
 3. Install node.js