diff --git a/nova-components/ClientIdAndSecretModal/resources/js/components/ClientIdAndSecretModal.vue b/nova-components/ClientIdAndSecretModal/resources/js/components/ClientIdAndSecretModal.vue
index 85528b262..8b6b47e41 100644
--- a/nova-components/ClientIdAndSecretModal/resources/js/components/ClientIdAndSecretModal.vue
+++ b/nova-components/ClientIdAndSecretModal/resources/js/components/ClientIdAndSecretModal.vue
@@ -53,12 +53,12 @@
             </div>
           </div>
             <ModalFooter>
-                <div class="flex items-center ml-auto">
+                <div class="flex items-center ms-auto">
                     <CancelButton
                         component="button"
                         type="button"
                         dusk="cancel-action-button"
-                        class="ml-auto mr-3"
+                        class="ms-auto me-3"
                         @click="$emit('close')"
                     >
                         Close
diff --git a/nova-components/PersonalAccessTokenModal/resources/js/components/PersonalAccessTokenModal.vue b/nova-components/PersonalAccessTokenModal/resources/js/components/PersonalAccessTokenModal.vue
index a7b7422f3..2665a4002 100644
--- a/nova-components/PersonalAccessTokenModal/resources/js/components/PersonalAccessTokenModal.vue
+++ b/nova-components/PersonalAccessTokenModal/resources/js/components/PersonalAccessTokenModal.vue
@@ -18,12 +18,12 @@
               />
             </ModalContent>
             <ModalFooter>
-                <div class="flex items-center ml-auto">
+                <div class="flex items-center ms-auto">
                     <CancelButton
                         component="button"
                         type="button"
                         dusk="cancel-action-button"
-                        class="ml-auto mr-3"
+                        class="ms-auto me-3"
                         @click="$emit('close')"
                     >
                         Close
