diff --git a/package.json b/package.json
index 1731f0069a..9ef4bee710 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,11 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.20.1",
-    "@blueprintjs/datetime": "^4.4.37",
-    "@blueprintjs/icons": "^4.16.0",
-    "@blueprintjs/popover2": "^1.14.11",
-    "@blueprintjs/select": "^4.9.24",
+    "@blueprintjs/core": "^5.7.0",
+    "@blueprintjs/datetime2": "^2.2.7",
+    "@blueprintjs/icons": "^5.5.0",
+    "@blueprintjs/popover2": "^2.0.0",
+    "@blueprintjs/select": "^5.0.0",
     "@octokit/rest": "^20.0.0",
     "@sentry/browser": "^7.57.0",
     "@sourceacademy/sharedb-ace": "^2.0.2",
diff --git a/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap b/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
index 8b1f36894e..a10dcc05e0 100644
--- a/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
+++ b/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
@@ -8,7 +8,7 @@ exports[`ContentDisplay page renders correctly 1`] = `
     className="col-md-10 col-xs-11 contentdisplay-content-parent"
   >
     <div
-      className="bp4-card bp4-elevation-3 contentdisplay-content"
+      className="contentdisplay-content bp5-card bp5-elevation-3"
     >
       <div>
          Test Content 
diff --git a/src/commons/__tests__/__snapshots__/Markdown.tsx.snap b/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
index 24fac67e60..589070ffae 100644
--- a/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
+++ b/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Markdown page renders correctly 1`] = `
 <div
-  className="md bp4-running-text"
+  className="md bp5-running-text"
   dangerouslySetInnerHTML={
     Object {
       "__html": "<p>Welcome to the Source Academy playground!</p>
diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
index 86e6ef8772..da6332ea4a 100644
--- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
+++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
@@ -11,13 +11,13 @@ exports[`Assessment page "loading" content renders correctly 1`] = `
       className="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
       <div
-        className="bp4-card bp4-elevation-3 contentdisplay-content"
+        className="contentdisplay-content bp5-card bp5-elevation-3"
       >
         <div
-          className="bp4-non-ideal-state bp4-non-ideal-state-vertical"
+          className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
         >
           <div
