diff --git a/package.json b/package.json
index abfdaf343..658bb80a2 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,13 @@
     "@fancyapps/fancybox": "^3.5.7",
     "@material/layout-grid": "^0.41.0",
     "@material/top-app-bar": "^1.1.1",
+    "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^5.5.0",
     "@trust/webcrypto": "^0.9.2",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "^5.0.0",
     "casual-browserify": "^1.5.19-2",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
diff --git a/static/js/components/CatalogMenu.js b/static/js/components/CatalogMenu.js
index 53bfa5f20..d44ab0fea 100644
--- a/static/js/components/CatalogMenu.js
+++ b/static/js/components/CatalogMenu.js
@@ -11,17 +11,20 @@ type Props = {
 const CatalogMenu = ({ courseTopics }: Props) => {
   return (
     <div className="catalog-menu dropdown">
-      <div
+      <a
         className="col-2 dropdown-toggle"
         id="dropdownMenuButton"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
         aria-label="courses"
+        href="#"
+        role="button"
+        data-bs-toggle="dropdown"
       >
         Courses
-      </div>
-      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
         <a
           className="dropdown-item bold"
           href="/catalog/"
@@ -49,7 +52,7 @@ const CatalogMenu = ({ courseTopics }: Props) => {
         >
           Programs
         </a>
-      </div>
+      </ul>
     </div>
   );
 };
diff --git a/static/js/components/UserMenu.js b/static/js/components/UserMenu.js
index 87c300d8b..1aad8c2a5 100644
--- a/static/js/components/UserMenu.js
+++ b/static/js/components/UserMenu.js
@@ -15,12 +15,15 @@ type Props = {
 const UserMenu = ({ currentUser }: Props) => {
   return (
     <div className="user-menu dropdown">
-      <div
+      <a
         className="col-2 dropdown-toggle"
         id="dropdownMenuButton"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
+        href="#"
+        role="button"
+        data-bs-toggle="dropdown"
       >
         <img
           /* Use default profile avatar for now */
@@ -30,8 +33,8 @@ const UserMenu = ({ currentUser }: Props) => {
           width={34}
           height={34}
         />
-      </div>
-      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
         <MixedLink
           className="dropdown-item"
           dest={routes.profile.view}
@@ -63,7 +66,7 @@ const UserMenu = ({ currentUser }: Props) => {
           <div className="dropdown-icon icon-logout" />
           Sign Out
         </a>
-      </div>
+      </ul>
     </div>
   );
 };
diff --git a/static/js/entry/django.js b/static/js/entry/django.js
index ba6a79d0d..83be36f5f 100644
--- a/static/js/entry/django.js
+++ b/static/js/entry/django.js
@@ -2,6 +2,7 @@
 import "jquery";
 import "bootstrap";
 import "popper.js";
+import "@popperjs/core";
 import "slick-carousel";
 import "hls.js";
 import "@fancyapps/fancybox";
diff --git a/static/scss/layout.scss b/static/scss/layout.scss
index 5cdb6a957..92df4130d 100644
--- a/static/scss/layout.scss
+++ b/static/scss/layout.scss
@@ -3,7 +3,7 @@
 @import "node_modules/@material/top-app-bar/dist/mdc.top-app-bar";
 @import "node_modules/react-picky/dist/picky";
 @import "node_modules/react-day-picker/lib/style";
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
 @import "auth";
 @import "common";
 @import "top-app-bar";
diff --git a/static/scss/user-menu.scss b/static/scss/user-menu.scss
index 22ce3fff9..bc71318d5 100644
--- a/static/scss/user-menu.scss
+++ b/static/scss/user-menu.scss
@@ -59,6 +59,15 @@
 
     &:hover {
       cursor: pointer;
+      color: black;
+    }
+  }
+
+  .dropdown-menu {
+    left: unset;
+
+    .dropdown-item:hover {
+      background-color: #e9ecef;
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e6646b8b5..e2373ca3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2156,6 +2156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
 "@sentry/browser@npm:^5.5.0":
   version: 5.30.0
   resolution: "@sentry/browser@npm:5.30.0"
@@ -3580,13 +3587,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bootstrap@npm:^4.4.1":
-  version: 4.6.2
-  resolution: "bootstrap@npm:4.6.2"
+"bootstrap@npm:^5.0.0":
+  version: 5.3.3
+  resolution: "bootstrap@npm:5.3.3"
   peerDependencies:
-    jquery: 1.9.1 - 3
-    popper.js: ^1.16.1
-  checksum: 3f4e7768ff7d618c49d4bf4f02aa54a9bfb679d4eecb0f3854fa4af1a17b9114b147009c435946432cdd1572efffc71d88ec385c55943a12fa66253cde0876b0
+    "@popperjs/core": ^2.11.8
+  checksum: 537b68db30150075614310e9ebdf1be9b4affdf89ca226d59f4352e82a368b203af13ed0ce5ccfa4e06f141ecd233f7432ca3817e9c1a39863a05fbe13c73c4b
   languageName: node
   linkType: hard
 
@@ -9834,12 +9840,13 @@ __metadata:
     "@fancyapps/fancybox": ^3.5.7
     "@material/layout-grid": ^0.41.0
     "@material/top-app-bar": ^1.1.1
+    "@popperjs/core": ^2.11.8
     "@sentry/browser": ^5.5.0
     "@trust/webcrypto": ^0.9.2
     autoprefixer: ^9.7.3
     babel-eslint: ^10.0.1
     babel-loader: ^8.0.5
-    bootstrap: ^4.4.1
+    bootstrap: ^5.0.0
     casual-browserify: ^1.5.19-2
     chai: ^4.2.0
     chai-as-promised: ^7.1.1