diff --git a/package-lock.json b/package-lock.json
index 143a6f9f1..659abcc15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,17 +5,16 @@
     "packages": {
         "": {
             "dependencies": {
+                "@popperjs/core": "2.11.8",
                 "@sentry/vue": "8.42.0",
                 "axios": "1.7.9",
                 "caniuse-lite": "1.0.30001688",
                 "chartist": "0.11.4",
                 "chartist-plugin-legend": "0.6.2",
                 "chartist-plugin-pointlabels": "0.0.6",
-                "jquery": "3.7.1",
                 "moment": "2.30.1",
-                "popper.js": "1.16.1",
                 "sweetalert2": "11.14.5",
-                "vue": "2.7.16",
+                "vue": "^2.7.16",       
                 "vue-flatpickr-component": "8.1.8",
                 "vue-moment": "4.1.0",
                 "vue-select": "3.20.3",
@@ -25,7 +24,7 @@
             "devDependencies": {
                 "@sentry/webpack-plugin": "1.21.0",
                 "alex": "11.0.1",
-                "bootstrap": "4.6.2",
+                "bootstrap": "5.3.3",
                 "cross-env": "5.2.1",
                 "laravel-mix": "6.0.49",
                 "lodash": "4.17.21",
@@ -2064,6 +2063,15 @@
                 "node": ">=12"
             }
         },
+        "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==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@sentry-internal/browser-utils": {
             "version": "8.42.0",
             "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.42.0.tgz",
@@ -3640,24 +3648,16 @@
             "license": "ISC"
         },
         "node_modules/bootstrap": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-            "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz",
+            "integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==",
             "dev": true,
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/twbs"
-                },
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/bootstrap"
-                }
-            ],
-            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/bootstrap"
+            },
             "peerDependencies": {
-                "jquery": "1.9.1 - 3",
-                "popper.js": "^1.16.1"
+                "@popperjs/core": "^2.9.2"
             }
         },
         "node_modules/boxen": {
@@ -8074,12 +8074,6 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
-        "node_modules/jquery": {
-            "version": "3.7.1",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-            "license": "MIT"
-        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10990,17 +10984,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-            "license": "MIT",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
-            }
-        },
         "node_modules/postcss": {
             "version": "8.4.49",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
diff --git a/package.json b/package.json
index 01e8a054f..fccbb4248 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "devDependencies": {
         "@sentry/webpack-plugin": "1.21.0",
         "alex": "11.0.1",
-        "bootstrap": "4.6.2",
+        "bootstrap": "5.3.3",
         "cross-env": "5.2.1",
         "laravel-mix": "6.0.49",
         "lodash": "4.17.21",
@@ -26,17 +26,16 @@
         "vue-loader": "15.11.1"
     },
     "dependencies": {
+        "@popperjs/core": "2.11.8",
         "@sentry/vue": "8.42.0",
         "axios": "1.7.9",
         "caniuse-lite": "1.0.30001688",
         "chartist": "0.11.4",
         "chartist-plugin-legend": "0.6.2",
         "chartist-plugin-pointlabels": "0.0.6",
-        "jquery": "3.7.1",
         "moment": "2.30.1",
-        "popper.js": "1.16.1",
         "sweetalert2": "11.14.5",
-        "vue": "2.7.16",
+        "vue": "^2.7.16",
         "vue-flatpickr-component": "8.1.8",
         "vue-moment": "4.1.0",
         "vue-select": "3.20.3",
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 5e21176b9..56791c86f 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -9,8 +9,7 @@ window._ = require('lodash');
  */
 
 try {
-    window.$ = window.jQuery = require('jquery');
-    window.Popper = require('popper.js').default;
+    window.Popper = require('@popperjs/core').default;
     require('bootstrap');
 } catch (e) {
 }
diff --git a/resources/js/components/ResumeUploadForm.vue b/resources/js/components/ResumeUploadForm.vue
index e61618804..56ddf0aa0 100644
--- a/resources/js/components/ResumeUploadForm.vue
+++ b/resources/js/components/ResumeUploadForm.vue
@@ -8,20 +8,13 @@
         to ensure they're always accurate.</p>
       <p>Your resume must be a one page PDF. The maximum file size is 1MB.</p>
 
-      <div class="form-group row">
-        <label class="col-sm-2 col-form-label">Resume</label>
-        <div class="col-sm-10 col-lg-4">
-          <div class="input-group mb-3">
-            <div class="custom-file">
-              <input type="file" class="custom-file-input" id="resume" name="resume" accept="application/pdf"
+      <div class="mb-3 row">
+        <label for="resume" class="col-sm-2 col-form-label">Resume</label>
+          <input type="file" class="form-control" id="resume" name="resume" accept="application/pdf"
                      v-on:change="fileChange">
-              <label class="custom-file-label" for="resume">{{ fileLabel }}</label>
-            </div>
-          </div>
-        </div>
       </div>
 
-      <div class="form-group">
+      <div class="mb-3">
         <button class="btn btn-primary" :disabled="uploading || !selectedFile" v-on:click="onSubmit">{{ uploading ? "Uploading file..." : "Upload" }}</button>
       </div>
     </div>
diff --git a/resources/js/components/UserEditForm.vue b/resources/js/components/UserEditForm.vue
index f2e3f1a60..16e8355b9 100644
--- a/resources/js/components/UserEditForm.vue
+++ b/resources/js/components/UserEditForm.vue
@@ -5,7 +5,7 @@
           <h3>GT Directory Info</h3>
           <p>Information obtained via GT Single Sign-On. Update at <a href="https://passport.gatech.edu">Passport</a>.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-name" class="col-sm-2 col-form-label">Name</label>
             <div class="col-sm-10 col-lg-4">
               <input v-model="user.full_name" type="text" readonly class="form-control" id="user-name">
@@ -17,7 +17,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-gtemail" class="col-sm-2 col-form-label">GT Email</label>
             <div class="col-sm-10 col-lg-4">
               <input v-model="user.gt_email" type="text" readonly class="form-control" id="user-gtemail">
@@ -26,7 +26,7 @@
 
           <h3>Additional Information</h3>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-preferredname" class="col-sm-2 col-form-label">Preferred First Name</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -39,7 +39,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-phone" class="col-sm-2 col-form-label">Phone Number</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -56,7 +56,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-shirtsize" class="col-sm-2 col-form-label">Shirt Size</label>
             <div class="col-sm-10 col-lg-4">
               <custom-radio-buttons
@@ -68,7 +68,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-polosize" class="col-sm-2 col-form-label">Polo Size</label>
             <div class="col-sm-10 col-lg-4">
               <custom-radio-buttons
@@ -83,7 +83,7 @@
           <div v-if="graduationInfoRequired">
             <h3>Graduation Information</h3>
 
-            <div class="form-group row">
+            <div class="mb-3 row">
               <label for="graduationInformation" class="col-sm-2 col-form-label">Graduation Date</label>
               <div class="col-sm-10 col-lg-4">
                 <term-input
@@ -102,7 +102,7 @@
           <h3>Emergency Contact</h3>
           <p>Emergency contact information is required for all trips off campus.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-emergencyname" class="col-sm-2 col-form-label">Contact Name</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -117,7 +117,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-emergencyphone" class="col-sm-2 col-form-label">Contact Phone Number</label>
             <div class="col-sm-10 col-lg-4">
               <input
@@ -138,31 +138,31 @@
           <h3>Air Travel Information</h3>
           <p>Legal name, legal gender, and date of birth are required for booking air travel for you to attend competitions and will not be used for any other purpose. This information must exactly match your government-issued identification to comply with TSA Secure Flight requirements. Please see <a href="https://pro.delta.com/content/agency/us/en/news/news-archive/2022/october-2022/non-binary-gender-identifiers-now-available.html">Delta Air Lines guidance on gender identifiers</a> if needed.</p>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-first-name" class="col-sm-2 col-form-label">Legal First Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-first-name" type="text" v-model="user.first_name" class="form-control" readonly>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-middle-name" class="col-sm-2 col-form-label">Legal Middle Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-middle-name" type="text" v-model="user.legal_middle_name" class="form-control">
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-last-name" class="col-sm-2 col-form-label">Legal Last Name</label>
             <div class="col-sm-10 col-lg-4">
               <input id="legal-last-name" type="text" v-model="user.last_name" class="form-control" readonly>
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="legal-gender" class="col-sm-2 col-form-label">Legal Gender</label>
             <div class="col-sm-10 col-lg-4">
-              <select id="legal-gender" v-model="user.legal_gender" class="custom-select">
+              <select id="legal-gender" v-model="user.legal_gender" class="form-select">
                 <option value="M">Male (M)</option>
                 <option value="F">Female (F)</option>
                 <option value="X">Unspecified (X)</option>
@@ -171,14 +171,14 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="date-of-birth" class="col-sm-2 col-form-label">Date of Birth</label>
             <div id="date-of-birth" class="col-sm-10 col-lg-4">
               <input id="date-of-birth" type="date" v-model="user.date_of_birth" class="form-control">
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="delta-skymiles-number" class="col-sm-2 col-form-label">Delta SkyMiles Number</label>
             <div id="delta-skymiles-number" class="col-sm-10 col-lg-4">
               <input id="delta-skymiles-number" type="text" v-model="user.delta_skymiles_number" class="form-control">
@@ -187,7 +187,7 @@
 
           <h3>Linked Accounts</h3>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-github" class="col-sm-2 col-form-label">GitHub</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -199,7 +199,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-google" class="col-sm-2 col-form-label">Google</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -211,7 +211,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-sums" class="col-sm-2 col-form-label">SUMS</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -228,7 +228,7 @@
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="user-clickup" class="col-sm-2 col-form-label">ClickUp</label>
             <div class="col-sm-10 col-lg-4">
               <div class="input-group">
@@ -250,7 +250,7 @@
             </div>
           </div>
 
-          <div class="form-group">
+          <div class="mb-3">
             <button type="submit" class="btn btn-primary">Save Changes</button>
             <em><span v-bind:class="{ 'text-danger': hasError}"> {{feedback}} </span></em>
           </div>
diff --git a/resources/js/components/dues/Demographics.vue b/resources/js/components/dues/Demographics.vue
index 9f02d19fc..6e2c25891 100644
--- a/resources/js/components/dues/Demographics.vue
+++ b/resources/js/components/dues/Demographics.vue
@@ -5,7 +5,7 @@
         <h3>Demographics</h3>
         <p>RoboJackets collects demographics data from members in order to supply aggregate statistics to Georgia Tech and corporate sponsors. Identifiable data is never provided.</p>
 
-        <fieldset class="form-group">
+        <fieldset class="mb-3">
           <label class ="lead" for="gender">What is your gender?</label>
           <div v-for="option in genderOptions" class="custom-control custom-radio">
             <input v-model="gender" type="radio" class="custom-control-input" :value="option.value" name="gender" :id="'gender-'+option.value">
@@ -13,7 +13,7 @@
           </div>
         </fieldset>
 
-        <fieldset class="form-group">
+        <fieldset class="mb-3">
           <label class="lead" for="ethnicity">What is your ethnicity/race? (Check all that Apply)</label>
           <div v-for="option in ethnicityOptions" class="custom-control custom-checkbox">
             <input v-model="ethnicity" type="checkbox" class="custom-control-input" :value="option.value" :id="'ethnicity-'+option.value" name="ethnicity">
@@ -23,11 +23,11 @@
 
         <div class="row">
           <div class="col-lg-3 col-6">
-            <button @click.prevent="$emit('back')" class="btn btn-secondary float-left">Back</button>
+            <button @click.prevent="$emit('back')" class="btn btn-secondary float-start">Back</button>
           </div>
           <div class="col-lg-3 col-6">
-            <button type="submit" class="btn btn-primary float-right">Continue</button>
-            <button @click.prevent="$emit('next')" class="btn btn-secondary float-right mx-2">Skip</button>
+            <button type="submit" class="btn btn-primary float-end">Continue</button>
+            <button @click.prevent="$emit('next')" class="btn btn-secondary float-end mx-2">Skip</button>
           </div>
         </div>
 
diff --git a/resources/js/components/dues/DuesAdditionalInfo.vue b/resources/js/components/dues/DuesAdditionalInfo.vue
index ef69f1478..a747580a0 100644
--- a/resources/js/components/dues/DuesAdditionalInfo.vue
+++ b/resources/js/components/dues/DuesAdditionalInfo.vue
@@ -5,7 +5,7 @@
         <h4>Additional Information</h4>
         <p>Providing RoboJackets with this optional information enables the RoboJackets leadership to better serve you.</p>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-preferredname" class="col-sm-2 col-form-label">Preferred Name</label>
           <div class="col-sm-10 col-lg-4">
             <input
@@ -21,7 +21,7 @@
           </div>
         </div>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-uid" class="col-sm-2 col-form-label">Phone Number</label>
           <div class="col-sm-10 col-lg-4">
             <input
@@ -41,7 +41,7 @@
         <h4>Emergency Contact Information</h4>
         <p>You may optionally provide information on who to contact in the event of an emergency. This information is required should you go on any RoboJackets trips.</p>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-emergencycontactname" class="col-sm-2 col-form-label">Contact Name</label>
           <div class="col-sm-10 col-lg-4">
             <input
@@ -54,7 +54,7 @@
               required>
           </div>
         </div>
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-emergencycontactphone" class="col-sm-2 col-form-label">Contact Phone Number</label>
           <div class="col-sm-10 col-lg-4">
             <input
@@ -74,11 +74,11 @@
 
         <div class="row">
           <div class="col-lg-3 col-6">
-            <button @click.prevent="$emit('back')" class="btn btn-secondary float-left">Back</button>
+            <button @click.prevent="$emit('back')" class="btn btn-secondary float-start">Back</button>
           </div>
           <div class="col-lg-3 col-6">
-            <button type="submit" class="btn btn-primary float-right">Continue</button>
-            <button @click.prevent="$emit('next')" class="btn btn-secondary float-right mx-2">Skip</button>
+            <button type="submit" class="btn btn-primary float-end">Continue</button>
+            <button @click.prevent="$emit('next')" class="btn btn-secondary float-end mx-2">Skip</button>
           </div>
         </div>
 
diff --git a/resources/js/components/dues/DuesRequiredInfo.vue b/resources/js/components/dues/DuesRequiredInfo.vue
index a337fc4c8..a5ea16d84 100644
--- a/resources/js/components/dues/DuesRequiredInfo.vue
+++ b/resources/js/components/dues/DuesRequiredInfo.vue
@@ -5,21 +5,21 @@
         <h4>GT Directory Info</h4>
         <p>Information obtained via GT Single Sign-On. Update at <a href="https://passport.gatech.edu">Passport</a>.</p>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-name" class="col-sm-2 col-form-label">Full Name</label>
           <div class="col-sm-10 col-lg-4">
             <input v-model="localUser.full_name" type="text" readonly class="form-control" id="user-name">
           </div>
         </div>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-uid" class="col-sm-2 col-form-label">GT Username</label>
           <div class="col-sm-10 col-lg-4">
             <input v-model="localUser.uid" type="text" readonly class="form-control" id="user-uid">
           </div>
         </div>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label for="user-gtemail" class="col-sm-2 col-form-label">GT Email</label>
           <div class="col-sm-10 col-lg-4">
             <input v-model="localUser.gt_email" type="text" readonly class="form-control" id="user-gtemail">
@@ -28,7 +28,7 @@
 
         <h4>Membership Information</h4>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label class="col-sm-2 col-form-label">Dues Term</label>
           <div class="col-sm-10 col-lg-4">
             <select v-model="duesPackageChoice" class="custom-select"
@@ -51,7 +51,7 @@
         <div v-if="graduationInfoRequired">
           <h4>Graduation Information</h4>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-sm-2 col-form-label">Graduation Date</label>
             <div class="col-sm-10 col-lg-4">
               <term-input
@@ -68,7 +68,7 @@
 
         <h4>Information for Merchandise</h4>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label class="col-sm-2 col-form-label">T-Shirt Size</label>
           <div class="col-sm-10 col-lg-4">
             <custom-radio-buttons
@@ -83,7 +83,7 @@
           </div>
         </div>
 
-        <div class="form-group row">
+        <div class="mb-3 row">
           <label class="col-sm-2 col-form-label">Polo Size</label>
           <div class="col-sm-10 col-lg-4">
             <custom-radio-buttons
@@ -102,7 +102,7 @@
         <p v-if="!selectedPackage || (merchGroupNames.length > 0)">One item of RoboJackets merch from each group below
           is included with your dues payment. {{ merchDependencyText }}</p>
         <p v-else>Only students are eligible for RoboJackets merch.</p>
-        <div v-for="(merchlist, group) in merchGroups" class="form-group row">
+        <div v-for="(merchlist, group) in merchGroups" class="mb-3 row">
           <label :for="'merch-'+group" class="col-sm-2 col-form-label">{{ group }}</label>
           <div class="col-sm-10 col-lg-4">
             <select :id="'merch-'+group" class="custom-select" v-model="merchlist.selection"
@@ -119,8 +119,8 @@
 
         <div class="row">
           <div class="col-lg-6 col-12">
-            <button v-if="submitInProgress" disabled class="btn btn-primary float-right">Please wait...</button>
-            <button v-else type="submit" class="btn btn-primary float-right">Continue</button>
+            <button v-if="submitInProgress" disabled class="btn btn-primary float-end">Please wait...</button>
+            <button v-else type="submit" class="btn btn-primary float-end">Continue</button>
           </div>
         </div>
 
diff --git a/resources/js/components/dues/DuesSequence.vue b/resources/js/components/dues/DuesSequence.vue
index b758e1b56..2f2cbd0c1 100644
--- a/resources/js/components/dues/DuesSequence.vue
+++ b/resources/js/components/dues/DuesSequence.vue
@@ -29,10 +29,10 @@
       </div>
       <div class="row">
         <div class="col-6">
-          <button @click="back" class="btn btn-secondary float-left">Back</button>
+          <button @click="back" class="btn btn-secondary float-start">Back</button>
         </div>
         <div class="col-6">
-          <button @click="next" class="btn btn-primary float-right">Finish</button>
+          <button @click="next" class="btn btn-primary float-end">Finish</button>
         </div>
       </div>
     </div>
diff --git a/resources/js/components/fields/CustomRadioButtons.vue b/resources/js/components/fields/CustomRadioButtons.vue
index 8f3f9e69d..38d84fadc 100644
--- a/resources/js/components/fields/CustomRadioButtons.vue
+++ b/resources/js/components/fields/CustomRadioButtons.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="custom-radio-input btn-group btn-group-toggle" role="group" :id="id" :class="{ 'is-invalid': isError }" >
+  <div class="btn-group" role="group" :id="id" :class="{ 'is-invalid': isError }" >
     <label v-for="option in options" class="btn btn-secondary" :class="{ active: option.value == value, 'btn-danger': isError }" >
-      <input v-model="changedValue" type="radio" :value="option.value" autocomplete="off" @change="change"> {{option.text}}
+      <input v-model="changedValue" type="radio" class="btn-check" :value="option.value" autocomplete="off" @change="change"> {{option.text}}
     </label>
   </div>
 </template>
diff --git a/resources/js/components/fields/TermInput.vue b/resources/js/components/fields/TermInput.vue
index a60d45334..8acdb1b19 100644
--- a/resources/js/components/fields/TermInput.vue
+++ b/resources/js/components/fields/TermInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="form-inline" :class="{ 'is-invalid': isError }">
-    <select v-model="semester" class="custom-select" :class="{ 'is-invalid': isError && semester.length !== 2 }">
+  <div class="d-flex flex-row align-items-center flex-wrap" :class="{ 'is-invalid': isError }">
+    <select v-model="semester" class="form-select" :class="{ 'is-invalid': isError && semester.length !== 2 }">
       <option value="" style="display:none;">Semester</option>
       <option value="08">Fall</option>
       <option value="02">Spring</option>
diff --git a/resources/js/components/nova/AttendanceReport.vue b/resources/js/components/nova/AttendanceReport.vue
index f0e5a1f8f..09d19df73 100644
--- a/resources/js/components/nova/AttendanceReport.vue
+++ b/resources/js/components/nova/AttendanceReport.vue
@@ -2,7 +2,7 @@
   <div class="attendancereport">
     <div class="flex flex-wrap -mx-3 mb-3">
       <heading class="mb-6 mx-3">Attendance</heading>
-      <select @change="newSelection" class="ml-auto min-w-24 h-6 text-xs no-appearance bg-white mx-3">
+      <select @change="newSelection" class="ms-auto min-w-24 h-6 text-xs no-appearance bg-white mx-3">
         <option v-for="range in ranges" :key="range" :value="range" :selected="selectedRange == range">
           {{ range }} weeks
         </option>
diff --git a/resources/js/components/nova/ChartistCard.vue b/resources/js/components/nova/ChartistCard.vue
index 71a4d3458..b14504272 100644
--- a/resources/js/components/nova/ChartistCard.vue
+++ b/resources/js/components/nova/ChartistCard.vue
@@ -2,8 +2,8 @@
   <div class="px-3 mb-6">
     <loading-card :loading="loading" class="pt-4">
       <div class="flex mb-4 mx-6" ref="legend">
-        <h3 class="mr-3 text-base text-80 font-bold">{{ title }}</h3>
-        <p v-if="total" class="ml-auto text-black text-xl font-bold">{{ total }}
+        <h3 class="me-3 text-base text-80 font-bold">{{ title }}</h3>
+        <p v-if="total" class="ms-auto text-black text-xl font-bold">{{ total }}
           <span v-if="totalSuffix" class="ml-.5 text-sm text-80">{{ totalSuffix }}</span>
         </p>
       </div>
diff --git a/resources/js/components/nova/TextMetric.vue b/resources/js/components/nova/TextMetric.vue
index 2b7679d73..fe190fa2a 100644
--- a/resources/js/components/nova/TextMetric.vue
+++ b/resources/js/components/nova/TextMetric.vue
@@ -1,9 +1,9 @@
 <template>
   <loading-card :loading="loading" class="metric px-6 py-4 relative">
     <div class="flex mb-4">
-      <h3 class="mr-3 text-base text-80 font-bold">{{ card.name }}</h3>
+      <h3 class="me-3 text-base text-80 font-bold">{{ card.name }}</h3>
 
-      <select v-if="card.ranges.length > 0" @change="refresh" class="ml-auto min-w-24 h-6 text-xs no-appearance bg-40">
+      <select v-if="card.ranges.length > 0" @change="refresh" class="ms-auto min-w-24 h-6 text-xs no-appearance bg-40">
         <option v-for="range in card.ranges" :key="range.value" :value="range.value" :selected="range.value == selectedRange">{{ range.label }}</option>
       </select>
     </div>
diff --git a/resources/sass/user.scss b/resources/sass/user.scss
index 7aadf4647..d1ab5ca86 100644
--- a/resources/sass/user.scss
+++ b/resources/sass/user.scss
@@ -1,5 +1,5 @@
 body {
-  background-color: $jumbotron-bg;
+  background-color: #e9ecef;
   ::placeholder {
     opacity: 0.4 !important;
   }
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 874804658..265624354 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -22,7 +22,7 @@
         <a class="navbar-brand" href="/">{{ config('app.name') }}</a>
 
         <div class="collapse navbar-collapse" id="navbarNavDropdown">
-          <ul class="navbar-nav mr-auto">
+          <ul class="navbar-nav me-auto">
             <li class="nav-item {{ $request->is('/') ? 'active' : '' }}">
               <a class="nav-link" href="/">Dashboard</a>
             </li>
@@ -56,9 +56,9 @@
           </ul>
 
           @if (auth()->user())
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ms-auto">
               <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{auth()->user()->name}}
                 </a>
                 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index a587ad6bd..c0ab2811b 100644
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -2,7 +2,7 @@
   <div class="container" style="overflow: hidden; height: 100%">
     <div class="d-flex justify-content-between">
       <div>
-        <p class="text-muted text-right"><a class="text-muted" href="https://github.com/RoboJackets/apiary">Made with ♥ by RoboJackets</a> • <a class="text-muted" href="/privacy">Privacy Policy</a></p>
+        <p class="text-muted text-end"><a class="text-muted" href="https://github.com/RoboJackets/apiary">Made with ♥ by RoboJackets</a> • <a class="text-muted" href="/privacy">Privacy Policy</a></p>
       </div>
       <div class="text-muted">
 @if(\Sentry\SentrySdk::getCurrentHub()->getSpan() !== null && \Sentry\SentrySdk::getCurrentHub()->getSpan()->getSampled())