diff --git a/README.md b/README.md
index b22074552..3ba691e45 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ the correct env for client and server. after thats complete then you can follow
 ### Developing Locally
 
 To develop on the full architecture developers can now utilize the ability to run the full system without
-needing to ssh into another server. To do this users are required to install [Docker](https://www.docker.com/) to perform this task.
+needing to ssh into another server. To do this users are required to install the **latest version** of [Docker](https://www.docker.com/) to perform this task.
 in doing so they are able to run.
 
 To start the database container
diff --git a/client/package-lock.json b/client/package-lock.json
index 227b5bd98..5552af06e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -7985,25 +7985,6 @@
         "lodash.uniq": "^4.5.0"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001600",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
-      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
diff --git a/client/src/assets/stylesheets/main.css b/client/src/assets/stylesheets/main.css
index eb1cd432c..c45307891 100644
--- a/client/src/assets/stylesheets/main.css
+++ b/client/src/assets/stylesheets/main.css
@@ -2,6 +2,7 @@
 @import url("https://fonts.googleapis.com/css?family=Kaushan+Script");
 @tailwind components;
 @tailwind utilities;
+
 html {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -109,6 +110,7 @@ body {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
+
   50% {
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
@@ -121,6 +123,7 @@ body {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
+
   50% {
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
@@ -131,7 +134,8 @@ body {
   --yellow-text: #fed136;
   --blue-text: #0144d5;
   --white-text: #fff;
-  --light-blue-text: #bed2fe; /** this is the color that changes white text based on the color picker */
+  --light-blue-text: #bed2fe;
+  /** this is the color that changes white text based on the color picker */
 }
 
 ul {
@@ -277,6 +281,7 @@ li {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
@@ -288,6 +293,7 @@ li {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
@@ -433,15 +439,19 @@ li {
   0% {
     opacity: 0;
   }
+
   4% {
     opacity: 1;
   }
+
   33.33% {
     opacity: 1;
   }
+
   37.33% {
     opacity: 0;
   }
+
   100% {
     opacity: 0;
   }
@@ -451,15 +461,19 @@ li {
   0% {
     opacity: 0;
   }
+
   4% {
     opacity: 1;
   }
+
   33.33% {
     opacity: 1;
   }
+
   37.33% {
     opacity: 0;
   }
+
   100% {
     opacity: 0;
   }
@@ -970,14 +984,17 @@ a.icon:hover {
     min-width: 450px;
     max-width: 480px;
   }
+
   .module__image {
     border-radius: 20px 0 0 20px;
   }
+
   .module__profile_image {
     height: 175px;
     width: 175px;
     background-size: 200px;
   }
+
   .module__lab_image {
     height: 18rem;
     width: 175px;
@@ -988,11 +1005,13 @@ a.icon:hover {
   .module__image {
     border-radius: 20px 20px 0 0;
   }
+
   .module__profile_image {
     width: 300px;
     height: 300px;
     background-size: 300px;
   }
+
   .module__lab_image {
     height: 10rem;
     width: 20.6rem;
@@ -1186,6 +1205,7 @@ a.icon:hover {
 
 .btn {
   font-family:
+    Calibri-light,
     Montserrat,
     -apple-system,
     BlinkMacSystemFont,
@@ -1810,10 +1830,12 @@ ul.social-buttons li a:hover {
   section {
     padding: 150px 0;
   }
+
   header.masthead .intro-text {
     padding-top: 300px;
     padding-bottom: 200px;
   }
+
   header.masthead .intro-text .intro-lead-in {
     font-size: 40px;
     font-style: italic;
@@ -1833,6 +1855,7 @@ ul.social-buttons li a:hover {
       "Segoe UI Symbol",
       "Noto Color Emoji";
   }
+
   header.masthead .intro-text .intro-heading {
     font-size: 75px;
     font-weight: 700;
@@ -1852,30 +1875,36 @@ ul.social-buttons li a:hover {
       "Segoe UI Symbol",
       "Noto Color Emoji";
   }
+
   .timeline:before {
     left: 50%;
   }
+
   .timeline > li {
     min-height: 100px;
     margin-bottom: 100px;
   }
+
   .timeline > li .timeline-panel {
     float: left;
     width: 41%;
     padding: 0 20px 20px 30px;
     text-align: right;
   }
+
   .timeline > li .timeline-image {
     left: 50%;
     width: 100px;
     height: 100px;
     margin-left: -50px;
   }
+
   .timeline > li .timeline-image h4 {
     font-size: 13px;
     line-height: 18px;
     margin-top: 16px;
   }
+
   .timeline > li.timeline-inverted > .timeline-panel {
     float: right;
     padding: 0 30px 20px 20px;
@@ -1895,39 +1924,48 @@ ul.social-buttons li a:hover {
     border: none;
     background-color: transparent;
   }
+
   #mainNav .navbar-brand {
     font-size: 1.75em;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
   }
+
   #mainNav .navbar-nav .nav-item .nav-link {
     padding: 1.1em 1em !important;
   }
+
   #mainNav.navbar-shrink {
     padding-top: 0;
     padding-bottom: 0;
     background-color: #212529;
   }
+
   #mainNav.navbar-shrink .navbar-brand {
     font-size: 1.25em;
     padding: 12px 0;
   }
+
   .timeline > li {
     min-height: 150px;
   }
+
   .timeline > li .timeline-panel {
     padding: 0 20px 20px;
   }
+
   .timeline > li .timeline-image {
     width: 150px;
     height: 150px;
     margin-left: -75px;
   }
+
   .timeline > li .timeline-image h4 {
     font-size: 18px;
     line-height: 26px;
     margin-top: 30px;
   }
+
   .timeline > li.timeline-inverted > .timeline-panel {
     padding: 0 20px 20px;
   }
@@ -1943,17 +1981,21 @@ ul.social-buttons li a:hover {
   .timeline > li {
     min-height: 170px;
   }
+
   .timeline > li .timeline-panel {
     padding: 0 20px 20px 100px;
   }
+
   .timeline > li .timeline-image {
     width: 170px;
     height: 170px;
     margin-left: -85px;
   }
+
   .timeline > li .timeline-image h4 {
     margin-top: 40px;
   }
+
   .timeline > li.timeline-inverted > .timeline-panel {
     padding: 0 100px 20px 20px;
   }
@@ -3776,4 +3818,5 @@ a.skip-main:active {
   display: flex;
   float: right;
 }
+
 /*# sourceMappingURL=main.css.map */
diff --git a/client/src/components/footer/footer.js b/client/src/components/footer/footer.js
index f3111bb76..a4bb5dec7 100644
--- a/client/src/components/footer/footer.js
+++ b/client/src/components/footer/footer.js
@@ -1,8 +1,6 @@
-/* eslint-disable camelcase */
-/* eslint-disable react/prop-types */
-/* eslint-disable require-jsdoc */
 import React, { Component } from "react";
 import "../../assets/stylesheets/components/css/colorPicker.css";
+import { Panel as ColorPickerPanel } from "rc-color-picker";
 import { connect } from "react-redux";
 import { actions as appActions } from "../../reducers/lab1/AppReducer";
 import { actions as mainActions } from "../../reducers/MainReducer";
@@ -13,11 +11,10 @@ import {
   setBackgroundColor,
   onNextPageChangeTSize,
 } from "./edit/editPage";
-import { Panel as ColorPickerPanel } from "rc-color-picker";
-import { Sections } from "../../constants/index";
 import handleRedirect from "../../helpers/Redirect";
 import getExerciseState from "../../helpers/GetReducer";
 import { navigate } from "@reach/router";
+import PropTypes from "prop-types";
 
 const mapStateToProps = (state) => {
   return {
@@ -181,21 +178,19 @@ class Footer extends Component {
             </div>
           )}
           <div
-            className="tw-relative container"
+            className="tw-flex tw-justify-between tw-mx-8"
             style={{ display: display ? "block" : "none" }}
           >
             <button
-              className="btn tw-bg-labLightGray btn-xl text-uppercase back "
+              className="btn tw-w-32 tw-h-16 tw-bg-white tw-font-medium tw-rounded-none tw-rounded-bl-md tw-border-solid tw-border-l-8 tw-border-b-8 tw-border-r-0 tw-border-t-0 tw-border-labYellow"
               onClick={() => handleRedirect(actions, lab, body - 1)}
               style={{
-                display:
-                  this.disappearBack(body) || hideOnLanding ? "none" : "block",
+                opacity: this.disappearBack(body) || hideOnLanding ? "0" : "1",
+                pointerEvents:
+                  this.disappearBack(body) || hideOnLanding ? "none" : "auto",
               }}
             >
-              Previous -{" "}
-              {body > 0 && typeof Sections[lab][body - 1] !== "undefined"
-                ? Sections[lab][body - 1].name
-                : ""}
+              BACK
             </button>
 
             {body === 4 && quizCompleted ? (
@@ -213,84 +208,19 @@ class Footer extends Component {
                 Return to Home
               </button>
             ) : (
-              <div>
-                <button
-                  className="btn tw-bg-labLightGray btn-xl text-uppercase next"
-                  onClick={() => handleRedirect(actions, lab, body + 1)}
-                  style={{
-                    display:
-                      this.disappearNext(body) || hideOnLanding
-                        ? "none"
-                        : "block",
-                  }}
-                >
-                  Next -{" "}
-                  {body < 4 && typeof Sections[lab][body + 1] !== "undefined"
-                    ? Sections[lab][body + 1].name
-                    : ""}
-                </button>
-              </div>
-            )}
-
-            <div className="btn-change">
-              <button
-                className="btn-text btn btn-bottom-buttons text-uppercase"
-                alt="Increase text size"
-                title="Larger text"
-                onClick={() => this.changeSize(1)}
-              >
-                Text+
-              </button>
-              <button
-                className="btn-text btn btn-bottom-buttons text-uppercase"
-                alt="Decrease text size"
-                title="Smaller text"
-                onClick={() => this.changeSize(-1)}
-              >
-                Text-
-              </button>
               <button
-                id="changeTextColor"
-                className="btn btn-text btn-bottom-buttons text-uppercase"
-                onClick={this.renderTextColorPalette}
-              >
-                Change Text Color
-              </button>
-
-              <button
-                id="changeBackgroundColor"
-                className="btn btn-text btn-bottom-buttons text-uppercase"
-                onClick={this.renderBgColorPalette}
+                className="btn tw-w-32 tw-h-16 tw-bg-white tw-font-medium tw-rounded-none tw-rounded-tr-md tw-border-solid tw-border-l-0 tw-border-b-0 tw-border-r-8 tw-border-t-8 tw-border-labBlue"
+                onClick={() => handleRedirect(actions, lab, body + 1)}
+                style={{
+                  display:
+                    this.disappearNext(body) || hideOnLanding
+                      ? "none"
+                      : "block",
+                }}
               >
-                Change Background Color
+                NEXT
               </button>
-              {this.state.textColor && (
-                <div
-                  id="text-panel"
-                  className="div-style-text"
-                  style={{
-                    display: this.state.textColor === true ? "block" : "none",
-                  }}
-                >
-                  <ColorPickerPanel
-                    enableAlpha={false}
-                    defaultColor={"#345679"}
-                    color={this.state.color}
-                    onChange={this.OnTextColorChange.bind(this)}
-                  />
-                </div>
-              )}
-              {this.state.bgColor && (
-                <div id="bg-panel" className="div-style-bgColor">
-                  <ColorPickerPanel
-                    enableAlpha={false}
-                    defaultColor={"#345679"}
-                    color={this.state.backgroundColor}
-                    onChange={this.OnBgColorChange.bind(this)}
-                  />
-                </div>
-              )}
-            </div>
+            )}
           </div>
           <div
             className="container"
@@ -301,6 +231,65 @@ class Footer extends Component {
               disabled until the exercise is complete.
             </div>
           </div>
+          <div className="btn-change">
+            <button
+              className="btn-text btn btn-bottom-buttons text-uppercase"
+              alt="Increase text size"
+              title="Larger text"
+              onClick={() => this.changeSize(1)}
+            >
+              Text+
+            </button>
+            <button
+              className="btn-text btn btn-bottom-buttons text-uppercase"
+              alt="Decrease text size"
+              title="Smaller text"
+              onClick={() => this.changeSize(-1)}
+            >
+              Text-
+            </button>
+            <button
+              id="changeTextColor"
+              className="btn btn-text btn-bottom-buttons text-uppercase"
+              onClick={this.renderTextColorPalette}
+            >
+              Change Text Color
+            </button>
+
+            <button
+              id="changeBackgroundColor"
+              className="btn btn-text btn-bottom-buttons text-uppercase"
+              onClick={this.renderBgColorPalette}
+            >
+              Change Background Color
+            </button>
+            {this.state.textColor && (
+              <div
+                id="text-panel"
+                className="div-style-text"
+                style={{
+                  display: this.state.textColor === true ? "block" : "none",
+                }}
+              >
+                <ColorPickerPanel
+                  enableAlpha={false}
+                  defaultColor={"#345679"}
+                  color={this.state.color}
+                  onChange={this.OnTextColorChange.bind(this)}
+                />
+              </div>
+            )}
+            {this.state.bgColor && (
+              <div id="bg-panel" className="div-style-bgColor">
+                <ColorPickerPanel
+                  enableAlpha={false}
+                  defaultColor={"#345679"}
+                  color={this.state.backgroundColor}
+                  onChange={this.OnBgColorChange.bind(this)}
+                />
+              </div>
+            )}
+          </div>
         </div>
         <div className="footer" />
       </>
@@ -308,4 +297,19 @@ class Footer extends Component {
   }
 }
 
+Footer.propTypes = {
+  state: PropTypes.string,
+  context: PropTypes.shape({
+    state: PropTypes.shape({
+      main: PropTypes.shape({
+        body: PropTypes.number,
+        lab: PropTypes.number,
+      }),
+    }),
+    actions: PropTypes.shape({}),
+  }),
+  quizCompleted: PropTypes.bool,
+  setQuizCompleted: PropTypes.func,
+};
+
 export default connect(mapStateToProps, mapDispatchToProps)(Footer);
diff --git a/server/database/schema.sql b/server/database/schema.sql
index 4fe24b1a4..fd302f0b4 100644
--- a/server/database/schema.sql
+++ b/server/database/schema.sql
@@ -1574,12 +1574,12 @@ INSERT INTO public.labs (id, "labName", "labShortName", category, "thumbnailImag
                 "link":"https://www.aclu.org/cases/aclu-v-clearview-ai"
             },
             {
-                "name":"Using AI as a Weapon?",
-                "link":"https://www.nytimes.com/2019/06/13/us/aclu-surveillance-artificial-intelligence.html"
+                "name":"Risk of AI in Weapons",
+                "link":"https://hms.harvard.edu/news/risks-artificial-intelligence-weapons-design"
             },
             {
-                "name":"More",
-                "link":"https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html?searchResultPosition=1"
+                "name":"Privacy",
+                "link":"https://cybersecurity.illinois.edu/policies-governance/privacy-considerations-for-generative-ai/"
             }
         ]
     }
diff --git a/server/package-lock.json b/server/package-lock.json
index d3e0cbae0..641089ddf 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -16,7 +16,6 @@
         "dotenv": "^16.4.5",
         "express": "^4.18.2",
         "express-session": "^1.17.3",
-        "nanoid": "^5.0.7",
         "passport": "^0.7.0",
         "passport-google-oauth20": "^2.0.0",
         "pg": "^8.11.1",
@@ -25,8 +24,7 @@
       "devDependencies": {
         "eslint": "^8.45.0",
         "eslint-config-google": "^0.14.0",
-        "jest": "^29.7.0",
-        "nanoid": "^5.0.7"
+        "jest": "^29.7.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4087,24 +4085,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/nanoid": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
-      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
diff --git a/server/package.json b/server/package.json
index 8e0b301e8..dd6fd5ea7 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,7 +16,6 @@
     "dotenv": "^16.4.5",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
-    "nanoid": "^5.0.7",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0",
     "pg": "^8.11.1",
@@ -25,7 +24,6 @@
   "devDependencies": {
     "eslint": "^8.45.0",
     "eslint-config-google": "^0.14.0",
-    "jest": "^29.7.0",
-    "nanoid": "^5.0.7"
+    "jest": "^29.7.0"
   }
 }