diff --git a/client/package-lock.json b/client/package-lock.json
index 03ce8f115..96c868e7b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
         "@mui/lab": "^5.0.0-alpha.137",
         "@mui/material": "^5.15.14",
         "@mui/styles": "^5.15.14",
+        "@rc-component/color-picker": "^3.1.1",
         "@reach/router": "^1.3.4",
         "@redux-devtools/core": "^4.0.0",
         "@reduxjs/toolkit": "^1.9.7",
@@ -37,7 +38,6 @@
         "mathjax-react": "^2.0.1",
         "mathjs": "^12.4.1",
         "prismjs": "^1.29.0",
-        "rc-color-picker": "^1.2.6",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.3.1",
         "react-color": "^2.19.3",
@@ -115,6 +115,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ant-design/fast-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-3.0.1.tgz",
+      "integrity": "sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
     "node_modules/@apideck/better-ajv-errors": {
       "version": "0.3.6",
       "license": "MIT",
@@ -5052,6 +5061,35 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@rc-component/color-picker": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-3.1.1.tgz",
+      "integrity": "sha512-OHaCHLHszCegdXmIq2ZRIZBN/EtpT6Wm8SG/gpzLATHbVKc/avvuKi+zlOuk05FTWvgaMmpxAko44uRJ3M+2pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^3.0.1",
+        "@rc-component/util": "^1.3.0",
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/util": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.9.0.tgz",
+      "integrity": "sha512-5uW6AfhIigCWeEQDthTozlxiT4Prn6xYQWeO0xokjcaa186OtwPRHBZJ2o0T0FhbjGhZ3vXdbkv0sx3gAYW7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-mobile": "^5.0.0",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@reach/router": {
       "version": "1.3.4",
       "license": "MIT",
@@ -6620,13 +6658,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/add-dom-event-listener": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "4.x"
-      }
-    },
     "node_modules/address": {
       "version": "1.2.2",
       "license": "MIT",
@@ -7348,23 +7379,6 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "license": "MIT",
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
-    "node_modules/babel-runtime/node_modules/core-js": {
-      "version": "2.6.12",
-      "hasInstallScript": true,
-      "license": "MIT"
-    },
-    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "license": "MIT"
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "license": "MIT"
@@ -8028,16 +8042,6 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
-    "node_modules/component-classes": {
-      "version": "1.2.6",
-      "license": "MIT",
-      "dependencies": {
-        "component-indexof": "0.0.3"
-      }
-    },
-    "node_modules/component-indexof": {
-      "version": "0.0.3"
-    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "license": "MIT",
@@ -8319,14 +8323,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/create-react-class": {
-      "version": "15.7.0",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/create-react-context": {
       "version": "0.3.0",
       "license": "MIT",
@@ -8360,14 +8356,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/css-animation": {
-      "version": "1.6.1",
-      "license": "MIT",
-      "dependencies": {
-        "babel-runtime": "6.x",
-        "component-classes": "^1.2.5"
-      }
-    },
     "node_modules/css-blank-pseudo": {
       "version": "3.0.3",
       "license": "CC0-1.0",
@@ -9308,10 +9296,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/dom-align": {
-      "version": "1.12.4",
-      "license": "MIT"
-    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "license": "MIT",
@@ -12226,6 +12210,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-mobile": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-5.0.0.tgz",
+      "integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
+      "license": "MIT"
+    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "license": "MIT"
@@ -20080,70 +20070,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rc-align": {
-      "version": "2.4.5",
-      "license": "MIT",
-      "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "dom-align": "^1.7.0",
-        "prop-types": "^15.5.8",
-        "rc-util": "^4.0.4"
-      }
-    },
-    "node_modules/rc-animate": {
-      "version": "2.11.1",
-      "license": "MIT",
-      "dependencies": {
-        "babel-runtime": "6.x",
-        "classnames": "^2.2.6",
-        "css-animation": "^1.3.2",
-        "prop-types": "15.x",
-        "raf": "^3.4.0",
-        "rc-util": "^4.15.3",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "node_modules/rc-color-picker": {
-      "version": "1.2.6",
-      "license": "MIT",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "prop-types": "^15.5.8",
-        "rc-trigger": "1.x",
-        "rc-util": "^4.0.2",
-        "tinycolor2": "^1.4.1"
-      },
-      "peerDependencies": {
-        "react": "16.x",
-        "react-dom": "16.x"
-      }
-    },
-    "node_modules/rc-trigger": {
-      "version": "1.11.5",
-      "dependencies": {
-        "babel-runtime": "6.x",
-        "create-react-class": "15.x",
-        "prop-types": "15.x",
-        "rc-align": "2.x",
-        "rc-animate": "2.x",
-        "rc-util": "4.x"
-      }
-    },
-    "node_modules/rc-util": {
-      "version": "4.21.1",
-      "license": "MIT",
-      "dependencies": {
-        "add-dom-event-listener": "^1.1.0",
-        "prop-types": "^15.5.10",
-        "react-is": "^16.12.0",
-        "react-lifecycles-compat": "^3.0.4",
-        "shallowequal": "^1.1.0"
-      }
-    },
-    "node_modules/rc-util/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
     "node_modules/react": {
       "version": "18.2.0",
       "license": "MIT",
@@ -22587,10 +22513,6 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "license": "MIT"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "license": "MIT",
diff --git a/client/package.json b/client/package.json
index 692508de8..bbef092e3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,7 @@
     "@mui/lab": "^5.0.0-alpha.137",
     "@mui/material": "^5.15.14",
     "@mui/styles": "^5.15.14",
+    "@rc-component/color-picker": "^3.1.1",
     "@reach/router": "^1.3.4",
     "@redux-devtools/core": "^4.0.0",
     "@reduxjs/toolkit": "^1.9.7",
@@ -33,7 +34,6 @@
     "mathjax-react": "^2.0.1",
     "mathjs": "^12.4.1",
     "prismjs": "^1.29.0",
-    "rc-color-picker": "^1.2.6",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.3.1",
     "react-color": "^2.19.3",
diff --git a/client/src/assets/stylesheets/components/css/colorPicker.css b/client/src/assets/stylesheets/components/css/colorPicker.css
index b2cd3e16c..b8a52d8b7 100644
--- a/client/src/assets/stylesheets/components/css/colorPicker.css
+++ b/client/src/assets/stylesheets/components/css/colorPicker.css
@@ -1,39 +1,40 @@
 /*FOR COLOR PICKER*/
-.rc-color-picker-panel-inner {
+/* All names changed to `color-picker` for updated dependency */
+.color-picker-panel-inner {
   position: relative;
   border-radius: 4px;
   box-shadow: 0 1px 5px #ccc;
   border: 1px solid #ccc;
   padding-bottom: 8px;
 }
-.rc-color-picker-panel-wrap {
+.color-picker-panel-wrap {
   margin: 5px 0 0;
   height: 30px;
   width: 100%;
   position: relative;
 }
-.rc-color-picker-panel-wrap-preview {
+.color-picker-panel-wrap-preview {
   position: absolute;
   right: 8px;
 }
-.rc-color-picker-panel-wrap-ribbon {
+.color-picker-panel-wrap-ribbon {
   position: absolute;
   left: 8px;
   top: 0;
   right: 43px;
   height: 30px;
 }
-.rc-color-picker-panel-wrap-alpha {
+.color-picker-panel-wrap-alpha {
   position: absolute;
   left: 8px;
   right: 43px;
   bottom: 0;
   height: 12.5px;
 }
-.rc-color-picker-panel-wrap-has-alpha .rc-color-picker-panel-wrap-ribbon {
+.color-picker-panel-wrap-has-alpha .color-picker-panel-wrap-ribbon {
   height: 12.5px;
 }
-.rc-color-picker-trigger {
+.color-picker-trigger {
   border: 1px solid #999;
   display: inline-block;
   padding: 2px;
@@ -47,10 +48,10 @@
   cursor: pointer;
   box-shadow: 0 0 0 2px #fff inset;
 }
-.rc-color-picker-trigger-open {
+.color-picker-trigger-open {
   box-shadow: 0px 0px 3px #999;
 }
-.rc-color-picker-panel {
+.color-picker-panel {
   width: 218px;
   background-color: #fff;
   box-sizing: border-box;
@@ -63,37 +64,37 @@
   -ms-user-select: none;
   user-select: none;
 }
-.rc-color-picker-panel * {
+.color-picker-panel * {
   box-sizing: border-box;
 }
-.rc-color-picker-panel-open {
+.color-picker-panel-open {
   display: block;
 }
-.rc-color-picker-panel-close {
+.color-picker-panel-close {
   display: none;
 }
-.rc-color-picker-panel-preview {
+.color-picker-panel-preview {
   height: 30px;
   width: 30px;
   overflow: hidden;
   border-radius: 2px;
   background-image: url("data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==");
 }
-.rc-color-picker-panel-preview span {
+.color-picker-panel-preview span {
   box-shadow: 0 0 2px #808080 inset;
 }
-.rc-color-picker-panel-preview span,
-.rc-color-picker-panel-preview input[type="color"] {
+.color-picker-panel-preview span,
+.color-picker-panel-preview input[type="color"] {
   position: absolute;
   display: block;
   height: 100%;
   width: 30px;
   border-radius: 2px;
 }
-.rc-color-picker-panel-preview input[type="color"] {
+.color-picker-panel-preview input[type="color"] {
   opacity: 0;
 }
-.rc-color-picker-panel-board {
+.color-picker-panel-board {
   position: relative;
   font-size: 0;
   -webkit-user-select: none;
@@ -102,7 +103,7 @@
   user-select: none;
   margin: 8px 8px 0px;
 }
-.rc-color-picker-panel-board span {
+.color-picker-panel-board span {
   position: absolute;
   border-radius: 10px;
   border: 1px solid #fff;
@@ -114,14 +115,14 @@
   box-shadow: 0 0 1px rgba(120, 120, 120, 0.7);
   z-index: 2;
 }
-.rc-color-picker-panel-board-hsv {
+.color-picker-panel-board-hsv {
   width: 200px;
   height: 150px;
   position: relative;
   z-index: 1;
   border-radius: 2px;
 }
-.rc-color-picker-panel-board-value {
+.color-picker-panel-board-value {
   border-radius: 2px;
   position: absolute;
   width: 100%;
@@ -135,7 +136,7 @@
   background-image: -o-linear-gradient(top, transparent 0%, #000000 100%);
   background-image: linear-gradient(to bottom, transparent 0%, #000000 100%);
 }
-.rc-color-picker-panel-board-saturation {
+.color-picker-panel-board-saturation {
   border-radius: 2px;
   position: absolute;
   width: 100%;
@@ -149,7 +150,7 @@
   background-image: -o-linear-gradient(left, #ffffff 0%, transparent 100%);
   background-image: linear-gradient(to right, #ffffff 0%, transparent 100%);
 }
-.rc-color-picker-panel-board-handler {
+.color-picker-panel-board-handler {
   box-shadow: 0 0 2px #808080 inset;
   border-radius: 2px;
   cursor: crosshair;
@@ -164,7 +165,7 @@
   height: 100%;
   z-index: 3;
 }
-.rc-color-picker-panel-ribbon {
+.color-picker-panel-ribbon {
   position: relative;
   height: 100%;
   border-radius: 2px;
@@ -227,7 +228,7 @@
     #ff0000 100%
   );
 }
-.rc-color-picker-panel-ribbon span {
+.color-picker-panel-ribbon span {
   position: absolute;
   top: 0;
   height: 100%;
@@ -238,14 +239,14 @@
   background-color: #fff;
   border-radius: 3px;
 }
-.rc-color-picker-panel-ribbon-handler {
+.color-picker-panel-ribbon-handler {
   position: absolute;
   width: 104%;
   height: 100%;
   left: -2%;
   cursor: pointer;
 }
-.rc-color-picker-panel-alpha {
+.color-picker-panel-alpha {
   position: relative;
   height: 100%;
   width: 100%;
@@ -257,14 +258,14 @@
   -ms-user-select: none;
   user-select: none;
 }
-.rc-color-picker-panel-alpha-bg {
+.color-picker-panel-alpha-bg {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 2px;
   box-shadow: 0 0 2px #808080 inset;
 }
-.rc-color-picker-panel-alpha span {
+.color-picker-panel-alpha span {
   position: absolute;
   top: 0;
   height: 100%;
@@ -275,21 +276,21 @@
   background-color: #fff;
   border-radius: 3px;
 }
-.rc-color-picker-panel-alpha-handler {
+.color-picker-panel-alpha-handler {
   position: absolute;
   width: 104%;
   height: 100%;
   left: -2%;
   cursor: pointer;
 }
-.rc-color-picker-panel-params {
+.color-picker-panel-params {
   font-size: 12px;
 }
-.rc-color-picker-panel-params-input {
+.color-picker-panel-params-input {
   overflow: hidden;
   padding: 2px 8px;
 }
-.rc-color-picker-panel-params input {
+.color-picker-panel-params input {
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
@@ -302,17 +303,17 @@
   border: 1px solid #cacaca;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
 }
-.rc-color-picker-panel-params-hex {
+.color-picker-panel-params-hex {
   width: 52px;
 }
-.rc-color-picker-panel-params input[type="number"] {
+.color-picker-panel-params input[type="number"] {
   margin-left: 5px;
   width: 44px;
 }
-.rc-color-picker-panel-params input[type="number"]::-webkit-inner-spin-button {
+.color-picker-panel-params input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
-.rc-color-picker-panel-params-lable {
+.color-picker-panel-params-lable {
   padding: 2px 8px;
   height: 22px;
   line-height: 18px;
@@ -321,41 +322,41 @@
   -ms-user-select: none;
   user-select: none;
 }
-.rc-color-picker-panel-params-lable label {
+.color-picker-panel-params-lable label {
   float: left;
   text-align: center;
 }
-.rc-color-picker-panel-params-lable-hex {
+.color-picker-panel-params-lable-hex {
   width: 52px;
 }
-.rc-color-picker-panel-params-lable-number,
-.rc-color-picker-panel-params-lable-alpha {
+.color-picker-panel-params-lable-number,
+.color-picker-panel-params-lable-alpha {
   margin-left: 5px;
   width: 44px;
   text-transform: uppercase;
 }
-.rc-color-picker-panel-params-lable-number:hover {
+.color-picker-panel-params-lable-number:hover {
   border-radius: 2px;
   background-color: #eee;
   box-shadow: 0 0 0 1px #ccc inset;
   cursor: pointer;
 }
-.rc-color-picker-panel-params-has-alpha input[type="number"] {
+.color-picker-panel-params-has-alpha input[type="number"] {
   width: 32px;
 }
-.rc-color-picker-panel-params-has-alpha
-  .rc-color-picker-panel-params-lable-number,
-.rc-color-picker-panel-params-has-alpha
-  .rc-color-picker-panel-params-lable-alpha {
+.color-picker-panel-params-has-alpha
+  .color-picker-panel-params-lable-number,
+.color-picker-panel-params-has-alpha
+  .color-picker-panel-params-lable-alpha {
   width: 32px;
 }
-.rc-color-picker {
+.color-picker {
   position: absolute;
   left: -9999px;
   top: -9999px;
   z-index: 1000;
 }
-.rc-color-picker-slide-up-enter {
+.color-picker-slide-up-enter {
   animation-duration: 0.3s;
   animation-fill-mode: both;
   transform-origin: 0 0;
@@ -364,7 +365,7 @@
   animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
   animation-play-state: paused;
 }
-.rc-color-picker-slide-up-appear {
+.color-picker-slide-up-appear {
   animation-duration: 0.3s;
   animation-fill-mode: both;
   transform-origin: 0 0;
@@ -373,7 +374,7 @@
   animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
   animation-play-state: paused;
 }
-.rc-color-picker-slide-up-leave {
+.color-picker-slide-up-leave {
   animation-duration: 0.3s;
   animation-fill-mode: both;
   transform-origin: 0 0;
@@ -382,27 +383,27 @@
   animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
   animation-play-state: paused;
 }
-.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomLeft,
-.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomRight,
-.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomLeft,
-.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomRight {
+.color-picker-slide-up-enter.color-picker-slide-up-enter-active.color-picker-placement-bottomLeft,
+.color-picker-slide-up-enter.color-picker-slide-up-enter-active.color-picker-placement-bottomRight,
+.color-picker-slide-up-appear.color-picker-slide-up-appear-active.color-picker-placement-bottomLeft,
+.color-picker-slide-up-appear.color-picker-slide-up-appear-active.color-picker-placement-bottomRight {
   animation-name: rcColorPickerSlideUpIn;
   animation-play-state: running;
 }
-.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topLeft,
-.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topRight,
-.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topLeft,
-.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topRight {
+.color-picker-slide-up-enter.color-picker-slide-up-enter-active.color-picker-placement-topLeft,
+.color-picker-slide-up-enter.color-picker-slide-up-enter-active.color-picker-placement-topRight,
+.color-picker-slide-up-appear.color-picker-slide-up-appear-active.color-picker-placement-topLeft,
+.color-picker-slide-up-appear.color-picker-slide-up-appear-active.color-picker-placement-topRight {
   animation-name: rcColorPickerSlideDownIn;
   animation-play-state: running;
 }
-.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomLeft,
-.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomRight {
+.color-picker-slide-up-leave.color-picker-slide-up-leave-active.color-picker-placement-bottomLeft,
+.color-picker-slide-up-leave.color-picker-slide-up-leave-active.color-picker-placement-bottomRight {
   animation-name: rcColorPickerSlideUpOut;
   animation-play-state: running;
 }
-.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topLeft,
-.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topRight {
+.color-picker-slide-up-leave.color-picker-slide-up-leave-active.color-picker-placement-topLeft,
+.color-picker-slide-up-leave.color-picker-slide-up-leave-active.color-picker-placement-topRight {
   animation-name: rcColorPickerSlideDownOut;
   animation-play-state: running;
 }
diff --git a/client/src/components/all-components/ALLCardRow.js b/client/src/components/all-components/ALLCardRow.js
index 0a40ff3c1..f24f5ae6b 100644
--- a/client/src/components/all-components/ALLCardRow.js
+++ b/client/src/components/all-components/ALLCardRow.js
@@ -33,15 +33,15 @@ const ALLCardRow = (props) => {
     <div className="tw-flex tw-flex-col tw-w-full tw-my-3">
       <div className="tw-shadow-lg tw-w-full tw-h-[5rem] tw-flex tw-flex-row tw-rounded-lg tw-relative">
         {/* Left */}
-        <image
+        <img // image was an unrecognized tag in the browser
+          src={imageURL}
           className="tw-w-1/12 tw-object-cover tw-rounded-l-lg tw-align-middle"
           style={{
-            backgroundImage: `url(${imageURL})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
             backgroundRepeat: "no-repeat",
           }}
-          alt={"Image of Wrench created by Google Gemini."}
+          alt="Image of Wrench created by Google Gemini"
         />
         {/* Middle */}
         <div className="tw-p-5">
diff --git a/client/src/components/all-components/LabButton.js b/client/src/components/all-components/LabButton.js
index 5927584f5..88d828a62 100644
--- a/client/src/components/all-components/LabButton.js
+++ b/client/src/components/all-components/LabButton.js
@@ -2,13 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const LabButton = (props) => {
-  const { onClick, type, label, key, disabled, ariaLabel } = props;
+  // 'key' cannot be a prop
+  const { onClick, type, label, _key, disabled, ariaLabel } = props;
 
   return (
     <button
       onClick={onClick}
       type={type}
-      key={key}
+      key={_key}
       className="btn tw-text-black tw-bg-primary-yellow tw-shadow-md hover:tw-bg-secondary-gray hover:tw-shadow-lg btn-xl text-uppercase tw-max-h-[5rem] tw-min-w-[4rem] tw-max-w-[20rem] tw-text-nowrap tw-border-none"
       disabled={disabled}
       aria-label={ariaLabel}
@@ -22,7 +23,7 @@ LabButton.propTypes = {
   onClick: PropTypes.func,
   type: PropTypes.string,
   label: PropTypes.string,
-  key: PropTypes.string,
+  _key: PropTypes.string,
   disabled: PropTypes.bool,
   ariaLabel: PropTypes.string,
 };
diff --git a/client/src/components/all-components/SiteAccessibilityButton.js b/client/src/components/all-components/SiteAccessibilityButton.js
index 08292d2ef..26d274d23 100644
--- a/client/src/components/all-components/SiteAccessibilityButton.js
+++ b/client/src/components/all-components/SiteAccessibilityButton.js
@@ -3,9 +3,10 @@ import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import { actions as appActions } from "../../reducers/lab1/AppReducer";
 import { actions as mainActions } from "../../reducers/MainReducer";
-import { Panel as ColorPickerPanel } from "rc-color-picker";
+import ColorPicker from "@rc-component/color-picker"; // Updated from deprecated 'rc-color-picker'
 import AccessibilityImage from "../../assets/images/accessibility_icon.png";
 import { Collapse, Card, CardHeader, CardBody } from "reactstrap";
+import "@rc-component/color-picker/assets/index.css";
 import {
   changeTSize,
   setTextColor,
@@ -51,13 +52,13 @@ const SiteAccessibilityButton = () => {
   }
 
   function onTextColorChange(obj) {
-    setTextColor(obj.color);
-    state = { ...state, color: obj.color };
+    setTextColor(obj.toHexString());
+    state = { ...state, color: obj.toHexString() };
   }
 
   function onBgColorChange(obj) {
-    setBackgroundColor(obj.color);
-    state = { ...state, backgroundColor: obj.color };
+    setBackgroundColor(obj.toHexString());
+    state = { ...state, backgroundColor: obj.toHexString() };
   }
 
   return (
@@ -102,10 +103,14 @@ const SiteAccessibilityButton = () => {
               Text Color Adjuster
             </p>
             <div className={"tw-w-full tw-flex tw-justify-center"}>
-              <ColorPickerPanel
-                enableAlpha={false}
-                defaultColor={"#345679"}
-                color={state.color}
+              {/* <ColorPicker
+                disableAlpha={true}
+                defaultValue={"#345679"}
+                value={state.color}
+                onChange={onTextColorChange.bind(this)}
+              /> */}
+              <ColorPicker
+                defaultValue={"#345679"}
                 onChange={onTextColorChange.bind(this)}
               />
             </div>
@@ -113,7 +118,7 @@ const SiteAccessibilityButton = () => {
               Background Color Adjuster
             </p>
             <div className={"tw-w-full tw-flex tw-justify-center"}>
-              <ColorPickerPanel
+              <ColorPicker
                 enableAlpha={false}
                 defaultColor={"#345679"}
                 color={state.backgroundColor}
diff --git a/client/src/components/body/Reading/OrderedList.jsx b/client/src/components/body/Reading/OrderedList.jsx
index 8fd140d24..8e87b6d37 100644
--- a/client/src/components/body/Reading/OrderedList.jsx
+++ b/client/src/components/body/Reading/OrderedList.jsx
@@ -10,9 +10,9 @@ const OrderedList = ({ data }) => {
     <>
       <div className="ordered__list__div">
         <ol className={"ordered__list"}>
-          {data.map((text) => {
+          {data.map((text, id) => {
             return (
-              <li className={"tw-body-text"} key={text.id}>
+              <li className={"tw-body-text"} key={id}>
                 {text}
               </li>
             );
@@ -24,7 +24,7 @@ const OrderedList = ({ data }) => {
 };
 
 OrderedList.propTypes = {
-  data: PropTypes.string.isRequired,
+  data: PropTypes.array.isRequired,
 };
 
 export default OrderedList;
diff --git a/client/src/components/body/Reading/Reading.js b/client/src/components/body/Reading/Reading.js
index 1cec2257e..18e22fb94 100644
--- a/client/src/components/body/Reading/Reading.js
+++ b/client/src/components/body/Reading/Reading.js
@@ -332,7 +332,7 @@ const Reading = (props) => {
                             ? mobileWrapOptions
                             : mobileNoWrapOptions
                         }
-                        height={!isImagine && pieHeight}
+                        height={!isImagine ? pieHeight : ""} // Converted to turnery so it never evaluates to boolean
                         plugins={mobileLabelWrap ? [mobileLegendWrap] : []}
                       />
                     )}
@@ -359,7 +359,7 @@ const Reading = (props) => {
                     <Pie
                       data={readingData?.piechart.data}
                       options={largeViewPortOptions}
-                      height={!isImagine && PIE_SIZE}
+                      height={!isImagine ? PIE_SIZE : ""} // Converted to turnery so it never evaluates to boolean
                     />
                   </div>
                   {readingData?.piechart?.caption !== "" &&
diff --git a/client/src/components/body/profilepage/components/AddModal.js b/client/src/components/body/profilepage/components/AddModal.js
index 240dab9e3..b69aa07e9 100644
--- a/client/src/components/body/profilepage/components/AddModal.js
+++ b/client/src/components/body/profilepage/components/AddModal.js
@@ -168,7 +168,7 @@ const AddModal = (props) => {
 };
 
 AddModal.propTypes = {
-  addMode: PropTypes.bool,
+  addMode: PropTypes.string, // Everyone 'addMode' is used as a String
   user: PropTypes.shape({
     userid: PropTypes.number,
   }),
diff --git a/client/src/components/exercise/lab1/components/AppInstructions.js b/client/src/components/exercise/lab1/components/AppInstructions.js
index bd935e80f..2382e6374 100644
--- a/client/src/components/exercise/lab1/components/AppInstructions.js
+++ b/client/src/components/exercise/lab1/components/AppInstructions.js
@@ -8,7 +8,7 @@ class AppInstructions extends Component {
     if (!visible) return null;
 
     return (
-      <p className="tw-body-text">
+      <div className="tw-body-text">
         <b>Goal:</b> Find the box with the treasure.
         <ul className="tw-body-text">
           <li className={"tw-py-6 "}>Opening the hint box costs 25 points.</li>
@@ -17,7 +17,7 @@ class AppInstructions extends Component {
             get.
           </li>
         </ul>
-      </p>
+      </div>
     );
   }
 }
diff --git a/client/src/components/exercise/lab1/components/HintBox.js b/client/src/components/exercise/lab1/components/HintBox.js
index c1cea62eb..6d8423405 100644
--- a/client/src/components/exercise/lab1/components/HintBox.js
+++ b/client/src/components/exercise/lab1/components/HintBox.js
@@ -33,7 +33,7 @@ class ThinkingHintBox extends Component {
 
     if (!visible) return null;
 
-    return <BeatLoader sizeUnit={"px"} size={10} />;
+    return <BeatLoader sizeunit={"px"} size={10} />;
   }
 }
 
diff --git a/client/src/components/exercise/lab1/components/Repair.js b/client/src/components/exercise/lab1/components/Repair.js
index fcbdd5627..8c3af3248 100644
--- a/client/src/components/exercise/lab1/components/Repair.js
+++ b/client/src/components/exercise/lab1/components/Repair.js
@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import classNames from "classnames/bind";
-import { Panel as ColorPickerPanel } from "rc-color-picker";
+import ColorPicker from "@rc-component/color-picker";
 import RepairService from "../../../../services/lab1/RepairService";
 import RepairUpdateButton from "../../../all-components/RepairUpdateButton";
 
@@ -48,7 +48,9 @@ class Repair extends Component {
         });
       } else if (e.target.parentNode.className) {
         if (
-          !e.target.parentNode.className.includes("rc-color-picker") &&
+          !e.target.parentNode.className.includes(
+            "@rc-component/color-picker",
+          ) &&
           e.target.id !== "changeAvailableColor"
         ) {
           this.setState({
@@ -64,7 +66,9 @@ class Repair extends Component {
         });
       } else if (e.target.parentNode.className) {
         if (
-          !e.target.parentNode.className.includes("rc-color-picker") &&
+          !e.target.parentNode.className.includes(
+            "@rc-component/color-picker",
+          ) &&
           e.target.id !== "changeUnavailableColor"
         ) {
           this.setState({
@@ -120,13 +124,13 @@ class Repair extends Component {
 
   changeAvailableBackgroundColorHandler(obj) {
     this.setState({
-      availableBackgroundColor: obj.color,
+      availableBackgroundColor: obj.toHexString(),
     });
   }
 
   changeUnavailableBackgroundColorHandler(obj) {
     this.setState({
-      unavailableBackgroundColor: obj.color,
+      unavailableBackgroundColor: obj.toHexString(),
     });
   }
 
@@ -435,7 +439,7 @@ class Repair extends Component {
                 />
                 {availableBackgroundColorPopup ? (
                   <div className="code_editor__color_selector">
-                    <ColorPickerPanel
+                    <ColorPicker
                       enableAlpha={false}
                       color={this.state.availableBackgroundColor}
                       onChange={this.changeAvailableBackgroundColorHandler.bind(
@@ -478,7 +482,7 @@ class Repair extends Component {
                 />
                 {unavailableBackgroundColorPopup ? (
                   <div className="code_editor__color_selector">
-                    <ColorPickerPanel
+                    <ColorPicker
                       enableAlpha={false}
                       color={this.state.unavailableBackgroundColor}
                       onChange={this.changeUnavailableBackgroundColorHandler.bind(
diff --git a/client/src/components/exercise/lab2/Instructions/fourthInstructions.js b/client/src/components/exercise/lab2/Instructions/fourthInstructions.js
index 0b9bef841..348d6bbb9 100644
--- a/client/src/components/exercise/lab2/Instructions/fourthInstructions.js
+++ b/client/src/components/exercise/lab2/Instructions/fourthInstructions.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useEffect } from "react";
 import UserLabService from "../../../../services/UserLabService";
 import "./secondaryInstructions.css";
 import { LAB_ID } from "../../../../constants/lab2";
@@ -26,9 +26,11 @@ const FourthInstructions = ({
     }
   };
 
-  if (background !== "white") {
-    toWhiteBackground();
-  }
+  useEffect(() => {
+    if (background !== "white") {
+      toWhiteBackground();
+    }
+  }, []);
 
   const closeInstructions = () => {
     closePage();
diff --git a/client/src/components/exercise/lab2/Instructions/secondInstructions.js b/client/src/components/exercise/lab2/Instructions/secondInstructions.js
index cb98106ce..9df1de5d8 100644
--- a/client/src/components/exercise/lab2/Instructions/secondInstructions.js
+++ b/client/src/components/exercise/lab2/Instructions/secondInstructions.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useEffect } from "react";
 import "./secondaryInstructions.css";
 import { navigate } from "@reach/router";
 import LabButton from "../../../all-components/LabButton";
@@ -17,13 +17,15 @@ const SecondInstructions = ({
   isImagineExpression,
 }) => {
   const alreadyCalled = false;
-  if (!alreadyCalled) {
-    selectOption("Protanopia");
-  }
 
-  if (background !== "white") {
-    toWhiteBackground();
-  }
+  useEffect(() => {
+    if (!alreadyCalled) {
+      selectOption("Protanopia");
+    }
+    if (background !== "white") {
+      toWhiteBackground();
+    }
+  }, []);
 
   const closeInstructions = () => {
     if (!isImagineExpression) {
diff --git a/client/src/components/exercise/lab2/Instructions/thirdInstructions.js b/client/src/components/exercise/lab2/Instructions/thirdInstructions.js
index 726976eb8..16f4ea158 100644
--- a/client/src/components/exercise/lab2/Instructions/thirdInstructions.js
+++ b/client/src/components/exercise/lab2/Instructions/thirdInstructions.js
@@ -2,7 +2,7 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable react/prop-types */
 import { navigate } from "@reach/router";
-import React from "react";
+import React, { useEffect } from "react";
 import "./secondaryInstructions.css";
 import LabButton from "../../../all-components/LabButton";
 
@@ -19,21 +19,24 @@ const ThirdInstructions = ({
   isImagine,
 }) => {
   const alreadyCalled = false;
-  if (!alreadyCalled) {
-    selectOption("Protanopia");
-  }
+  useEffect(() => {
+    if (!alreadyCalled) {
+      selectOption("Protanopia");
+    }
 
-  const changeColors = () => {
-    activatePopup();
-  };
+    if (background !== "white") {
+      toWhiteBackground();
+    }
+  }, []);
 
-  if (background !== "white") {
-    toWhiteBackground();
-  }
   if (isImagine) {
     navigate("/Imagine2023/Reading");
   }
 
+  const changeColors = () => {
+    activatePopup();
+  };
+
   return (
     <>
       {!isImagine && (
diff --git a/client/src/components/exercise/lab2/LandingPage/landingPage.js b/client/src/components/exercise/lab2/LandingPage/landingPage.js
index 015b4e7a6..1ae53cd6a 100644
--- a/client/src/components/exercise/lab2/LandingPage/landingPage.js
+++ b/client/src/components/exercise/lab2/LandingPage/landingPage.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useEffect } from "react";
 import useScroll from "../../../../use-hooks/useScroll";
 import MainInstructions from "./mainInstructions";
 import LabButton from "../../../all-components/LabButton";
@@ -12,9 +12,11 @@ const LandingPage = ({ endFirstExercise, toWhiteBackground, background }) => {
     endFirstExercise();
   };
 
-  if (background !== "white") {
-    toWhiteBackground();
-  }
+  useEffect(() => {
+    if (background !== "white") {
+      toWhiteBackground();
+    }
+  }, []);
 
   return (
     <div>
diff --git a/client/src/components/exercise/lab2/Main.js b/client/src/components/exercise/lab2/Main.js
index 13baaa1ed..680f44441 100644
--- a/client/src/components/exercise/lab2/Main.js
+++ b/client/src/components/exercise/lab2/Main.js
@@ -90,6 +90,10 @@ const mapDispatchToProps = (dispatch) => {
     onResetOption: () => dispatch(resetOption()),
     onResetColors: () => dispatch(resetColors()),
     onResetChange: () => dispatch(resetChange()),
+    /*
+      To-DO I do not know how to fix this, but I know by following
+      this dispatch 
+    */
     onCloseInfoPopup: () => dispatch(closeInfoPopup()),
     onOpenAboutPage: () => dispatch(openAboutPage()),
     onCloseAboutPage: () => dispatch(closeAboutPage()),
@@ -260,6 +264,7 @@ class Main extends Component {
     // custom renderer for top of page popup
     // popup occurs after a successful change to the colors in the system
     const renderer = (props) => {
+      console.log(props);
       if (props.total > 0) {
         return (
           <div className="successPopup">
diff --git a/client/src/components/exercise/lab2/components/Repair.js b/client/src/components/exercise/lab2/components/Repair.js
index bc7ec27e2..5adb58afb 100644
--- a/client/src/components/exercise/lab2/components/Repair.js
+++ b/client/src/components/exercise/lab2/components/Repair.js
@@ -5,7 +5,6 @@ import classNames from "classnames/bind";
 import RepairService from "../../../../services/lab2/RepairService";
 import { PhotoshopPicker } from "react-color";
 import RepairUpdateButton from "../../../all-components/RepairUpdateButton";
-// import "../../lab2/home/popup.css";
 
 class Repair extends Component {
   constructor(props) {
@@ -207,6 +206,18 @@ class Repair extends Component {
     this.verifyInput();
   };
 
+  // Run state setting inside a componentDidMount to run without warnings
+  componentDidMount() {
+    if (this.state.background === "") {
+      this.setState({
+        background: this.props.colors[0],
+        correctColor: this.props.colors[1],
+        incorrectColorOne: this.props.colors[2],
+        incorrectColorTwo: this.props.colors[3],
+      });
+    }
+  }
+
   // Renderer for the system
   render() {
     // Opens the background color change popup
@@ -273,14 +284,6 @@ class Repair extends Component {
       this.onControlIncorrectPopupTwo(false);
     };
 
-    if (this.state.background === "") {
-      this.setState({
-        background: this.props.colors[0],
-        correctColor: this.props.colors[1],
-        incorrectColorOne: this.props.colors[2],
-        incorrectColorTwo: this.props.colors[3],
-      });
-    }
     const cssFileClasses = classNames({
       code_editor__file: true,
       "code_editor__file--active": true,
diff --git a/client/src/components/exercise/lab2/components/exercise.js b/client/src/components/exercise/lab2/components/exercise.js
index 16231b40f..6411a9162 100644
--- a/client/src/components/exercise/lab2/components/exercise.js
+++ b/client/src/components/exercise/lab2/components/exercise.js
@@ -19,6 +19,14 @@ class exercise extends Component {
     };
   }
 
+  // Use if in a componentDidMount so it runs without throwing warnings
+  componentDidMount() {
+    // setting state for the start time of the exercise
+    if (this.state.startTime === 0) {
+      this.setState({ startTime: Date.now() });
+    }
+  }
+
   // custom renderer for the class
   render() {
     const {
@@ -41,11 +49,6 @@ class exercise extends Component {
       userID,
     } = this.props;
 
-    // setting state for the start time of the exercise
-    if (this.state.startTime === 0) {
-      this.setState({ startTime: Date.now() });
-    }
-
     // Resets the state time of the exercise zero so the exercise repeats
     const updateTime = () => {
       this.setState({ startTime: 0 });
diff --git a/client/src/components/exercise/lab2/home/Home.js b/client/src/components/exercise/lab2/home/Home.js
index 528a6b5ff..b6f675494 100644
--- a/client/src/components/exercise/lab2/home/Home.js
+++ b/client/src/components/exercise/lab2/home/Home.js
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useEffect } from "react";
 import "./homeStyle.css";
 import Instructions from "../Instructions/instructions";
 import StartExercise from "./startExercise";
@@ -31,13 +31,15 @@ const Home = ({
   ];
 
   // Handles switching the colors to a simulation for a selected exercise option
-  if (exerciseOption !== "default") {
-    onChangeExerciseColors(colors);
-  }
+  useEffect(() => {
+    if (exerciseOption !== "default") {
+      onChangeExerciseColors(colors);
+    }
 
-  if (background === "white") {
-    resetBackground(baseBackground);
-  }
+    if (background === "white") {
+      resetBackground(baseBackground);
+    }
+  }, []);
 
   return (
     <div>
diff --git a/client/src/components/exercise/lab3/components/ExerciseButtons.js b/client/src/components/exercise/lab3/components/ExerciseButtons.js
index b81744670..fc718cc0b 100644
--- a/client/src/components/exercise/lab3/components/ExerciseButtons.js
+++ b/client/src/components/exercise/lab3/components/ExerciseButtons.js
@@ -29,7 +29,7 @@ class ExerciseButtons extends Component {
       <button
         className="btn tw-bg-secondary-gray tw-shadow-md hover:tw-bg-primary-yellow hover:tw-shadow-xl btn-xl text-uppercase"
         onClick={() => navigate("/Lab3/Exercise/BeginnerExerciseConclusion")}
-        key="start"
+        key="end"
         disabled={this.props.disabled}
       >
         End Activity
diff --git a/client/src/components/exercise/lab3/components/Repair.js b/client/src/components/exercise/lab3/components/Repair.js
index 7dddf3990..e5e9be21d 100644
--- a/client/src/components/exercise/lab3/components/Repair.js
+++ b/client/src/components/exercise/lab3/components/Repair.js
@@ -11,21 +11,18 @@ class Repair extends Component {
     super(props);
 
     this.state = {
-      cowAltValue: null,
-      carAltValue: null,
-      burgerAltValue: null,
-      catAltValue: null,
+      cowAltValue: props.cowAltValue,
+      carAltValue: props.carAltValue,
+      burgerAltValue: props.burgerAltValue,
+      catAltValue: props.catAltValue,
       repairError: false,
     };
   }
 
-  componentWillMount() {
+  // ComponentWilMount is deprecated
+  componentDidMount() {
     const { data } = this.props;
     this.setState({
-      cowAltValue: data.cowAltValue,
-      carAltValue: data.carAltValue,
-      burgerAltValue: data.burgerAltValue,
-      catAltValue: data.catAltValue,
       repairError: data.repairError,
     });
   }
@@ -109,6 +106,7 @@ class Repair extends Component {
 
     if (!visible) return null;
 
+    // Removed redundent ___Click() calls from spans
     return (
       <div className="code_editor">
         <div className="code_editor__content">
@@ -185,9 +183,6 @@ class Repair extends Component {
               <span>&nbsp;</span>
               <span className="code_editor__line--green">onClick</span>
               <span className="code_editor__line--white">="</span>
-              <span className="code_editor__line--gold">
-                {() => CatClick() /* eslint-disable-line no-undef */}
-              </span>
               <span className="code_editor__line--white">"</span>
               <span>&nbsp;</span>
               <span className="code_editor__line--green">alt</span>
@@ -237,9 +232,6 @@ class Repair extends Component {
               <span>&nbsp;</span>
               <span className="code_editor__line--green">onClick</span>
               <span className="code_editor__line--white">="</span>
-              <span className="code_editor__line--gold">
-                {() => CarClick() /* eslint-disable-line no-undef */}
-              </span>
               <span className="code_editor__line--white">"</span>
               <span>&nbsp;</span>
               <span className="code_editor__line--green">alt</span>
@@ -301,9 +293,6 @@ class Repair extends Component {
               <span>&nbsp;</span>
               <span className="code_editor__line--green">onClick</span>
               <span className="code_editor__line--white">="</span>
-              <span className="code_editor__line--gold">
-                {() => BurgerClick() /* eslint-disable-line no-undef */}
-              </span>
               <span className="code_editor__line--white">"</span>
               <span>&nbsp;</span>
               <span className="code_editor__line--green">alt</span>
@@ -353,9 +342,6 @@ class Repair extends Component {
               <span>&nbsp;</span>
               <span className="code_editor__line--green">onClick</span>
               <span className="code_editor__line--white">="</span>
-              <span className="code_editor__line--gold">
-                {() => CowClick() /* eslint-disable-line no-undef */}
-              </span>
               <span className="code_editor__line--white">"</span>
               <span>&nbsp;</span>
               <span className="code_editor__line--green">alt</span>
diff --git a/client/src/components/exercise/lab3/pages/BeginnerExercise/UserUpdatedExercise.js b/client/src/components/exercise/lab3/pages/BeginnerExercise/UserUpdatedExercise.js
index f9681f372..315cd8125 100644
--- a/client/src/components/exercise/lab3/pages/BeginnerExercise/UserUpdatedExercise.js
+++ b/client/src/components/exercise/lab3/pages/BeginnerExercise/UserUpdatedExercise.js
@@ -37,9 +37,7 @@ class UserUpdatedExercise extends Component {
   }
 
   handleKeyDown(event) {
-    console.log("detected key code is: " + event.keyCode);
     if (event.keyCode === 27) {
-      console.log("Enter key pressed!");
       navigate("/Lab3/Exercise/AccessibleInstructions");
     }
   }
@@ -65,9 +63,7 @@ class UserUpdatedExercise extends Component {
   }
   setupButtons() {
     const { data } = this.props;
-    console.log("calling setup");
     const catClick = () => {
-      console.log("Cat image clicked!");
       const name = data.repair3.changesApplied
         ? "UserUpdatedExercise"
         : "InaccessibleExercise";
diff --git a/client/src/components/exercise/lab4/components/ExtraNav.jsx b/client/src/components/exercise/lab4/components/ExtraNav.jsx
index 44bc194f6..ca6328b0c 100644
--- a/client/src/components/exercise/lab4/components/ExtraNav.jsx
+++ b/client/src/components/exercise/lab4/components/ExtraNav.jsx
@@ -21,10 +21,7 @@ const ExtraNav = () => {
         light
         expand="md"
       >
-        <NavbarBrand
-          className={"tw-title tw-text-[1.25rem]"}
-          href="javascript:void(0);"
-        >
+        <NavbarBrand className={"tw-title tw-text-[1.25rem]"}>
           Accessibility
         </NavbarBrand>
         <NavbarToggler onClick={toggle} />
diff --git a/client/src/components/exercise/lab4/pages/FormSkipToMainBroken.js b/client/src/components/exercise/lab4/pages/FormSkipToMainBroken.js
index 494cf060c..ea98ab0f0 100644
--- a/client/src/components/exercise/lab4/pages/FormSkipToMainBroken.js
+++ b/client/src/components/exercise/lab4/pages/FormSkipToMainBroken.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Fragment } from "react";
+import React, { useState, useEffect } from "react";
 import AppInstructions from "../components/AppInstructions";
 import ExtraNav from "../components/ExtraNav";
 import FormComp from "../components/FormComp";
@@ -25,7 +25,7 @@ const FormSkipToMainBroken = () => {
   const name = "FormSkipToMainBroken";
 
   return (
-    <Fragment className="tw-z-50">
+    <div className="tw-z-50">
       <ExtraNav />
       <AppInstructions
         className={classState}
@@ -33,7 +33,7 @@ const FormSkipToMainBroken = () => {
         instructions={instructions}
       />
       <FormComp url={url} parentCallback={callbackFunction} name={name} />
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/client/src/components/exercise/lab5/pages/FormResponseActivity/FormGuidance.js b/client/src/components/exercise/lab5/pages/FormResponseActivity/FormGuidance.js
index d495e3435..0b6432581 100644
--- a/client/src/components/exercise/lab5/pages/FormResponseActivity/FormGuidance.js
+++ b/client/src/components/exercise/lab5/pages/FormResponseActivity/FormGuidance.js
@@ -39,7 +39,7 @@ class FormGuidance extends Component {
             </li>
           </ul>
           <p className="lowercontent">
-            Let’s continue on and make the changes. Click <bold>Next</bold>.
+            Let’s continue on and make the changes. Click <strong>Next</strong>.
           </p>
           <div className="tw-flex tw-justify-center">
             <LabButton label={"Next"} onClick={this.handleNav} key="Next" />
diff --git a/client/src/components/exercise/lab5/pages/FormResponseActivity/FormRepair.js b/client/src/components/exercise/lab5/pages/FormResponseActivity/FormRepair.js
index 2ece57f48..cce8f26d4 100644
--- a/client/src/components/exercise/lab5/pages/FormResponseActivity/FormRepair.js
+++ b/client/src/components/exercise/lab5/pages/FormResponseActivity/FormRepair.js
@@ -15,9 +15,9 @@ class FormRepair extends Component {
 
     this.state = {
       errorNotification: null,
-      successNotification: null,
-      borderColor: null,
-      errorNotificationerror: null,
+      successNotification: props.successNotification,
+      borderColor: props.borderColor,
+      errorNotificationerror: props.errorNotification,
       successNotificationerror: null,
       borderColorerror: null,
       repairerror: true,
@@ -25,20 +25,11 @@ class FormRepair extends Component {
     };
   }
 
-  componentWillMount() {
-    const { data } = this.props;
-    this.setState({
-      errorNotification: data.errorNotification,
-      successNotification: data.successNotification,
-      borderColor: data.borderColor,
-    });
-  }
   validateRepair(e) {
     let error = false;
     Object.keys(this.state).map((name) => {
       switch (name) {
         case "errorNotification":
-          console.log(this.state[name]);
           if (
             this.state[name] !== '"Please enter in format: YYYY-MM-DD"' &&
             this.state[name] !== "'Please enter in format: YYYY-MM-DD'"
diff --git a/client/src/components/exercise/lab5/pages/NotificationActivity/NotificationRepair.js b/client/src/components/exercise/lab5/pages/NotificationActivity/NotificationRepair.js
index a00ebe2ab..37a745908 100644
--- a/client/src/components/exercise/lab5/pages/NotificationActivity/NotificationRepair.js
+++ b/client/src/components/exercise/lab5/pages/NotificationActivity/NotificationRepair.js
@@ -16,8 +16,8 @@ class NotificationRepair extends Component {
     super(props);
 
     this.state = {
-      fontsizevalue: null,
-      timeout: null,
+      fontsizevalue: props.fontsizevalue,
+      timeout: props.timeout,
       timeouterror: null,
       fontsizeerror: null,
       repairerror: true,
@@ -25,13 +25,6 @@ class NotificationRepair extends Component {
     };
   }
 
-  componentWillMount() {
-    const { data } = this.props;
-    this.setState({
-      fontsizevalue: data.fontsizevalue,
-      timeout: data.timeout,
-    });
-  }
   validateRepair(e) {
     let error = false;
     Object.keys(this.state).map((name) => {
diff --git a/client/src/components/exercise/lab5/pages/PageLayoutActivity/PageLayoutRepair.js b/client/src/components/exercise/lab5/pages/PageLayoutActivity/PageLayoutRepair.js
index 742023b3e..1d4bb7538 100644
--- a/client/src/components/exercise/lab5/pages/PageLayoutActivity/PageLayoutRepair.js
+++ b/client/src/components/exercise/lab5/pages/PageLayoutActivity/PageLayoutRepair.js
@@ -16,11 +16,11 @@ class PageLayoutRepair extends Component {
     super(props);
 
     this.state = {
-      h1value: null,
-      ulvalue: null,
-      classvalue: null,
-      fontvalue: null,
-      fontfamilyvalue: null,
+      h1value: props.h1value,
+      ulvalue: props.ulvalue,
+      classvalue: props.classvalue,
+      fontvalue: props.fontvalue,
+      fontfamilyvalue: props.fontfamilyvalue,
       h1error: null,
       ulerror: null,
       classerror: null,
@@ -32,16 +32,6 @@ class PageLayoutRepair extends Component {
     // this.validateRepair = this.validateRepair.bind(this)
   }
 
-  componentWillMount() {
-    const { data } = this.props;
-    this.setState({
-      h1value: data.h1value,
-      ulvalue: data.ulvalue,
-      classvalue: data.classvalue,
-      fontvalue: data.fontvalue,
-      fontfamilyvalue: data.fontfamilyvalue,
-    });
-  }
   validateRepair(e) {
     let error = false;
     Object.keys(this.state).map((name) => {
diff --git a/client/src/components/exercise/lab6/components/QuestionsHandler.jsx b/client/src/components/exercise/lab6/components/QuestionsHandler.jsx
index 5820d89c3..51c588873 100644
--- a/client/src/components/exercise/lab6/components/QuestionsHandler.jsx
+++ b/client/src/components/exercise/lab6/components/QuestionsHandler.jsx
@@ -36,6 +36,20 @@ const QuestionsHandler = (props) => {
       onComplete();
     }
   }
+
+  /**
+   * handleBack() is a function that allows the user to
+   * return to the previous question
+   */
+  const handleBack = () => {
+    if (currentQuestionCursor < props.questions.length) {
+      let updateCursor = currentQuestionCursor - 1;
+      setCurrentQuestionCursor(updateCursor);
+      setAnswerOption(props.questions[updateCursor].answers);
+      setDisableNext(true);
+    }
+  };
+
   /**
    * selectAnswer() is a function responsible for recording the
    * behavior in which a user enters in their answer. This function once
@@ -99,6 +113,7 @@ const QuestionsHandler = (props) => {
       multiChoice={questions[currentQuestionCursor].multiChoice}
       multiSelectedEntry={selectMulti}
       nextQuestion={handleNext}
+      lastQuestion={handleBack}
       onAnswerSelected={selectAnswer}
       onComplete={onComplete}
       questionId={currentQuestionCursor + 1}
diff --git a/client/src/components/exercise/lab6/pages/Employer/FavorableHiringCandidate.js b/client/src/components/exercise/lab6/pages/Employer/FavorableHiringCandidate.js
index f1adeeb53..03970c68c 100644
--- a/client/src/components/exercise/lab6/pages/Employer/FavorableHiringCandidate.js
+++ b/client/src/components/exercise/lab6/pages/Employer/FavorableHiringCandidate.js
@@ -83,7 +83,7 @@ const FavorableHiringCandidate = () => {
               <Recomendation aiRecommendation />
             </li>
             <ul htmlFor="applicant" className="candidate__col">
-              <li className="candidate__image_container">
+              <div className="candidate__image_container">
                 <li
                   className="candidate__image"
                   alt="default_img"
@@ -92,7 +92,7 @@ const FavorableHiringCandidate = () => {
                       "url('https://login.vivaldi.net/profile/avatar/default-avatar.png",
                   }}
                 />
-              </li>
+              </div>
               <li className="tw-p-4">Unimportant</li>
               <LongHorizontalLine></LongHorizontalLine>
               <li className="tw-p-4">1-3 years</li>
diff --git a/client/src/components/exercise/lab7/components/Code.js b/client/src/components/exercise/lab7/components/Code.js
index 2aa15f73a..d1b3209aa 100644
--- a/client/src/components/exercise/lab7/components/Code.js
+++ b/client/src/components/exercise/lab7/components/Code.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import RepairService from "../../../../services/lab7/RepairService";
-import { POPUP_DELAY, POPUP_MESSAGES } from "../../../../constants/lab7";
+import { POPUP_MESSAGES } from "../../../../constants/lab7";
 import { useLab7StateContext } from "src/reducers/lab7/Lab7Context";
 import { evaluate } from "mathjs";
 import { FILE_FORMAT_VALIDATION } from "src/constants/lab7/index";
@@ -13,7 +13,6 @@ import RepairUpdateButton from "../../../all-components/RepairUpdateButton";
  */
 const Code = (props) => {
   const { handleCloseRepair } = props;
-  const [timeout, setTimeout] = useState(null);
   const { actions, state } = useLab7StateContext();
   const { componentName } = useState("AICodeRepair");
 
@@ -92,26 +91,6 @@ const Code = (props) => {
     return result;
   };
 
-  /**
-   * Sets the popup message and clears the previous message.
-   * @param {string} message - The new popup message.
-   */
-  const setPopupMessage = (message) => {
-    actions.updatePopup(message);
-    clearPopupMessage();
-  };
-
-  /**
-   * Clears the popup message and resets the repair error.
-   */
-  const clearPopupMessage = () => {
-    clearTimeout(timeout);
-    setTimeout(() => {
-      actions.updatePopup("");
-      actions.updateRepairError(null);
-    }, POPUP_DELAY);
-  };
-
   /**
    * Handles the change event for the reward value input.
    * @param {Event} e - The change event object.
@@ -150,7 +129,6 @@ const Code = (props) => {
         actions.updateCostError(cost.error);
       }
       actions.undoRepairChanges();
-      setPopupMessage("Errors in Repair. Please fix.");
     } else {
       const [rewardValue, costValue] = [reward.value, cost.value];
       RepairService.submitRepair(
@@ -165,7 +143,6 @@ const Code = (props) => {
       actions.updateCostError(null);
       actions.updateRepairEquation(rewardValue, costValue);
       handleCloseRepair();
-      setPopupMessage(POPUP_MESSAGES.SUCCESS);
     }
   };
 
diff --git a/client/src/components/exercise/lab8/pages/DataRepair.js b/client/src/components/exercise/lab8/pages/DataRepair.js
index a16c76bf8..b35df1b43 100644
--- a/client/src/components/exercise/lab8/pages/DataRepair.js
+++ b/client/src/components/exercise/lab8/pages/DataRepair.js
@@ -23,6 +23,10 @@ const DataRepair = () => {
     setCurrentMessages,
     setPolaritiesCorrect,
   } = useContext(ExerciseStateContext);
+  /* 
+    To-Do this would require rewriting this context.
+    Polarity can never be NaN
+  */
 
   /*
     state variables to contain the user's inputted repair values
@@ -308,7 +312,11 @@ const DataRepair = () => {
                               parseInt(e.target.value),
                             );
                           }}
-                          title={message.ai_polarity}
+                          title={
+                            isNaN(message.ai_polarity)
+                              ? -1
+                              : message.ai_polarity
+                          }
                           className={
                             messageError[index] ? "form-error-input" : ""
                           }
diff --git a/client/src/components/exercise/lab9/components/DynamicWebpage.js b/client/src/components/exercise/lab9/components/DynamicWebpage.js
index d633ef901..67bab07ef 100644
--- a/client/src/components/exercise/lab9/components/DynamicWebpage.js
+++ b/client/src/components/exercise/lab9/components/DynamicWebpage.js
@@ -6,9 +6,10 @@ import WebpageNav from "./webpage-subcomponents/WebpageNav";
 import WebpageHeader from "./webpage-subcomponents/WebpageHeader";
 import WebpageSidebar from "./webpage-subcomponents/WebpageSidebar";
 import { ExerciseService } from "../../../../services/lab9/ExerciseService";
-import Button from "src/components/all-components/Navigation/Button";
+// import Button from "src/components/all-components/Navigation/Button";
 import useMainStateContext from "src/reducers/MainContext";
 import { EXERCISE_PLAYING } from "src/constants/index";
+import ALLButton from "src/components/all-components/ALLButton";
 
 /**
  * Webpage is a reusable component used to display
@@ -138,7 +139,9 @@ const Webpage = () => {
           </div>
         </div>
       </div>
-      {isComplete && <Button onClick={handleComplete}>Continue</Button>}
+      {isComplete && (
+        <ALLButton onClick={handleComplete} label={"Continue"}></ALLButton>
+      )}
     </div>
   );
 };
diff --git a/client/src/components/footer/LabFooter.js b/client/src/components/footer/LabFooter.js
index 58883fed3..ca9777022 100644
--- a/client/src/components/footer/LabFooter.js
+++ b/client/src/components/footer/LabFooter.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import "../../assets/stylesheets/components/css/colorPicker.css";
 import { connect } from "react-redux";
 import { actions as mainActions } from "../../reducers/MainReducer";
@@ -47,11 +47,7 @@ const LabFooter = (props) => {
 
   const display =
     getExerciseState(state, props.state) === "EXERCISE_IDLE" || body !== 2;
-
-  useEffect(() => {
-    console.log(display);
-  }, []);
-
+  // Removed useless useEffect hook, that printed true whenever the LabFooter rendered
   return (
     <div className={"tw-z-10 tw-w-full"}>
       {display && (
diff --git a/client/src/components/quiz/components/Question.js b/client/src/components/quiz/components/Question.js
index 5dbd79f35..ff4a04894 100644
--- a/client/src/components/quiz/components/Question.js
+++ b/client/src/components/quiz/components/Question.js
@@ -3,14 +3,14 @@ import PropTypes from "prop-types";
 
 function Question(props) {
   return (
-    <p className="tw-body-text tw-py-6">
+    <div className="tw-body-text tw-py-6">
       {props.content} {props.multi && " Select all that apply."}
-    </p>
+    </div>
   );
 }
 
 Question.propTypes = {
-  content: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   multi: PropTypes.bool.isRequired,
 };
 
diff --git a/client/src/components/quiz/components/Result.js b/client/src/components/quiz/components/Result.js
index b992b950f..57e896120 100644
--- a/client/src/components/quiz/components/Result.js
+++ b/client/src/components/quiz/components/Result.js
@@ -13,9 +13,11 @@ function Result(props) {
   const [viewCertificate, setViewCertificate] = useState(false);
   const openDetails = (questionId) => {
     setDetailsOpen(detailsOpen === questionId ? null : questionId);
-    console.warn(questionId);
   };
 
+  let i = Array.from({ length: 16 }, (_, index) => index + 1);
+  let j = Array.from({ length: 16 }, (_, index) => index + 17);
+
   function checkIfCorrect(answerIndex, questionIndex) {
     let isCorrect;
     props.quizQuestions[questionIndex].answers[answerIndex].val === 1
@@ -63,7 +65,7 @@ function Result(props) {
       }
       return (
         <a
-          key={index}
+          key={index + 100}
           onClick={() => openDetails(index + 1)}
           className={`tw-rounded-lg tw-shadow-md tw-body-text tw-my-2 tw-w-10/12 tw-flex tw-flex-col tw-cursor-pointer tw-border-solid tw-border-[0.5px] tw-border-[#eee] ${detailsOpen === index + 1 && "tw-bg-primary-blue tw-text-white"}`}
         >
@@ -115,7 +117,7 @@ function Result(props) {
         {answers.map(function (answer, index) {
           if (answer["val"] === 1) {
             return (
-              <div key={index}>
+              <div key={index + 1000}>
                 <div
                   className={
                     "tw-flex tw-flex-row tw-px-3 tw-text-left tw-align-top tw-items-center"
@@ -157,22 +159,23 @@ function Result(props) {
   }
 
   function renderTableSelectedAnswersData(selectedAnswers, answers) {
+    // Fix-This I do not know what is going wrong
     if (selectedAnswers instanceof Set) {
       return Array.from(selectedAnswers).map((answer) => {
-        const questionNumber = parseInt(answer) + 1;
+        const questionNumber = i.pop();
         return (
-          <ul>
-            <div key={questionNumber}>{answers[answer]["content"]}</div>
+          <ul key={questionNumber}>
+            {/* Key needs to be at highest level */}
+            <div>{answers[answer]["content"]}</div>
           </ul>
         );
       });
     } else {
-      const questionNumber = parseInt(selectedAnswers.type) + 1;
+      const questionNumber = j.pop();
       return (
-        <ul>
-          <div key={questionNumber}>
-            {answers[selectedAnswers.type]["content"]}
-          </div>
+        <ul key={questionNumber}>
+          {/* Key needs to be at highest level */}
+          <div>{answers[selectedAnswers.type]["content"]}</div>
         </ul>
       );
     }
diff --git a/client/src/pages/EducatorResources/components/ResourceRow.js b/client/src/pages/EducatorResources/components/ResourceRow.js
index 88a86ee3d..a9a3048f9 100644
--- a/client/src/pages/EducatorResources/components/ResourceRow.js
+++ b/client/src/pages/EducatorResources/components/ResourceRow.js
@@ -12,14 +12,20 @@ const ResourceRow = (props) => {
       <div className={"tw-flex xs:tw-flex-col md:tw-flex-row"}>
         <div
           className={
-            "tw-flex tw-flex-col xs:tw-w-full md:tw-w-1/2 tw-gap-3 xs:tw-items-center md:tw-items-start"
+            "tw-flex tw-flex-col tw-space-y-2 xs:tw-w-full md:tw-w-1/2 tw-gap-3 xs:tw-items-center md:tw-items-start"
           }
         >
           <p className={"tw-font-calibri tw-font-extrabold tw-text-xl"}>
             {id ? `Lab ${id}:` : ""} {title}
           </p>
+          <hr // Moved out of p-tag and added styling to make it display similar to before
+            style={{
+              clear: "both",
+              display: "block",
+              width: "100%",
+            }}
+          />
           <p className="tw-body-text tw-text-justify tw-leading-normal">
-            <hr />
             {description}
           </p>
           {slides && !slides.includes(COMING_SOON) && (
diff --git a/client/src/pages/about-us/MemberDisplay.js b/client/src/pages/about-us/MemberDisplay.js
index d092c0ba0..8b66c4f42 100644
--- a/client/src/pages/about-us/MemberDisplay.js
+++ b/client/src/pages/about-us/MemberDisplay.js
@@ -153,15 +153,18 @@ const MemberDisplay = (props) => {
                 <h4 className="tw-m-0 tw-mb-3 tw-font-bold tw-sub-title">
                   Lab Credits
                 </h4>
-                <p className="tw-pb-3">
+                <div className="tw-pb-3">
                   {labCredits.map((lab) => {
                     return (
-                      <p className="tw-body-text tw-leading-snug" key={lab.id}>
+                      <p
+                        className="tw-body-text tw-leading-snug"
+                        key={labCredits.indexOf(lab)}
+                      >
                         {lab}
                       </p>
                     );
                   })}
-                </p>
+                </div>
               </div>
             )}
           </div>
diff --git a/client/src/reducers/lab2/actions.js b/client/src/reducers/lab2/actions.js
index d51062c76..1c0106ddc 100644
--- a/client/src/reducers/lab2/actions.js
+++ b/client/src/reducers/lab2/actions.js
@@ -106,6 +106,10 @@ export const login = (user) => ({
 Used to declare changes have not been made to the system to cause the rerender
 */
 export const resetChange = () => ({
+  /*
+    This is where something goes wrong,
+    but I cannot find the setState anywhere
+  */
   type: CHANGED_RESET,
 });