diff --git a/css/members.css b/css/members.css
index 1976ee4..b4aab98 100644
--- a/css/members.css
+++ b/css/members.css
@@ -1,67 +1,20 @@
 body {
-  padding-top: 76px;
+  padding-top: 100px;
   padding-bottom: 20px;
 }
-button.nav-link {
-  background-color: inherit;
-  border: inherit;
-}
-.center {
-  text-align: center;
-}
-a.icon-box {
-  display: block;
-}
-a:hover{
+
+a {
+  color: var(--bs-secondary-color);
   text-decoration: none;
 }
-.icon-box > p {
-  margin-bottom: 20px;
+
+a:hover {
+  text-decoration: none;
+  color: #b0197e;
 }
+
 .icon {
   width: 48px;
   height: 48px;
   margin: 10px 0;
-}
-.popular-box {
-  padding: 5px;
-  margin: 5px 0;
-}
-.popular {
-  position: relative;
-  top: -15px;
-  padding-top: 15px;
-}
-.popular .row {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  margin: 3px 3px 0 3px;
-  padding: 6px 0px;
-  background: #f5f5f5;
-}
-.popular .icon {
-  width: 36px;
-  height: 36px;
-}
-#show-icons {
-  position: relative;
-}
-.section-title {
-  margin: 12px 0 18px 0;
-}
-/* Decreasing panel-heading padding for mobile devices */
-.panel-heading {
-  padding: 10px;
-}
-
-a {
-  color: #727272;
-}
-
-h1 {
-  color: #B0197E ;
-}
-
-.settings-panel {
-  height: 55px;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index fe3b1cd..fc4bc73 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <meta name="keywords" content="">
     <meta name="author" content="">
     <meta http-equiv="refresh" content="300">
+    
     <link rel="icon" type="image/svg" href="https://assets.csh.rit.edu/pubsite/csh_logo_square.svg">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 
@@ -16,16 +17,20 @@
     <!-- Apple Icon -->
     <link rel="apple-touch-icon" sizes="152x152" href="./img/apple-touch-icon.png">
     <!-- Styles -->
-    <link rel="stylesheet" href="https://themeswitcher.csh.rit.edu/api/get" media="screen">
+    <link rel="stylesheet" href="https://assets.csh.rit.edu/csh-material-bootstrap/5.3.10/dist/css/csh-material-bootstrap.min.css" media="screen">
     <link rel="stylesheet" href="./css/members.css">
     <!-- Scripts -->
     <script src="./vendor/js/jquery-2.1.3.min.js"></script>
     <script src="./vendor/js/angular.min.js"></script>
     <script src="./vendor/js/angular-webicon.min.js"></script>
     <script src="./js/app.js"></script>
+
     <!-- CDN for popper and bootstrao, since the vendor doesn't have up to date. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+    
+    <script src="https://assets.csh.rit.edu/csh-material-bootstrap/5.3.10/dist/js/color-modes.js"></script>
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134137724-3"></script>
     <script>
@@ -51,7 +56,7 @@
             <h5 class="card-header bg-primary text-white">Popular</h5>
             <div class="card-body">
               <div class="row">
-                <div class="col-md-2 col-sm-4 col-6 center" data-ng-repeat="link in popular">
+                <div class="col-md-2 col-sm-4 col-6 text-center" data-ng-repeat="link in popular">
                   <div data-ng-show="link.href">
                     <a href="{{ link.href }}" class="icon-box">
                       <span data-ng-show="link.icon">
@@ -80,7 +85,7 @@ <h5 class="card-header bg-primary text-white">Popular</h5>
           <!-- Plug -->
           <div class="card mb-3">
             <h5 class="card-header bg-primary"><a class="text-white" href="https://plug.csh.rit.edu">Advertisements by CSH: Plug</a></h5>
-            <div class="card-body center">
+            <div class="card-body text-center">
               <a href="https://plug.csh.rit.edu">
                 <img src="https://plug.csh.rit.edu/data" alt="Advertisements by CSH: Plug" style="width: 100%">
               </a>
@@ -91,7 +96,7 @@ <h5 class="card-header bg-primary"><a class="text-white" href="https://plug.csh.
             <h5 class="card-header bg-primary text-white">{{ section.name }}</h5>
             <div class="card-body">
               <div class="row">
-                <div class="col-md-3 col-sm-3 col-6" data-ng-repeat="link in section.links" data-ng-class="(showIcons ? 'center' : '')">
+                <div class="col-md-3 col-sm-3 col-6 text-center" data-ng-repeat="link in section.links" data-ng-class="(showIcons ? 'center' : '')">
                   <div data-ng-show="link.href">
                     <a href="{{ link.href }}" class="icon-box">
                       <span data-ng-show="showIcons && link.icon">
@@ -125,13 +130,14 @@ <h5 class="card-header bg-primary text-white">{{ section.name }}</h5>
     </div>
     <script>
       function toggleTheme(target) {
-        console.log(target)
         if (document.body.classList.contains("dark-theme")) {
             document.body.classList.remove('dark-theme');
+            document.documentElement.setAttribute('data-bs-theme', 'light');
             target.innerHTML = '<span class="material-icons-outlined" style="font-size: 32px">dark_mode</span>';
         }
         else {
             document.body.classList.add('dark-theme');
+            document.documentElement.setAttribute('data-bs-theme', 'dark');
             target.innerHTML = '<span class="material-icons-outlined" style="font-size: 32px">light_mode</span>';
         }
       }
diff --git a/templates/navbar.html b/templates/navbar.html
index 29138e8..fa706ab 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,24 +1,26 @@
 <!-- Navbar -->
 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary justify-content-center">
   <div class="container">
-    <a class="navbar-brand" href="#">Members</a>
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
-      data-target="#nav-responsive">
+    <a class="navbar-brand fs-4 d-inline-flex" href="#">
+      <img src="../img/csh_logo_white.svg" />&nbsp;
+      Members
+    </a>
+    <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse"
+      data-bs-target="#nav-responsive">
       <span class="navbar-toggler-icon"></span>
     </button>
     <!-- Responsive Collapse -->
-    <div class="collapse navbar-collapse" id="nav-responsive">
+    <div class="collapse navbar-collapse justify-content-between" id="nav-responsive">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item my-auto">
           <a class="nav-link" href="https://csh.rit.edu">Public Site</a>
         </li>
 
         <li class="nav-item dropdown" data-ng-repeat="section in sections">
-          <button class="nav-link dropdown-toggle" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ section.name }}</button>
+          <button class="nav-link dropdown-toggle" id="dropdown05" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ section.name }}</button>
           <div class="dropdown-menu" aria-labelledby="dropdown05">