-            className="bp4-non-ideal-state-visual"
+            className="bp5-non-ideal-state-visual"
             style={
               Object {
                 "fontSize": "48px",
@@ -26,13 +26,14 @@ exports[`Assessment page "loading" content renders correctly 1`] = `
             }
           >
             <div
+              aria-label="loading"
               aria-valuemax={100}
               aria-valuemin={0}
-              className="bp4-spinner"
+              className="bp5-spinner"
               role="progressbar"
             >
               <div
-                className="bp4-spinner-animation"
+                className="bp5-spinner-animation"
               >
                 <svg
                   height={50}
@@ -41,11 +42,11 @@ exports[`Assessment page "loading" content renders correctly 1`] = `
                   width={50}
                 >
                   <path
-                    className="bp4-spinner-track"
+                    className="bp5-spinner-track"
                     d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
                   />
                   <path
-                    className="bp4-spinner-head"
+                    className="bp5-spinner-head"
                     d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
                     pathLength={280}
                     strokeDasharray="280 280"
@@ -56,7 +57,7 @@ exports[`Assessment page "loading" content renders correctly 1`] = `
             </div>
           </div>
           <div
-            className="bp4-non-ideal-state-text"
+            className="bp5-non-ideal-state-text"
           >
             <div>
               Fetching assessment...
@@ -80,10 +81,10 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
       className="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
       <div
-        className="bp4-card bp4-elevation-3 contentdisplay-content"
+        className="contentdisplay-content bp5-card bp5-elevation-3"
       >
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -92,8 +93,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
+            className="bp5-icon bp5-icon-caret-down"
           >
             <svg
               data-icon="caret-down"
@@ -109,13 +109,13 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
             </svg>
           </span>
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Upcoming
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": "auto",
@@ -126,7 +126,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <div
             aria-hidden={false}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(0)",
@@ -136,7 +136,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
           >
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -154,10 +154,10 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         An Odessey to Runes (Duplicate)
                       </h4>
@@ -166,7 +166,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-disabled bp4-minimal"
+                        className="bp5-button bp5-disabled bp5-minimal"
                         disabled={true}
                         onBlur={[Function]}
                         onKeyDown={[Function]}
@@ -176,8 +176,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
+                          className="bp5-icon bp5-icon-confirm"
                         >
                           <svg
                             data-icon="confirm"
@@ -193,7 +192,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                           </svg>
                         </span>
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -213,7 +212,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -222,7 +221,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p>This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0</p>",
@@ -239,8 +238,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
                         >
                           <svg
                             data-icon="calendar"
@@ -268,7 +266,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
           </div>
         </div>
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -277,8 +275,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
+            className="bp5-icon bp5-icon-caret-down"
           >
             <svg
               data-icon="caret-down"
@@ -294,13 +291,13 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
             </svg>
           </span>
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Open
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": "auto",
@@ -311,7 +308,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <div
             aria-hidden={false}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(0)",
@@ -321,7 +318,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
           >
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -339,10 +336,10 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         The Secret to Streams
                       </h4>
@@ -351,7 +348,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-disabled bp4-minimal"
+                        className="bp5-button bp5-disabled bp5-minimal"
                         disabled={true}
                         onBlur={[Function]}
                         onKeyDown={[Function]}
@@ -361,8 +358,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
+                          className="bp5-icon bp5-icon-confirm"
                         >
                           <svg
                             data-icon="confirm"
@@ -378,7 +374,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                           </svg>
                         </span>
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -398,7 +394,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -407,7 +403,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p>Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.</p>",
@@ -424,8 +420,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
                         >
                           <svg
                             data-icon="calendar"
@@ -447,8 +442,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-time listing-due-icon"
-                          icon="time"
+                          className="bp5-icon bp5-icon-time listing-due-icon"
                         >
                           <svg
                             data-icon="time"
@@ -475,7 +469,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                         onClick={[Function]}
                       >
                         <button
-                          className="bp4-button bp4-minimal"
+                          className="bp5-button bp5-minimal"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -485,8 +479,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                         >
                           <span
                             aria-hidden={true}
-                            className="bp4-icon bp4-icon-play"
-                            icon="play"
+                            className="bp5-icon bp5-icon-play"
                           >
                             <svg
                               data-icon="play"
@@ -502,7 +495,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                             </svg>
                           </span>
                           <span
-                            className="bp4-button-text"
+                            className="bp5-button-text"
                           >
                             <span
                               className="custom-hidden-xxxs"
@@ -525,7 +518,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
             </div>
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -543,10 +536,10 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         An Odessey to Runes
                       </h4>
@@ -555,7 +548,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-minimal bp4-intent-danger"
+                        className="bp5-button bp5-minimal bp5-intent-danger"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -565,8 +558,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
+                          className="bp5-icon bp5-icon-confirm"
                         >
                           <svg
                             data-icon="confirm"
@@ -582,7 +574,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                           </svg>
                         </span>
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -602,7 +594,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -611,7 +603,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p><em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -635,8 +627,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
                         >
                           <svg
                             data-icon="calendar"
@@ -658,8 +649,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-time listing-due-icon"
-                          icon="time"
+                          className="bp5-icon bp5-icon-time listing-due-icon"
                         >
                           <svg
                             data-icon="time"
@@ -686,7 +676,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                         onClick={[Function]}
                       >
                         <button
-                          className="bp4-button bp4-minimal"
+                          className="bp5-button bp5-minimal"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -696,8 +686,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                         >
                           <span
                             aria-hidden={true}
-                            className="bp4-icon bp4-icon-edit"
-                            icon="edit"
+                            className="bp5-icon bp5-icon-edit"
                           >
                             <svg
                               data-icon="edit"
@@ -713,7 +702,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                             </svg>
                           </span>
                           <span
-                            className="bp4-button-text"
+                            className="bp5-button-text"
                           >
                             <span
                               className="custom-hidden-xxxs"
@@ -737,7 +726,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
           </div>
         </div>
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -746,8 +735,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-right"
-            icon="caret-right"
+            className="bp5-icon bp5-icon-caret-right"
           >
             <svg
               data-icon="caret-right"
@@ -763,13 +751,13 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
             </svg>
           </span>
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Closed
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -780,7 +768,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -806,13 +794,13 @@ exports[`Assessment page with 0 missions renders correctly 1`] = `
       className="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
       <div
-        className="bp4-card bp4-elevation-3 contentdisplay-content"
+        className="contentdisplay-content bp5-card bp5-elevation-3"
       >
         <div
-          className="bp4-non-ideal-state bp4-non-ideal-state-vertical"
+          className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
         >
           <div
-            className="bp4-non-ideal-state-visual"
+            className="bp5-non-ideal-state-visual"
             style={
               Object {
                 "fontSize": "48px",
@@ -822,29 +810,16 @@ exports[`Assessment page with 0 missions renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-flame"
-              icon="flame"
+              className="bp5-icon bp5-icon-flame bp5-icon-muted"
+              data-icon="flame"
               tabIndex={-1}
-            >
-              <svg
-                data-icon="flame"
-                height={48}
-                role="img"
-                viewBox="0 0 20 20"
-                width={48}
-              >
-                <path
-                  d="M11.622 0c0 1.71.49 3.077 1.472 4.103C16.364 6.496 18 9.23 18 12.308c0 3.418-1.962 5.983-5.887 7.692 2.887-3 2.453-4.23-.49-8C8.5 13.5 9 14.5 9.5 16.5c-1.048 0-2 0-2.5-.5 0 .684 1.197 2.5 1.952 4-3.924-1.026-8.123-7.18-6.651-7.692.981-.342 2.126-.171 3.434.513C4.1 6.667 6.062 2.393 11.622 0z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+            />
           </div>
           <div
-            className="bp4-non-ideal-state-text"
+            className="bp5-non-ideal-state-text"
           >
             <h4
-              className="bp4-heading"
+              className="bp5-heading"
             >
               There are no assessments.
             </h4>
@@ -867,10 +842,10 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
       className="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
       <div
-        className="bp4-card bp4-elevation-3 contentdisplay-content"
+        className="contentdisplay-content bp5-card bp5-elevation-3"
       >
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -879,30 +854,17 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
-          >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+            data-icon="caret-down"
+          />
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Upcoming
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": "auto",
@@ -913,7 +875,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <div
             aria-hidden={false}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(0)",
@@ -923,7 +885,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
           >
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -941,10 +903,10 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         An Odessey to Runes (Duplicate)
                       </h4>
@@ -953,7 +915,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-disabled bp4-minimal"
+                        className="bp5-button bp5-disabled bp5-minimal"
                         disabled={true}
                         onBlur={[Function]}
                         onKeyDown={[Function]}
@@ -963,24 +925,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
-                        >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
-                          >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-standard bp5-icon-confirm"
+                          data-icon="confirm"
+                        />
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -1000,7 +949,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -1009,7 +958,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p>This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0</p>",
@@ -1026,22 +975,9 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                          data-icon="calendar"
+                        />
                         Opens: 18th June, 13:24
                       </div>
                     </div>
@@ -1054,7 +990,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         onClick={[Function]}
                       >
                         <button
-                          className="bp4-button bp4-minimal"
+                          className="bp5-button bp5-minimal"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -1064,24 +1000,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         >
                           <span
                             aria-hidden={true}
-                            className="bp4-icon bp4-icon-play"
-                            icon="play"
-                          >
-                            <svg
-                              data-icon="play"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
-                            >
-                              <path
-                                d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
+                            className="bp5-icon bp5-icon-standard bp5-icon-play"
+                            data-icon="play"
+                          />
                           <span
-                            className="bp4-button-text"
+                            className="bp5-button-text"
                           >
                             <span
                               className="custom-hidden-xxxs"
@@ -1103,7 +1026,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
           </div>
         </div>
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -1112,30 +1035,17 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-down"
-            icon="caret-down"
-          >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+            data-icon="caret-down"
+          />
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Open
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": "auto",
@@ -1146,7 +1056,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <div
             aria-hidden={false}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(0)",
@@ -1156,7 +1066,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
           >
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -1174,10 +1084,10 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         The Secret to Streams
                       </h4>
@@ -1186,7 +1096,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-disabled bp4-minimal"
+                        className="bp5-button bp5-disabled bp5-minimal"
                         disabled={true}
                         onBlur={[Function]}
                         onKeyDown={[Function]}
@@ -1196,24 +1106,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
-                        >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
-                          >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-standard bp5-icon-confirm"
+                          data-icon="confirm"
+                        />
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -1233,7 +1130,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -1242,7 +1139,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p>Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.</p>",
@@ -1259,22 +1156,9 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                          data-icon="calendar"
+                        />
                         Opened: 18th July, 13:24
                       </div>
                       <div
@@ -1282,22 +1166,9 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-time listing-due-icon"
-                          icon="time"
-                        >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-time listing-due-icon"
+                          data-icon="time"
+                        />
                         Due: 18th June, 13:24
                       </div>
                     </div>
@@ -1310,7 +1181,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         onClick={[Function]}
                       >
                         <button
-                          className="bp4-button bp4-minimal"
+                          className="bp5-button bp5-minimal"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -1320,24 +1191,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         >
                           <span
                             aria-hidden={true}
-                            className="bp4-icon bp4-icon-play"
-                            icon="play"
-                          >
-                            <svg
-                              data-icon="play"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
-                            >
-                              <path
-                                d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
+                            className="bp5-icon bp5-icon-standard bp5-icon-play"
+                            data-icon="play"
+                          />
                           <span
-                            className="bp4-button-text"
+                            className="bp5-button-text"
                           >
                             <span
                               className="custom-hidden-xxxs"
@@ -1360,7 +1218,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
             </div>
             <div>
               <div
-                className="bp4-card bp4-elevation-1 row listing"
+                className="row listing bp5-card bp5-elevation-1"
               >
                 <div
                   className="col-xs-3 listing-picture"
@@ -1378,10 +1236,10 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-header"
                   >
                     <div
-                      className="bp4-text-overflow-ellipsis"
+                      className="bp5-text-overflow-ellipsis"
                     >
                       <h4
-                        className="bp4-heading listing-title"
+                        className="bp5-heading listing-title"
                       >
                         An Odessey to Runes
                       </h4>
@@ -1390,7 +1248,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       className="listing-button"
                     >
                       <button
-                        className="bp4-button bp4-minimal bp4-intent-danger"
+                        className="bp5-button bp5-minimal bp5-intent-danger"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1400,24 +1258,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-confirm"
-                          icon="confirm"
-                        >
-                          <svg
-                            data-icon="confirm"
-                            height={16}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={16}
-                          >
-                            <path
-                              d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-standard bp5-icon-confirm"
+                          data-icon="confirm"
+                        />
                         <span
-                          className="bp4-button-text"
+                          className="bp5-button-text"
                         >
                           <span
                             className="custom-hidden-xxxs"
@@ -1437,7 +1282,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-xp"
                   >
                     <h6
-                      className="bp4-heading"
+                      className="bp5-heading"
                     >
                       Max XP: 1000
                     </h6>
@@ -1446,7 +1291,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     className="listing-description"
                   >
                     <div
-                      className="md bp4-running-text"
+                      className="md bp5-running-text"
                       dangerouslySetInnerHTML={
                         Object {
                           "__html": "<p><em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -1470,22 +1315,9 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-calendar listing-due-icon"
-                          icon="calendar"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                          data-icon="calendar"
+                        />
                         Opened: 18th June, 13:24
                       </div>
                       <div
@@ -1493,22 +1325,9 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                       >
                         <span
                           aria-hidden={true}
-                          className="bp4-icon bp4-icon-time listing-due-icon"
-                          icon="time"
-                        >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          className="bp5-icon bp5-icon-time listing-due-icon"
+                          data-icon="time"
+                        />
                         Due: 18th June, 13:24
                       </div>
                     </div>
@@ -1521,7 +1340,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         onClick={[Function]}
                       >
                         <button
-                          className="bp4-button bp4-minimal"
+                          className="bp5-button bp5-minimal"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -1531,24 +1350,11 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                         >
                           <span
                             aria-hidden={true}
-                            className="bp4-icon bp4-icon-edit"
-                            icon="edit"
-                          >
-                            <svg
-                              data-icon="edit"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
-                            >
-                              <path
-                                d="M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
+                            className="bp5-icon bp5-icon-standard bp5-icon-edit"
+                            data-icon="edit"
+                          />
                           <span
-                            className="bp4-button-text"
+                            className="bp5-button-text"
                           >
                             <span
                               className="custom-hidden-xxxs"
@@ -1572,7 +1378,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
           </div>
         </div>
         <button
-          className="bp4-button bp4-minimal collapse-button"
+          className="bp5-button bp5-minimal collapse-button"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -1581,30 +1387,17 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-caret-right"
-            icon="caret-right"
-          >
-            <svg
-              data-icon="caret-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-caret-right"
+            data-icon="caret-right"
+          />
           <span
-            className="bp4-button-text"
+            className="bp5-button-text"
           >
             Closed
           </span>
         </button>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -1615,7 +1408,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index 51f56b285c..34f8d721fa 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders correctly 1`] = `
 <div
-  className="bp4-non-ideal-state bp4-non-ideal-state-vertical WorkspaceParent bp4-dark"
+  className="bp5-non-ideal-state bp5-non-ideal-state-vertical WorkspaceParent bp5-dark"
 >
   <div
-    className="bp4-non-ideal-state-visual"
+    className="bp5-non-ideal-state-visual"
     style={
       Object {
         "fontSize": "48px",
@@ -14,14 +14,15 @@ exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders
     }
   >
     <div
+      aria-label="loading"
       aria-valuemax={100}
       aria-valuemin={0}
-      className="bp4-spinner"
+      className="bp5-spinner"
       role="progressbar"
       size={100}
     >
       <div
-        className="bp4-spinner-animation"
+        className="bp5-spinner-animation"
       >
         <svg
           height={100}
@@ -30,11 +31,11 @@ exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders
           width={100}
         >
           <path
-            className="bp4-spinner-track"
+            className="bp5-spinner-track"
             d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
           />
           <path
-            className="bp4-spinner-head"
+            className="bp5-spinner-head"
             d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
             pathLength={280}
             strokeDasharray="280 280"
@@ -45,7 +46,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders
     </div>
   </div>
   <div
-    className="bp4-non-ideal-state-text"
+    className="bp5-non-ideal-state-text"
   >
     <div>
       Getting mission ready...
@@ -57,7 +58,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders
 exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting question renders correctly 1`] = `
 <div>
   <div
-    class="WorkspaceParent bp4-dark"
+    class="WorkspaceParent bp5-dark"
   >
     <div
       class="workspace"
@@ -66,18 +67,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
+                class="bp5-icon bp5-icon-play"
               >
                 <svg
                   data-icon="play"
@@ -93,19 +93,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-repeat"
-              icon="repeat"
+              class="bp5-icon bp5-icon-repeat"
             >
               <svg
                 data-icon="repeat"
@@ -121,64 +120,60 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
               </svg>
             </span>
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Reset
             </span>
           </button>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-3"
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-disabled bp5-minimal"
+              disabled=""
+              tabindex="-1"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-disabled bp4-minimal"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §1
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §1
+              </span>
+            </button>
+          </div>
         </div>
         <div
-          class="ControlBar_flow bp4-button-group"
+          class="ControlBar_flow bp5-button-group"
         >
           <a
-            class="bp4-button bp4-disabled bp4-minimal"
+            aria-disabled="true"
+            class="bp5-button bp5-disabled bp5-minimal"
             disabled=""
             role="button"
             tabindex="-1"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Question 1 of 1  
             </span>
           </a>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Return to Academy
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-right"
-              icon="arrow-right"
+              class="bp5-icon bp5-icon-arrow-right"
             >
               <svg
                 data-icon="arrow-right"
@@ -196,7 +191,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
           </button>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -346,49 +341,49 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_question_overview"
+                          aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="question_overview"
-                          id="bp4-tab-title_side-content-tabs_question_overview"
+                          id="bp5-tab-title_side-content-tabs_question_overview"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="question_overview-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-ninja"
-                                icon="ninja"
+                                class="bp5-icon bp5-icon-ninja"
                               >
                                 <svg
                                   data-icon="ninja"
@@ -407,28 +402,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_briefing"
+                          aria-controls="bp5-tab-panel_side-content-tabs_briefing"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="briefing"
-                          id="bp4-tab-title_side-content-tabs_briefing"
+                          id="bp5-tab-title_side-content-tabs_briefing"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="briefing-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-briefcase"
-                                icon="briefcase"
+                                class="bp5-icon bp5-icon-briefcase"
                               >
                                 <svg
                                   data-icon="briefcase"
@@ -447,98 +442,74 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_contest_voting"
+                          aria-controls="bp5-tab-panel_side-content-tabs_contest_voting"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="contest_voting"
-                          id="bp4-tab-title_side-content-tabs_contest_voting"
+                          id="bp5-tab-title_side-content-tabs_contest_voting"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="contest_voting-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-new-layers"
-                                icon="new-layers"
-                              >
-                                <svg
-                                  data-icon="new-layers"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M17 3h2a1 1 0 010 2h-2v2a1 1 0 01-2 0V5h-2a1 1 0 010-2h2V1a1 1 0 012 0v2zm-1.252 5.984L10.5 11.9c-.2.1-.3.1-.5.1s-.3 0-.5-.1l-9-5C.2 6.7 0 6.4 0 6s.2-.7.5-.9l9-5c.2-.1.3-.1.5-.1s.3 0 .5.1L13.92 2H13a2 2 0 100 4h1v1a2 2 0 001.748 1.984zm2.07-1.15C17.935 7.58 18 7.298 18 7V6h1c.353 0 .684-.091.972-.251.018.078.028.162.028.251 0 .4-.2.7-.5.9l-1.682.934zM19 9c.6 0 1 .4 1 1 0 .4-.2.7-.5.9l-9 5c-.2.1-.3.1-.5.1s-.3 0-.5-.1l-9-5c-.3-.2-.5-.5-.5-.9 0-.6.4-1 1-1 .2 0 .3 0 .5.1l8.5 4.8 8.5-4.8c.2-.1.3-.1.5-.1zm0 4c.6 0 1 .4 1 1 0 .4-.2.7-.5.9l-9 5c-.2.1-.3.1-.5.1s-.3 0-.5-.1l-9-5c-.3-.2-.5-.5-.5-.9 0-.6.4-1 1-1 .2 0 .3 0 .5.2l8.5 4.7 8.5-4.8c.2-.1.3-.1.5-.1z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-new-layers"
+                                data-icon="new-layers"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_contest_leaderboard"
+                          aria-controls="bp5-tab-panel_side-content-tabs_contest_leaderboard"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="contest_leaderboard"
-                          id="bp4-tab-title_side-content-tabs_contest_leaderboard"
+                          id="bp5-tab-title_side-content-tabs_contest_leaderboard"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="contest_leaderboard-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-crown"
-                                icon="crown"
-                              >
-                                <svg
-                                  data-icon="crown"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M2 8l4 2 4-5 4 5 4-2-1 7H3L2 8zm8-6a1 1 0 110 2 1 1 0 010-2zM1 5a1 1 0 110 2 1 1 0 010-2zm18 0a1 1 0 110 2 1 1 0 010-2zM3 16h14v2H3v-2z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-crown"
+                                data-icon="crown"
+                              />
                             </div>
                           </span>
                         </div>
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_question_overview"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_question_overview"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_question_overview"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_question_overview"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               Sample Contest Voting Question
@@ -548,16 +519,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_briefing"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_briefing"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_briefing"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_briefing"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               Vote for your favourite contest entries here!
@@ -567,9 +538,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_contest_voting"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_contest_voting"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_contest_voting"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_contest_voting"
                         role="tabpanel"
                       >
                         <div
@@ -579,13 +550,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                             class="ContestEntryVoting"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -601,18 +571,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Contest Voting
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-help"
                                     tabindex="0"
                                   >
                                     <svg
@@ -632,12 +602,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -730,10 +700,10 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                         id="item-1"
                                       >
                                         <div
-                                          class="bp4-card bp4-elevation-1 bp4-interactive"
+                                          class="bp5-interactive bp5-card bp5-elevation-1"
                                         >
                                           <pre
-                                            class="bp4-code-block contestentry-entryid"
+                                            class="bp5-code-block contestentry-entryid"
                                           >
                                             1
                                           </pre>
@@ -746,10 +716,10 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                         id="item-2"
                                       >
                                         <div
-                                          class="bp4-card bp4-elevation-1 bp4-interactive"
+                                          class="bp5-interactive bp5-card bp5-elevation-1"
                                         >
                                           <pre
-                                            class="bp4-code-block contestentry-entryid"
+                                            class="bp5-code-block contestentry-entryid"
                                           >
                                             2
                                           </pre>
@@ -765,9 +735,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_contest_leaderboard"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_contest_leaderboard"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_contest_leaderboard"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_contest_leaderboard"
                         role="tabpanel"
                       >
                         <div
@@ -777,13 +747,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                             class="ContestLeaderboard"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -799,18 +768,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Contest Leaderboard
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-help"
                                     tabindex="0"
                                   >
                                     <svg
@@ -830,12 +799,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div>
@@ -848,8 +817,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                       Student Name
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-caret-down"
-                                        icon="caret-down"
+                                        class="bp5-icon bp5-icon-caret-down"
                                       >
                                         <svg
                                           data-icon="caret-down"
@@ -871,8 +839,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                       Rank
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-caret-down"
-                                        icon="caret-down"
+                                        class="bp5-icon bp5-icon-caret-down"
                                       >
                                         <svg
                                           data-icon="caret-down"
@@ -894,8 +861,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                       Score
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-caret-down"
-                                        icon="caret-down"
+                                        class="bp5-icon bp5-icon-caret-down"
                                       >
                                         <svg
                                           data-icon="caret-down"
@@ -916,21 +882,21 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                     class="LeaderboardCard"
                                   >
                                     <div
-                                      class="bp4-card bp4-elevation-1 bp4-interactive"
+                                      class="bp5-interactive bp5-card bp5-elevation-1"
                                       data-testid="SideContentLeaderboardCard"
                                     >
                                       <pre
-                                        class="bp4-code-block contestentry-entryid"
+                                        class="bp5-code-block contestentry-entryid"
                                       >
                                         student_1
                                       </pre>
                                       <pre
-                                        class="bp4-code-block contestentry-rank"
+                                        class="bp5-code-block contestentry-rank"
                                       >
                                         1
                                       </pre>
                                       <pre
-                                        class="bp4-code-block contestentry-score"
+                                        class="bp5-code-block contestentry-score"
                                         data-testid="contestentry-score"
                                       />
                                     </div>
@@ -939,21 +905,21 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                                     class="LeaderboardCard"
                                   >
                                     <div
-                                      class="bp4-card bp4-elevation-1 bp4-interactive"
+                                      class="bp5-interactive bp5-card bp5-elevation-1"
                                       data-testid="SideContentLeaderboardCard"
                                     >
                                       <pre
-                                        class="bp4-code-block contestentry-entryid"
+                                        class="bp5-code-block contestentry-entryid"
                                       >
                                         student_2
                                       </pre>
                                       <pre
-                                        class="bp4-code-block contestentry-rank"
+                                        class="bp5-code-block contestentry-rank"
                                       >
                                         2
                                       </pre>
                                       <pre
-                                        class="bp4-code-block contestentry-score"
+                                        class="bp5-code-block contestentry-score"
                                         data-testid="contestentry-score"
                                       />
                                     </div>
@@ -985,7 +951,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -1084,18 +1050,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
+                          class="bp5-icon bp5-icon-code"
                         >
                           <svg
                             data-icon="code"
@@ -1111,19 +1076,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                           </svg>
                         </span>
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
+                        class="bp5-icon bp5-icon-remove"
                       >
                         <svg
                           data-icon="remove"
@@ -1139,7 +1103,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </svg>
                       </span>
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
@@ -1159,7 +1123,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
 exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders correctly 1`] = `
 <div>
   <div
-    class="WorkspaceParent bp4-dark"
+    class="WorkspaceParent bp5-dark"
   >
     <div
       class="workspace"
@@ -1168,18 +1132,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
+                class="bp5-icon bp5-icon-play"
               >
                 <svg
                   data-icon="play"
@@ -1195,92 +1158,75 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-2"
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-disabled bp5-minimal"
+              disabled=""
+              tabindex="-1"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-disabled bp4-minimal"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §1
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §1
+              </span>
+            </button>
+          </div>
         </div>
         <div
-          class="ControlBar_flow bp4-button-group"
+          class="ControlBar_flow bp5-button-group"
         >
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-left"
-              icon="arrow-left"
-            >
-              <svg
-                data-icon="arrow-left"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.99 6.99H4.41L7.7 3.7a1.003 1.003 0 00-1.42-1.42l-5 5a1.014 1.014 0 000 1.42l5 5a1.003 1.003 0 001.42-1.42L4.41 8.99H14c.55 0 1-.45 1-1s-.46-1-1.01-1z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-standard bp5-icon-arrow-left"
+              data-icon="arrow-left"
+            />
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Previous
             </span>
           </button>
           <a
-            class="bp4-button bp4-disabled bp4-minimal"
+            aria-disabled="true"
+            class="bp5-button bp5-disabled bp5-minimal"
             disabled=""
             role="button"
             tabindex="-1"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Question 3 of 5  
             </span>
           </a>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Next
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-right"
-              icon="arrow-right"
+              class="bp5-icon bp5-icon-arrow-right"
             >
               <svg
                 data-icon="arrow-right"
@@ -1298,7 +1244,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
           </button>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -1327,20 +1273,20 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
               data-testid="MCQChooser"
             >
               <div
-                class="bp4-card bp4-elevation-0 mcq-content-parent col-xs-12 middle-xs"
+                class="mcq-content-parent col-xs-12 middle-xs bp5-card bp5-elevation-0"
               >
                 <div
                   class="row mcq-options-parent between-xs"
                 >
                   <button
-                    class="bp4-button bp4-minimal mcq-option col-xs-12"
+                    class="bp5-button bp5-minimal mcq-option col-xs-12"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       <div
-                        class="md bp4-running-text"
+                        class="md bp5-running-text"
                       >
                         <p>
                           <strong>
@@ -1355,14 +1301,14 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-minimal mcq-option col-xs-12"
+                    class="bp5-button bp5-minimal mcq-option col-xs-12"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       <div
-                        class="md bp4-running-text"
+                        class="md bp5-running-text"
                       >
                         <h3
                           id="b"
@@ -1373,14 +1319,14 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-minimal mcq-option col-xs-12"
+                    class="bp5-button bp5-minimal mcq-option col-xs-12"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       <div
-                        class="md bp4-running-text"
+                        class="md bp5-running-text"
                       >
                         <p>
                           C
@@ -1389,14 +1335,14 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                     </span>
                   </button>
                   <button
-                    class="bp4-button bp4-active bp4-minimal bp4-intent-danger mcq-option col-xs-12"
+                    class="bp5-button bp5-active bp5-minimal bp5-intent-danger mcq-option col-xs-12"
                     type="button"
                   >
                     <span
-                      class="bp4-button-text"
+                      class="bp5-button-text"
                     >
                       <div
-                        class="md bp4-running-text"
+                        class="md bp5-running-text"
                       >
                         <p>
                           D
@@ -1425,49 +1371,49 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_question_overview"
+                          aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="question_overview"
-                          id="bp4-tab-title_side-content-tabs_question_overview"
+                          id="bp5-tab-title_side-content-tabs_question_overview"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="question_overview-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-ninja"
-                                icon="ninja"
+                                class="bp5-icon bp5-icon-ninja"
                               >
                                 <svg
                                   data-icon="ninja"
@@ -1486,28 +1432,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_briefing"
+                          aria-controls="bp5-tab-panel_side-content-tabs_briefing"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="briefing"
-                          id="bp4-tab-title_side-content-tabs_briefing"
+                          id="bp5-tab-title_side-content-tabs_briefing"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="briefing-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-briefcase"
-                                icon="briefcase"
+                                class="bp5-icon bp5-icon-briefcase"
                               >
                                 <svg
                                   data-icon="briefcase"
@@ -1526,28 +1472,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_autograder"
+                          aria-controls="bp5-tab-panel_side-content-tabs_autograder"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="autograder"
-                          id="bp4-tab-title_side-content-tabs_autograder"
+                          id="bp5-tab-title_side-content-tabs_autograder"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="autograder-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-airplane"
-                                icon="airplane"
+                                class="bp5-icon bp5-icon-airplane"
                               >
                                 <svg
                                   data-icon="airplane"
@@ -1568,16 +1514,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_question_overview"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_question_overview"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_question_overview"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_question_overview"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               This is the 3rd question. Oddly enough, it is an ungraded MCQ question that uses the binary tree library! Option C has a null hint!
@@ -1587,16 +1533,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_briefing"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_briefing"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_briefing"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_briefing"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sidecontent-overview bp4-running-text"
+                            class="sidecontent-overview bp5-running-text"
                           >
                             <p>
                               This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. 
@@ -1606,9 +1552,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_autograder"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_autograder"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_autograder"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_autograder"
                         role="tabpanel"
                       >
                         <div
@@ -1618,13 +1564,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                             class="Autograder"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -1640,18 +1585,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Testcases
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-help"
                                     tabindex="0"
                                   >
                                     <svg
@@ -1671,12 +1616,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -1688,12 +1633,11 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                               </div>
                             </div>
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -1709,18 +1653,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 Autograder Results
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -1755,7 +1699,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -1854,18 +1798,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
+                          class="bp5-icon bp5-icon-code"
                         >
                           <svg
                             data-icon="code"
@@ -1881,19 +1824,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                           </svg>
                         </span>
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
+                        class="bp5-icon bp5-icon-remove"
                       >
                         <svg
                           data-icon="remove"
@@ -1909,7 +1851,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                         </svg>
                       </span>
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
@@ -1929,7 +1871,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
 exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment renders correctly 1`] = `
 <div>
   <div
-    class="WorkspaceParent bp4-dark"
+    class="WorkspaceParent bp5-dark"
   >
     <div
       class="workspace"
@@ -1938,18 +1880,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
+                class="bp5-icon bp5-icon-play"
               >
                 <svg
                   data-icon="play"
@@ -1965,19 +1906,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-repeat"
-              icon="repeat"
+              class="bp5-icon bp5-icon-repeat"
             >
               <svg
                 data-icon="repeat"
@@ -1993,64 +1933,60 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
               </svg>
             </span>
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Reset
             </span>
           </button>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-1"
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-disabled bp5-minimal"
+              disabled=""
+              tabindex="-1"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-disabled bp4-minimal"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §1
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §1
+              </span>
+            </button>
+          </div>
         </div>
         <div
-          class="ControlBar_flow bp4-button-group"
+          class="ControlBar_flow bp5-button-group"
         >
           <a
-            class="bp4-button bp4-disabled bp4-minimal"
+            aria-disabled="true"
+            class="bp5-button bp5-disabled bp5-minimal"
             disabled=""
             role="button"
             tabindex="-1"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Question 1 of 5  
             </span>
           </a>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Next
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-right"
-              icon="arrow-right"
+              class="bp5-icon bp5-icon-arrow-right"
             >
               <svg
                 data-icon="arrow-right"
@@ -2068,7 +2004,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
           </button>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -2218,49 +2154,49 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_question_overview"
+                          aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="question_overview"
-                          id="bp4-tab-title_side-content-tabs_question_overview"
+                          id="bp5-tab-title_side-content-tabs_question_overview"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="question_overview-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-ninja"
-                                icon="ninja"
+                                class="bp5-icon bp5-icon-ninja"
                               >
                                 <svg
                                   data-icon="ninja"
@@ -2279,28 +2215,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_briefing"
+                          aria-controls="bp5-tab-panel_side-content-tabs_briefing"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="briefing"
-                          id="bp4-tab-title_side-content-tabs_briefing"
+                          id="bp5-tab-title_side-content-tabs_briefing"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="briefing-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-briefcase"
-                                icon="briefcase"
+                                class="bp5-icon bp5-icon-briefcase"
                               >
                                 <svg
                                   data-icon="briefcase"
@@ -2319,28 +2255,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_autograder"
+                          aria-controls="bp5-tab-panel_side-content-tabs_autograder"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="autograder"
-                          id="bp4-tab-title_side-content-tabs_autograder"
+                          id="bp5-tab-title_side-content-tabs_autograder"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="autograder-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-airplane"
-                                icon="airplane"
+                                class="bp5-icon bp5-icon-airplane"
                               >
                                 <svg
                                   data-icon="airplane"
@@ -2361,16 +2297,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_question_overview"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_question_overview"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_question_overview"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_question_overview"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               This question has an id of 
@@ -2392,16 +2328,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_briefing"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_briefing"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_briefing"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_briefing"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sidecontent-overview bp4-running-text"
+                            class="sidecontent-overview bp5-running-text"
                           >
                             <p>
                               This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. 
@@ -2411,9 +2347,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_autograder"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_autograder"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_autograder"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_autograder"
                         role="tabpanel"
                       >
                         <div
@@ -2423,13 +2359,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                             class="Autograder"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -2445,18 +2380,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Testcases
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-help"
                                     tabindex="0"
                                   >
                                     <svg
@@ -2476,12 +2411,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -2493,12 +2428,11 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                               </div>
                             </div>
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -2514,18 +2448,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 Autograder Results
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -2560,7 +2494,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -2659,18 +2593,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
+                          class="bp5-icon bp5-icon-code"
                         >
                           <svg
                             data-icon="code"
@@ -2686,19 +2619,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                           </svg>
                         </span>
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
+                        class="bp5-icon bp5-icon-remove"
                       >
                         <svg
                           data-icon="remove"
@@ -2714,7 +2646,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                         </svg>
                       </span>
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
@@ -2734,7 +2666,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
 exports[`AssessmentWorkspace AssessmentWorkspace page with programming question renders correctly 1`] = `
 <div>
   <div
-    class="WorkspaceParent bp4-dark"
+    class="WorkspaceParent bp5-dark"
   >
     <div
       class="workspace"
@@ -2743,164 +2675,109 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
-              >
-                <svg
-                  data-icon="play"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-play"
+                data-icon="play"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-floppy-disk"
-              icon="floppy-disk"
-            >
-              <svg
-                data-icon="floppy-disk"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M15.71 2.29l-2-2A.997.997 0 0013 0h-1v6H4V0H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.28-.11-.53-.29-.71zM14 15H2V9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v6zM11 1H9v4h2V1z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-standard bp5-icon-floppy-disk"
+              data-icon="floppy-disk"
+            />
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Save
             </span>
           </button>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-repeat"
-              icon="repeat"
-            >
-              <svg
-                data-icon="repeat"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M10 5c0 .55.45 1 1 1h4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1.74A7.95 7.95 0 008 0C3.58 0 0 3.58 0 8c0 4.06 3.02 7.4 6.94 7.92.02 0 .04.01.06.01.33.04.66.07 1 .07 4.42 0 8-3.58 8-8 0-.55-.45-1-1-1s-1 .45-1 1c0 3.31-2.69 6-6 6-.71 0-1.37-.15-2-.38v.01C3.67 12.81 2 10.61 2 8c0-3.31 2.69-6 6-6 1.77 0 3.36.78 4.46 2H11c-.55 0-1 .45-1 1z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-standard bp5-icon-repeat"
+              data-icon="repeat"
+            />
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Reset
             </span>
           </button>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-0"
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-disabled bp5-minimal"
+              disabled=""
+              tabindex="-1"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-disabled bp4-minimal"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §1
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §1
+              </span>
+            </button>
+          </div>
         </div>
         <div
-          class="ControlBar_flow bp4-button-group"
+          class="ControlBar_flow bp5-button-group"
         >
           <a
-            class="bp4-button bp4-disabled bp4-minimal"
+            aria-disabled="true"
+            class="bp5-button bp5-disabled bp5-minimal"
             disabled=""
             role="button"
             tabindex="-1"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Question 1 of 5  
             </span>
           </a>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Next
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-right"
-              icon="arrow-right"
-            >
-              <svg
-                data-icon="arrow-right"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M14.7 7.29l-5-5a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 001.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+              class="bp5-icon bp5-icon-standard bp5-icon-arrow-right"
+              data-icon="arrow-right"
+            />
           </button>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -3050,159 +2927,123 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_question_overview"
+                          aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="question_overview"
-                          id="bp4-tab-title_side-content-tabs_question_overview"
+                          id="bp5-tab-title_side-content-tabs_question_overview"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="question_overview-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-ninja"
-                                icon="ninja"
-                              >
-                                <svg
-                                  data-icon="ninja"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M20 6s-2.98 2.43-6.12 2.19C13.52 5.31 12.05 0 6 0c0 0 2.41 2.99 2.16 6.12C5.27 6.49 0 7.97 0 14c0 0 2.98-2.43 6.11-2.19C6.47 14.69 7.94 20 14 20c0 0-2.42-2.99-2.16-6.13C14.73 13.51 20 12.02 20 6zm-10 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-ninja"
+                                data-icon="ninja"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_briefing"
+                          aria-controls="bp5-tab-panel_side-content-tabs_briefing"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="briefing"
-                          id="bp4-tab-title_side-content-tabs_briefing"
+                          id="bp5-tab-title_side-content-tabs_briefing"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="briefing-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-briefcase"
-                                icon="briefcase"
-                              >
-                                <svg
-                                  data-icon="briefcase"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M19 5h-4V2c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v3H1c-.55 0-1 .45-1 1v5h4v-1h2v1h8v-1h2v1h4V6c0-.55-.45-1-1-1zm-6 0H7V3h6v2zm3 8h-2v-1H6v1H4v-1H0v6c0 .55.45 1 1 1h18c.55 0 1-.45 1-1v-6h-4v1z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-briefcase"
+                                data-icon="briefcase"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_autograder"
+                          aria-controls="bp5-tab-panel_side-content-tabs_autograder"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="autograder"
-                          id="bp4-tab-title_side-content-tabs_autograder"
+                          id="bp5-tab-title_side-content-tabs_autograder"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="autograder-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-airplane"
-                                icon="airplane"
-                              >
-                                <svg
-                                  data-icon="airplane"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M20 2c0-1.1-.9-2-2-2-.55 0-1.05.22-1.41.59l-4.84 4.84L2 1 1 3l7.53 5.64L4.17 13H1l-1 1 4 2 2 4 1-1v-3.17l4.36-4.36L17 19l2-1-4.43-9.74 4.84-4.84c.37-.37.59-.87.59-1.42z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-airplane"
+                                data-icon="airplane"
+                              />
                             </div>
                           </span>
                         </div>
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_question_overview"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_question_overview"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_question_overview"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_question_overview"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               This question has an id of 
@@ -3224,16 +3065,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_briefing"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_briefing"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_briefing"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_briefing"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sidecontent-overview bp4-running-text"
+                            class="sidecontent-overview bp5-running-text"
                           >
                             <p>
                               This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. 
@@ -3243,9 +3084,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_autograder"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_autograder"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_autograder"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_autograder"
                         role="tabpanel"
                       >
                         <div
@@ -3255,65 +3096,40 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                             class="Autograder"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
-                              >
-                                <svg
-                                  data-icon="caret-down"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <path
-                                    d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                                data-icon="caret-down"
+                              />
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Testcases
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-standard bp5-icon-help"
+                                    data-icon="help"
                                     tabindex="0"
-                                  >
-                                    <svg
-                                      data-icon="help"
-                                      height="16"
-                                      role="img"
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                    >
-                                      <path
-                                        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z"
-                                        fill-rule="evenodd"
-                                      />
-                                    </svg>
-                                  </span>
+                                  />
                                 </span>
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -3325,39 +3141,26 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                               </div>
                             </div>
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
-                              >
-                                <svg
-                                  data-icon="caret-down"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <path
-                                    d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+                                data-icon="caret-down"
+                              />
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 Autograder Results
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -3392,7 +3195,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -3491,62 +3294,36 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
-                        >
-                          <svg
-                            data-icon="code"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M15.71 7.29l-3-3a1.003 1.003 0 00-1.42 1.42L13.59 8l-2.29 2.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3-3c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71zM5 5a1.003 1.003 0 00-1.71-.71l-3 3C.11 7.47 0 7.72 0 8c0 .28.11.53.29.71l3 3a1.003 1.003 0 001.42-1.42L2.41 8 4.7 5.71c.19-.18.3-.43.3-.71zm4-3c-.48 0-.87.35-.96.81l-2 10c-.01.06-.04.12-.04.19 0 .55.45 1 1 1 .48 0 .87-.35.96-.81l2-10c.01-.06.04-.12.04-.19 0-.55-.45-1-1-1z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          class="bp5-icon bp5-icon-standard bp5-icon-code"
+                          data-icon="code"
+                        />
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
-                      >
-                        <svg
-                          data-icon="remove"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M10.99 6.99h-6c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1zm-3-7c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.68 6-6 6z"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        class="bp5-icon bp5-icon-standard bp5-icon-remove"
+                        data-icon="remove"
+                      />
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
@@ -3566,7 +3343,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
 exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly if the question has been graded 1`] = `
 <div>
   <div
-    class="WorkspaceParent bp4-dark"
+    class="WorkspaceParent bp5-dark"
   >
     <div
       class="workspace"
@@ -3575,18 +3352,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
+                class="bp5-icon bp5-icon-play"
               >
                 <svg
                   data-icon="play"
@@ -3602,19 +3378,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-floppy-disk"
-              icon="floppy-disk"
+              class="bp5-icon bp5-icon-floppy-disk"
             >
               <svg
                 data-icon="floppy-disk"
@@ -3630,18 +3405,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
               </svg>
             </span>
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Save
             </span>
           </button>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-repeat"
-              icon="repeat"
+              class="bp5-icon bp5-icon-repeat"
             >
               <svg
                 data-icon="repeat"
@@ -3657,64 +3431,60 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
               </svg>
             </span>
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Reset
             </span>
           </button>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-4"
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-disabled bp5-minimal"
+              disabled=""
+              tabindex="-1"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-disabled bp4-minimal"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §1
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §1
+              </span>
+            </button>
+          </div>
         </div>
         <div
-          class="ControlBar_flow bp4-button-group"
+          class="ControlBar_flow bp5-button-group"
         >
           <a
-            class="bp4-button bp4-disabled bp4-minimal"
+            aria-disabled="true"
+            class="bp5-button bp5-disabled bp5-minimal"
             disabled=""
             role="button"
             tabindex="-1"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Question 1 of 2  
             </span>
           </a>
           <button
-            class="bp4-button bp4-minimal"
+            class="bp5-button bp5-minimal"
           >
             <span
-              class="bp4-button-text"
+              class="bp5-button-text"
             >
               Next
             </span>
             <span
               aria-hidden="true"
-              class="bp4-icon bp4-icon-arrow-right"
-              icon="arrow-right"
+              class="bp5-icon bp5-icon-arrow-right"
             >
               <svg
                 data-icon="arrow-right"
@@ -3732,7 +3502,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
           </button>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -3882,49 +3652,49 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_question_overview"
+                          aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="question_overview"
-                          id="bp4-tab-title_side-content-tabs_question_overview"
+                          id="bp5-tab-title_side-content-tabs_question_overview"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="question_overview-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-ninja"
-                                icon="ninja"
+                                class="bp5-icon bp5-icon-ninja"
                               >
                                 <svg
                                   data-icon="ninja"
@@ -3943,28 +3713,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_briefing"
+                          aria-controls="bp5-tab-panel_side-content-tabs_briefing"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="briefing"
-                          id="bp4-tab-title_side-content-tabs_briefing"
+                          id="bp5-tab-title_side-content-tabs_briefing"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="briefing-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-briefcase"
-                                icon="briefcase"
+                                class="bp5-icon bp5-icon-briefcase"
                               >
                                 <svg
                                   data-icon="briefcase"
@@ -3983,28 +3753,28 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_autograder"
+                          aria-controls="bp5-tab-panel_side-content-tabs_autograder"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="autograder"
-                          id="bp4-tab-title_side-content-tabs_autograder"
+                          id="bp5-tab-title_side-content-tabs_autograder"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="autograder-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-airplane"
-                                icon="airplane"
+                                class="bp5-icon bp5-icon-airplane"
                               >
                                 <svg
                                   data-icon="airplane"
@@ -4023,58 +3793,46 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_grading"
+                          aria-controls="bp5-tab-panel_side-content-tabs_grading"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="grading"
-                          id="bp4-tab-title_side-content-tabs_grading"
+                          id="bp5-tab-title_side-content-tabs_grading"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="grading-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-tick"
-                                icon="tick"
-                              >
-                                <svg
-                                  data-icon="tick"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M17 4c-.28 0-.53.11-.71.29L7 13.59 3.71 10.3A.965.965 0 003 10a1.003 1.003 0 00-.71 1.71l4 4c.18.18.43.29.71.29s.53-.11.71-.29l10-10A1.003 1.003 0 0017 4z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-tick"
+                                data-icon="tick"
+                              />
                             </div>
                           </span>
                         </div>
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_question_overview"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_question_overview"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_question_overview"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_question_overview"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               You can see autograding results!!!
@@ -4084,16 +3842,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_briefing"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_briefing"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_briefing"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_briefing"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sidecontent-overview bp4-running-text"
+                            class="sidecontent-overview bp5-running-text"
                           >
                             <p>
                               This is the closed mission briefing. The save button should not be there. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. 
@@ -4103,9 +3861,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_autograder"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_autograder"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_autograder"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_autograder"
                         role="tabpanel"
                       >
                         <div
@@ -4115,13 +3873,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                             class="Autograder"
                           >
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                               type="button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -4137,18 +3894,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 <span>
                                   Testcases
                                 </span>
                                 <span
-                                  class="bp4-popover2-target"
+                                  class="bp5-popover-target"
                                 >
                                   <span
+                                    aria-expanded="false"
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-help"
-                                    icon="help"
+                                    class="bp5-icon bp5-icon-help"
                                     tabindex="0"
                                   >
                                     <svg
@@ -4168,12 +3925,12 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -4185,12 +3942,11 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                               </div>
                             </div>
                             <button
-                              class="bp4-button bp4-minimal collapse-button"
+                              class="bp5-button bp5-minimal collapse-button"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-caret-down"
-                                icon="caret-down"
+                                class="bp5-icon bp5-icon-caret-down"
                               >
                                 <svg
                                   data-icon="caret-down"
@@ -4206,18 +3962,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                                 </svg>
                               </span>
                               <span
-                                class="bp4-button-text"
+                                class="bp5-button-text"
                               >
                                 Autograder Results
                               </span>
                             </button>
                             <div
-                              class="bp4-collapse"
+                              class="bp5-collapse"
                               style="height: auto; overflow-y: visible; transition: none;"
                             >
                               <div
                                 aria-hidden="false"
-                                class="bp4-collapse-body"
+                                class="bp5-collapse-body"
                                 style="transform: translateY(0); transition: none;"
                               >
                                 <div
@@ -4233,9 +3989,9 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_grading"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_grading"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_grading"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_grading"
                         role="tabpanel"
                       >
                         <div
@@ -4248,7 +4004,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                               class="grading-result-table"
                             >
                               <table
-                                class="bp4-html-table"
+                                class="bp5-html-table"
                               >
                                 <tbody>
                                   <tr>
@@ -4274,16 +4030,16 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                                 </tbody>
                               </table>
                               <table
-                                class="bp4-html-table"
+                                class="bp5-html-table"
                               >
                                 <tbody>
                                   <tr>
                                     <td>
                                       <div
-                                        class="bp4-divider"
+                                        class="bp5-divider"
                                       />
                                       <div
-                                        class="md bp4-running-text"
+                                        class="md bp5-running-text"
                                       >
                                         <p>
                                           Good job. You are awarded the full marks!
@@ -4397,7 +4153,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                                         </p>
                                       </div>
                                       <div
-                                        class="bp4-divider"
+                                        class="bp5-divider"
                                       />
                                     </td>
                                   </tr>
@@ -4443,7 +4199,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -4542,18 +4298,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
+                          class="bp5-icon bp5-icon-code"
                         >
                           <svg
                             data-icon="code"
@@ -4569,19 +4324,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                           </svg>
                         </span>
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
+                        class="bp5-icon bp5-icon-remove"
                       >
                         <svg
                           data-icon="remove"
@@ -4597,7 +4351,7 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                         </svg>
                       </span>
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
diff --git a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
index 4520843847..8cc3132cfd 100644
--- a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
+++ b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
@@ -2,13 +2,12 @@
 
 exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in 1`] = `
 <span
-  aria-haspopup="true"
-  className="bp4-popover2-target"
+  className="bp5-popover2-target bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
   <button
-    className="bp4-button bp4-minimal"
+    className="bp5-button bp5-minimal"
     disabled={false}
     onBlur={[Function]}
     onKeyDown={[Function]}
@@ -16,8 +15,7 @@ exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateC
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-caret-down"
-      icon="caret-down"
+      className="bp5-icon bp5-icon-caret-down"
     >
       <svg
         data-icon="caret-down"
@@ -38,13 +36,12 @@ exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateC
 
 exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in 1`] = `
 <span
-  aria-haspopup="true"
-  className="bp4-popover2-target"
+  className="bp5-popover2-target bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
   <button
-    className="bp4-button bp4-minimal"
+    className="bp5-button bp5-minimal"
     disabled={false}
     onBlur={[Function]}
     onKeyDown={[Function]}
@@ -52,22 +49,9 @@ exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCour
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-caret-down"
-      icon="caret-down"
-    >
-      <svg
-        data-icon="caret-down"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
-      >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
+      className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+      data-icon="caret-down"
+    />
   </button>
 </span>
 `;
diff --git a/src/commons/gitHubOverlay/FileExplorerDialog.tsx b/src/commons/gitHubOverlay/FileExplorerDialog.tsx
index e72c7e7dd5..4bbbbd1fa9 100644
--- a/src/commons/gitHubOverlay/FileExplorerDialog.tsx
+++ b/src/commons/gitHubOverlay/FileExplorerDialog.tsx
@@ -232,7 +232,7 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
       const clonedNode = Object.assign({}, node);
       await allNodesCallback(clonedNode);
 
-      if (treeNodeToEdit === node) {
+      if (treeNodeToEdit.id === node.id) {
         await specificNodeCallback(clonedNode);
       }
 
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index 3fe5c51a83..78265d2d5e 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -11,8 +11,7 @@ import {
   NavbarHeading,
   Position
 } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import { BlueprintIcons_16Id } from '@blueprintjs/icons/lib/esm/generated-icons/16px/blueprint-icons-16';
+import { IconName, IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { Location } from 'history';
@@ -34,7 +33,7 @@ import SicpNavigationBar from './subcomponents/SicpNavigationBar';
 
 export type NavbarEntryInfo = {
   to: string;
-  icon: BlueprintIcons_16Id;
+  icon: IconName;
   text: string;
   disabled?: boolean; // entry is not rendered when disabled
   hasNotifications?: boolean; // whether to render NotificationBadge
diff --git a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
index bf6cdb8b8b..a1be3d835c 100644
--- a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
+++ b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
@@ -2,49 +2,35 @@
 
 exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
 <React.Fragment>
-  <Blueprint4.Navbar
-    className="NavigationBar primary-navbar primary-navbar bp4-dark"
+  <Blueprint5.Navbar
+    className="NavigationBar primary-navbar primary-navbar bp5-dark"
   >
-    <Blueprint4.NavbarGroup
+    <Blueprint5.NavbarGroup
       align="left"
     >
-      <Blueprint4.Popover2
-        boundary="clippingParents"
-        captureDismiss={false}
+      <Popover2
         content={
-          <Blueprint4.Navbar>
-            <Blueprint4.NavbarGroup
+          <Blueprint5.Navbar>
+            <Blueprint5.NavbarGroup
               align="left"
             />
-          </Blueprint4.Navbar>
+          </Blueprint5.Navbar>
         }
-        defaultIsOpen={false}
         disabled={true}
-        fill={false}
-        hasBackdrop={false}
-        hoverCloseDelay={300}
-        hoverOpenDelay={150}
-        inheritDarkTheme={true}
         interactionKind="hover"
-        matchTargetWidth={false}
-        minimal={false}
-        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
-        positioningStrategy="absolute"
-        shouldReturnFocusOnClose={false}
-        targetTagName="span"
-        transitionDuration={300}
-        usePortal={true}
       >
         <NavLink
-          className="NavigationBar__link bp4-button bp4-minimal bp4-active"
+          className="NavigationBar__link bp5-button bp5-minimal bp5-active"
           to="/welcome"
         >
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="symbol-diamond"
+            tagName="span"
           />
-          <Blueprint4.NavbarHeading
+          <Blueprint5.NavbarHeading
             style={
               Object {
                 "paddingBottom": "0px",
@@ -52,16 +38,18 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
             }
           >
             Source Academy @ NUS
-          </Blueprint4.NavbarHeading>
+          </Blueprint5.NavbarHeading>
         </NavLink>
-      </Blueprint4.Popover2>
+      </Popover2>
       <NavLink
         className={[Function]}
         title="Classroom"
         to="/githubassessments"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="briefcase"
+          tagName="span"
         />
         <div
           className=""
@@ -69,35 +57,37 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
           Classroom
         </div>
       </NavLink>
-    </Blueprint4.NavbarGroup>
-    <Blueprint4.NavbarGroup
+    </Blueprint5.NavbarGroup>
+    <Blueprint5.NavbarGroup
       align="right"
     >
       <NavLink
         className={[Function]}
         to="/contributors"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="heart"
+          tagName="span"
         />
       </NavLink>
       <div
         className="visible-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="thin-divider"
         />
       </div>
       <div
         className="hidden-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="default-divider"
         />
       </div>
       <Dropdown />
-    </Blueprint4.NavbarGroup>
-  </Blueprint4.Navbar>
+    </Blueprint5.NavbarGroup>
+  </Blueprint5.Navbar>
   <Routes>
     <Route
       element={null}
@@ -133,18 +123,16 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
 
 exports[`NavigationBar Renders correctly for student with course 1`] = `
 <React.Fragment>
-  <Blueprint4.Navbar
-    className="NavigationBar primary-navbar primary-navbar bp4-dark"
+  <Blueprint5.Navbar
+    className="NavigationBar primary-navbar primary-navbar bp5-dark"
   >
-    <Blueprint4.NavbarGroup
+    <Blueprint5.NavbarGroup
       align="left"
     >
-      <Blueprint4.Popover2
-        boundary="clippingParents"
-        captureDismiss={false}
+      <Popover2
         content={
-          <Blueprint4.Navbar>
-            <Blueprint4.NavbarGroup
+          <Blueprint5.Navbar>
+            <Blueprint5.NavbarGroup
               align="left"
             >
               <NavLink
@@ -152,8 +140,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                 title="Missions"
                 to="/courses/1/missions"
               >
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="flame"
+                  tagName="span"
                 />
                 <div
                   className="hidden-xs hidden-sm"
@@ -170,8 +160,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                 title="Quests"
                 to="/courses/1/quests"
               >
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="lightbulb"
+                  tagName="span"
                 />
                 <div
                   className="hidden-xs hidden-sm"
@@ -188,8 +180,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                 title="Paths"
                 to="/courses/1/paths"
               >
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="predictive-analysis"
+                  tagName="span"
                 />
                 <div
                   className="hidden-xs hidden-sm"
@@ -206,8 +200,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                 title="Contests"
                 to="/courses/1/contests"
               >
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="comparison"
+                  tagName="span"
                 />
                 <div
                   className="hidden-xs hidden-sm"
@@ -224,8 +220,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                 title="Missions"
                 to="/courses/1/missions"
               >
-                <Blueprint4.Icon
+                <Blueprint5.Icon
+                  autoLoad={true}
                   icon="manual"
+                  tagName="span"
                 />
                 <div
                   className="hidden-xs hidden-sm"
@@ -237,36 +235,24 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
                   notificationFilter={[Function]}
                 />
               </NavLink>
-            </Blueprint4.NavbarGroup>
-          </Blueprint4.Navbar>
+            </Blueprint5.NavbarGroup>
+          </Blueprint5.Navbar>
         }
-        defaultIsOpen={false}
         disabled={true}
-        fill={false}
-        hasBackdrop={false}
-        hoverCloseDelay={300}
-        hoverOpenDelay={150}
-        inheritDarkTheme={true}
         interactionKind="hover"
-        matchTargetWidth={false}
-        minimal={false}
-        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
-        positioningStrategy="absolute"
-        shouldReturnFocusOnClose={false}
-        targetTagName="span"
-        transitionDuration={300}
-        usePortal={true}
       >
         <NavLink
-          className="NavigationBar__link bp4-button bp4-minimal bp4-active"
+          className="NavigationBar__link bp5-button bp5-minimal bp5-active"
           to="/courses/1"
         >
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="symbol-diamond"
+            tagName="span"
           />
-          <Blueprint4.NavbarHeading
+          <Blueprint5.NavbarHeading
             style={
               Object {
                 "paddingBottom": "0px",
@@ -274,16 +260,18 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
             }
           >
             CS1101S
-          </Blueprint4.NavbarHeading>
+          </Blueprint5.NavbarHeading>
         </NavLink>
-      </Blueprint4.Popover2>
+      </Popover2>
       <NavLink
         className={[Function]}
         title="Sourcecast"
         to="/courses/1/sourcecast"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="music"
+          tagName="span"
         />
         <div
           className=""
@@ -296,8 +284,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
         title="Playground"
         to="/playground"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="code"
+          tagName="span"
         />
         <div
           className=""
@@ -310,8 +300,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
         title="Classroom"
         to="/githubassessments"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="briefcase"
+          tagName="span"
         />
         <div
           className=""
@@ -324,8 +316,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
         title="SICP JS"
         to="/sicpjs"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="book"
+          tagName="span"
         />
         <div
           className=""
@@ -338,8 +332,10 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
         title="Achievements"
         to="/courses/1/achievements"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="mountain"
+          tagName="span"
         />
         <div
           className=""
@@ -347,35 +343,37 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
           Achievements
         </div>
       </NavLink>
-    </Blueprint4.NavbarGroup>
-    <Blueprint4.NavbarGroup
+    </Blueprint5.NavbarGroup>
+    <Blueprint5.NavbarGroup
       align="right"
     >
       <NavLink
         className={[Function]}
         to="/contributors"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="heart"
+          tagName="span"
         />
       </NavLink>
       <div
         className="visible-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="thin-divider"
         />
       </div>
       <div
         className="hidden-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="default-divider"
         />
       </div>
       <Dropdown />
-    </Blueprint4.NavbarGroup>
-  </Blueprint4.Navbar>
+    </Blueprint5.NavbarGroup>
+  </Blueprint5.Navbar>
   <Routes>
     <Route
       element={null}
@@ -423,49 +421,35 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
 
 exports[`NavigationBar Renders correctly for student without course 1`] = `
 <React.Fragment>
-  <Blueprint4.Navbar
-    className="NavigationBar primary-navbar primary-navbar bp4-dark"
+  <Blueprint5.Navbar
+    className="NavigationBar primary-navbar primary-navbar bp5-dark"
   >
-    <Blueprint4.NavbarGroup
+    <Blueprint5.NavbarGroup
       align="left"
     >
-      <Blueprint4.Popover2
-        boundary="clippingParents"
-        captureDismiss={false}
+      <Popover2
         content={
-          <Blueprint4.Navbar>
-            <Blueprint4.NavbarGroup
+          <Blueprint5.Navbar>
+            <Blueprint5.NavbarGroup
               align="left"
             />
-          </Blueprint4.Navbar>
+          </Blueprint5.Navbar>
         }
-        defaultIsOpen={false}
         disabled={true}
-        fill={false}
-        hasBackdrop={false}
-        hoverCloseDelay={300}
-        hoverOpenDelay={150}
-        inheritDarkTheme={true}
         interactionKind="hover"
-        matchTargetWidth={false}
-        minimal={false}
-        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
-        positioningStrategy="absolute"
-        shouldReturnFocusOnClose={false}
-        targetTagName="span"
-        transitionDuration={300}
-        usePortal={true}
       >
         <NavLink
-          className="NavigationBar__link bp4-button bp4-minimal bp4-active"
+          className="NavigationBar__link bp5-button bp5-minimal bp5-active"
           to="/welcome"
         >
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="symbol-diamond"
+            tagName="span"
           />
-          <Blueprint4.NavbarHeading
+          <Blueprint5.NavbarHeading
             style={
               Object {
                 "paddingBottom": "0px",
@@ -473,16 +457,18 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
             }
           >
             Source Academy @ NUS
-          </Blueprint4.NavbarHeading>
+          </Blueprint5.NavbarHeading>
         </NavLink>
-      </Blueprint4.Popover2>
+      </Popover2>
       <NavLink
         className={[Function]}
         title="Classroom"
         to="/githubassessments"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="briefcase"
+          tagName="span"
         />
         <div
           className=""
@@ -495,8 +481,10 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
         title="SICP JS"
         to="/sicpjs"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="book"
+          tagName="span"
         />
         <div
           className=""
@@ -504,35 +492,37 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
           SICP JS
         </div>
       </NavLink>
-    </Blueprint4.NavbarGroup>
-    <Blueprint4.NavbarGroup
+    </Blueprint5.NavbarGroup>
+    <Blueprint5.NavbarGroup
       align="right"
     >
       <NavLink
         className={[Function]}
         to="/contributors"
       >
-        <Blueprint4.Icon
+        <Blueprint5.Icon
+          autoLoad={true}
           icon="heart"
+          tagName="span"
         />
       </NavLink>
       <div
         className="visible-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="thin-divider"
         />
       </div>
       <div
         className="hidden-xs"
       >
-        <Blueprint4.NavbarDivider
+        <Blueprint5.NavbarDivider
           className="default-divider"
         />
       </div>
       <Dropdown />
-    </Blueprint4.NavbarGroup>
-  </Blueprint4.Navbar>
+    </Blueprint5.NavbarGroup>
+  </Blueprint5.Navbar>
   <Routes>
     <Route
       element={null}
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
index 15ca97ab04..2d48fe1df1 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard and Grading NavLinks render for Role.Staff 1`] = `
-<Blueprint4.Navbar
+<Blueprint5.Navbar
   className="NavigationBar secondary-navbar"
 >
-  <Blueprint4.NavbarGroup
+  <Blueprint5.NavbarGroup
     align="left"
   >
     <NavLink
@@ -12,8 +12,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Missions"
       to="/courses/0/missions"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="flame"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -30,8 +32,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Quests"
       to="/courses/0/quests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="lightbulb"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -48,8 +52,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Paths"
       to="/courses/0/paths"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="predictive-analysis"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -66,8 +72,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Contests"
       to="/courses/0/contests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="comparison"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -84,8 +92,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Others"
       to="/courses/0/others"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="manual"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -97,8 +107,8 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         notificationFilter={[Function]}
       />
     </NavLink>
-  </Blueprint4.NavbarGroup>
-  <Blueprint4.NavbarGroup
+  </Blueprint5.NavbarGroup>
+  <Blueprint5.NavbarGroup
     align="right"
   >
     <NavLink
@@ -106,8 +116,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Ground Control"
       to="/courses/0/groundcontrol"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="satellite"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -120,8 +132,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Dashboard"
       to="/courses/0/dashboard"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="globe"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -134,8 +148,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Sourcereel"
       to="/courses/0/sourcereel"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="mobile-video"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -148,8 +164,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Grading"
       to="/courses/0/grading"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="endorsed"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -166,8 +184,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Game Simulator"
       to="/courses/0/storysimulator"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="crown"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -180,8 +200,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
       title="Notifications"
       to="/courses/0/notipreference"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="notifications"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md hidden-lg"
@@ -189,15 +211,15 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard an
         Notifications
       </div>
     </NavLink>
-  </Blueprint4.NavbarGroup>
-</Blueprint4.Navbar>
+  </Blueprint5.NavbarGroup>
+</Blueprint5.Navbar>
 `;
 
 exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading and AdminPanel NavLinks do NOT render for Role.Student 1`] = `
-<Blueprint4.Navbar
+<Blueprint5.Navbar
   className="NavigationBar secondary-navbar"
 >
-  <Blueprint4.NavbarGroup
+  <Blueprint5.NavbarGroup
     align="left"
   >
     <NavLink
@@ -205,8 +227,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Missions"
       to="/courses/0/missions"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="flame"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -223,8 +247,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Quests"
       to="/courses/0/quests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="lightbulb"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -241,8 +267,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Paths"
       to="/courses/0/paths"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="predictive-analysis"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -259,8 +287,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Contests"
       to="/courses/0/contests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="comparison"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -277,8 +307,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Others"
       to="/courses/0/others"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="manual"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -290,8 +322,8 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         notificationFilter={[Function]}
       />
     </NavLink>
-  </Blueprint4.NavbarGroup>
-  <Blueprint4.NavbarGroup
+  </Blueprint5.NavbarGroup>
+  <Blueprint5.NavbarGroup
     align="right"
   >
     <NavLink
@@ -299,8 +331,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Notifications"
       to="/courses/0/notipreference"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="notifications"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md hidden-lg"
@@ -308,15 +342,15 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         Notifications
       </div>
     </NavLink>
-  </Blueprint4.NavbarGroup>
-</Blueprint4.Navbar>
+  </Blueprint5.NavbarGroup>
+</Blueprint5.Navbar>
 `;
 
 exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading, XP Calculation and AdminPanel NavLinks render for Role.Admin 1`] = `
-<Blueprint4.Navbar
+<Blueprint5.Navbar
   className="NavigationBar secondary-navbar"
 >
-  <Blueprint4.NavbarGroup
+  <Blueprint5.NavbarGroup
     align="left"
   >
     <NavLink
@@ -324,8 +358,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Missions"
       to="/courses/0/missions"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="flame"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -342,8 +378,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Quests"
       to="/courses/0/quests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="lightbulb"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -360,8 +398,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Paths"
       to="/courses/0/paths"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="predictive-analysis"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -378,8 +418,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Contests"
       to="/courses/0/contests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="comparison"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -396,8 +438,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Others"
       to="/courses/0/others"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="manual"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -409,8 +453,8 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         notificationFilter={[Function]}
       />
     </NavLink>
-  </Blueprint4.NavbarGroup>
-  <Blueprint4.NavbarGroup
+  </Blueprint5.NavbarGroup>
+  <Blueprint5.NavbarGroup
     align="right"
   >
     <NavLink
@@ -418,8 +462,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Ground Control"
       to="/courses/0/groundcontrol"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="satellite"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -432,8 +478,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Dashboard"
       to="/courses/0/dashboard"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="globe"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -446,8 +494,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Sourcereel"
       to="/courses/0/sourcereel"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="mobile-video"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -460,8 +510,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Grading"
       to="/courses/0/grading"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="endorsed"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -478,8 +530,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Game Simulator"
       to="/courses/0/storysimulator"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="crown"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md"
@@ -492,8 +546,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="XP Calculation"
       to="/courses/0/xpcalculation"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="calculator"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md hidden-lg"
@@ -506,8 +562,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Admin Panel"
       to="/courses/0/adminpanel"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="settings"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md hidden-lg"
@@ -520,8 +578,10 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
       title="Notifications"
       to="/courses/0/notipreference"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="notifications"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm hidden-md hidden-lg"
@@ -529,6 +589,6 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         Notifications
       </div>
     </NavLink>
-  </Blueprint4.NavbarGroup>
-</Blueprint4.Navbar>
+  </Blueprint5.NavbarGroup>
+</Blueprint5.Navbar>
 `;
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/GitHubAssessmentsNavigationBar.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/GitHubAssessmentsNavigationBar.tsx.snap
index 1d321f7238..b234564007 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/GitHubAssessmentsNavigationBar.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/GitHubAssessmentsNavigationBar.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navbar renders correctly 1`] = `
-<Blueprint4.Navbar
+<Blueprint5.Navbar
   className="NavigationBar secondary-navbar"
 >
