diff --git a/package-lock.json b/package-lock.json
index d07b38a..9c98c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.2.0",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "bootstrap-dark-5": "^1.1.3",
+        "bootstrap": "^5.2.3",
         "http-proxy-middleware": "^2.0.6",
         "moment": "^2.29.3",
         "react": "^18.2.0",
@@ -3103,9 +3103,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -5205,26 +5205,21 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
-      }
-    },
-    "node_modules/bootstrap-dark-5": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap-dark-5/-/bootstrap-dark-5-1.1.3.tgz",
-      "integrity": "sha512-3Paopsp8wyOM1oeaLWLFuUZThhRc3tBYKUnoF+uwrU/xN4G47MCLZlALBJNqYqAecg7dSln9vgaYK1CwPnTeBw==",
-      "dependencies": {
-        "bootstrap": "^5.1.3"
-      },
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
       "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
+        "@popperjs/core": "^2.11.6"
       }
     },
     "node_modules/brace-expansion": {
@@ -18544,9 +18539,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
     "@react-aria/ssr": {
       "version": "3.3.0",
@@ -20180,19 +20175,11 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
       "requires": {}
     },
-    "bootstrap-dark-5": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap-dark-5/-/bootstrap-dark-5-1.1.3.tgz",
-      "integrity": "sha512-3Paopsp8wyOM1oeaLWLFuUZThhRc3tBYKUnoF+uwrU/xN4G47MCLZlALBJNqYqAecg7dSln9vgaYK1CwPnTeBw==",
-      "requires": {
-        "bootstrap": "^5.1.3"
-      }
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 286cafa..8ae202a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "bootstrap-dark-5": "^1.1.3",
+    "bootstrap": "^5.2.3",
     "http-proxy-middleware": "^2.0.6",
     "moment": "^2.29.3",
     "react": "^18.2.0",
diff --git a/src/App.jsx b/src/App.jsx
index a9ff719..03848d2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import 'bootstrap-dark-5/dist/css/bootstrap-nightshade.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { React, Component } from 'react';
 import { Navbar, Nav, Container} from 'react-bootstrap';
 import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
diff --git a/src/ThemeSelector.tsx b/src/ThemeSelector.tsx
index 0445e44..9db8ec4 100644
--- a/src/ThemeSelector.tsx
+++ b/src/ThemeSelector.tsx
@@ -4,7 +4,8 @@ import { Theme, UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export function ThemeSelector() {
     const { theme, setTheme } = useContext(UIPreferencesContext);
-
+    
+    //Contains all supported themes
     const themes = [
         { value: 'light-theme', label: 'light' },
         { value: 'dark-theme', label: 'dark' },
@@ -12,16 +13,21 @@ export function ThemeSelector() {
         { value: 'ocean-theme', label: 'ocean' }
     ]
     
+    //Finds the current selected theme within supported themes
+    const currentTheme = themes.find(o => o.value === theme);
     updateTheme(theme)
 
+    /**
+     * Handles the theme selection by the user
+     * @param event 
+     */
     const handleTheme = (event: any) => {
         var selectedTheme = event.value;
-        // keep html class in sync with button state.
         updateTheme(selectedTheme)
         setTheme(selectedTheme)
       };
-
-    return <Select options={themes} classNamePrefix="select" onChange={handleTheme} 
+    
+    return <Select options={themes} value={currentTheme} classNamePrefix="select" onChange={handleTheme} 
     components={{
         SingleValue: ({ children, ...props }) => {
           return (
@@ -32,6 +38,10 @@ export function ThemeSelector() {
         }}}/>
 }
 
+/**
+ * Keeps the html in sync with the current selected theme
+ * @param theme 
+ */
 function updateTheme(theme: Theme) {
     var doc = document.querySelector("html")!;
     doc.className = theme
diff --git a/src/ToggleDarkModeButton.tsx b/src/ToggleDarkModeButton.tsx
deleted file mode 100644
index 70b2937..0000000
--- a/src/ToggleDarkModeButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useContext } from 'react';
-import Button from 'react-bootstrap/Button';
-import { UIPreferencesContext } from './contexts/UIPreferencesContext';
-
-export function ToggleDarkModeButton() {
-  const { theme, setTheme } = useContext(UIPreferencesContext);
-
-  // keep html class in sync with button state.
-  const h = document.querySelector("html")!;
-  h.className = theme;
-
-  return theme === "dark-theme"
-    ? <Button data-testid="toggle-dark-mode" variant="outline-light" size="sm" title="Switch to Light Mode" onClick={() => setTheme("light-theme")}>
-      <FontAwesomeIcon icon={faSun} />
-    </Button>
-    : <Button data-testid="toggle-dark-mode" variant="outline-dark" size="sm" title="Switch to Dark Mode" onClick={() => setTheme("dark-theme")}>
-      <FontAwesomeIcon icon={faMoon} />
-    </Button>;
-}
diff --git a/src/contexts/UIPreferencesContext.tsx b/src/contexts/UIPreferencesContext.tsx
index 68fc4ee..873b0a0 100644
--- a/src/contexts/UIPreferencesContext.tsx
+++ b/src/contexts/UIPreferencesContext.tsx
@@ -26,9 +26,12 @@ export interface UIPreferenceProviderProps {
     initalValue: UIPreferences | undefined
 }
 
+/**
+ * Returns a default theme based on the user's browser settings.
+ * @returns Theme
+ */
 function getDefaultTheme(): Theme {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        // browser supports light/dark mode and user prefers dark theme.
         return "dark-theme";
     }