-            <a class="dropdown-item" data-ng-repeat="link in section.links" href="{{ link.href }}"
-              style="padding-top:0em; padding-bottom:0em;">
-              <webicon class="icon" icon="{{ link.icon}}" style="width: 2em; padding-right: 0.5em; margin: 0em;" />{{
+            <a class="dropdown-item py-0" data-ng-repeat="link in section.links" href="{{ link.href }}">
+              <webicon class="icon pr-2 mx-2 my-1" icon="{{ link.icon}}" style="width: 2em;" />{{
               link.name }}
             </a>
           </div>
@@ -28,8 +30,8 @@
       <ul class="nav navbar-nav ml-auto">
         <!-- User Dropdown -->
         <li class="nav-item navbar-user dropdown">
-          <a class="nav-link dropdown-toggle mt-2" data-toggle="dropdown" href="#" id="nav-drop" aria-expanded="false">
-            <img alt="user profile image" ng-src="{{profile}}"> {{ name }}
+          <a class="nav-link dropdown-toggle mt-2" data-bs-toggle="dropdown" href="#" id="nav-drop" aria-expanded="false">
+            <img alt="user profile image" ng-src="{{profile}}" width="32" class="rounded-circle"> {{ name }}
           </a>
           <div class="dropdown-menu" aria-labelledby="nav-drop">
             <div id="show-icons" class="checkbox dropdown-item">
@@ -42,7 +44,7 @@
         </li>
       </ul>
     </div>
-    <div id="theme-indicator" style="width: 32px; height: 32px" onClick="toggleTheme(this)">
+    <div id="theme-indicator" class="text-light" style="width: 32px; height: 32px" onClick="toggleTheme(this)">
     </div>
   </div>
 </nav>
diff --git a/templates/side.html b/templates/side.html
index 17d7536..1240ac6 100644
--- a/templates/side.html
+++ b/templates/side.html
@@ -1,11 +1,11 @@
-<div class="card mb-3 center">
+<div class="card mb-3 text-center">
   <h5 class="card-header bg-primary text-white">Meeting Times</h5>
   <div class="card-body">
     <div class="row">
       <div class="col-md-12 col-sm-4 col-4" data-ng-repeat="meeting in meetings | sortDate">
         <div class="row">
           <div class="col-md-6 col-sm-6 col-18 d-flex align-items-center justify-content-center">
-            <p><strong>{{ meeting.name }}</strong></p>
+            <p class="text-center"><strong>{{ meeting.name }}</strong></p>
           </div>
           <div class="col-md-6 col-sm-6 col-12">
             <p>{{ meeting.day }} {{ meeting.time }}<br>{{ meeting.beginTime }}</p>
@@ -17,7 +17,7 @@ <h5 class="card-header bg-primary text-white">Meeting Times</h5>
   </div>
 </div>
 
-<div class="card mb-3 center">
+<div class="card mb-3 text-center">
   <h5 class="card-header bg-primary text-white">
     <a class="text-white" href="https://plug.csh.rit.edu">CSH Plug</a>
   </h5>