-  <Blueprint4.NavbarGroup
+  <Blueprint5.NavbarGroup
     align="left"
   >
     <NavLink
@@ -18,8 +18,10 @@ exports[`Navbar renders correctly 1`] = `
       }
       to="/githubassessments/missions"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="flame"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -38,8 +40,10 @@ exports[`Navbar renders correctly 1`] = `
       }
       to="/githubassessments/quests"
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="lightbulb"
+        tagName="span"
       />
       <div
         className="hidden-xs hidden-sm"
@@ -47,41 +51,23 @@ exports[`Navbar renders correctly 1`] = `
         Quests
       </div>
     </NavLink>
-  </Blueprint4.NavbarGroup>
-  <Blueprint4.NavbarGroup
+  </Blueprint5.NavbarGroup>
+  <Blueprint5.NavbarGroup
     align="right"
   >
-    <Blueprint4.InputGroup
+    <Blueprint5.InputGroup
       disabled={true}
       leftElement={
-        <Blueprint4.Popover2
-          boundary="clippingParents"
-          captureDismiss={false}
-          content={<Blueprint4.Menu />}
-          defaultIsOpen={false}
-          disabled={false}
-          fill={false}
-          hasBackdrop={false}
-          hoverCloseDelay={300}
-          hoverOpenDelay={150}
-          inheritDarkTheme={true}
-          interactionKind="click"
-          matchTargetWidth={false}
-          minimal={false}
-          openOnTargetFocus={true}
+        <Popover2
+          content={<Blueprint5.Menu />}
           placement="bottom-end"
-          positioningStrategy="absolute"
-          shouldReturnFocusOnClose={false}
-          targetTagName="span"
-          transitionDuration={300}
-          usePortal={true}
         >
-          <Blueprint4.Button
+          <Blueprint5.Button
             aria-label="choose"
             minimal={true}
             rightIcon="caret-down"
           />
-        </Blueprint4.Popover2>
+        </Popover2>
       }
       onChange={[Function]}
       placeholder="Select Course"
@@ -91,6 +77,6 @@ exports[`Navbar renders correctly 1`] = `
       onClickLogIn={[Function]}
       onClickLogOut={[Function]}
     />
-  </Blueprint4.NavbarGroup>
-</Blueprint4.Navbar>
+  </Blueprint5.NavbarGroup>
+</Blueprint5.Navbar>
 `;
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
index 24d7936beb..7c74500c8a 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
@@ -2,13 +2,14 @@
 
 exports[`NavigationBarLangSelectButton should render correctly 1`] = `
 <span
-  aria-haspopup="true"
-  className="bp4-popover2-target"
+  className="bp5-popover2-target bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
   <button
-    className="bp4-button"
+    aria-expanded={false}
+    aria-haspopup="menu"
+    className="bp5-button"
     data-testid="NavigationBarLangSelectButton"
     disabled={false}
     onBlur={[Function]}
@@ -18,28 +19,15 @@ exports[`NavigationBarLangSelectButton should render correctly 1`] = `
     type="button"
   >
     <span
-      className="bp4-button-text"
+      className="bp5-button-text"
     >
       JavaScript
     </span>
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-caret-down"
-      icon="caret-down"
-    >
-      <svg
-        data-icon="caret-down"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
-      >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
+      className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+      data-icon="caret-down"
+    />
   </button>
 </span>
 `;
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/SicpNavigationBar.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/SicpNavigationBar.tsx.snap
index fb6a98aa64..a8b6379f17 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/SicpNavigationBar.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/SicpNavigationBar.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Navbar renders correctly 1`] = `
 <React.Fragment>
-  <Blueprint4.Omnibar
+  <Blueprint5.Omnibar
     inputProps={
       Object {
         "disabled": false,
@@ -18,22 +18,22 @@ exports[`Navbar renders correctly 1`] = `
     onQueryChange={[Function]}
     overlayProps={
       Object {
-        "className": "bp4-overlay-scroll-container",
+        "className": "bp5-overlay-scroll-container",
       }
     }
     query=""
   />
-  <Blueprint4.Navbar
+  <Blueprint5.Navbar
     className="SicpNavigationBar secondary-navbar"
   >
-    <Blueprint4.NavbarGroup
+    <Blueprint5.NavbarGroup
       align="left"
     >
       <TableOfContentsButton
         handleOpenToc={[Function]}
       />
-    </Blueprint4.NavbarGroup>
-    <Blueprint4.NavbarGroup
+    </Blueprint5.NavbarGroup>
+    <Blueprint5.NavbarGroup
       align="right"
     >
       <div>
@@ -48,8 +48,8 @@ exports[`Navbar renders correctly 1`] = `
           }
         />
       </div>
-    </Blueprint4.NavbarGroup>
-    <Blueprint4.NavbarGroup
+    </Blueprint5.NavbarGroup>
+    <Blueprint5.NavbarGroup
       align="center"
     >
       <div
@@ -73,9 +73,9 @@ exports[`Navbar renders correctly 1`] = `
           onClick={[Function]}
         />
       </div>
-    </Blueprint4.NavbarGroup>
-  </Blueprint4.Navbar>
-  <Blueprint4.Drawer
+    </Blueprint5.NavbarGroup>
+  </Blueprint5.Navbar>
+  <Blueprint5.Drawer
     autoFocus={true}
     canEscapeKeyClose={true}
     canOutsideClickClose={true}
@@ -91,6 +91,6 @@ exports[`Navbar renders correctly 1`] = `
     <SicpToc
       handleCloseToc={[Function]}
     />
-  </Blueprint4.Drawer>
+  </Blueprint5.Drawer>
 </React.Fragment>
 `;
diff --git a/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap b/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
index 9b3c7e4e35..ffd0f69976 100644
--- a/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
+++ b/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
@@ -1,60 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Code output renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="code-output"
   >
     display('');
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
 
 exports[`Empty output renders an empty card 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
   ''
-</Blueprint4.Card>
+</Blueprint5.Card>
 `;
 
 exports[`Error output (no consoleLogs) renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="error-output"
   >
     Expected , got .
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
 
 exports[`Error output (with consoleLogs) renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="log-output"
   >
     a
 bb
 cccccccccccccccccccccccccccccccc
 d
-  </Unknown>
+  </ForwardRef>
   <br />
-  <Unknown
+  <ForwardRef
     className="error-output"
   >
     Expected , got .
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
 
 exports[`Repl renders correctly 1`] = `
@@ -136,7 +136,7 @@ exports[`Repl renders correctly 1`] = `
       usingSubst={false}
     />
     <HotKeysEnabled
-      className="repl-input-parent row bp4-card bp4-elevation-0"
+      className="repl-input-parent row bp5-card bp5-elevation-0"
       handlers={
         Object {
           "goGreen": [Function],
@@ -207,51 +207,51 @@ exports[`Repl renders correctly 1`] = `
 `;
 
 exports[`Result output (no consoleLogs) renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="result-output"
   >
     42
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
 
 exports[`Result output (with consoleLogs) renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="log-output"
   >
     a
 bb
 cccccccccccccccccccccccccccccccc
 d
-  </Unknown>
-  <Unknown
+  </ForwardRef>
+  <ForwardRef
     className="result-output"
   >
     42
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
 
 exports[`Running output renders correctly 1`] = `
-<Blueprint4.Card
+<Blueprint5.Card
   elevation={0}
   interactive={false}
 >
-  <Unknown
+  <ForwardRef
     className="log-output"
   >
     a
 bb
 cccccccccccccccccccccccccccccccc
 d
-  </Unknown>
-</Blueprint4.Card>
+  </ForwardRef>
+</Blueprint5.Card>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentAutograder.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentAutograder.tsx.snap
index 75364c457b..c5d4b44114 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentAutograder.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentAutograder.tsx.snap
@@ -4,7 +4,7 @@ exports[`Autograder renders autograder results with different statuses correctly
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -13,7 +13,7 @@ exports[`Autograder renders autograder results with different statuses correctly
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -40,12 +40,14 @@ exports[`Autograder renders autograder results with different statuses correctly
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -57,7 +59,7 @@ exports[`Autograder renders autograder results with different statuses correctly
     >
       There are no testcases provided for this question.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -69,7 +71,7 @@ exports[`Autograder renders autograder results with different statuses correctly
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -87,16 +89,20 @@ exports[`Autograder renders autograder results with different statuses correctly
             className="header-sn"
           >
             S/N
-            <Blueprint4.Icon
+            <Blueprint5.Icon
+              autoLoad={true}
               icon="caret-down"
+              tagName="span"
             />
           </div>
           <div
             className="header-status"
           >
             Testcase status
-            <Blueprint4.Icon
+            <Blueprint5.Icon
+              autoLoad={true}
               icon="caret-down"
+              tagName="span"
             />
           </div>
         </div>
@@ -104,16 +110,20 @@ exports[`Autograder renders autograder results with different statuses correctly
           className="header-expected"
         >
           Expected result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-actual"
         >
           Actual result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -183,7 +193,7 @@ exports[`Autograder renders autograder results with different statuses correctly
         }
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
 
@@ -191,7 +201,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -200,7 +210,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -227,12 +237,14 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -249,24 +261,30 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
           className="header-fn"
         >
           Testcase
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-expected"
         >
           Expected result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-actual"
         >
           Actual result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -343,7 +361,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
         workspaceLocation="assessment"
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -355,7 +373,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -367,7 +385,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
     >
       There are no results to show.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
 
@@ -375,7 +393,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -384,7 +402,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -411,12 +429,14 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -433,24 +453,30 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
           className="header-fn"
         >
           Testcase
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-expected"
         >
           Expected result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-actual"
         >
           Actual result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -527,7 +553,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
         workspaceLocation="grading"
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -539,7 +565,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -551,7 +577,7 @@ exports[`Autograder renders opaque testcases with different statuses correctly i
     >
       There are no results to show.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
 
@@ -559,7 +585,7 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -568,7 +594,7 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -595,12 +621,14 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -612,7 +640,7 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
     >
       There are no testcases provided for this question.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -624,7 +652,7 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -636,7 +664,7 @@ exports[`Autograder renders placeholders correctly when testcases and results ar
     >
       There are no results to show.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
 
@@ -644,7 +672,7 @@ exports[`Autograder renders public testcases with different statuses correctly 1
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -653,7 +681,7 @@ exports[`Autograder renders public testcases with different statuses correctly 1
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -680,12 +708,14 @@ exports[`Autograder renders public testcases with different statuses correctly 1
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -702,24 +732,30 @@ exports[`Autograder renders public testcases with different statuses correctly 1
           className="header-fn"
         >
           Testcase
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-expected"
         >
           Expected result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-actual"
         >
           Actual result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -810,7 +846,7 @@ exports[`Autograder renders public testcases with different statuses correctly 1
         workspaceLocation="assessment"
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -822,7 +858,7 @@ exports[`Autograder renders public testcases with different statuses correctly 1
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -834,7 +870,7 @@ exports[`Autograder renders public testcases with different statuses correctly 1
     >
       There are no results to show.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
 
@@ -842,7 +878,7 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
 <div
   className="Autograder"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -851,7 +887,7 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
     <span>
       Testcases
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content={
         <div
@@ -878,12 +914,14 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
       placement="left"
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -900,24 +938,30 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
           className="header-fn"
         >
           Testcase
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-expected"
         >
           Expected result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-actual"
         >
           Actual result
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -1008,7 +1052,7 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
         workspaceLocation="grading"
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
   <ControlButton
     icon="caret-down"
     label="Autograder Results"
@@ -1020,7 +1064,7 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
       }
     }
   />
-  <Blueprint4.Collapse
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -1032,6 +1076,6 @@ exports[`Autograder renders secret testcases with different statuses correctly 1
     >
       There are no results to show.
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestLeaderboard.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestLeaderboard.tsx.snap
index eaee9e03c3..86b14bf633 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestLeaderboard.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestLeaderboard.tsx.snap
@@ -4,7 +4,7 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
 <div
   className="ContestLeaderboard"
 >
-  <Blueprint4.Button
+  <Blueprint5.Button
     className="collapse-button"
     icon="caret-down"
     minimal={true}
@@ -13,7 +13,7 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
     <span>
       Contest Leaderboard
     </span>
-    <Blueprint4.Tooltip2
+    <Blueprint5.Tooltip
       compact={false}
       content="View the top-rated contest entries!"
       hoverCloseDelay={0}
@@ -22,12 +22,14 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
       minimal={false}
       transitionDuration={100}
     >
-      <Blueprint4.Icon
+      <Blueprint5.Icon
+        autoLoad={true}
         icon="help"
+        tagName="span"
       />
-    </Blueprint4.Tooltip2>
-  </Blueprint4.Button>
-  <Blueprint4.Collapse
+    </Blueprint5.Tooltip>
+  </Blueprint5.Button>
+  <Blueprint5.Collapse
     component="div"
     isOpen={true}
     keepChildrenMounted={true}
@@ -41,24 +43,30 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
           className="header-entryid"
         >
           Student Name
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-entryrank"
         >
           Rank
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
         <div
           className="header-score"
         >
           Score
-          <Blueprint4.Icon
+          <Blueprint5.Icon
+            autoLoad={true}
             icon="caret-down"
+            tagName="span"
           />
         </div>
       </div>
@@ -105,6 +113,6 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
         rank={3}
       />
     </div>
-  </Blueprint4.Collapse>
+  </Blueprint5.Collapse>
 </div>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
index 6e38172994..5aa4e270e5 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
@@ -5,7 +5,7 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
   className="ContestEntryVoting"
 >
   <button
-    className="bp4-button bp4-minimal collapse-button"
+    className="bp5-button bp5-minimal collapse-button"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -15,30 +15,17 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-caret-down"
-      icon="caret-down"
-    >
-      <svg
-        data-icon="caret-down"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
-      >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
+      className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
+      data-icon="caret-down"
+    />
     <span
-      className="bp4-button-text"
+      className="bp5-button-text"
     >
       <span>
         Contest Voting
       </span>
       <span
-        className="bp4-popover2-target"
+        className="bp5-popover-target"
         onBlur={[Function]}
         onContextMenu={[Function]}
         onFocus={[Function]}
@@ -46,29 +33,17 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
         onMouseLeave={[Function]}
       >
         <span
+          aria-expanded={false}
           aria-hidden={true}
-          className="bp4-icon bp4-icon-help"
-          icon="help"
+          className="bp5-icon bp5-icon-standard bp5-icon-help"
+          data-icon="help"
           tabIndex={0}
-        >
-          <svg
-            data-icon="help"
-            height={16}
-            role="img"
-            viewBox="0 0 16 16"
-            width={16}
-          >
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z"
-              fillRule="evenodd"
-            />
-          </svg>
-        </span>
+        />
       </span>
     </span>
   </button>
   <div
-    className="bp4-collapse"
+    className="bp5-collapse"
     style={
       Object {
         "height": "auto",
@@ -79,7 +54,7 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
   >
     <div
       aria-hidden={false}
-      className="bp4-collapse-body"
+      className="bp5-collapse-body"
       style={
         Object {
           "transform": "translateY(0)",
@@ -223,11 +198,11 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
               onDragStart={[Function]}
             >
               <div
-                className="bp4-card bp4-elevation-1 bp4-interactive"
+                className="bp5-interactive bp5-card bp5-elevation-1"
                 onClick={[Function]}
               >
                 <pre
-                  className="bp4-code-block contestentry-entryid"
+                  className="bp5-code-block contestentry-entryid"
                 >
                   1
                 </pre>
@@ -242,11 +217,11 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
               onDragStart={[Function]}
             >
               <div
-                className="bp4-card bp4-elevation-1 bp4-interactive"
+                className="bp5-interactive bp5-card bp5-elevation-1"
                 onClick={[Function]}
               >
                 <pre
-                  className="bp4-code-block contestentry-entryid"
+                  className="bp5-code-block contestentry-entryid"
                 >
                   2
                 </pre>
@@ -261,11 +236,11 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
               onDragStart={[Function]}
             >
               <div
-                className="bp4-card bp4-elevation-1 bp4-interactive"
+                className="bp5-interactive bp5-card bp5-elevation-1"
                 onClick={[Function]}
               >
                 <pre
-                  className="bp4-code-block contestentry-entryid"
+                  className="bp5-code-block contestentry-entryid"
                 >
                   3
                 </pre>
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap
index e83e930110..239053d005 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap
@@ -16,18 +16,18 @@ exports[`EnvVisualizer component renders correctly 1`] = `
   tabIndex="-1"
 >
   <div
-    className="sa-substituter bp4-dark"
+    className="sa-substituter bp5-dark"
   >
     <div
-      className="bp4-slider bp4-disabled"
+      className="bp5-slider bp5-disabled"
       onMouseDown={[Function]}
       onTouchStart={[Function]}
     >
       <div
-        className="bp4-slider-track"
+        className="bp5-slider-track"
       >
         <div
-          className="bp4-slider-progress"
+          className="bp5-slider-progress"
           style={
             Object {
               "left": "0.00%",
@@ -37,7 +37,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           }
         />
         <div
-          className="bp4-slider-progress bp4-intent-primary"
+          className="bp5-slider-progress bp5-intent-primary"
           style={
             Object {
               "left": "0.00%",
@@ -47,7 +47,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           }
         />
         <div
-          className="bp4-slider-progress"
+          className="bp5-slider-progress"
           style={
             Object {
               "left": "0.00%",
@@ -58,20 +58,21 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         />
       </div>
       <div
-        className="bp4-slider-axis"
+        className="bp5-slider-axis"
       />
       <span
+        aria-disabled={true}
         aria-orientation="horizontal"
         aria-valuemax={0}
         aria-valuemin={1}
         aria-valuenow={1}
-        className="bp4-slider-handle"
+        className="bp5-slider-handle"
         role="slider"
         style={Object {}}
         tabIndex={0}
       >
         <span
-          className="bp4-slider-label"
+          className="bp5-slider-label"
         >
           1
         </span>
@@ -87,10 +88,10 @@ exports[`EnvVisualizer component renders correctly 1`] = `
       }
     >
       <div
-        className="bp4-button-group"
+        className="bp5-button-group"
       >
         <span
-          className="bp4-popover2-target"
+          className="bp5-popover-target"
           onBlur={[Function]}
           onContextMenu={[Function]}
           onFocus={[Function]}
@@ -98,7 +99,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <a
-            className="bp4-button bp4-disabled"
+            aria-disabled={true}
+            aria-expanded={false}
+            className="bp5-button bp5-disabled"
             disabled={true}
             onBlur={[Function]}
             onKeyDown={[Function]}
@@ -109,27 +112,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-layers"
-              icon="layers"
-            >
-              <svg
-                data-icon="layers"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <path
-                  d="M.55 4.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3a.998.998 0 00-.06-1.81L8.4.08a1.006 1.006 0 00-.79 0l-6.99 3a.992.992 0 00-.07 1.81zM15 11c-.16 0-.31.04-.45.11L8 14l-6.55-2.9c-.14-.06-.29-.1-.45-.1-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1zm0-4c-.16 0-.31.04-.45.11L8 10 1.45 7.11A.997.997 0 001 7c-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+              className="bp5-icon bp5-icon-standard bp5-icon-layers"
+              data-icon="layers"
+            />
             <span
-              className="bp4-button-text"
+              className="bp5-button-text"
             >
               <label
-                className="bp4-control bp4-checkbox"
+                className="bp5-control bp5-checkbox"
                 style={
                   Object {
                     "margin": 0,
@@ -143,14 +133,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
                   type="checkbox"
                 />
                 <span
-                  className="bp4-control-indicator"
+                  className="bp5-control-indicator"
                 />
               </label>
             </span>
           </a>
         </span>
         <span
-          className="bp4-popover2-target"
+          className="bp5-popover-target"
           onBlur={[Function]}
           onContextMenu={[Function]}
           onFocus={[Function]}
@@ -158,7 +148,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <a
-            className="bp4-button bp4-disabled"
+            aria-disabled={true}
+            aria-expanded={false}
+            className="bp5-button bp5-disabled"
             disabled={true}
             onBlur={[Function]}
             onKeyDown={[Function]}
@@ -169,27 +161,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-minimize"
-              icon="minimize"
-            >
-              <svg
-                data-icon="minimize"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <path
-                  d="M15.99.99a1.003 1.003 0 00-1.71-.71l-3.29 3.29V1.99c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H12.4l3.3-3.29c.18-.18.29-.43.29-.71zm-10 8h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L.29 14.28a1.003 1.003 0 001.42 1.42L5 12.41V14c0 .55.45 1 1 1s1-.45 1-1v-4a1.02 1.02 0 00-1.01-1.01z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+              className="bp5-icon bp5-icon-standard bp5-icon-minimize"
+              data-icon="minimize"
+            />
             <span
-              className="bp4-button-text"
+              className="bp5-button-text"
             >
               <label
-                className="bp4-control bp4-checkbox bp4-disabled"
+                className="bp5-control bp5-checkbox bp5-disabled"
                 style={
                   Object {
                     "margin": 0,
@@ -203,7 +182,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
                   type="checkbox"
                 />
                 <span
-                  className="bp4-control-indicator"
+                  className="bp5-control-indicator"
                 />
               </label>
             </span>
@@ -211,10 +190,10 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         </span>
       </div>
       <div
-        className="bp4-button-group"
+        className="bp5-button-group"
       >
         <button
-          className="bp4-button bp4-disabled"
+          className="bp5-button bp5-disabled"
           disabled={true}
           onBlur={[Function]}
           onKeyDown={[Function]}
@@ -224,25 +203,12 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-double-chevron-left"
-            icon="double-chevron-left"
-          >
-            <svg
-              data-icon="double-chevron-left"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M4.41 8L7.7 4.71c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C2.11 7.47 2 7.72 2 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L4.41 8zm5 0l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C7.11 7.47 7 7.72 7 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L9.41 8z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-double-chevron-left"
+            data-icon="double-chevron-left"
+          />
         </button>
         <button
-          className="bp4-button bp4-disabled"
+          className="bp5-button bp5-disabled"
           disabled={true}
           onBlur={[Function]}
           onKeyDown={[Function]}
@@ -252,25 +218,12 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-chevron-left"
-            icon="chevron-left"
-          >
-            <svg
-              data-icon="chevron-left"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-chevron-left"
+            data-icon="chevron-left"
+          />
         </button>
         <button
-          className="bp4-button bp4-disabled"
+          className="bp5-button bp5-disabled"
           disabled={true}
           onBlur={[Function]}
           onKeyDown={[Function]}
@@ -280,25 +233,12 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-chevron-right"
-            icon="chevron-right"
-          >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-chevron-right"
+            data-icon="chevron-right"
+          />
         </button>
         <button
-          className="bp4-button bp4-disabled"
+          className="bp5-button bp5-disabled"
           disabled={true}
           onBlur={[Function]}
           onKeyDown={[Function]}
@@ -308,29 +248,16 @@ exports[`EnvVisualizer component renders correctly 1`] = `
         >
           <span
             aria-hidden={true}
-            className="bp4-icon bp4-icon-double-chevron-right"
-            icon="double-chevron-right"
-          >
-            <svg
-              data-icon="double-chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M9 8c0-.28-.11-.53-.29-.71l-4-4a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4C8.89 8.53 9 8.28 9 8zm4.71-.71l-4-4a1.003 1.003 0 00-1.42 1.42L11.59 8 8.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
+            className="bp5-icon bp5-icon-standard bp5-icon-double-chevron-right"
+            data-icon="double-chevron-right"
+          />
         </button>
       </div>
       <div
-        className="bp4-button-group"
+        className="bp5-button-group"
       >
         <span
-          className="bp4-popover2-target"
+          className="bp5-popover-target"
           onBlur={[Function]}
           onContextMenu={[Function]}
           onFocus={[Function]}
@@ -338,7 +265,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <a
-            className="bp4-button bp4-disabled"
+            aria-disabled={true}
+            aria-expanded={false}
+            className="bp5-button bp5-disabled"
             disabled={true}
             onBlur={[Function]}
             onKeyDown={[Function]}
@@ -349,27 +278,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-build"
-              icon="build"
-            >
-              <svg
-                data-icon="build"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <path
-                  d="M15.39 12.41L7.7 6l1.07-1.1c.34-.34-.12-.63.12-1.26.88-2.17 3.41-2.35 3.41-2.35s.36-.37.71-.72C9.74-.81 7.53.53 6.54 1.4L3.12 4.9l-.71.72c-.39.4-.39 1.05 0 1.45l-.7.72c-.39-.4-1.02-.4-1.41 0s-.39 1.05 0 1.45l1.41 1.45c.39.4 1.02.4 1.41 0s.39-1.05 0-1.45l.71-.72c.39.4 1.02.4 1.41 0l.8-.82 6.39 7.67c.82.82 2.14.82 2.96 0 .81-.82.81-2.15 0-2.96z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+              className="bp5-icon bp5-icon-standard bp5-icon-build"
+              data-icon="build"
+            />
             <span
-              className="bp4-button-text"
+              className="bp5-button-text"
             >
               <label
-                className="bp4-control bp4-checkbox bp4-disabled"
+                className="bp5-control bp5-checkbox bp5-disabled"
                 style={
                   Object {
                     "margin": 0,
@@ -383,14 +299,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
                   type="checkbox"
                 />
                 <span
-                  className="bp4-control-indicator"
+                  className="bp5-control-indicator"
                 />
               </label>
             </span>
           </a>
         </span>
         <span
-          className="bp4-popover2-target"
+          className="bp5-popover-target"
           onBlur={[Function]}
           onContextMenu={[Function]}
           onFocus={[Function]}
@@ -398,7 +314,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <a
-            className="bp4-button bp4-disabled"
+            aria-disabled={true}
+            aria-expanded={false}
+            className="bp5-button bp5-disabled"
             disabled={true}
             onBlur={[Function]}
             onKeyDown={[Function]}
@@ -409,27 +327,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-print"
-              icon="print"
-            >
-              <svg
-                data-icon="print"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <path
-                  d="M12 2.02c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v1h8v-1zm3 2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v-3h12v3h1c.55 0 1-.45 1-1v-6c0-.56-.45-1-1-1zm-1 3h-2v-1h2v1zm-3 6H5v-3H3v4c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-4h-2v3z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+              className="bp5-icon bp5-icon-standard bp5-icon-print"
+              data-icon="print"
+            />
             <span
-              className="bp4-button-text"
+              className="bp5-button-text"
             >
               <label
-                className="bp4-control bp4-checkbox bp4-disabled"
+                className="bp5-control bp5-checkbox bp5-disabled"
                 style={
                   Object {
                     "margin": 0,
@@ -443,14 +348,14 @@ exports[`EnvVisualizer component renders correctly 1`] = `
                   type="checkbox"
                 />
                 <span
-                  className="bp4-control-indicator"
+                  className="bp5-control-indicator"
                 />
               </label>
             </span>
           </a>
         </span>
         <span
-          className="bp4-popover2-target"
+          className="bp5-popover-target"
           onBlur={[Function]}
           onContextMenu={[Function]}
           onFocus={[Function]}
@@ -458,7 +363,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <a
-            className="bp4-button bp4-disabled"
+            aria-disabled={true}
+            aria-expanded={false}
+            className="bp5-button bp5-disabled"
             disabled={true}
             onBlur={[Function]}
             onKeyDown={[Function]}
@@ -468,22 +375,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp4-icon bp4-icon-floppy-disk"
-              icon="floppy-disk"
-            >
-              <svg
-                data-icon="floppy-disk"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
-              >
-                <path
-                  d="M15.71 2.29l-2-2A.997.997 0 0013 0h-1v6H4V0H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.28-.11-.53-.29-.71zM14 15H2V9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v6zM11 1H9v4h2V1z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
+              className="bp5-icon bp5-icon-standard bp5-icon-floppy-disk"
+              data-icon="floppy-disk"
+            />
           </a>
         </span>
       </div>
@@ -491,7 +385,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
   </div>
    
   <div
-    className="bp4-running-text"
+    className="bp5-running-text"
     data-testid="env-visualizer-default-text"
     id="env-visualizer-default-text"
   >
@@ -513,7 +407,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     <br />
     <br />
     <div
-      className="bp4-divider"
+      className="bp5-divider"
     />
     Some useful keyboard shortcuts:
     <br />
@@ -530,7 +424,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     Note that these shortcuts are only active when the browser focus is on this tab.
   </div>
   <div
-    className="bp4-button-group bp4-vertical"
+    className="bp5-button-group bp5-vertical"
     style={
       Object {
         "bottom": "20px",
@@ -540,7 +434,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     }
   >
     <button
-      className="bp4-button bp4-disabled"
+      className="bp5-button bp5-disabled"
       disabled={true}
       onBlur={[Function]}
       onKeyDown={[Function]}
@@ -556,25 +450,12 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     >
       <span
         aria-hidden={true}
-        className="bp4-icon bp4-icon-plus"
-        icon="plus"
-      >
-        <svg
-          data-icon="plus"
-          height={16}
-          role="img"
-          viewBox="0 0 16 16"
-          width={16}
-        >
-          <path
-            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
+        className="bp5-icon bp5-icon-standard bp5-icon-plus"
+        data-icon="plus"
+      />
     </button>
     <button
-      className="bp4-button bp4-disabled"
+      className="bp5-button bp5-disabled"
       disabled={true}
       onBlur={[Function]}
       onKeyDown={[Function]}
@@ -589,22 +470,9 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     >
       <span
         aria-hidden={true}
-        className="bp4-icon bp4-icon-minus"
-        icon="minus"
-      >
-        <svg
-          data-icon="minus"
-          height={16}
-          role="img"
-          viewBox="0 0 16 16"
-          width={16}
-        >
-          <path
-            d="M13 7H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
+        className="bp5-icon bp5-icon-standard bp5-icon-minus"
+        data-icon="minus"
+      />
     </button>
   </div>
 </div>
diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
index a355d38e74..481eb38279 100644
--- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
+++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
@@ -127,7 +127,7 @@ export default function RemoteExecutionDeviceDialog({
           <HTMLSelect
             id="sa-remote-execution-type"
             className={classNames(Classes.FILL)}
-            elementRef={element => void (typeField.ref.current = element)}
+            ref={element => void (typeField.ref.current = element)}
             disabled={isSubmitting || !!deviceToEdit}
             {...(deviceToEdit ? { value: deviceToEdit.type } : undefined)}
           >
diff --git a/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap b/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
index 480d242ef0..e7fd3e455e 100644
--- a/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
+++ b/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Sicp errors: page not found error renders correctly 1`] = `
 <div
-  className="bp4-non-ideal-state bp4-non-ideal-state-vertical"
+  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
 >
   <div
-    className="bp4-non-ideal-state-visual"
+    className="bp5-non-ideal-state-visual"
     style={
       Object {
         "fontSize": "48px",
@@ -13,19 +13,22 @@ exports[`Sicp errors: page not found error renders correctly 1`] = `
       }
     }
   >
-    <Blueprint4.Icon
+    <Blueprint5.Icon
       aria-hidden={true}
+      autoLoad={true}
+      className="bp5-icon-muted"
       icon="error"
       size={48}
       tabIndex={-1}
+      tagName="span"
     />
   </div>
   <div
-    className="bp4-non-ideal-state-text"
+    className="bp5-non-ideal-state-text"
   >
-    <Unknown>
+    <ForwardRef>
       Something went wrong :(
-    </Unknown>
+    </ForwardRef>
     <div
       data-testid="sicp-page-not-found-error"
     >
@@ -44,10 +47,10 @@ exports[`Sicp errors: page not found error renders correctly 1`] = `
 
 exports[`Sicp errors: unexpected error renders correctly 1`] = `
 <div
-  className="bp4-non-ideal-state bp4-non-ideal-state-vertical"
+  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
 >
   <div
-    className="bp4-non-ideal-state-visual"
+    className="bp5-non-ideal-state-visual"
     style={
       Object {
         "fontSize": "48px",
@@ -55,19 +58,22 @@ exports[`Sicp errors: unexpected error renders correctly 1`] = `
       }
     }
   >
-    <Blueprint4.Icon
+    <Blueprint5.Icon
       aria-hidden={true}
+      autoLoad={true}
+      className="bp5-icon-muted"
       icon="error"
       size={48}
       tabIndex={-1}
+      tagName="span"
     />
   </div>
   <div
-    className="bp4-non-ideal-state-text"
+    className="bp5-non-ideal-state-text"
   >
-    <Unknown>
+    <ForwardRef>
       Something went wrong :(
-    </Unknown>
+    </ForwardRef>
     <div
       data-testid="sicp-unexpected-error"
     >
@@ -86,10 +92,10 @@ exports[`Sicp errors: unexpected error renders correctly 1`] = `
 
 exports[`Sicp errors: unexpected error renders correctly 2`] = `
 <div
-  className="bp4-non-ideal-state bp4-non-ideal-state-vertical"
+  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
 >
   <div
-    className="bp4-non-ideal-state-visual"
+    className="bp5-non-ideal-state-visual"
     style={
       Object {
         "fontSize": "48px",
@@ -97,19 +103,22 @@ exports[`Sicp errors: unexpected error renders correctly 2`] = `
       }
     }
   >
-    <Blueprint4.Icon
+    <Blueprint5.Icon
       aria-hidden={true}
+      autoLoad={true}
+      className="bp5-icon-muted"
       icon="error"
       size={48}
       tabIndex={-1}
+      tagName="span"
     />
   </div>
   <div
-    className="bp4-non-ideal-state-text"
+    className="bp5-non-ideal-state-text"
   >
-    <Unknown>
+    <ForwardRef>
       Something went wrong :(
-    </Unknown>
+    </ForwardRef>
     <div
       data-testid="sicp-parsing-error"
     >
diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
index ee72e80946..e3c37c1545 100644
--- a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
+++ b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -13,7 +13,7 @@ Array [
 
 exports[`Parse epigraph EPIGRAPH with all successful 1`] = `
 <blockquote
-  className="bp4-blockquote sicp-epigraph"
+  className="bp5-blockquote sicp-epigraph"
 >
   Mock Text
   <div
@@ -31,7 +31,7 @@ exports[`Parse epigraph EPIGRAPH with all successful 1`] = `
 
 exports[`Parse epigraph EPIGRAPH with author successful 1`] = `
 <blockquote
-  className="bp4-blockquote sicp-epigraph"
+  className="bp5-blockquote sicp-epigraph"
 >
   Mock Text
   <div
@@ -45,7 +45,7 @@ exports[`Parse epigraph EPIGRAPH with author successful 1`] = `
 
 exports[`Parse epigraph EPIGRAPH with date successful 1`] = `
 <blockquote
-  className="bp4-blockquote sicp-epigraph"
+  className="bp5-blockquote sicp-epigraph"
 >
   Mock Text
   <div
@@ -59,7 +59,7 @@ exports[`Parse epigraph EPIGRAPH with date successful 1`] = `
 
 exports[`Parse epigraph EPIGRAPH with none successful 1`] = `
 <blockquote
-  className="bp4-blockquote sicp-epigraph"
+  className="bp5-blockquote sicp-epigraph"
 >
   Mock Text
 </blockquote>
@@ -67,7 +67,7 @@ exports[`Parse epigraph EPIGRAPH with none successful 1`] = `
 
 exports[`Parse epigraph EPIGRAPH with title successful 1`] = `
 <blockquote
-  className="bp4-blockquote sicp-epigraph"
+  className="bp5-blockquote sicp-epigraph"
 >
   Mock Text
   <div
@@ -86,7 +86,7 @@ exports[`Parse exercise EXERCISE with solution successful 1`] = `
   className="sicp-anchor-link-container"
 >
   <div
-    className="bp4-card bp4-elevation-1 sicp-exercise"
+    className="sicp-exercise bp5-card bp5-elevation-1"
   >
     <b />
     <div />
@@ -94,7 +94,7 @@ exports[`Parse exercise EXERCISE with solution successful 1`] = `
       className="sicp-button-container"
     >
       <button
-        className="bp4-button bp4-large sicp-show-solution-button"
+        className="bp5-button bp5-large sicp-show-solution-button"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -103,14 +103,14 @@ exports[`Parse exercise EXERCISE with solution successful 1`] = `
         type="button"
       >
         <span
-          className="bp4-button-text"
+          className="bp5-button-text"
         >
           Show Solution
         </span>
       </button>
     </div>
     <div
-      className="bp4-collapse sicp-solution"
+      className="bp5-collapse sicp-solution"
       style={
         Object {
           "height": undefined,
@@ -121,7 +121,7 @@ exports[`Parse exercise EXERCISE with solution successful 1`] = `
     >
       <div
         aria-hidden={true}
-        className="bp4-collapse-body"
+        className="bp5-collapse-body"
         style={
           Object {
             "transform": "translateY(-undefinedpx)",
@@ -139,7 +139,7 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = `
   className="sicp-anchor-link-container"
 >
   <div
-    className="bp4-card bp4-elevation-1 sicp-exercise"
+    className="sicp-exercise bp5-card bp5-elevation-1"
   >
     <b>
       Title
@@ -151,7 +151,7 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = `
       className="sicp-button-container"
     >
       <button
-        className="bp4-button bp4-large sicp-show-solution-button"
+        className="bp5-button bp5-large sicp-show-solution-button"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -160,14 +160,14 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = `
         type="button"
       >
         <span
-          className="bp4-button-text"
+          className="bp5-button-text"
         >
           Show Solution
         </span>
       </button>
     </div>
     <div
-      className="bp4-collapse sicp-solution"
+      className="bp5-collapse sicp-solution"
       style={
         Object {
           "height": undefined,
@@ -178,7 +178,7 @@ exports[`Parse exercise EXERCISE without solution successful 1`] = `
     >
       <div
         aria-hidden={true}
-        className="bp4-collapse-body"
+        className="bp5-collapse-body"
         style={
           Object {
             "transform": "translateY(-undefinedpx)",
@@ -207,22 +207,9 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-link"
-      icon="link"
-    >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
-      >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
+      className="bp5-icon bp5-icon-standard bp5-icon-link"
+      data-icon="link"
+    />
   </a>
   <div
     className="sicp-figure"
@@ -258,22 +245,9 @@ exports[`Parse figures FIGURE with image successful 1`] = `
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-link"
-      icon="link"
-    >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
-      >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
+      className="bp5-icon bp5-icon-standard bp5-icon-link"
+      data-icon="link"
+    />
   </a>
   <div
     className="sicp-figure"
@@ -309,8 +283,7 @@ exports[`Parse figures FIGURE with snippet successful 1`] = `
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-link"
-      icon="link"
+      className="bp5-icon bp5-icon-link"
     >
       <svg
         data-icon="link"
@@ -358,8 +331,7 @@ exports[`Parse figures FIGURE with table successful 1`] = `
   >
     <span
       aria-hidden={true}
-      className="bp4-icon bp4-icon-link"
-      icon="link"
+      className="bp5-icon bp5-icon-link"
     >
       <svg
         data-icon="link"
@@ -444,7 +416,7 @@ exports[`Parse heading SUBHEADING  successful 1`] = `
   className="sicp-anchor-link-container"
 >
   <h2
-    className="bp4-heading"
+    className="bp5-heading"
   >
     Mock Text
   </h2>
@@ -456,7 +428,7 @@ exports[`Parse heading SUBSUBHEADING  successful 1`] = `
   className="sicp-anchor-link-container"
 >
   <h4
-    className="bp4-heading"
+    className="bp5-heading"
   >
     <br />
     Mock Text
@@ -516,7 +488,7 @@ exports[`Parse links REF  successful 1`] = `
 
 exports[`Parse list OL  successful 1`] = `
 <ol
-  className="bp4-list"
+  className="bp5-list"
 >
   <li>
     Mock Text
@@ -526,7 +498,7 @@ exports[`Parse list OL  successful 1`] = `
 
 exports[`Parse list UL  successful 1`] = `
 <ul
-  className="bp4-list"
+  className="bp5-list"
 >
   <li>
     Mock Text
@@ -548,7 +520,7 @@ exports[`Parse reference REFERENCE  successful 1`] = `
 
 exports[`Parse snippet SNIPPET no eval successful 1`] = `
 <pre
-  className="bp4-code-block"
+  className="bp5-code-block"
 >
   const a = 1;
 a+1;
@@ -557,7 +529,7 @@ a+1;
 
 exports[`Parse snippet SNIPPET with latex successful 1`] = `
 <pre
-  className="bp4-code-block"
+  className="bp5-code-block"
 >
   <span
     className="__Latex__"
@@ -603,7 +575,7 @@ exports[`Parse styling EM  successful 1`] = `
 
 exports[`Parse styling JAVASCRIPTINLINE  successful 1`] = `
 <code
-  className="bp4-code"
+  className="bp5-code"
 />
 `;
 
@@ -611,7 +583,7 @@ exports[`Parse styling META  successful 1`] = `<em />`;
 
 exports[`Parse styling TT  successful 1`] = `
 <code
-  className="bp4-code"
+  className="bp5-code"
 >
   Mock Text
 </code>
@@ -647,7 +619,7 @@ exports[`Parse title TITLE  successful 1`] = `
   className="sicp-anchor-link-container"
 >
   <h1
-    className="bp4-heading"
+    className="bp5-heading"
   >
     Title
   </h1>
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
index ba9c58083e..686ab97020 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
@@ -1,5 +1,5 @@
 import { Classes, Dialog, Intent } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
+import { DateInput3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
 import * as moment from 'moment';
 import * as React from 'react';
@@ -60,7 +60,7 @@ const EditCell: React.FunctionComponent<EditCellProps> = props => {
   const handleFormatDate = (date: Date) => moment(date).format(dateDisplayFormat);
 
   const handleDateChange = React.useCallback(
-    (selectedDate: Date | null) => setNewDate(moment(selectedDate)),
+    (selectedDate: string | null) => setNewDate(moment(selectedDate)),
     []
   );
   const handleDateError = React.useCallback(() => {
@@ -70,15 +70,16 @@ const EditCell: React.FunctionComponent<EditCellProps> = props => {
   }, [currentDate]);
 
   const dateInput = (
-    <DateInput
+    <DateInput3
       formatDate={handleFormatDate}
       onChange={handleDateChange}
       onError={handleDateError}
       parseDate={handleParseDate}
       placeholder={`${dateDisplayFormat} or select a date`}
-      value={newDate?.toDate()}
-      timePrecision={'second'}
-      fill={true}
+      value={newDate?.toISOString()}
+      disableTimezoneSelect
+      timePrecision="second"
+      fill
       minDate={minDate}
       maxDate={maxDate}
       closeOnSelection={false}
diff --git a/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelection.tsx b/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelection.tsx
index e7a45abb2d..a1d8840e3e 100644
--- a/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelection.tsx
+++ b/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelection.tsx
@@ -1,4 +1,4 @@
-import { Icon, ITreeNode, Tree } from '@blueprintjs/core';
+import { Icon, Tree, TreeNodeInfo } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { useRequest } from 'src/commons/utils/Hooks';
@@ -12,7 +12,7 @@ import { assetPathsToTree, treeMap } from './StorySimulatorAssetSelectionHelper'
 import StorySimulatorAssetViewer from './StorySimulatorAssetViewer';
 
 type TreeState = {
-  nodes: ITreeNode[];
+  nodes: TreeNodeInfo[];
 };
 
 /**
@@ -31,8 +31,8 @@ const StorySimulatorAssetSelection = () => {
     setAssetTree({ nodes: assetPathsToTree(assetPaths, toolIcons, s3AssetFolders) });
   }, [assetPaths]);
 
-  const handleNodeClick = (nodeData: ITreeNode) => {
-    treeMap(assetTree.nodes, (node: ITreeNode) => (node.isSelected = false));
+  const handleNodeClick = (nodeData: TreeNodeInfo) => {
+    treeMap(assetTree.nodes, (node: TreeNodeInfo) => (node.isSelected = false));
     nodeData.isSelected = !nodeData.isSelected;
     nodeData.isExpanded = !nodeData.isExpanded;
     const selectedPath = nodeData.id.toString();
diff --git a/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelectionHelper.tsx b/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelectionHelper.tsx
index 0718000a11..fab135ff5e 100644
--- a/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelectionHelper.tsx
+++ b/src/pages/academy/storySimulator/subcomponents/StorySimulatorAssetSelectionHelper.tsx
@@ -1,4 +1,4 @@
-import { ITreeNode } from '@blueprintjs/core';
+import { TreeNodeInfo } from '@blueprintjs/core';
 import _ from 'lodash';
 
 /**
@@ -7,7 +7,7 @@ import _ from 'lodash';
  * @param nodes All parent nodes of the blueprint core tree
  * @param fn Function to apply to every element in the tree
  */
-export function treeMap(nodes: ITreeNode[] | undefined, fn: (node: ITreeNode) => void) {
+export function treeMap(nodes: TreeNodeInfo[] | undefined, fn: (node: TreeNodeInfo) => void) {
   nodes &&
     nodes.forEach(node => {
       fn(node);
@@ -27,13 +27,13 @@ export function treeMap(nodes: ITreeNode[] | undefined, fn: (node: ITreeNode) =>
  *                       all blueprint core nodes basded on the file path
  * @param rootFolders - a default list of parent folder names that you want to display regardless of
  *                      whether or not they have contents
- * @returns {ITreeNode[]} - a blueprint core tree parent nodes
+ * @returns {TreeNodeInfo[]} - a blueprint core tree parent nodes
  */
 export function assetPathsToTree(
   assetPaths: string[],
   iconRenderer: (pathName: string) => JSX.Element,
   rootFolders: string[] = []
-): ITreeNode[] {
+): TreeNodeInfo[] {
   const assetObj = {};
   assetPaths.forEach(assetPath => _.set(assetObj, assetPath.split('/'), 'FILE'));
   rootFolders.forEach(folder => {
@@ -42,7 +42,7 @@ export function assetPathsToTree(
     }
   });
 
-  function helper(parentFolders: string[], assetObj: object | Array<string>): ITreeNode[] {
+  function helper(parentFolders: string[], assetObj: object | Array<string>): TreeNodeInfo[] {
     return Object.keys(assetObj).map(file => {
       const shortPath = '/' + parentFolders.join('/') + '/' + file;
       return {
diff --git a/src/pages/githubAssessments/__tests__/__snapshots__/GitHubClassroom.tsx.snap b/src/pages/githubAssessments/__tests__/__snapshots__/GitHubClassroom.tsx.snap
index df817b426e..e0dac6ee90 100644
--- a/src/pages/githubAssessments/__tests__/__snapshots__/GitHubClassroom.tsx.snap
+++ b/src/pages/githubAssessments/__tests__/__snapshots__/GitHubClassroom.tsx.snap
@@ -34,9 +34,10 @@ exports[`GitHubClassroom renders correctly 1`] = `
       element={
         <ContentDisplay
           display={
-            <Blueprint4.NonIdealState
+            <Blueprint5.NonIdealState
               description="Loading..."
-              icon={<Blueprint4.Spinner />}
+              icon={<Blueprint5.Spinner />}
+              iconMuted={true}
               iconSize={48}
               layout="vertical"
             />
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 54412a848d..5e10aeac31 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Playground tests Playground renders correctly 1`] = `
 <div>
   <div
-    class="Playground bp4-dark"
+    class="Playground bp5-dark"
     tabindex="-1"
   >
     <div
@@ -13,160 +13,102 @@ exports[`Playground tests Playground renders correctly 1`] = `
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <div
             class="Switch"
           >
             <label
-              class="bp4-control bp4-switch"
+              class="bp5-control bp5-switch"
             >
               <input
                 type="checkbox"
               />
               <span
-                class="bp4-control-indicator"
+                class="bp5-control-indicator"
               />
             </label>
           </div>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
-              >
-                <svg
-                  data-icon="play"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-play"
+                data-icon="play"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <span
-            aria-haspopup="true"
-            class="bp4-popover2-target"
+            class="bp5-popover2-target bp5-popover-target"
           >
             <span
-              class="bp4-popover2-target"
+              class="bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-share"
-                  icon="share"
-                >
-                  <svg
-                    data-icon="share"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M10.99 13.99h-9v-9h4.76l2-2H.99c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h11c.55 0 1-.45 1-1V7.24l-2 2v4.75zm4-14h-5c-.55 0-1 .45-1 1s.45 1 1 1h2.59L7.29 7.28a1 1 0 00-.3.71 1.003 1.003 0 001.71.71l5.29-5.29V6c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-share"
+                  data-icon="share"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Share
                 </span>
               </button>
             </span>
           </span>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-0"
+            aria-disabled="false"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-minimal"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-minimal"
-                  type="button"
-                >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §4
-                  </span>
-                  <span
-                    aria-hidden="true"
-                    class="bp4-icon bp4-icon-double-caret-vertical"
-                    icon="double-caret-vertical"
-                  >
-                    <svg
-                      data-icon="double-caret-vertical"
-                      height="16"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                Source §4
+              </span>
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-standard bp5-icon-double-caret-vertical"
+                data-icon="double-caret-vertical"
+              />
+            </button>
+          </div>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-social-media"
-                  icon="social-media"
-                >
-                  <svg
-                    data-icon="social-media"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M9.5 4c.4 0 .8-.1 1.1-.3C12 4.5 12.9 6 13 7.6c0 .5.5.9 1 .9.6 0 1-.4 1-1v-.2c-.2-2.4-1.5-4.4-3.5-5.5-.1-1-.9-1.8-2-1.8s-2 .9-2 2 .9 2 2 2zM4 8.5c0-.7-.4-1.3-.9-1.7.3-1.4 1.2-2.6 2.5-3.3.3-.1.6-.4.6-.9s-.4-1-1-1c-.2 0-.3 0-.5.1-1.9 1-3.2 2.8-3.6 5C.4 7.1 0 7.8 0 8.5c0 1.1.9 2 2 2s2-.9 2-2zm8.8 1.2c-1.1 0-2 .9-2 2v.3c-.8.6-1.8.9-2.8.9-1.2 0-2.3-.4-3.2-1.1-.2-.2-.4-.3-.7-.3-.6 0-1 .4-1 1 0 .3.1.6.3.8C4.6 14.4 6.2 15 8 15c1.5 0 3-.5 4.1-1.3.2.1.5.1.7.1 1.1 0 2-.9 2-2s-.9-2.1-2-2.1z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-social-media"
+                  data-icon="social-media"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Session
                 </span>
@@ -174,66 +116,39 @@ exports[`Playground tests Playground renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-folder-close"
-                icon="folder-close"
-              >
-                <svg
-                  data-icon="folder-close"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M-.01 14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V7h-16v7zm15-10H7.41L5.7 2.3a.965.965 0 00-.71-.3h-4c-.55 0-1 .45-1 1v3h16V5c0-.55-.45-1-1-1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                class="bp5-icon bp5-icon-standard bp5-icon-folder-close"
+                data-icon="folder-close"
+              />
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Folder
               </span>
             </button>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-cloud"
-                  icon="cloud"
-                >
-                  <svg
-                    data-icon="cloud"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 6c-.03 0-.07 0-.1.01A5 5 0 002 7c0 .11.01.22.02.33A3.51 3.51 0 000 10.5C0 12.43 1.57 14 3.5 14H12c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-cloud"
+                  data-icon="cloud"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Google Drive
                 </span>
@@ -241,35 +156,21 @@ exports[`Playground tests Playground renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-git-branch"
-                  icon="git-branch"
-                >
-                  <svg
-                    data-icon="git-branch"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M12 1c-1.66 0-3 1.34-3 3 0 1.25.76 2.32 1.85 2.77A2.02 2.02 0 019 8H7c-.73 0-1.41.2-2 .55V5.82C6.16 5.4 7 4.3 7 3c0-1.66-1.34-3-3-3S1 1.34 1 3c0 1.3.84 2.4 2 2.82v4.37c-1.16.4-2 1.51-2 2.81 0 1.66 1.34 3 3 3s3-1.34 3-3c0-1.04-.53-1.95-1.32-2.49.35-.31.81-.51 1.32-.51h2c1.92 0 3.52-1.35 3.91-3.15A2.996 2.996 0 0012 1zM4 2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 12c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8-9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                  class="bp5-icon bp5-icon-standard bp5-icon-git-branch"
+                  data-icon="git-branch"
+                />
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   GitHub
                 </span>
@@ -277,38 +178,27 @@ exports[`Playground tests Playground renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <div
-              class="bp4-control-group bp4-numeric-input"
+              class="bp5-control-group bp5-numeric-input"
+              role="group"
             >
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-time"
-                  icon="time"
+                  class="bp5-icon bp5-icon-standard bp5-icon-time"
+                  data-icon="time"
                   tabindex="-1"
-                >
-                  <svg
-                    data-icon="time"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
+                />
                 <input
+                  aria-expanded="false"
                   aria-valuemin="1000"
                   aria-valuenow="1000"
                   autocomplete="off"
-                  class="bp4-input"
+                  class="bp5-input"
                   id="numericInput-0"
                   min="1000"
                   role="spinbutton"
@@ -319,18 +209,17 @@ exports[`Playground tests Playground renders correctly 1`] = `
                 />
               </div>
               <div
-                class="bp4-button-group bp4-vertical bp4-fixed"
+                class="bp5-button-group bp5-vertical bp5-fixed"
               >
                 <button
                   aria-controls="numericInput-0"
                   aria-label="increment"
-                  class="bp4-button"
+                  class="bp5-button"
                   type="button"
                 >
                   <span
                     aria-hidden="true"
-                    class="bp4-icon bp4-icon-chevron-up"
-                    icon="chevron-up"
+                    class="bp5-icon bp5-icon-chevron-up"
                   >
                     <svg
                       data-icon="chevron-up"
@@ -340,8 +229,10 @@ exports[`Playground tests Playground renders correctly 1`] = `
                       width="16"
                     >
                       <path
-                        d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                        d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                         fill-rule="evenodd"
+                        style="transform-origin: center;"
+                        transform="scale(0.05, -0.05) translate(-160, -160)"
                       />
                     </svg>
                   </span>
@@ -349,15 +240,14 @@ exports[`Playground tests Playground renders correctly 1`] = `
                 <button
                   aria-controls="numericInput-0"
                   aria-label="decrement"
-                  class="bp4-button bp4-disabled"
+                  class="bp5-button bp5-disabled"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <span
                     aria-hidden="true"
-                    class="bp4-icon bp4-icon-chevron-down"
-                    icon="chevron-down"
+                    class="bp5-icon bp5-icon-chevron-down"
                   >
                     <svg
                       data-icon="chevron-down"
@@ -367,8 +257,10 @@ exports[`Playground tests Playground renders correctly 1`] = `
                       width="16"
                     >
                       <path
-                        d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                        d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                         fill-rule="evenodd"
+                        style="transform-origin: center;"
+                        transform="scale(0.05, -0.05) translate(-160, -160)"
                       />
                     </svg>
                   </span>
@@ -378,7 +270,7 @@ exports[`Playground tests Playground renders correctly 1`] = `
           </span>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -528,199 +420,151 @@ exports[`Playground tests Playground renders correctly 1`] = `
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_introduction"
+                          aria-controls="bp5-tab-panel_side-content-tabs_introduction"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="introduction"
-                          id="bp4-tab-title_side-content-tabs_introduction"
+                          id="bp5-tab-title_side-content-tabs_introduction"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="introduction-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-home"
-                                icon="home"
-                              >
-                                <svg
-                                  data-icon="home"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M2 12v7c0 .55.45 1 1 1h5v-7h4v7h5c.55 0 1-.45 1-1v-7l-8-8-8 8zm17.71-2.71L17 6.59V3c0-.55-.45-1-1-1s-1 .45-1 1v1.59L10.71.3C10.53.11 10.28 0 10 0s-.53.11-.71.29l-9 9a1.003 1.003 0 001.42 1.42L10 2.41l8.29 8.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-home"
+                                data-icon="home"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_data_visualizer"
+                          aria-controls="bp5-tab-panel_side-content-tabs_data_visualizer"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="data_visualizer"
-                          id="bp4-tab-title_side-content-tabs_data_visualizer"
+                          id="bp5-tab-title_side-content-tabs_data_visualizer"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="data_visualizer-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-eye-open"
-                                icon="eye-open"
-                              >
-                                <svg
-                                  data-icon="eye-open"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M10.01 7.984A2.008 2.008 0 008.012 9.99c0 1.103.9 2.006 1.998 2.006a2.008 2.008 0 001.998-2.006c0-1.103-.9-2.006-1.998-2.006zM20 9.96v-.03-.01-.02-.02a.827.827 0 00-.21-.442c-.64-.802-1.398-1.514-2.168-2.166-1.658-1.404-3.566-2.587-5.664-3.058a8.982 8.982 0 00-3.656-.05c-1.11.2-2.178.641-3.177 1.183-1.569.852-2.997 2.016-4.246 3.33-.23.25-.46.49-.67.761-.279.351-.279.773 0 1.124.64.802 1.4 1.514 2.169 2.166 1.658 1.404 3.566 2.577 5.664 3.058 1.209.271 2.438.281 3.656.05 1.11-.21 2.178-.651 3.177-1.193 1.569-.852 2.997-2.016 4.246-3.33.23-.24.46-.49.67-.751.11-.12.179-.271.209-.442v-.02-.02-.01-.03V10v-.04zM10.01 14A4.003 4.003 0 016.014 9.99a4.003 4.003 0 013.996-4.011 4.003 4.003 0 013.996 4.011 4.003 4.003 0 01-3.996 4.011z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-eye-open"
+                                data-icon="eye-open"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_env_visualizer"
+                          aria-controls="bp5-tab-panel_side-content-tabs_env_visualizer"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="env_visualizer"
-                          id="bp4-tab-title_side-content-tabs_env_visualizer"
+                          id="bp5-tab-title_side-content-tabs_env_visualizer"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="env_visualizer-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-globe"
-                                icon="globe"
-                              >
-                                <svg
-                                  data-icon="globe"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M7.53 4.37c.1-.1.1-.26 0-.35l-.68-.68c-.1-.1-.25-.1-.35 0-.1.1-.1.26 0 .35l.68.68c.1.1.25.1.35 0zm3.17.06h.3c.09 0 .16-.01.16-.1 0-.09-.07-.1-.16-.1h-.3c-.09 0-.16.01-.16.1s.07.1.16.1zm.98 1.15c.09 0 .19-.08.19-.17v-.42c0-.09-.1-.17-.19-.17s-.19.08-.19.17v.42c0 .09.1.17.19.17zm-6.5 4.19c-.35 0-.56.28-.56.63v2.37c0 .35.21.62.56.62h.39v2.4c0 .34.33.61.67.61s.67-.27.67-.61v-1.44h-.02c.35 0 .6-.19.6-.54v-.41h.18c.35 0 .58-.28.58-.62v-.81c0-.01.01-.01 0-.02L6.1 9.77h-.92zM10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8 0-.74.11-1.46.3-2.14h.03v.65c0 .28.25.5.53.5.05 0 .1-.01.15-.02l1.05 1.05c.1.11.28.11.38 0 .1-.1.11-.27 0-.38L3.42 8.59c0-.03.05-.05.05-.08v-.16c0-.22.12-.3.34-.49h.63c.12 0 .23-.01.32-.07.01-.01.02 0 .03-.01.02-.02.04-.03.06-.04.01-.01.02-.01.03-.02l.02-.02 2.15-2.15c.24-.24.24-.63 0-.86-.23-.24-.62-.19-.86.04l-.41.46H5v-.64c0-.01.07.07.07-.12h.87c.17 0 .3-.12.3-.29 0-.17-.13-.29-.3-.29H4.88C6.27 2.7 8.05 2 10 2s3.73.7 5.12 1.86h-1.58l-.01-.04c-.06 0-.12 0-.17.04l-.71.7c-.09.09-.09.23 0 .31.09.09.23.09.32 0l.56-.6.01-.03h.34c0 .19-.1.13-.1.16v.1c0 .29-.2.5-.49.5h-.51c-.25 0-.52.28-.52.54v.23h-.12c-.16 0-.27.08-.27.24v.33h-.32c-.23 0-.41.15-.41.38 0 .22.18.35.41.35.1 0 .19.04.26-.16l.06.01.66-.59h.23l.53.5c.04.04.11.03.16-.01.04-.04.04-.16 0-.2L13 6.15h.32l.12.16c.25.25.65.23.89-.02l.12-.14H15c.02 0 .11.07.11.07v.33s-.06-.01-.07-.01h-.49c-.16 0-.28.13-.28.29 0 .16.13.29.28.29h.49c.01 0 .07-.01.07-.01v.2c-.19.28-.33.57-.62.57h-1.28s0-.01-.01-.01l-.58-.58a.622.622 0 00-.89 0l-.58.58s0 .01-.01.01h-.34c-.35 0-.67.28-.67.63v1.25c0 .35.32.61.67.61h1.22c.46.19.78.48.97.94v2.28c0 .35.23.6.58.6h.98c.35 0 .54-.25.54-.6v-2.2l1.21-1.17.04-.02.02-.01h.04c.1-.11.2-.26.2-.42V8.49c0-.25-.22-.44-.42-.63h.58c.02.38.29.57.63.57h.43c.13.51.18 1.03.18 1.57 0 4.42-3.58 8-8 8zm6.16-5.65c-.14 0-.29.11-.29.25v.77c0 .14.15.25.29.25.14 0 .29-.11.29-.25v-.77c0-.14-.15-.25-.29-.25zM10.5 3.48c0-.34-.28-.57-.62-.57h-.74c-.34 0-.57.25-.57.59 0 .05-.13.06.06.1v.64c0 .2.09.36.29.36.2 0 .29-.16.29-.36v-.19h.68c.33 0 .61-.23.61-.57z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-globe"
+                                data-icon="globe"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_remote_execution"
+                          aria-controls="bp5-tab-panel_side-content-tabs_remote_execution"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="remote_execution"
-                          id="bp4-tab-title_side-content-tabs_remote_execution"
+                          id="bp5-tab-title_side-content-tabs_remote_execution"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="remote_execution-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-satellite"
-                                icon="satellite"
-                              >
-                                <svg
-                                  data-icon="satellite"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M9 18c.6 0 1 .4 1 1s-.4 1-1 1c-5 0-9-4-9-9 0-.6.4-1 1-1s1 .4 1 1c0 3.9 3.1 7 7 7zm0-4c.6 0 1 .4 1 1s-.4 1-1 1c-2.8 0-5-2.2-5-5 0-.6.4-1 1-1s1 .4 1 1c0 1.7 1.3 3 3 3zm5.7-3.7c.4-.4 1-.4 1.4 0l3.6 3.6c.4.4.4 1 0 1.4l-1.4 1.4c-.4.4-1 .4-1.4 0l-3.6-3.6c-.4-.4-.4-1 0-1.4l1.4-1.4zM4.7.3c.4-.4 1-.4 1.4 0l3.6 3.6c.4.4.4 1 0 1.4L8.3 6.7c-.4.4-1 .4-1.4 0L3.3 3.1c-.4-.4-.4-1 0-1.4L4.7.3zm11.1 1c.4-.4 1-.4 1.4 0l1.6 1.6c.4.4.4 1 0 1.4l-6.5 6.5c-.4.4-1 .4-1.4 0L9.3 9.2c-.4-.4-.4-1 0-1.4l6.5-6.5zM9 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-satellite"
+                                data-icon="satellite"
+                              />
                             </div>
                           </span>
                         </div>
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_introduction"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_introduction"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_introduction"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_introduction"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               Welcome to the Source Academy playground!
@@ -792,19 +636,19 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_data_visualizer"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_data_visualizer"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_data_visualizer"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_data_visualizer"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sa-data-visualizer bp4-dark"
+                            class="sa-data-visualizer bp5-dark"
                           >
                             <p
-                              class="bp4-running-text"
+                              class="bp5-running-text"
                               id="data-visualizer-default-text"
                             >
                               The data visualizer helps you to visualize data structures.
@@ -870,9 +714,9 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_env_visualizer"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_env_visualizer"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_env_visualizer"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_env_visualizer"
                         role="tabpanel"
                       >
                         <div
@@ -883,42 +727,43 @@ and also the
                             tabindex="-1"
                           >
                             <div
-                              class="sa-substituter bp4-dark"
+                              class="sa-substituter bp5-dark"
                             >
                               <div
-                                class="bp4-slider bp4-disabled"
+                                class="bp5-slider bp5-disabled"
                               >
                                 <div
-                                  class="bp4-slider-track"
+                                  class="bp5-slider-track"
                                 >
                                   <div
-                                    class="bp4-slider-progress"
+                                    class="bp5-slider-progress"
                                     style="left: 0.00%; right: 0.00%; top: 0px;"
                                   />
                                   <div
-                                    class="bp4-slider-progress bp4-intent-primary"
+                                    class="bp5-slider-progress bp5-intent-primary"
                                     style="left: 0.00%; right: 0.00%; top: 0px;"
                                   />
                                   <div
-                                    class="bp4-slider-progress"
+                                    class="bp5-slider-progress"
                                     style="left: 0.00%; right: 0.00%; top: 0px;"
                                   />
                                 </div>
                                 <div
-                                  class="bp4-slider-axis"
+                                  class="bp5-slider-axis"
                                 />
                                 <span
+                                  aria-disabled="true"
                                   aria-orientation="horizontal"
                                   aria-valuemax="0"
                                   aria-valuemin="1"
                                   aria-valuenow="1"
-                                  class="bp4-slider-handle"
+                                  class="bp5-slider-handle"
                                   role="slider"
                                   style="left: calc(0.00% - 0px);"
                                   tabindex="0"
                                 >
                                   <span
-                                    class="bp4-slider-label"
+                                    class="bp5-slider-label"
                                   >
                                     1
                                   </span>
@@ -928,84 +773,62 @@ and also the
                                 style="display: flex; justify-content: space-between; align-items: center;"
                               >
                                 <div
-                                  class="bp4-button-group"
+                                  class="bp5-button-group"
                                 >
                                   <span
-                                    class="bp4-popover2-target"
+                                    class="bp5-popover-target"
                                   >
                                     <a
-                                      class="bp4-button bp4-disabled"
+                                      aria-disabled="true"
+                                      aria-expanded="false"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       role="button"
                                       tabindex="-1"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-layers"
-                                        icon="layers"
-                                      >
-                                        <svg
-                                          data-icon="layers"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <path
-                                            d="M.55 4.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3a.998.998 0 00-.06-1.81L8.4.08a1.006 1.006 0 00-.79 0l-6.99 3a.992.992 0 00-.07 1.81zM15 11c-.16 0-.31.04-.45.11L8 14l-6.55-2.9c-.14-.06-.29-.1-.45-.1-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1zm0-4c-.16 0-.31.04-.45.11L8 10 1.45 7.11A.997.997 0 001 7c-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
+                                        class="bp5-icon bp5-icon-standard bp5-icon-layers"
+                                        data-icon="layers"
+                                      />
                                       <span
-                                        class="bp4-button-text"
+                                        class="bp5-button-text"
                                       >
                                         <label
-                                          class="bp4-control bp4-checkbox"
+                                          class="bp5-control bp5-checkbox"
                                           style="margin: 0px;"
                                         >
                                           <input
                                             type="checkbox"
                                           />
                                           <span
-                                            class="bp4-control-indicator"
+                                            class="bp5-control-indicator"
                                           />
                                         </label>
                                       </span>
                                     </a>
                                   </span>
                                   <span
-                                    class="bp4-popover2-target"
+                                    class="bp5-popover-target"
                                   >
                                     <a
-                                      class="bp4-button bp4-disabled"
+                                      aria-disabled="true"
+                                      aria-expanded="false"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       role="button"
                                       tabindex="-1"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-minimize"
-                                        icon="minimize"
-                                      >
-                                        <svg
-                                          data-icon="minimize"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <path
-                                            d="M15.99.99a1.003 1.003 0 00-1.71-.71l-3.29 3.29V1.99c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H12.4l3.3-3.29c.18-.18.29-.43.29-.71zm-10 8h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L.29 14.28a1.003 1.003 0 001.42 1.42L5 12.41V14c0 .55.45 1 1 1s1-.45 1-1v-4a1.02 1.02 0 00-1.01-1.01z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
+                                        class="bp5-icon bp5-icon-standard bp5-icon-minimize"
+                                        data-icon="minimize"
+                                      />
                                       <span
-                                        class="bp4-button-text"
+                                        class="bp5-button-text"
                                       >
                                         <label
-                                          class="bp4-control bp4-checkbox bp4-disabled"
+                                          class="bp5-control bp5-checkbox bp5-disabled"
                                           style="margin: 0px;"
                                         >
                                           <input
@@ -1013,7 +836,7 @@ and also the
                                             type="checkbox"
                                           />
                                           <span
-                                            class="bp4-control-indicator"
+                                            class="bp5-control-indicator"
                                           />
                                         </label>
                                       </span>
@@ -1021,144 +844,81 @@ and also the
                                   </span>
                                 </div>
                                 <div
-                                  class="bp4-button-group"
+                                  class="bp5-button-group"
                                 >
                                   <button
-                                    class="bp4-button bp4-disabled"
+                                    class="bp5-button bp5-disabled"
                                     disabled=""
                                     tabindex="-1"
                                     type="button"
                                   >
                                     <span
                                       aria-hidden="true"
-                                      class="bp4-icon bp4-icon-double-chevron-left"
-                                      icon="double-chevron-left"
-                                    >
-                                      <svg
-                                        data-icon="double-chevron-left"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                      >
-                                        <path
-                                          d="M4.41 8L7.7 4.71c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C2.11 7.47 2 7.72 2 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L4.41 8zm5 0l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C7.11 7.47 7 7.72 7 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L9.41 8z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </span>
+                                      class="bp5-icon bp5-icon-standard bp5-icon-double-chevron-left"
+                                      data-icon="double-chevron-left"
+                                    />
                                   </button>
                                   <button
-                                    class="bp4-button bp4-disabled"
+                                    class="bp5-button bp5-disabled"
                                     disabled=""
                                     tabindex="-1"
                                     type="button"
                                   >
                                     <span
                                       aria-hidden="true"
-                                      class="bp4-icon bp4-icon-chevron-left"
-                                      icon="chevron-left"
-                                    >
-                                      <svg
-                                        data-icon="chevron-left"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                      >
-                                        <path
-                                          d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </span>
+                                      class="bp5-icon bp5-icon-standard bp5-icon-chevron-left"
+                                      data-icon="chevron-left"
+                                    />
                                   </button>
                                   <button
-                                    class="bp4-button bp4-disabled"
+                                    class="bp5-button bp5-disabled"
                                     disabled=""
                                     tabindex="-1"
                                     type="button"
                                   >
                                     <span
                                       aria-hidden="true"
-                                      class="bp4-icon bp4-icon-chevron-right"
-                                      icon="chevron-right"
-                                    >
-                                      <svg
-                                        data-icon="chevron-right"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                      >
-                                        <path
-                                          d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </span>
+                                      class="bp5-icon bp5-icon-standard bp5-icon-chevron-right"
+                                      data-icon="chevron-right"
+                                    />
                                   </button>
                                   <button
-                                    class="bp4-button bp4-disabled"
+                                    class="bp5-button bp5-disabled"
                                     disabled=""
                                     tabindex="-1"
                                     type="button"
                                   >
                                     <span
                                       aria-hidden="true"
-                                      class="bp4-icon bp4-icon-double-chevron-right"
-                                      icon="double-chevron-right"
-                                    >
-                                      <svg
-                                        data-icon="double-chevron-right"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                      >
-                                        <path
-                                          d="M9 8c0-.28-.11-.53-.29-.71l-4-4a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4C8.89 8.53 9 8.28 9 8zm4.71-.71l-4-4a1.003 1.003 0 00-1.42 1.42L11.59 8 8.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </span>
+                                      class="bp5-icon bp5-icon-standard bp5-icon-double-chevron-right"
+                                      data-icon="double-chevron-right"
+                                    />
                                   </button>
                                 </div>
                                 <div
-                                  class="bp4-button-group"
+                                  class="bp5-button-group"
                                 >
                                   <span
-                                    class="bp4-popover2-target"
+                                    class="bp5-popover-target"
                                   >
                                     <a
-                                      class="bp4-button bp4-disabled"
+                                      aria-disabled="true"
+                                      aria-expanded="false"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       role="button"
                                       tabindex="-1"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-build"
-                                        icon="build"
-                                      >
-                                        <svg
-                                          data-icon="build"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <path
-                                            d="M15.39 12.41L7.7 6l1.07-1.1c.34-.34-.12-.63.12-1.26.88-2.17 3.41-2.35 3.41-2.35s.36-.37.71-.72C9.74-.81 7.53.53 6.54 1.4L3.12 4.9l-.71.72c-.39.4-.39 1.05 0 1.45l-.7.72c-.39-.4-1.02-.4-1.41 0s-.39 1.05 0 1.45l1.41 1.45c.39.4 1.02.4 1.41 0s.39-1.05 0-1.45l.71-.72c.39.4 1.02.4 1.41 0l.8-.82 6.39 7.67c.82.82 2.14.82 2.96 0 .81-.82.81-2.15 0-2.96z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
+                                        class="bp5-icon bp5-icon-standard bp5-icon-build"
+                                        data-icon="build"
+                                      />
                                       <span
-                                        class="bp4-button-text"
+                                        class="bp5-button-text"
                                       >
                                         <label
-                                          class="bp4-control bp4-checkbox bp4-disabled"
+                                          class="bp5-control bp5-checkbox bp5-disabled"
                                           style="margin: 0px;"
                                         >
                                           <input
@@ -1166,44 +926,33 @@ and also the
                                             type="checkbox"
                                           />
                                           <span
-                                            class="bp4-control-indicator"
+                                            class="bp5-control-indicator"
                                           />
                                         </label>
                                       </span>
                                     </a>
                                   </span>
                                   <span
-                                    class="bp4-popover2-target"
+                                    class="bp5-popover-target"
                                   >
                                     <a
-                                      class="bp4-button bp4-disabled"
+                                      aria-disabled="true"
+                                      aria-expanded="false"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       role="button"
                                       tabindex="-1"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-print"
-                                        icon="print"
-                                      >
-                                        <svg
-                                          data-icon="print"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <path
-                                            d="M12 2.02c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v1h8v-1zm3 2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v-3h12v3h1c.55 0 1-.45 1-1v-6c0-.56-.45-1-1-1zm-1 3h-2v-1h2v1zm-3 6H5v-3H3v4c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-4h-2v3z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
+                                        class="bp5-icon bp5-icon-standard bp5-icon-print"
+                                        data-icon="print"
+                                      />
                                       <span
-                                        class="bp4-button-text"
+                                        class="bp5-button-text"
                                       >
                                         <label
-                                          class="bp4-control bp4-checkbox bp4-disabled"
+                                          class="bp5-control bp5-checkbox bp5-disabled"
                                           style="margin: 0px;"
                                         >
                                           <input
@@ -1211,39 +960,28 @@ and also the
                                             type="checkbox"
                                           />
                                           <span
-                                            class="bp4-control-indicator"
+                                            class="bp5-control-indicator"
                                           />
                                         </label>
                                       </span>
                                     </a>
                                   </span>
                                   <span
-                                    class="bp4-popover2-target"
+                                    class="bp5-popover-target"
                                   >
                                     <a
-                                      class="bp4-button bp4-disabled"
+                                      aria-disabled="true"
+                                      aria-expanded="false"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       role="button"
                                       tabindex="-1"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-floppy-disk"
-                                        icon="floppy-disk"
-                                      >
-                                        <svg
-                                          data-icon="floppy-disk"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                        >
-                                          <path
-                                            d="M15.71 2.29l-2-2A.997.997 0 0013 0h-1v6H4V0H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.28-.11-.53-.29-.71zM14 15H2V9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v6zM11 1H9v4h2V1z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
-                                      </span>
+                                        class="bp5-icon bp5-icon-standard bp5-icon-floppy-disk"
+                                        data-icon="floppy-disk"
+                                      />
                                     </a>
                                   </span>
                                 </div>
@@ -1251,7 +989,7 @@ and also the
                             </div>
                              
                             <div
-                              class="bp4-running-text"
+                              class="bp5-running-text"
                               data-testid="env-visualizer-default-text"
                               id="env-visualizer-default-text"
                             >
@@ -1273,7 +1011,7 @@ and also the
                               <br />
                               <br />
                               <div
-                                class="bp4-divider"
+                                class="bp5-divider"
                               />
                               Some useful keyboard shortcuts:
                               <br />
@@ -1290,11 +1028,11 @@ and also the
                               Note that these shortcuts are only active when the browser focus is on this tab.
                             </div>
                             <div
-                              class="bp4-button-group bp4-vertical"
+                              class="bp5-button-group bp5-vertical"
                               style="position: absolute; bottom: 20px; right: 20px;"
                             >
                               <button
-                                class="bp4-button bp4-disabled"
+                                class="bp5-button bp5-disabled"
                                 disabled=""
                                 style="margin-bottom: 5px; border-radius: 3px;"
                                 tabindex="-1"
@@ -1302,25 +1040,12 @@ and also the
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="bp4-icon bp4-icon-plus"
-                                  icon="plus"
-                                >
-                                  <svg
-                                    data-icon="plus"
-                                    height="16"
-                                    role="img"
-                                    viewBox="0 0 16 16"
-                                    width="16"
-                                  >
-                                    <path
-                                      d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-                                      fill-rule="evenodd"
-                                    />
-                                  </svg>
-                                </span>
+                                  class="bp5-icon bp5-icon-standard bp5-icon-plus"
+                                  data-icon="plus"
+                                />
                               </button>
                               <button
-                                class="bp4-button bp4-disabled"
+                                class="bp5-button bp5-disabled"
                                 disabled=""
                                 style="border-radius: 3px;"
                                 tabindex="-1"
@@ -1328,22 +1053,9 @@ and also the
                               >
                                 <span
                                   aria-hidden="true"
-                                  class="bp4-icon bp4-icon-minus"
-                                  icon="minus"
-                                >
-                                  <svg
-                                    data-icon="minus"
-                                    height="16"
-                                    role="img"
-                                    viewBox="0 0 16 16"
-                                    width="16"
-                                  >
-                                    <path
-                                      d="M13 7H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1z"
-                                      fill-rule="evenodd"
-                                    />
-                                  </svg>
-                                </span>
+                                  class="bp5-icon bp5-icon-standard bp5-icon-minus"
+                                  data-icon="minus"
+                                />
                               </button>
                             </div>
                           </div>
@@ -1351,21 +1063,20 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_remote_execution"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_remote_execution"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_remote_execution"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_remote_execution"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="bp4-callout bp4-intent-danger bp4-callout-icon"
+                            class="bp5-callout bp5-intent-danger bp5-callout-has-body-content bp5-callout-icon"
                           >
                             <span
                               aria-hidden="true"
-                              class="bp4-icon bp4-icon-error"
-                              icon="error"
+                              class="bp5-icon bp5-icon-error"
                               tabindex="-1"
                             >
                               <svg
@@ -1376,8 +1087,10 @@ and also the
                                 width="16"
                               >
                                 <path
-                                  d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13h-2v-2h2v2zm0-3h-2v-7h2v7z"
+                                  d="M159.8 320.2C71.4 320.2 -0.2 248.6 -0.2 160.2S71.4 0.2 159.8 0.2S319.8 71.8 319.8 160.2S248.2 320.2 159.8 320.2zM179.8 60.2H139.8V100.2H179.8V60.2zM179.8 120.2H139.8V260.2H179.8V120.2z"
                                   fill-rule="evenodd"
+                                  style="transform-origin: center;"
+                                  transform="scale(0.05, -0.05) translate(-160, -160)"
                                 />
                               </svg>
                             </span>
@@ -1413,7 +1126,7 @@ and also the
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -1512,62 +1225,36 @@ and also the
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
-                        >
-                          <svg
-                            data-icon="code"
-                            height="16"
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M15.71 7.29l-3-3a1.003 1.003 0 00-1.42 1.42L13.59 8l-2.29 2.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3-3c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71zM5 5a1.003 1.003 0 00-1.71-.71l-3 3C.11 7.47 0 7.72 0 8c0 .28.11.53.29.71l3 3a1.003 1.003 0 001.42-1.42L2.41 8 4.7 5.71c.19-.18.3-.43.3-.71zm4-3c-.48 0-.87.35-.96.81l-2 10c-.01.06-.04.12-.04.19 0 .55.45 1 1 1 .48 0 .87-.35.96-.81l2-10c.01-.06.04-.12.04-.19 0-.55-.45-1-1-1z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </span>
+                          class="bp5-icon bp5-icon-standard bp5-icon-code"
+                          data-icon="code"
+                        />
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
-                      >
-                        <svg
-                          data-icon="remove"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M10.99 6.99h-6c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1zm-3-7c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.68 6-6 6z"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        class="bp5-icon bp5-icon-standard bp5-icon-remove"
+                        data-icon="remove"
+                      />
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
@@ -1587,7 +1274,7 @@ and also the
 exports[`Playground tests Playground with link renders correctly 1`] = `
 <div>
   <div
-    class="Playground bp4-dark"
+    class="Playground bp5-dark"
     tabindex="-1"
   >
     <div
@@ -1597,32 +1284,31 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
         class="ControlBar"
       >
         <div
-          class="ControlBar_editor bp4-button-group"
+          class="ControlBar_editor bp5-button-group"
         >
           <div
             class="Switch"
           >
             <label
-              class="bp4-control bp4-switch"
+              class="bp5-control bp5-switch"
             >
               <input
                 type="checkbox"
               />
               <span
-                class="bp4-control-indicator"
+                class="bp5-control-indicator"
               />
             </label>
           </div>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-play"
-                icon="play"
+                class="bp5-icon bp5-icon-play"
               >
                 <svg
                   data-icon="play"
@@ -1638,26 +1324,24 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Run
               </span>
             </button>
           </span>
           <span
-            aria-haspopup="true"
-            class="bp4-popover2-target"
+            class="bp5-popover2-target bp5-popover-target"
           >
             <span
-              class="bp4-popover2-target"
+              class="bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-share"
-                  icon="share"
+                  class="bp5-icon bp5-icon-share"
                 >
                   <svg
                     data-icon="share"
@@ -1673,68 +1357,61 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Share
                 </span>
               </button>
             </span>
           </span>
-          <span
-            class="bp4-popover-wrapper"
+          <div
+            aria-controls="listbox-1"
+            aria-disabled="false"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="bp5-popover-target"
+            role="combobox"
           >
-            <span
-              aria-haspopup="true"
-              class="bp4-popover-target"
+            <button
+              class="bp5-button bp5-minimal"
+              type="button"
             >
-              <div
-                class=""
+              <span
+                class="bp5-button-text"
               >
-                <button
-                  class="bp4-button bp4-minimal"
-                  type="button"
+                Source §2
+              </span>
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-double-caret-vertical"
+              >
+                <svg
+                  data-icon="double-caret-vertical"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
                 >
-                  <span
-                    class="bp4-button-text"
-                  >
-                    Source §2
-                  </span>
-                  <span
-                    aria-hidden="true"
-                    class="bp4-icon bp4-icon-double-caret-vertical"
-                    icon="double-caret-vertical"
-                  >
-                    <svg
-                      data-icon="double-caret-vertical"
-                      height="16"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </span>
-          </span>
+                  <path
+                    d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-social-media"
-                  icon="social-media"
+                  class="bp5-icon bp5-icon-social-media"
                 >
                   <svg
                     data-icon="social-media"
@@ -1750,7 +1427,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Session
                 </span>
@@ -1758,15 +1435,14 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <button
-              class="bp4-button bp4-minimal"
+              class="bp5-button bp5-minimal"
             >
               <span
                 aria-hidden="true"
-                class="bp4-icon bp4-icon-folder-close"
-                icon="folder-close"
+                class="bp5-icon bp5-icon-folder-close"
               >
                 <svg
                   data-icon="folder-close"
@@ -1782,26 +1458,24 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="bp4-button-text"
+                class="bp5-button-text"
               >
                 Folder
               </span>
             </button>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-cloud"
-                  icon="cloud"
+                  class="bp5-icon bp5-icon-cloud"
                 >
                   <svg
                     data-icon="cloud"
@@ -1817,7 +1491,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   Google Drive
                 </span>
@@ -1825,19 +1499,17 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <span
-              aria-haspopup="true"
-              class="bp4-popover2-target"
+              class="bp5-popover2-target bp5-popover-target"
             >
               <button
-                class="bp4-button bp4-minimal"
+                class="bp5-button bp5-minimal"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-git-branch"
-                  icon="git-branch"
+                  class="bp5-icon bp5-icon-git-branch"
                 >
                   <svg
                     data-icon="git-branch"
@@ -1853,7 +1525,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="bp4-button-text"
+                  class="bp5-button-text"
                 >
                   GitHub
                 </span>
@@ -1861,18 +1533,18 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             </span>
           </span>
           <span
-            class="bp4-popover2-target"
+            class="bp5-popover-target"
           >
             <div
-              class="bp4-control-group bp4-numeric-input"
+              class="bp5-control-group bp5-numeric-input"
+              role="group"
             >
               <div
-                class="bp4-input-group"
+                class="bp5-input-group"
               >
                 <span
                   aria-hidden="true"
-                  class="bp4-icon bp4-icon-time"
-                  icon="time"
+                  class="bp5-icon bp5-icon-time"
                   tabindex="-1"
                 >
                   <svg
@@ -1889,10 +1561,11 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                   </svg>
                 </span>
                 <input
+                  aria-expanded="false"
                   aria-valuemin="1000"
                   aria-valuenow="1000"
                   autocomplete="off"
-                  class="bp4-input"
+                  class="bp5-input"
                   id="numericInput-1"
                   min="1000"
                   role="spinbutton"
@@ -1903,18 +1576,17 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                 />
               </div>
               <div
-                class="bp4-button-group bp4-vertical bp4-fixed"
+                class="bp5-button-group bp5-vertical bp5-fixed"
               >
                 <button
                   aria-controls="numericInput-1"
                   aria-label="increment"
-                  class="bp4-button"
+                  class="bp5-button"
                   type="button"
                 >
                   <span
                     aria-hidden="true"
-                    class="bp4-icon bp4-icon-chevron-up"
-                    icon="chevron-up"
+                    class="bp5-icon bp5-icon-chevron-up"
                   >
                     <svg
                       data-icon="chevron-up"
@@ -1924,8 +1596,10 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                       width="16"
                     >
                       <path
-                        d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                        d="M254.2 134.2L174.2 214.2C170.6 217.8 165.6 220 160 220S149.4 217.8 145.8 214.2L65.8 134.2C62.2 130.6 60 125.6 60 120C60 109 69 100 80 100C85.6 100 90.6 102.2 94.2 105.8L160 171.8L225.8 106C229.4 102.2 234.4 100 240 100C251 100 260 109 260 120C260 125.6 257.8 130.6 254.2 134.2z"
                         fill-rule="evenodd"
+                        style="transform-origin: center;"
+                        transform="scale(0.05, -0.05) translate(-160, -160)"
                       />
                     </svg>
                   </span>
@@ -1933,15 +1607,14 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                 <button
                   aria-controls="numericInput-1"
                   aria-label="decrement"
-                  class="bp4-button bp4-disabled"
+                  class="bp5-button bp5-disabled"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
                   <span
                     aria-hidden="true"
-                    class="bp4-icon bp4-icon-chevron-down"
-                    icon="chevron-down"
+                    class="bp5-icon bp5-icon-chevron-down"
                   >
                     <svg
                       data-icon="chevron-down"
@@ -1951,8 +1624,10 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                       width="16"
                     >
                       <path
-                        d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                        d="M240 220C234.4 220 229.4 217.8 225.8 214.2L160 148.2L94.2 214.2C90.6 217.8 85.6 220 80 220C69 220 60 211 60 200C60 194.4 62.2 189.4 65.8 185.8L145.8 105.8C149.4 102.2 154.4 100 160 100S170.6 102.2 174.2 105.8L254.2 185.8C257.8 189.4 260 194.4 260 200C260 211 251 220 240 220z"
                         fill-rule="evenodd"
+                        style="transform-origin: center;"
+                        transform="scale(0.05, -0.05) translate(-160, -160)"
                       />
                     </svg>
                   </span>
@@ -1962,7 +1637,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
           </span>
         </div>
         <div
-          class="ControlBar_editingWorkspace bp4-button-group"
+          class="ControlBar_editingWorkspace bp5-button-group"
         />
       </div>
       <div
@@ -2112,49 +1787,49 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                 class="side-content"
               >
                 <div
-                  class="bp4-card bp4-elevation-0"
+                  class="bp5-card bp5-elevation-0"
                 >
                   <div
                     class="side-content-tabs"
                   >
                     <div
-                      class="bp4-tabs"
+                      class="bp5-tabs"
                     >
                       <div
-                        class="bp4-tab-list"
+                        class="bp5-tab-list"
                         role="tablist"
                       >
                         <div
-                          class="bp4-tab-indicator-wrapper"
+                          class="bp5-tab-indicator-wrapper"
                           style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px;"
                         >
                           <div
-                            class="bp4-tab-indicator"
+                            class="bp5-tab-indicator"
                           />
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_introduction"
+                          aria-controls="bp5-tab-panel_side-content-tabs_introduction"
                           aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="introduction"
-                          id="bp4-tab-title_side-content-tabs_introduction"
+                          id="bp5-tab-title_side-content-tabs_introduction"
                           role="tab"
                           tabindex="0"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="introduction-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-home"
-                                icon="home"
+                                class="bp5-icon bp5-icon-home"
                               >
                                 <svg
                                   data-icon="home"
@@ -2173,28 +1848,28 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_data_visualizer"
+                          aria-controls="bp5-tab-panel_side-content-tabs_data_visualizer"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="data_visualizer"
-                          id="bp4-tab-title_side-content-tabs_data_visualizer"
+                          id="bp5-tab-title_side-content-tabs_data_visualizer"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="data_visualizer-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-eye-open"
-                                icon="eye-open"
+                                class="bp5-icon bp5-icon-eye-open"
                               >
                                 <svg
                                   data-icon="eye-open"
@@ -2213,68 +1888,56 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_subst_visualiser"
+                          aria-controls="bp5-tab-panel_side-content-tabs_subst_visualiser"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="subst_visualiser"
-                          id="bp4-tab-title_side-content-tabs_subst_visualiser"
+                          id="bp5-tab-title_side-content-tabs_subst_visualiser"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="subst_visualiser-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-flow-review"
-                                icon="flow-review"
-                              >
-                                <svg
-                                  data-icon="flow-review"
-                                  height="20"
-                                  role="img"
-                                  viewBox="0 0 20 20"
-                                  width="20"
-                                >
-                                  <path
-                                    d="M6.13 9.004A4.005 4.005 0 0110.012 6c1.87 0 3.44 1.278 3.881 3.005h2.768l-2.354-2.317a.97.97 0 01-.283-.691c0-.536.462-.995 1-.995.273 0 .517.107.693.283l4 4.041a.97.97 0 01.284.692.956.956 0 01-.293.682l-3.991 3.997a.944.944 0 01-.694.292c-.537 0-1-.46-1-.997a.97.97 0 01.284-.692l2.345-2.29h-2.765a4.005 4.005 0 01-3.875 2.981 4.005 4.005 0 01-3.874-2.981H3.349l2.376 2.308a.97.97 0 01.283.691 1 1 0 01-.994.983.989.989 0 01-.713-.291L.293 10.699A.956.956 0 010 10.017a.97.97 0 01.283-.692l4.03-4.037a.996.996 0 01.701-.283c.537 0 .994.464.994 1a.97.97 0 01-.283.691L3.34 9.004h2.79z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                class="bp5-icon bp5-icon-large bp5-icon-flow-review"
+                                data-icon="flow-review"
+                              />
                             </div>
                           </span>
                         </div>
                         <div
-                          aria-controls="bp4-tab-panel_side-content-tabs_remote_execution"
+                          aria-controls="bp5-tab-panel_side-content-tabs_remote_execution"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
-                          class="bp4-tab side-content-tab"
+                          class="bp5-tab side-content-tab"
                           data-tab-id="remote_execution"
-                          id="bp4-tab-title_side-content-tabs_remote_execution"
+                          id="bp5-tab-title_side-content-tabs_remote_execution"
                           role="tab"
                           tabindex="-1"
                         >
                           <span
-                            class="bp4-popover2-target"
+                            class="bp5-popover-target"
                           >
                             <div
+                              aria-expanded="false"
                               class="side-content-tooltip"
                               id="remote_execution-icon"
                               tabindex="0"
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp4-icon bp4-icon-satellite"
-                                icon="satellite"
+                                class="bp5-icon bp5-icon-satellite"
                               >
                                 <svg
                                   data-icon="satellite"
@@ -2295,16 +1958,16 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                       </div>
                       <div
                         aria-hidden="false"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_introduction"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_introduction"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_introduction"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_introduction"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="md bp4-running-text"
+                            class="md bp5-running-text"
                           >
                             <p>
                               Welcome to the Source Academy playground!
@@ -2376,19 +2039,19 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_data_visualizer"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_data_visualizer"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_data_visualizer"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_data_visualizer"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="sa-data-visualizer bp4-dark"
+                            class="sa-data-visualizer bp5-dark"
                           >
                             <p
-                              class="bp4-running-text"
+                              class="bp5-running-text"
                               id="data-visualizer-default-text"
                             >
                               The data visualizer helps you to visualize data structures.
@@ -2454,9 +2117,9 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_subst_visualiser"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_subst_visualiser"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_subst_visualiser"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_subst_visualiser"
                         role="tabpanel"
                       >
                         <div
@@ -2467,42 +2130,43 @@ and also the
                           >
                             <div>
                               <div
-                                class="sa-substituter bp4-dark"
+                                class="sa-substituter bp5-dark"
                               >
                                 <div
-                                  class="bp4-slider bp4-disabled"
+                                  class="bp5-slider bp5-disabled"
                                 >
                                   <div
-                                    class="bp4-slider-track"
+                                    class="bp5-slider-track"
                                   >
                                     <div
-                                      class="bp4-slider-progress"
+                                      class="bp5-slider-progress"
                                       style="left: 0.00%; right: 0.00%; top: 0px;"
                                     />
                                     <div
-                                      class="bp4-slider-progress bp4-intent-primary"
+                                      class="bp5-slider-progress bp5-intent-primary"
                                       style="left: 0.00%; right: 0.00%; top: 0px;"
                                     />
                                     <div
-                                      class="bp4-slider-progress"
+                                      class="bp5-slider-progress"
                                       style="left: 0.00%; right: 0.00%; top: 0px;"
                                     />
                                   </div>
                                   <div
-                                    class="bp4-slider-axis"
+                                    class="bp5-slider-axis"
                                   />
                                   <span
+                                    aria-disabled="true"
                                     aria-orientation="horizontal"
                                     aria-valuemax="0"
                                     aria-valuemin="1"
                                     aria-valuenow="1"
-                                    class="bp4-slider-handle"
+                                    class="bp5-slider-handle"
                                     role="slider"
                                     style="left: calc(0.00% - 0px);"
                                     tabindex="0"
                                   >
                                     <span
-                                      class="bp4-slider-label"
+                                      class="bp5-slider-label"
                                     >
                                       1
                                     </span>
@@ -2512,18 +2176,17 @@ and also the
                                   style="display: flex; justify-content: center; align-items: center;"
                                 >
                                   <div
-                                    class="bp4-button-group"
+                                    class="bp5-button-group"
                                   >
                                     <button
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-double-chevron-left"
-                                        icon="double-chevron-left"
+                                        class="bp5-icon bp5-icon-double-chevron-left"
                                       >
                                         <svg
                                           data-icon="double-chevron-left"
@@ -2540,15 +2203,14 @@ and also the
                                       </span>
                                     </button>
                                     <button
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-left"
-                                        icon="chevron-left"
+                                        class="bp5-icon bp5-icon-chevron-left"
                                       >
                                         <svg
                                           data-icon="chevron-left"
@@ -2565,15 +2227,14 @@ and also the
                                       </span>
                                     </button>
                                     <button
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-chevron-right"
-                                        icon="chevron-right"
+                                        class="bp5-icon bp5-icon-chevron-right"
                                       >
                                         <svg
                                           data-icon="chevron-right"
@@ -2590,15 +2251,14 @@ and also the
                                       </span>
                                     </button>
                                     <button
-                                      class="bp4-button bp4-disabled"
+                                      class="bp5-button bp5-disabled"
                                       disabled=""
                                       tabindex="-1"
                                       type="button"
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp4-icon bp4-icon-double-chevron-right"
-                                        icon="double-chevron-right"
+                                        class="bp5-icon bp5-icon-double-chevron-right"
                                       >
                                         <svg
                                           data-icon="double-chevron-right"
@@ -2620,7 +2280,7 @@ and also the
                                 <br />
                                 <div>
                                   <div
-                                    class="bp4-running-text"
+                                    class="bp5-running-text"
                                     id="substituter-default-text"
                                   >
                                     Welcome to the Stepper!
@@ -2633,7 +2293,7 @@ and also the
                                     <br />
                                     <br />
                                     <div
-                                      class="bp4-divider"
+                                      class="bp5-divider"
                                     />
                                     Some useful keyboard shortcuts:
                                     <br />
@@ -2657,21 +2317,20 @@ and also the
                       </div>
                       <div
                         aria-hidden="true"
-                        aria-labelledby="bp4-tab-title_side-content-tabs_remote_execution"
-                        class="bp4-tab-panel side-content-tab"
-                        id="bp4-tab-panel_side-content-tabs_remote_execution"
+                        aria-labelledby="bp5-tab-title_side-content-tabs_remote_execution"
+                        class="bp5-tab-panel side-content-tab"
+                        id="bp5-tab-panel_side-content-tabs_remote_execution"
                         role="tabpanel"
                       >
                         <div
                           class="side-content-text"
                         >
                           <div
-                            class="bp4-callout bp4-intent-danger bp4-callout-icon"
+                            class="bp5-callout bp5-intent-danger bp5-callout-has-body-content bp5-callout-icon"
                           >
                             <span
                               aria-hidden="true"
-                              class="bp4-icon bp4-icon-error"
-                              icon="error"
+                              class="bp5-icon bp5-icon-error"
                               tabindex="-1"
                             >
                               <svg
@@ -2682,8 +2341,10 @@ and also the
                                 width="16"
                               >
                                 <path
-                                  d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13h-2v-2h2v2zm0-3h-2v-7h2v7z"
+                                  d="M159.8 320.2C71.4 320.2 -0.2 248.6 -0.2 160.2S71.4 0.2 159.8 0.2S319.8 71.8 319.8 160.2S248.2 320.2 159.8 320.2zM179.8 60.2H139.8V100.2H179.8V60.2zM179.8 120.2H139.8V260.2H179.8V120.2z"
                                   fill-rule="evenodd"
+                                  style="transform-origin: center;"
+                                  transform="scale(0.05, -0.05) translate(-160, -160)"
                                 />
                               </svg>
                             </span>
@@ -2719,7 +2380,7 @@ and also the
                 class="repl-output-parent"
               >
                 <div
-                  class="repl-input-parent row bp4-card bp4-elevation-0"
+                  class="repl-input-parent row bp5-card bp5-elevation-0"
                   tabindex="-1"
                 >
                   <div
@@ -2818,18 +2479,17 @@ and also the
                     </div>
                   </div>
                   <div
-                    class="bp4-button-group bp4-dark"
+                    class="bp5-button-group bp5-dark"
                   >
                     <span
-                      class="bp4-popover2-target"
+                      class="bp5-popover-target"
                     >
                       <button
-                        class="bp4-button bp4-minimal"
+                        class="bp5-button bp5-minimal"
                       >
                         <span
                           aria-hidden="true"
-                          class="bp4-icon bp4-icon-code"
-                          icon="code"
+                          class="bp5-icon bp5-icon-code"
                         >
                           <svg
                             data-icon="code"
@@ -2845,19 +2505,18 @@ and also the
                           </svg>
                         </span>
                         <span
-                          class="bp4-button-text"
+                          class="bp5-button-text"
                         >
                           Eval
                         </span>
                       </button>
                     </span>
                     <button
-                      class="bp4-button bp4-minimal"
+                      class="bp5-button bp5-minimal"
                     >
                       <span
                         aria-hidden="true"
-                        class="bp4-icon bp4-icon-remove"
-                        icon="remove"
+                        class="bp5-icon bp5-icon-remove"
                       >
                         <svg
                           data-icon="remove"
@@ -2873,7 +2532,7 @@ and also the
                         </svg>
                       </span>
                       <span
-                        class="bp4-button-text"
+                        class="bp5-button-text"
                       >
                         Clear
                       </span>
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
index 914c2ed4c9..915cfa68ef 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap
@@ -4,7 +4,7 @@ exports[`Sicp Code Snippet renders correctly with prepend 1`] = `
 <div
   className="sicp-code-snippet"
 >
-  <Blueprint4.Card
+  <Blueprint5.Card
     className="sicp-code-snippet-closed"
     elevation={2}
     interactive={true}
@@ -91,12 +91,12 @@ exports[`Sicp Code Snippet renders correctly with prepend 1`] = `
       const a = 1;
 a+1;
     </SyntaxHighlighter>
-  </Blueprint4.Card>
-  <Unknown>
+  </Blueprint5.Card>
+  <ForwardRef>
     <em>
       2
     </em>
-  </Unknown>
+  </ForwardRef>
 </div>
 `;
 
@@ -104,7 +104,7 @@ exports[`Sicp Code Snippet renders correctly without prepend 1`] = `
 <div
   className="sicp-code-snippet"
 >
-  <Blueprint4.Card
+  <Blueprint5.Card
     className="sicp-code-snippet-closed"
     elevation={2}
     interactive={true}
@@ -191,11 +191,11 @@ exports[`Sicp Code Snippet renders correctly without prepend 1`] = `
       const a = 1;
 a+1;
     </SyntaxHighlighter>
-  </Blueprint4.Card>
-  <Unknown>
+  </Blueprint5.Card>
+  <ForwardRef>
     <em>
       2
     </em>
-  </Unknown>
+  </ForwardRef>
 </div>
 `;
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
index 935087f0f9..46d5ea4ee3 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Sicp exercise renders correctly 1`] = `
 <div
-  className="bp4-card bp4-elevation-1 sicp-exercise"
+  className="sicp-exercise bp5-card bp5-elevation-1"
 >
   <b>
     Title
@@ -16,7 +16,7 @@ exports[`Sicp exercise renders correctly 1`] = `
     className="sicp-button-container"
   >
     <button
-      className="bp4-button bp4-large sicp-show-solution-button"
+      className="bp5-button bp5-large sicp-show-solution-button"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
@@ -25,14 +25,14 @@ exports[`Sicp exercise renders correctly 1`] = `
       type="button"
     >
       <span
-        className="bp4-button-text"
+        className="bp5-button-text"
       >
         Show Solution
       </span>
     </button>
   </div>
   <div
-    className="bp4-collapse sicp-solution"
+    className="bp5-collapse sicp-solution"
     style={
       Object {
         "height": undefined,
@@ -43,7 +43,7 @@ exports[`Sicp exercise renders correctly 1`] = `
   >
     <div
       aria-hidden={true}
-      className="bp4-collapse-body"
+      className="bp5-collapse-body"
       style={
         Object {
           "transform": "translateY(-undefinedpx)",
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
index baeb3750d6..6eafe85dfd 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
@@ -16,12 +16,12 @@ exports[`Sicp index page 1`] = `
     >
       <div>
         <h1
-          className="bp4-heading"
+          className="bp5-heading"
         >
           Structure and Interpretation of Computer Programs
         </h1>
         <h2
-          className="bp4-heading"
+          className="bp5-heading"
         >
           — JavaScript Edition
         </h2>
@@ -30,7 +30,7 @@ exports[`Sicp index page 1`] = `
         className="sicp-authors"
       >
         <h4
-          className="bp4-heading"
+          className="bp5-heading"
         >
           Harold Abelson and Gerald Jay Sussman
         </h4>
@@ -41,7 +41,7 @@ exports[`Sicp index page 1`] = `
           </i>
         </p>
         <h4
-          className="bp4-heading"
+          className="bp5-heading"
         >
           Martin Henz and Tobias Wrigstad
         </h4>
@@ -52,7 +52,7 @@ exports[`Sicp index page 1`] = `
           </i>
         </p>
         <h4
-          className="bp4-heading"
+          className="bp5-heading"
         >
           Samuel Fang
         </h4>
@@ -66,7 +66,7 @@ exports[`Sicp index page 1`] = `
   </div>
   <br />
   <h2
-    className="bp4-heading"
+    className="bp5-heading"
   >
     Content
   </h2>
@@ -74,16 +74,16 @@ exports[`Sicp index page 1`] = `
     className="sicp-toc"
   >
     <div
-      className="bp4-tree sicp-toc-tree"
+      className="bp5-tree sicp-toc-tree"
     >
       <ul
-        className="bp4-tree-node-list bp4-tree-root"
+        className="bp5-tree-node-list bp5-tree-root"
       >
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -91,16 +91,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               Foreword
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -111,7 +111,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -122,10 +122,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -133,16 +133,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               Foreword to Structure and Interpretation of Computer Programs, 1984
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -153,7 +153,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -164,10 +164,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -175,16 +175,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               Preface
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -195,7 +195,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -206,10 +206,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -217,16 +217,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -237,7 +237,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -248,10 +248,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -259,16 +259,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               Acknowledgments
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -279,7 +279,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -290,10 +290,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -301,37 +301,39 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-              icon="chevron-right"
+              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
               onClick={[Function]}
             >
               <svg
-                aria-labelledby="iconTitle-0"
                 data-icon="chevron-right"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
-                <title
-                  id="iconTitle-0"
-                >
+                <title>
                   Expand group
                 </title>
                 <path
-                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                   fillRule="evenodd"
+                  style={
+                    Object {
+                      "transformOrigin": "center",
+                    }
+                  }
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               1 Building Abstractions with Functions
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -342,7 +344,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -353,10 +355,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -364,37 +366,39 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-              icon="chevron-right"
+              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
               onClick={[Function]}
             >
               <svg
-                aria-labelledby="iconTitle-1"
                 data-icon="chevron-right"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
-                <title
-                  id="iconTitle-1"
-                >
+                <title>
                   Expand group
                 </title>
                 <path
-                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                   fillRule="evenodd"
+                  style={
+                    Object {
+                      "transformOrigin": "center",
+                    }
+                  }
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               2 Building Abstractions with Data
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -405,7 +409,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -416,10 +420,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -427,37 +431,39 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-              icon="chevron-right"
+              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
               onClick={[Function]}
             >
               <svg
-                aria-labelledby="iconTitle-2"
                 data-icon="chevron-right"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
-                <title
-                  id="iconTitle-2"
-                >
+                <title>
                   Expand group
                 </title>
                 <path
-                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                   fillRule="evenodd"
+                  style={
+                    Object {
+                      "transformOrigin": "center",
+                    }
+                  }
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               3 Modularity, Objects, and State
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -468,7 +474,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -479,10 +485,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -490,37 +496,39 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-              icon="chevron-right"
+              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
               onClick={[Function]}
             >
               <svg
-                aria-labelledby="iconTitle-3"
                 data-icon="chevron-right"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
-                <title
-                  id="iconTitle-3"
-                >
+                <title>
                   Expand group
                 </title>
                 <path
-                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                   fillRule="evenodd"
+                  style={
+                    Object {
+                      "transformOrigin": "center",
+                    }
+                  }
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               4 Metalinguistic Abstraction
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -531,7 +539,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -542,10 +550,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -553,37 +561,39 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-              icon="chevron-right"
+              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
               onClick={[Function]}
             >
               <svg
-                aria-labelledby="iconTitle-4"
                 data-icon="chevron-right"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
-                <title
-                  id="iconTitle-4"
-                >
+                <title>
                   Expand group
                 </title>
                 <path
-                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                   fillRule="evenodd"
+                  style={
+                    Object {
+                      "transformOrigin": "center",
+                    }
+                  }
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
                 />
               </svg>
             </span>
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               5 Computing with Register Machines
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -594,7 +604,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -605,10 +615,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -616,16 +626,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               References
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -636,7 +646,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -647,10 +657,10 @@ exports[`Sicp index page 1`] = `
           </div>
         </li>
         <li
-          className="bp4-tree-node"
+          className="bp5-tree-node"
         >
           <div
-            className="bp4-tree-node-content bp4-tree-node-content-0"
+            className="bp5-tree-node-content bp5-tree-node-content-0"
             onClick={[Function]}
             onContextMenu={[Function]}
             onDoubleClick={[Function]}
@@ -658,16 +668,16 @@ exports[`Sicp index page 1`] = `
             onMouseLeave={[Function]}
           >
             <span
-              className="bp4-tree-node-caret-none"
+              className="bp5-tree-node-caret-none"
             />
             <span
-              className="bp4-tree-node-label"
+              className="bp5-tree-node-label"
             >
               About the SICP JS Project
             </span>
           </div>
           <div
-            className="bp4-collapse"
+            className="bp5-collapse"
             style={
               Object {
                 "height": undefined,
@@ -678,7 +688,7 @@ exports[`Sicp index page 1`] = `
           >
             <div
               aria-hidden={true}
-              className="bp4-collapse-body"
+              className="bp5-collapse-body"
               style={
                 Object {
                   "transform": "translateY(-undefinedpx)",
@@ -693,7 +703,7 @@ exports[`Sicp index page 1`] = `
   </div>
   <br />
   <h2
-    className="bp4-heading"
+    className="bp5-heading"
   >
     Licenses
   </h2>
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
index dfd4e6b6f9..d4ad84d5d0 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
@@ -5,16 +5,16 @@ exports[`Sicp toc renders correctly 1`] = `
   className="sicp-toc"
 >
   <div
-    className="bp4-tree sicp-toc-tree"
+    className="bp5-tree sicp-toc-tree"
   >
     <ul
-      className="bp4-tree-node-list bp4-tree-root"
+      className="bp5-tree-node-list bp5-tree-root"
     >
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -22,16 +22,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             Foreword
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -42,7 +42,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -53,10 +53,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -64,16 +64,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             Foreword to Structure and Interpretation of Computer Programs, 1984
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -84,7 +84,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -95,10 +95,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -106,16 +106,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             Preface
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -126,7 +126,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -137,10 +137,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -148,16 +148,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -168,7 +168,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -179,10 +179,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -190,16 +190,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             Acknowledgments
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -210,7 +210,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -221,10 +221,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -232,37 +232,39 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-            icon="chevron-right"
+            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             onClick={[Function]}
           >
             <svg
-              aria-labelledby="iconTitle-0"
               data-icon="chevron-right"
               height={16}
               role="img"
               viewBox="0 0 16 16"
               width={16}
             >
-              <title
-                id="iconTitle-0"
-              >
+              <title>
                 Expand group
               </title>
               <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                 fillRule="evenodd"
+                style={
+                  Object {
+                    "transformOrigin": "center",
+                  }
+                }
+                transform="scale(0.05, -0.05) translate(-160, -160)"
               />
             </svg>
           </span>
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             1 Building Abstractions with Functions
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -273,7 +275,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -284,10 +286,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -295,37 +297,39 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-            icon="chevron-right"
+            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             onClick={[Function]}
           >
             <svg
-              aria-labelledby="iconTitle-1"
               data-icon="chevron-right"
               height={16}
               role="img"
               viewBox="0 0 16 16"
               width={16}
             >
-              <title
-                id="iconTitle-1"
-              >
+              <title>
                 Expand group
               </title>
               <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                 fillRule="evenodd"
+                style={
+                  Object {
+                    "transformOrigin": "center",
+                  }
+                }
+                transform="scale(0.05, -0.05) translate(-160, -160)"
               />
             </svg>
           </span>
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             2 Building Abstractions with Data
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -336,7 +340,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -347,10 +351,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -358,37 +362,39 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-            icon="chevron-right"
+            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             onClick={[Function]}
           >
             <svg
-              aria-labelledby="iconTitle-2"
               data-icon="chevron-right"
               height={16}
               role="img"
               viewBox="0 0 16 16"
               width={16}
             >
-              <title
-                id="iconTitle-2"
-              >
+              <title>
                 Expand group
               </title>
               <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                 fillRule="evenodd"
+                style={
+                  Object {
+                    "transformOrigin": "center",
+                  }
+                }
+                transform="scale(0.05, -0.05) translate(-160, -160)"
               />
             </svg>
           </span>
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             3 Modularity, Objects, and State
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -399,7 +405,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -410,10 +416,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -421,37 +427,39 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-            icon="chevron-right"
+            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             onClick={[Function]}
           >
             <svg
-              aria-labelledby="iconTitle-3"
               data-icon="chevron-right"
               height={16}
               role="img"
               viewBox="0 0 16 16"
               width={16}
             >
-              <title
-                id="iconTitle-3"
-              >
+              <title>
                 Expand group
               </title>
               <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                 fillRule="evenodd"
+                style={
+                  Object {
+                    "transformOrigin": "center",
+                  }
+                }
+                transform="scale(0.05, -0.05) translate(-160, -160)"
               />
             </svg>
           </span>
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             4 Metalinguistic Abstraction
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -462,7 +470,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -473,10 +481,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -484,37 +492,39 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-icon bp4-icon-chevron-right bp4-tree-node-caret bp4-tree-node-caret-closed"
-            icon="chevron-right"
+            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             onClick={[Function]}
           >
             <svg
-              aria-labelledby="iconTitle-4"
               data-icon="chevron-right"
               height={16}
               role="img"
               viewBox="0 0 16 16"
               width={16}
             >
-              <title
-                id="iconTitle-4"
-              >
+              <title>
                 Expand group
               </title>
               <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
                 fillRule="evenodd"
+                style={
+                  Object {
+                    "transformOrigin": "center",
+                  }
+                }
+                transform="scale(0.05, -0.05) translate(-160, -160)"
               />
             </svg>
           </span>
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             5 Computing with Register Machines
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -525,7 +535,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -536,10 +546,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -547,16 +557,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             References
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -567,7 +577,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
@@ -578,10 +588,10 @@ exports[`Sicp toc renders correctly 1`] = `
         </div>
       </li>
       <li
-        className="bp4-tree-node"
+        className="bp5-tree-node"
       >
         <div
-          className="bp4-tree-node-content bp4-tree-node-content-0"
+          className="bp5-tree-node-content bp5-tree-node-content-0"
           onClick={[Function]}
           onContextMenu={[Function]}
           onDoubleClick={[Function]}
@@ -589,16 +599,16 @@ exports[`Sicp toc renders correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="bp4-tree-node-caret-none"
+            className="bp5-tree-node-caret-none"
           />
           <span
-            className="bp4-tree-node-label"
+            className="bp5-tree-node-label"
           >
             About the SICP JS Project
           </span>
         </div>
         <div
-          className="bp4-collapse"
+          className="bp5-collapse"
           style={
             Object {
               "height": undefined,
@@ -609,7 +619,7 @@ exports[`Sicp toc renders correctly 1`] = `
         >
           <div
             aria-hidden={true}
-            className="bp4-collapse-body"
+            className="bp5-collapse-body"
             style={
               Object {
                 "transform": "translateY(-undefinedpx)",
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index 61f33c5d17..2c77879518 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -57,10 +57,6 @@
   padding: 0.4rem;
 }
 
-.#{$ns}-popover2-content {
-  padding: 0.4rem;
-}
-
 .#{$ns}-non-ideal-state {
   padding-top: 0.7rem;
 
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index d15641caaf..ed4971068b 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,4 +1,4 @@
-$ns: 'bp4';
+$ns: 'bp5';
 
 // Global variables
 $cadet-color-1: #1a2530;
@@ -35,7 +35,7 @@ $achievement-assets: 'https://source-academy-assets.s3-ap-southeast-1.amazonaws.
 }
 
 .#{$ns}-overlay {
-  .#{$ns}-popover2-content {
+  .#{$ns}-popover-content {
     .badge-tag {
       background-color: transparent;
       margin-left: 0.4rem;
diff --git a/src/styles/_navigationBar.scss b/src/styles/_navigationBar.scss
index 7fb5b69481..1e9160c0b5 100644
--- a/src/styles/_navigationBar.scss
+++ b/src/styles/_navigationBar.scss
@@ -59,11 +59,11 @@ a.NavigationBar__link {
 }
 
 .desktop-navbar-popover {
-  .#{$ns}-popover2-arrow-fill {
+  .#{$ns}-popover-arrow-fill {
     fill: $cadet-color-5 !important;
   }
 
-  .#{$ns}-popover2-content {
+  .#{$ns}-popover-content {
     background: $cadet-color-5 !important;
     padding: 0;
 
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 67385228a4..8fdcdb265e 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -1329,11 +1329,11 @@ $code-color-error: #ff4444;
 }
 
 .Popover-share {
-  .#{$ns}-popover2-arrow-fill {
+  .#{$ns}-popover-arrow-fill {
     fill: $cadet-color-4;
   }
 
-  .#{$ns}-popover2-content {
+  .#{$ns}-popover-content {
     background: $cadet-color-4;
     display: flex;
     padding: 0.4rem 0.8rem 0.4rem 0.8rem;
diff --git a/yarn.lock b/yarn.lock
index b3717ad50d..2755a15075 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1172,71 +1172,85 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@blueprintjs/colors@^4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.2.1.tgz#603b2512caee84feddcb3dbd536534c140b9a1f3"
-  integrity sha512-Cx7J2YnUuxn+fi+y5XtXnBB7+cFHN4xBrRkaAetp78i3VTCXjUk+d1omrOr8TqbRucUXTdrhbZOUHpzRLFcJpQ==
+"@blueprintjs/colors@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.1.0.tgz#be6494e8254561e793e341591f9fb2b4b179a093"
+  integrity sha512-eNYpVM84NYIgdkywzJdlskzJ2FJCT4EoUa3s86Lhl5VULTOEqEk7CqdbrbCosIRcYHBsR3tdtMjb9g9tfczgFQ==
   dependencies:
-    tslib "~2.5.0"
+    tslib "~2.6.2"
 
-"@blueprintjs/core@^4.20.1", "@blueprintjs/core@^4.20.2":
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.20.2.tgz#ae1bbaf13bd1bf887b506760c478cc940f6d6e20"
-  integrity sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==
+"@blueprintjs/core@^5.7.0", "@blueprintjs/core@^5.9.1":
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.9.1.tgz#79e474aa063468aec4c2e82cd9b6e12d0b98b1bc"
+  integrity sha512-/Cq6CAV/GyMhTOGrzgIBDsneduQCFWxzDwlX2f8MMAFZFO7FaeCONPvzbcxpTRAXR+RFkb4HpPdIsAslyZUMzA==
   dependencies:
-    "@blueprintjs/colors" "^4.2.1"
-    "@blueprintjs/icons" "^4.16.0"
-    "@juggle/resize-observer" "^3.4.0"
-    "@types/dom4" "^2.0.2"
+    "@blueprintjs/colors" "^5.1.0"
+    "@blueprintjs/icons" "^5.7.1"
+    "@popperjs/core" "^2.11.8"
     classnames "^2.3.1"
-    dom4 "^2.1.5"
     normalize.css "^8.0.1"
-    popper.js "^1.16.1"
-    react-popper "^1.3.11"
+    react-popper "^2.3.0"
     react-transition-group "^4.4.5"
-    tslib "~2.5.0"
+    react-uid "^2.3.3"
+    tslib "~2.6.2"
+    use-sync-external-store "^1.2.0"
 
-"@blueprintjs/datetime@^4.4.37":
-  version "4.4.37"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime/-/datetime-4.4.37.tgz#c3c92cf3b0aa39c26a5727ffd0a5262ca9a1f29c"
-  integrity sha512-YJiWzUH1eefCMvvvdsLimrLZNk5XW1yTMK4OmX6BP+gAt/u7cNKyv+42XO4tlymeWRqT0K7HbQOPP4ybt/xzEw==
+"@blueprintjs/datetime2@^2.2.7":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime2/-/datetime2-2.3.1.tgz#6f650998b8f94d8e0f725f3d4c68e5ed97ef7949"
+  integrity sha512-9UsGE/fmGzqpJA1p5kciZJWQNJ6P2qZBFCnMy9XFzPtFUSmDtNrUevnkV4EBWOAi2bUcXykvZMBaKrFrLUcJHg==
   dependencies:
-    "@blueprintjs/core" "^4.20.2"
+    "@blueprintjs/core" "^5.9.1"
+    "@blueprintjs/datetime" "^5.3.1"
+    "@blueprintjs/icons" "^5.7.1"
     classnames "^2.3.1"
+    date-fns "^2.28.0"
+    react-day-picker "^8.10.0"
+    react-innertext "^1.1.5"
+    tslib "~2.6.2"
+
+"@blueprintjs/datetime@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime/-/datetime-5.3.1.tgz#ee6bd79d70fd81f4d338edc02dfab096fea39e95"
+  integrity sha512-MDiM/+HFlN0C87sQWKrLfNiKja14Tt1HaxF66OX4mka3Y2fkEtBrZoOrTf1JVky/noXNRxcpLgiQFTEVGgy02Q==
+  dependencies:
+    "@blueprintjs/core" "^5.9.1"
+    "@blueprintjs/icons" "^5.7.1"
+    "@blueprintjs/select" "^5.1.1"
+    classnames "^2.3.1"
+    date-fns "^2.28.0"
+    date-fns-tz "^2.0.0"
+    lodash "^4.17.21"
     react-day-picker "7.4.9"
-    tslib "~2.5.0"
+    tslib "~2.6.2"
 
-"@blueprintjs/icons@^4.16.0":
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.16.0.tgz#47f9e8abe64d84fc18721080b8f191d8aac075d8"
-  integrity sha512-cyfgjUZcZCtQrXWUV8FwqYTFEzduV4a0N7yhOU38jY+cBRCLu/sDrD0Osvfk4DGRvNe4YjY7pohVLFSxpg68Uw==
+"@blueprintjs/icons@^5.5.0", "@blueprintjs/icons@^5.7.1":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-5.7.1.tgz#48b76bed2759ebd919c06bef0775635435bd6644"
+  integrity sha512-oWOaa6PFYa3ShBtUpNGU0fnu66AC0/ecQoD1VnI1yg3F0IFHxKApYOC11SL//ckfB6tDkqN+O8Y/7TdtTmVzig==
   dependencies:
     change-case "^4.1.2"
     classnames "^2.3.1"
-    tslib "~2.5.0"
+    tslib "~2.6.2"
 
-"@blueprintjs/popover2@^1.14.11":
-  version "1.14.11"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.11.tgz#0698fdeaf6710460cef0b71bed592ca37f40d1f9"
-  integrity sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==
+"@blueprintjs/popover2@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-2.1.1.tgz#b1e2dee9fd4679f70c7337ab03327d863eec4e42"
+  integrity sha512-8bPzPQH6uROCsghXCUbiolH3pe6rOVxvsSWEnnJrztAUQa4BGBOpUje32J5EDKYZqhdiiKKa+HpDa06lShFcww==
   dependencies:
-    "@blueprintjs/core" "^4.20.2"
-    "@juggle/resize-observer" "^3.4.0"
-    "@popperjs/core" "^2.11.7"
+    "@blueprintjs/core" "^5.9.1"
     classnames "^2.3.1"
-    dom4 "^2.1.5"
-    react-popper "^2.3.0"
-    tslib "~2.5.0"
+    tslib "~2.6.2"
 
-"@blueprintjs/select@^4.9.24":
-  version "4.9.24"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-4.9.24.tgz#5814d946486308a05758a9e1408b6f8c31f4a60e"
-  integrity sha512-OTjesxH/7UZvM7yAdHJ5u3sIjX1N8Rs4CQQ22AfqNl82SIROqkuXI31XEl6YNX1GsYfmAMiw0K7XohEKOMXR5g==
+"@blueprintjs/select@^5.0.0", "@blueprintjs/select@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-5.1.1.tgz#39bda2c1c73bfa96a395a42586a8583ca38f4173"
+  integrity sha512-5BiYtYJvQmUuPHS/2g3ZYy8I3TgAmQtkO+ksqMXVWzRibW7CdggqvszeaSWA0+RHgYw3gJEUQk53yt+rqZCF6Q==
   dependencies:
-    "@blueprintjs/core" "^4.20.2"
-    "@blueprintjs/popover2" "^1.14.11"
+    "@blueprintjs/core" "^5.9.1"
+    "@blueprintjs/icons" "^5.7.1"
     classnames "^2.3.1"
-    tslib "~2.5.0"
+    tslib "~2.6.2"
 
 "@craco/craco@^7.1.0":
   version "7.1.0"
@@ -1430,14 +1444,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@hypnosphi/create-react-context@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
-  integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1751,11 +1757,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@juggle/resize-observer@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
-  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
-
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -1951,7 +1952,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.24.tgz#58601079e11784d20f82d0585865bb42305c4df3"
   integrity sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==
 
-"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.0":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -2642,11 +2643,6 @@
   dependencies:
     "@types/ms" "*"
 
-"@types/dom4@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
-  integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
-
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -5225,6 +5221,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns-tz@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-2.0.0.tgz#1b14c386cb8bc16fc56fe333d4fc34ae1d1099d5"
+  integrity sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==
+
 date-fns@^2.28.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
@@ -5299,18 +5300,6 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-deep-equal@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-equal@^2.0.5:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
@@ -5585,11 +5574,6 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-dom4@^2.1.5:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
-  integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
-
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -6874,11 +6858,6 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -7417,7 +7396,7 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4, is-arguments@^1.1.1:
+is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -7591,7 +7570,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.0.4, is-regex@^1.1.4:
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -9518,7 +9497,7 @@ object-inspect@^1.12.2, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
-object-is@^1.0.1, object-is@^1.1.5:
+object-is@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -9908,11 +9887,6 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-popper.js@^1.14.4, popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -10780,6 +10754,11 @@ react-day-picker@7.4.9:
   dependencies:
     prop-types "^15.6.2"
 
+react-day-picker@^8.10.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.0.tgz#729c5b9564967a924213978fb9c0751884a60595"
+  integrity sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg==
+
 react-debounce-render@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/react-debounce-render/-/react-debounce-render-8.0.2.tgz#ce37864e9bd8d086dbd3e3e784d3270bac2cf2d3"
@@ -10860,6 +10839,11 @@ react-hotkeys@^2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
+react-innertext@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
+  integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
+
 react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10910,19 +10894,6 @@ react-papaparse@^4.0.2:
     "@types/papaparse" "^5.3.9"
     papaparse "^5.4.1"
 
-react-popper@^1.3.11:
-  version "1.3.11"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
-  integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    "@hypnosphi/create-react-context" "^0.3.1"
-    deep-equal "^1.1.1"
-    popper.js "^1.14.4"
-    prop-types "^15.6.1"
-    typed-styles "^0.0.7"
-    warning "^4.0.2"
-
 react-popper@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
@@ -11136,6 +11107,13 @@ react-transition-state@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-transition-state/-/react-transition-state-2.1.1.tgz#1601a6177926b647041b7d598bf124321ab8d25b"
   integrity sha512-kQx5g1FVu9knoz1T1WkapjUgFz08qQ/g1OmuWGi3/AoEFfS0kStxrPlZx81urjCXdz2d+1DqLpU6TyLW/Ro04Q==
 
+react-uid@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.3.3.tgz#6a485ccc868555997f3506c6db97a3e735d97adf"
+  integrity sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ==
+  dependencies:
+    tslib "^2.0.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -11325,7 +11303,7 @@ regex-parser@^2.2.11:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
   integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3:
+regexp.prototype.flags@^1.4.3:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
   integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
@@ -12692,7 +12670,12 @@ tslib@^1.8.1, tslib@^1.9.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.4.0, tslib@~2.5.0:
+tslib@^2.0.0, tslib@~2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
+tslib@^2.0.3, tslib@^2.4.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
@@ -12767,11 +12750,6 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typed-styles@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
-  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
-
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -13015,7 +12993,7 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
-use-sync-external-store@^1.0.0:
+use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -13153,7 +13131,7 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==