diff --git a/frontend/about.html b/frontend/about.html
index eec3ab7..b875976 100644
--- a/frontend/about.html
+++ b/frontend/about.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -64,7 +69,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
diff --git a/frontend/adminLogin.html b/frontend/adminLogin.html
index 086e070..ed31083 100644
--- a/frontend/adminLogin.html
+++ b/frontend/adminLogin.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -64,7 +69,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
@@ -102,7 +107,7 @@ <h1>Admin Login</h1>
             </form>
           </div>
           <!-- Sign Up Link Outside Card -->
-          <p class="mt-3">
+          <p class="mt-5">
             New here? <a href="./signup.html">Sign up</a> to join FallSafe!
           </p>
           <p><a href="./login.html">Back</a></p>
diff --git a/frontend/css/login.css b/frontend/css/login.css
index be70ddf..4adf9f9 100644
--- a/frontend/css/login.css
+++ b/frontend/css/login.css
@@ -1,5 +1,5 @@
 .card {
-  margin-top: 60px !important;
+  margin-top: 35px !important;
 }
 
 #userBadge,
diff --git a/frontend/css/signUp.css b/frontend/css/signUp.css
new file mode 100644
index 0000000..f1296c1
--- /dev/null
+++ b/frontend/css/signUp.css
@@ -0,0 +1,63 @@
+.step-container {
+    display: none;
+  }
+  .step-container.active {
+    display: block;
+  }
+  .steps-progress {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+  .step-indicator {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #e9ecef;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+  }
+  .step-indicator.active {
+    background-color: #0d6efd;
+    color: white;
+  }
+  .step-indicator.completed {
+    background-color: #198754;
+    color: white;
+  }
+  .step-connector {
+    flex-grow: 1;
+    height: 3px;
+    background-color: #e9ecef;
+    margin: auto 10px;
+  }
+  .step-connector.active {
+    background-color: #198754;
+  }
+  .form-error {
+    color: #dc3545;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    display: none;
+  }
+
+  .btn-success {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background-color: #28a745 !important; /* Updated background color */
+    color: white !important; /* Ensures text color is white */
+    font-weight: 600 !important;
+    border: none !important;
+    padding: 15px 35px !important;
+    font-size: 1.1rem !important;
+    border-radius: 50px !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+    transition: var(--transition) !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 597aca5..9e151be 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -3,207 +3,247 @@
   --dark-blue-hover: rgb(0, 41, 123);
   --white: #ffffff;
   --shadow-colour: rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
 }
 
 body {
-  font-family: Arial, sans-serif !important;
-  font-size: 18px !important; /* Increase base font size */
-  line-height: 1.6 !important; /* Add better line height for readability */
+  font-family: 'Poppins', Arial, sans-serif !important;
+  font-size: 16px !important;
+  line-height: 1.6 !important;
+  overflow-x: hidden;
 }
 
 .navbar {
-  background-color: var(--white) !important; /* White background for navbar */
-  box-shadow: 0 4px 6px var(--shadow-colour) !important; /* Subtle shadow at the bottom */
+  background-color: var(--white) !important;
+  box-shadow: 0 2px 10px var(--shadow-colour) !important;
+  padding: 15px 0 !important;
+  transition: var(--transition);
 }
 
-.nav-link {
-  margin-right: 20px;
-}
-
-/* Primary buttons with dark blue colour scheme and bold text */
-.btn-primary {
-  display: flex !important; /* Enable flexbox */
-  align-items: center !important; /* Center content vertically */
-  justify-content: center !important; /* Center content horizontally */
-  background-color: var(--dark-blue) !important; /* Dark blue background */
-  color: var(--white) !important; /* White text */
-  font-weight: bold !important; /* Bold text */
-  border: none !important; /* Remove borders */
-  padding: 25px 55px !important; /* Add bigger padding */
-  font-size: 1.3rem !important; /* Increase font size */
-  border-radius: 8px !important; /* More rounded corners */
-  cursor: pointer !important; /* Pointer cursor on hover */
-}
-
-.fas,
-.fab {
-  font-size: 2rem !important;
-  margin-right: 30px !important;
-}
-
-.btn-primary:hover {
-  background-color: var(
-    --dark-blue-hover
-  ) !important; /* Slightly darker dark blue on hover */
+.navbar-brand img {
+  transition: var(--transition);
 }
 
-/* Outline version of primary button with dark blue scheme */
-.btn-primary-outline {
-  display: flex !important; /* Enable flexbox */
-  align-items: center !important; /* Center content vertically */
-  justify-content: center !important; /* Center content horizontally */
-  background-color: transparent !important; /* Transparent background */
-  color: var(--dark-blue) !important; /* Dark blue text */
-  font-weight: bold !important; /* Bold text */
-  border: 2px solid var(--dark-blue) !important; /* Thicker border */
-  padding: 12px 24px !important; /* Add bigger padding */
-  font-size: 1.2rem !important; /* Increase font size */
-  border-radius: 8px !important; /* More rounded corners */
-  cursor: pointer !important; /* Pointer cursor on hover */
+.nav-link {
+  margin-right: 20px;
+  font-size: 1.1rem !important;
+  font-weight: 500 !important;
+  transition: var(--transition);
 }
 
-.btn-primary-outline:hover {
-  background-color: var(
-    --dark-blue
-  ) !important; /* Dark blue background on hover */
-  color: var(--white) !important; /* White text on hover */
-  border-color: var(
-    --dark-blue-hover
-  ) !important; /* Slightly darker dark blue border on hover */
-  text-decoration: none !important;
+.nav-link:hover {
+  color: var(--dark-blue) !important;
 }
 
-/* Text primary with dark blue scheme */
-.text-primary {
-  color: var(--dark-blue) !important; /* Dark blue text */
-  font-weight: bold !important; /* Bold text */
-  font-size: 1.2rem !important; /* Increase font size */
+/* Hero section styles */
+.hero-section {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding-top: 70px;
 }
 
-.text-primary:hover {
-  color: var(
-    --dark-blue-hover
-  ) !important; /* Slightly darker dark blue on hover */
+.carousel-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
 
-/* Headings (h1, h2, h3) with dark blue colour scheme and bold text */
-h1,
-h2,
-h3 {
-  color: var(--dark-blue) !important; /* Dark blue text colour */
-  font-weight: bold !important; /* Bold text */
+.carousel-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 51, 153, 0.7);
+  z-index: 1;
 }
 
-h1 {
-  font-size: 2.5rem !important; /* Bigger size for h1 */
+.carousel-item {
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
 }
 
-h2 {
-  font-size: 2rem !important; /* Bigger size for h2 */
+.hero-content {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  color: var(--white);
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
-h3 {
-  font-size: 1.8rem !important; /* Bigger size for h3 */
+.hero-content h1 {
+  color: var(--white) !important;
+  font-size: 3.5rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 20px;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeUp 1s forwards 0.3s;
 }
 
-/* Paragraphs with increased font size */
-p {
-  font-size: 1.5rem !important; /* Larger paragraph text */
-  line-height: 1.8 !important; /* More spacing between lines */
+.hero-content p {
+  color: var(--white) !important;
+  font-size: 1.3rem !important;
+  margin-bottom: 30px;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeUp 1s forwards 0.6s;
 }
 
-/* Links (a) with dark blue colour scheme and bold text */
-a {
-  color: var(--dark-blue) !important; /* Dark blue text */
-  font-weight: bold !important; /* Bold text */
-  font-size: 1.7rem !important; /* Increase font size */
-  text-decoration: none !important; /* Remove underline */
+@keyframes fadeUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-a:hover {
-  color: var(
-    --dark-blue-hover
-  ) !important; /* Slightly darker dark blue on hover */
-  text-decoration: none !important; /* Remove underline */
+/* Primary buttons */
+.btn-primary {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background-color: var(--white) !important;
+  color: var(--dark-blue) !important;
+  font-weight: 600 !important;
+  border: none !important;
+  padding: 15px 35px !important;
+  font-size: 1.1rem !important;
+  border-radius: 50px !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+  transition: var(--transition) !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-/* Lists with increased font size */
-ul,
-ol {
-  font-size: 1.7rem !important; /* Larger text for list items */
-  line-height: 1.8 !important; /* Add spacing for readability */
+.btn-primary:hover {
+  background-color: var(--dark-blue-hover) !important;
+  color: var(--white) !important;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
 }
 
-/* Form inputs with larger font sizes */
-input,
-textarea,
-select {
-  font-size: 1.7rem !important; /* Increase input font size */
-  padding: 10px !important; /* Add padding for better usability */
+.btn-primary-outline {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background-color: transparent !important;
+  color: var(--dark-blue) !important;
+  font-weight: 600 !important;
+  border: 2px solid var(--dark-blue) !important;
+  padding: 12px 30px !important;
+  font-size: 1.1rem !important;
+  border-radius: 50px !important;
+  transition: var(--transition) !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-label {
-  font-size: 1.7rem !important; /* Larger text for labels */
-  font-weight: bold !important; /* Make labels bold */
+.btn-primary-outline:hover {
+  background-color: var(--dark-blue) !important;
+  color: var(--white) !important;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
+  text-decoration: none !important;
 }
 
-/* Beautify Google Translate Dropdown */
-body > .skiptranslate :first-child {
-  display: none;
-}
-#google_translate_element .goog-te-gadget-simple {
-  background: #f8f9fa; /* Light Gray Background */
-  color: #333; /* Dark Text */
-  border: 1px solid #ddd; /* Subtle Border */
-  padding: 10px 15px;
-  border-radius: 8px; /* Softer Rounded Corners */
-  font-size: 16px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  transition: all 0.3s ease-in-out;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+.fas, .fab {
+  font-size: 1.3rem !important;
+  margin-right: 12px !important;
 }
 
-#google_translate_element .goog-te-gadget-simple:hover {
-  background: #e9ecef; /* Slightly Darker Gray on Hover */
-  border-color: #ccc;
+/* Section styling */
+.section {
+  padding: 80px 0;
 }
 
-#google_translate_element .goog-te-gadget-simple img {
-  display: none; /* Hide default Google Translate icon */
+.section-title {
+  color: var(--dark-blue) !important;
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 40px;
+  text-align: center;
 }
 
-#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed {
-  color: #333 !important;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
+/* Content styling */
+h1, h2, h3 {
+  color: var(--dark-blue) !important;
+  font-weight: 700 !important;
 }
 
-#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed span:first-child {
-  margin-right: 10px; /* Adjust the value as needed */
+h1 {
+  font-size: 2.5rem !important;
 }
 
-#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed span {
-  font-size: 16px;
-  margin-right: 5px;
+h2 {
+  font-size: 2rem !important;
 }
 
-#google_translate_element
-  .VIpgJd-ZVi9od-xl07Ob-lTBxed
-  span[aria-hidden="true"] {
-  font-size: 14px;
-  margin-left: 5px;
-  color: #666; /* Soft Gray Dropdown Icon */
+h3 {
+  font-size: 1.5rem !important;
 }
 
-#google_translate_element > .skiptranslate,
-#google_translate_element .VIpgJd-ZVi9od-ORHb-OEVmcd {
-  display: block !important;
-  visibility: visible !important;
-  pointer-events: auto !important;
-}
+p {
+  font-size: 1.1rem !important;
+  line-height: 1.7 !important;
+  color: #555 !important;
+}
+
+
+/* Footer styling */
+footer {
+  background-color: #f8f9fa;
+  margin-top: 60px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-content h1 {
+    font-size: 2.5rem !important;
+  }
+  
+  .hero-content p {
+    font-size: 1.1rem !important;
+  }
+  
+  .section {
+    padding: 60px 0;
+  }
+  
+  .section-title {
+    font-size: 2rem !important;
+  }
+  
+  .content-card {
+    padding: 30px;
+  }
+}
+
+@media (max-width: 576px) {
+  .hero-content h1 {
+    font-size: 2rem !important;
+  }
+  
+  .btn-primary, .btn-primary-outline {
+    padding: 12px 25px !important;
+    font-size: 1rem !important;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease forwards;
+}
\ No newline at end of file
diff --git a/frontend/css/userFES.css b/frontend/css/userFES.css
index 8e14dd6..d0acbd2 100644
--- a/frontend/css/userFES.css
+++ b/frontend/css/userFES.css
@@ -1,73 +1,213 @@
-.indicator {
-  padding: 5px;
-  border-radius: 3px;
-  margin-top: 5px;
-  font-size: 20px;
+/* Base styles from the inline styles */
+body {
+  background-color: white;
+  font-family: 'Poppins', sans-serif;
+}
+
+.start-screen {
+  background-color: white;
+  border-radius: 16px;
+  margin-bottom: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.start-screen h1 {
+  color: #1a56db;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.start-content {
+  text-align: left;
+  padding: 2rem;
+  background-color: #f8f9fa;
+  border-radius: 10px;
+}
+
+.lead {
+  font-weight: 400;
+  color: #4b5563;
+  margin-bottom: 2rem;
+}
+
+.info-box, 
+.recommendation-box {
+  background-color: #f0f5ff;
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-left: 4px solid #1a56db;
+}
+
+.info-box {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px solid #dee2e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.info-box h3 {
+  color: #1a56db;
+  font-weight: 600;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
   text-align: center;
-  color: white;
 }
 
-.option {
-  width: 22%;
+/* Better timer display on all screen sizes */
+.timer {
   display: flex;
-  align-items: center;
+  gap: 1.5rem;
   justify-content: center;
+  margin-top: 0.75rem;
+  font-size: 1.25rem;
+  color: #4a5568;
+}
+
+.timer div {
+  display: flex;
   flex-direction: column;
+  align-items: center;
+  min-width: 70px;
 }
-.option > label,
-input {
-  cursor: pointer !important;
+
+.timer span {
+  font-weight: 700;
+  font-size: 2rem;
+  color: #1a56db;
+  display: block;
+  margin-bottom: 0.25rem;
 }
-.question {
-  padding: 10px 0; /* Increased vertical space for each question */
-  margin-bottom: 40px;
-  font-size: 1.2rem;
-  margin-bottom: 80px !important;
+
+#last-assessment-info {
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
 }
 
-.question p {
-  margin-bottom: 15px;
+#months-days-ago {
+  color: #718096;
+  font-style: italic;
+  margin-left: 0.5rem;
 }
 
-input[type="radio"] {
-  display: none;
+.countdown {
+  margin-top: 1.25rem;
+  padding: 1rem;
+  background-color: #f7fafc;
+  border-radius: 8px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.options {
-  display: flex;
-  justify-content: space-evenly;
+.countdown p {
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  color: #4a5568;
 }
 
-.options .option {
-  padding: 10px;
-  font-size: 1.1rem;
+.recommendation-box {
+  background-color: #e7f3ff;
+  padding: 1.5rem;
+  border-radius: 8px;
+  border-left: 4px solid #0d6efd;
+  margin-bottom: 1.5rem;
 }
 
-.language-selector {
+.recommendation-box p {
+  font-weight: 500;
+}
+
+.recommendation-box ul {
+  margin-top: 0.75rem;
+  margin-bottom: 0;
+}
+
+.recommendation-box li {
+  margin-bottom: 0.5rem;
   position: relative;
-  padding-bottom: 50px; /* Ensure enough space for the dropdown */
-  padding-top: 70px;
 }
 
-label {
-  font-size: 1.7rem !important; /* Larger text for labels */
-  font-weight: normal !important; /* Make labels bold */
+.recommendation ul {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.btn {
+  padding: 0.75rem 2rem;
+  border-radius: 50px;
+  font-weight: 500;
+}
+
+.btn-primary {
+  background-color: #1a56db;
+  border-color: #1a56db;
+  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2);
+}
+
+.btn-primary:hover {
+  background-color: #1540a1;
+  border-color: #1540a1;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.3);
+}
+
+#start-button {
+  width: 100%;
+  margin-top: 2rem;
+  padding: 1rem;
+  font-size: 1.2rem;
+}
+
+#questions-screen {
+  padding: 2.5rem;
+}
+
+#questions-screen h2 {
+  color: #1a56db;
+  font-weight: 600;
+  margin-bottom: 2rem;
+}
+
+/* Question styles */
+.question {
+  padding: 10px 0;
+  margin-bottom: 80px !important;
+  font-size: 1.2rem;
+}
+
+.question p {
+  margin-bottom: 15px;
 }
 
 .question-title {
   font-weight: bold;
 }
 
-input[type="radio"] {
-  display: none;
+/* Options and Selection styles */
+.options {
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .option {
+  width: 22%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
   padding: 10px;
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
 
+.option > label,
+.option input {
+  cursor: pointer !important;
+}
+
 .option label {
   display: flex;
   flex-direction: column;
@@ -78,68 +218,146 @@ input[type="radio"] {
   text-align: center;
   border-radius: 5px;
   transition: background-color 0.3s ease;
+  font-size: 1.7rem !important;
+  font-weight: normal !important;
+}
+
+input[type="radio"] {
+  display: none;
 }
 
 /* When selected, change the background to blue */
 .option.selected {
-  background-color: #5c5afc;
+  background-color: #1540a1;
   color: white;
 }
 
-.start-screen {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
+/* Progress indicator */
+.progress-indicators {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
 }
 
-.start-content {
-  text-align: left;
-  padding: 2rem;
-  background-color: #f8f9fa;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.progress-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #e5e7eb;
+  margin: 0 5px;
+  transition: all 0.3s ease;
 }
 
-.info-box {
-  background-color: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  border: 1px solid #dee2e6;
+.progress-dot.active {
+  background-color: #1a56db;
+  transform: scale(1.2);
 }
 
-.countdown {
-  margin-top: 1rem;
+.progress-dot.completed {
+  background-color: #10b981;
 }
 
-.timer {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #0d6efd;
+.indicator {
+  padding: 5px;
+  border-radius: 3px;
+  margin-top: 5px;
+  font-size: 20px;
+  text-align: center;
+  color: white;
 }
 
-.timer span {
-  margin: 0 0.5rem;
+.language-selector {
+  position: relative;
+  padding-bottom: 50px;
+  padding-top: 70px;
 }
 
-.recommendation-box {
-  background-color: #e7f3ff;
-  padding: 1.5rem;
-  border-radius: 8px;
-  border-left: 4px solid #0d6efd;
+/* Media Queries */
+@media (max-width: 768px) {
+  .start-content {
+    padding: 1.5rem;
+  }
+  
+  .info-box, .recommendation-box {
+    padding: 1.25rem;
+  }
+  
+  .timer {
+    gap: 0.75rem;
+  }
+  
+  .timer div {
+    min-width: 60px;
+  }
+  
+  .timer span {
+    font-size: 1.75rem;
+  }
+  
+  .countdown {
+    padding: 0.75rem;
+  }
+  
+  #last-assessment-info {
+    flex-direction: column;
+  }
+  
+  #months-days-ago {
+    margin-left: 0;
+    margin-top: 0.25rem;
+  }
 }
 
-.recommendation ul {
-  margin-top: 1rem;
-  margin-bottom: 0;
+@media (max-width: 576px) {
+  .timer {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+  }
+  
+  .timer div {
+    min-width: auto;
+  }
+  
+  .info-box h3 {
+    font-size: 1.25rem;
+  }
+  
+  #start-button {
+    padding: 0.75rem;
+    font-size: 1.1rem;
+  }
+  
+  .start-screen h1 {
+    font-size: 1.75rem;
+  }
+  
+  .lead {
+    font-size: 1rem;
+  }
 }
 
-.recommendation li {
-  margin-bottom: 0.5rem;
+/* Add a smooth transition to all elements */
+* {
+  transition: all 0.3s ease;
 }
 
-#start-button {
-  width: 100%;
-  margin-top: 2rem;
-  padding: 1rem;
-  font-size: 1.2rem;
+/* Make buttons more responsive */
+.btn {
+  white-space: normal;
 }
+
+/* Make the recommendation box more responsive */
+.recommendation-box ul {
+  padding-left: 1.5rem;
+}
+
+@media (max-width: 480px) {
+  .recommendation-box ul {
+    padding-left: 1.25rem;
+  }
+  
+  .recommendation-box li {
+    font-size: 0.95rem;
+  }
+}
\ No newline at end of file
diff --git a/frontend/css/userHome.css b/frontend/css/userHome.css
index 2e4e11a..e1b0665 100644
--- a/frontend/css/userHome.css
+++ b/frontend/css/userHome.css
@@ -1,22 +1,84 @@
-.action-buttons {
-  margin-top: 20px;
+.welcome-section {
+  padding: 3rem 0;
+  background-color: rgba(240, 245, 255, 0.5);
+  border-radius: 12px;
+  margin-bottom: 2rem;
+}
+
+.welcome-message {
+  color: #1540a1;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.user-profile {
   display: flex;
-  justify-content: center;
-  gap: 15px; /* Add spacing between buttons */
+  align-items: center;
+  margin-bottom: 1rem;
+  justify-content: flex-end;
+  text-align: center;
 }
 
-.action-buttons .btn {
-  display: inline-flex;
+.action-card {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+  padding: 2rem;
+  height: 100%;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 30%; /* Adjust the width if needed */
-  padding: 15px;
-  font-size: 1.2rem; /* Slightly larger font */
-  font-weight: bold; /* Bold text */
-  border-radius: 8px;
+  text-align: center;
+}
+
+.action-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+  background-color: #1540a1;
+  cursor: pointer;
 }
 
-.action-buttons .btn i {
-  margin-right: 15px; /* Space between icon and text */
-  font-size: 1.5rem; /* Slightly larger icon size */
+.action-card .action-icon {
+  color: #1540a1;
+  transition: color 0.3s ease;
 }
+
+.action-icon {
+  font-size: 4rem !important;
+  color: #1540a1;
+  margin-bottom: 1rem;
+}
+
+.action-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #1540a1;
+}
+
+.action-card:hover .action-title{
+  color: #fff !important;
+}
+
+.action-card:hover .action-icon {
+  color: #fff !important;
+}
+
+
+@media (max-width: 768px) {
+  .action-cards {
+    margin-top: 1rem;
+  }
+  
+  .welcome-section {
+    padding: 2rem 1rem;
+  }
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 0;
+}
\ No newline at end of file
diff --git a/frontend/css/userSelfAssessment.css b/frontend/css/userSelfAssessment.css
index 62797df..80f7dae 100644
--- a/frontend/css/userSelfAssessment.css
+++ b/frontend/css/userSelfAssessment.css
@@ -1,52 +1,9 @@
-/* Aesthetic styling for buttons */
-.btn {
-  font-size: 1.5rem; /* Larger font size for better visibility */
-  padding: 15px 30px; /* Bigger padding for larger buttons */
-  border-radius: 10px; /* Rounded edges for a modern look */
-  transition: transform 0.2s ease, background-color 0.3s ease;
-}
-
-.btn-success {
-  background-color: #28a745;
-  border: none;
-  color: white;
-}
-
-.btn-success:hover {
-  background-color: #218838;
-  transform: scale(1.1); /* Slight zoom-in effect on hover */
-}
-
-.btn-danger {
-  background-color: #dc3545;
-  border: none;
-  color: white;
-}
-
-.btn-danger:hover {
-  background-color: #c82333;
-  transform: scale(1.1);
-}
-
-.btn-warning {
-  background-color: #ffc107;
-  border: none;
-  color: black;
-}
-
-.btn-warning:hover {
-  background-color: #e0a800;
-  transform: scale(1.1);
+/* Base styles */
+body {
+  background-color: white;
+  font-family: 'Poppins', sans-serif;
 }
 
-/* Center alignment for the button container */
-.button-container {
-  margin-top: 100px;
-  margin-bottom: 100px;
-  display: flex;
-  justify-content: center;
-  gap: 20px; /* Space between buttons */
-}
 .start-screen {
   max-width: 800px;
   margin: 0 auto;
@@ -61,25 +18,89 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.lead {
+  font-weight: 400;
+  color: #4b5563;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
 .info-box {
   background-color: white;
   padding: 1.5rem;
   border-radius: 8px;
   border: 1px solid #dee2e6;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  margin-bottom: 1.5rem;
 }
 
-.countdown {
-  margin-top: 1rem;
+.info-box h3 {
+  color: #1a56db;
+  font-weight: 600;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
 }
 
+/* Better timer display matching FES */
 .timer {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #0d6efd;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 0.75rem;
+  font-size: 1.25rem;
+  color: #4a5568;
+}
+
+.timer div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 70px;
 }
 
 .timer span {
-  margin: 0 0.5rem;
+  font-weight: 700;
+  font-size: 2rem;
+  color: #1a56db;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+#last-assessment-info {
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+#last-assessment-info p {
+  margin-bottom: 0;
+}
+
+#months-days-ago {
+  color: #718096;
+  font-style: italic;
+  margin-left: 0.5rem;
+}
+
+.countdown {
+  margin-top: 1.25rem;
+  padding: 1rem;
+  background-color: #f7fafc;
+  border-radius: 8px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.countdown p {
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  color: #4a5568;
+  text-align: center;
 }
 
 .recommendation-box {
@@ -87,19 +108,161 @@
   padding: 1.5rem;
   border-radius: 8px;
   border-left: 4px solid #0d6efd;
+  margin-bottom: 1.5rem;
+}
+
+.recommendation-box p {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
 }
 
-.recommendation ul {
-  margin-top: 1rem;
+.recommendation-box ul {
+  margin-top: 0.75rem;
   margin-bottom: 0;
+  padding-left: 1.5rem;
 }
 
-.recommendation li {
+.recommendation-box li {
   margin-bottom: 0.5rem;
+  position: relative;
 }
-#startTestButton {
+
+#start-button {
   width: 100%;
   margin-top: 2rem;
   padding: 1rem;
   font-size: 1.2rem;
 }
+
+.btn {
+  padding: 0.75rem 2rem;
+  border-radius: 50px;
+  font-weight: 500;
+  white-space: normal;
+}
+
+.btn-primary {
+  background-color: #1a56db;
+  border-color: #1a56db;
+  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2);
+}
+
+.btn-primary:hover {
+  background-color: #1540a1;
+  border-color: #1540a1;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.3);
+}
+
+/* Action buttons styling */
+.btn-success {
+  background-color: #28a745;
+  border: none;
+  color: white;
+  transition: transform 0.2s ease, background-color 0.3s ease;
+}
+
+.btn-success:hover {
+  background-color: #218838;
+  transform: scale(1.05);
+}
+
+.btn-danger {
+  background-color: #dc3545;
+  border: none;
+  color: white;
+  transition: transform 0.2s ease, background-color 0.3s ease;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  transform: scale(1.05);
+}
+
+.btn-warning {
+  background-color: #ffc107;
+  border: none;
+  color: black;
+  transition: transform 0.2s ease, background-color 0.3s ease;
+}
+
+.btn-warning:hover {
+  background-color: #e0a800;
+  transform: scale(1.05);
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+  .start-content {
+    padding: 1.5rem;
+  }
+  
+  .info-box, .recommendation-box {
+    padding: 1.25rem;
+  }
+  
+  .timer {
+    gap: 0.75rem;
+  }
+  
+  .timer div {
+    min-width: 60px;
+  }
+  
+  .timer span {
+    font-size: 1.75rem;
+  }
+  
+  .countdown {
+    padding: 0.75rem;
+  }
+  
+  #months-days-ago {
+    margin-left: 0;
+    margin-top: 0.25rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .timer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 0.5rem;
+  }
+  
+  .timer div {
+    min-width: auto;
+    margin-bottom: 0.5rem;
+  }
+  
+  .info-box h3 {
+    font-size: 1.25rem;
+  }
+  
+  #start-button {
+    padding: 0.75rem;
+    font-size: 1.1rem;
+  }
+  
+  .start-screen h1 {
+    font-size: 1.75rem;
+  }
+  
+  .lead {
+    font-size: 1rem;
+  }
+  
+  .recommendation-box ul {
+    padding-left: 1.25rem;
+  }
+  
+  .recommendation-box li {
+    font-size: 0.95rem;
+  }
+}
+
+/* Add a smooth transition to all elements */
+* {
+  transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/frontend/footer.html b/frontend/footer.html
index 26f7270..101f503 100644
--- a/frontend/footer.html
+++ b/frontend/footer.html
@@ -1,36 +1,22 @@
-<footer class="text-primary text-center py-4">
-  <hr class="my-4" />
+<footer class="text-primary text-center py-2">
+  <hr class="my-2" />
   <div class="container">
-    <p class="mb-2">&copy; 2025 FallSafe. All Rights Reserved.</p>
+    <p class="mb-1">&copy; 2025 FallSafe. All Rights Reserved.</p>
     <ul class="list-inline mb-0">
       <li class="list-inline-item">
         <a href="#" class="text-primary text-decoration-none">Privacy Policy</a>
       </li>
       <li class="list-inline-item">
-        <a href="#" class="text-primary text-decoration-none"
-          >Terms of Service</a
-        >
+        <a href="#" class="text-primary text-decoration-none">Terms of Service</a>
       </li>
       <li class="list-inline-item">
         <a href="#" class="text-primary text-decoration-none">Contact Us</a>
       </li>
     </ul>
-    <div class="social-icons mt-3">
-      <a
-        href="https://www.facebook.com/lionsbefrienders/"
-        class="text-primary mx-2"
-        ><i class="fab fa-facebook"></i
-      ></a>
-      <a
-        href="https://www.linkedin.com/company/lions-befrienders-singapore/"
-        class="text-primary mx-2"
-        ><i class="fab fa-linkedin"></i
-      ></a>
-      <a
-        href="https://www.instagram.com/lionsbefrienders/"
-        class="text-primary mx-2"
-        ><i class="fab fa-instagram"></i
-      ></a>
+    <div class="social-icons mt-2">
+      <a href="https://www.facebook.com/lionsbefrienders/" class="text-primary mx-2"><i class="fab fa-facebook"></i></a>
+      <a href="https://www.linkedin.com/company/lions-befrienders-singapore/" class="text-primary mx-2"><i class="fab fa-linkedin"></i></a>
+      <a href="https://www.instagram.com/lionsbefrienders/" class="text-primary mx-2"><i class="fab fa-instagram"></i></a>
     </div>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 064a5e4..54f53a8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -26,24 +26,23 @@
       src="https://kit.fontawesome.com/4f6d96e165.js"
       crossorigin="anonymous"
     ></script>
-
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
     <!-- Page Name -->
-    <title>FallSafe</title>
+    <title>FallSafe - Empowering Seniors with Fall Risk Prevention</title>
 
     <!-- Linking CSS -->
     <link rel="stylesheet" href="./css/normalize.css" />
     <link rel="stylesheet" href="./css/style.css" />
 
-    <!-- ######################################## INSERT PAGE'S CSS HERE \/ ########################################################### -->
-    <!-- <link rel="stylesheet" href="./css/" /> -->
-    <!-- ######################################## END OF PAGE'S CSS ########################################################### -->
-
     <!-- Linking JS -->
+    <script src="./js/index.js" defer></script>
     <script src="./js/script.js" defer></script>
 
-    <!-- ######################################## INSERT PAGE'S JS HERE \/ ########################################################### -->
-    <script src="./js/index.js" defer></script>
-    <!-- ######################################## END OF PAGE'S JS ########################################################### -->
 
     <!-- Add a favicon to the tab bar -->
     <link rel="icon" type="image/x-icon" href="./img/FallSafe-Small.png" />
@@ -55,40 +54,48 @@
       <div id="navbar-container"></div>
     </header>
 
-    <!-- Transparent Row with Small Height at the Top -->
-    <div
-      class="row"
-      style="width: 10vw; height: 50px; background-color: transparent"
-    ></div>
-
-    <!-- Main Content Container -->
-    <div class="container text-center">
-      <div class="row justify-content-center">
-        <div class="col-12 mt-5">
-          <!-- Load customAlert.html dynamically -->
-          <div id="customAlertContainer"></div>
-
-          <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
-          <!-- Main Section -->
+    <!-- Hero Section with Carousel Background -->
+    <section class="hero-section">
+      <div class="carousel-container">
+        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
+          <div class="carousel-inner">
+            <div class="carousel-item active" style="background-image: url('./img/ReadME/FallSafe\ User\ Testing\ 1.JPG')"></div>
+            <div class="carousel-item" style="background-image: url('./img/ReadME/FallSafe\ User\ Testing\ 2.JPG')"></div>
+            <div class="carousel-item" style="background-image: url('./img/ReadME/User\ Testing.jpg')"></div>
+          </div>
+        </div>
+        <div class="carousel-overlay"></div>
+      </div>
+      
+      <div class="container">
+        <div class="hero-content">
           <h1>Welcome to FallSafe</h1>
-          <p class="lead text-muted">
-            Empowering seniors to assess and manage fall risk with cutting-edge
-            technology.
-          </p>
-          <p id="servedBy" class="text-muted mt-3"></p>
+          <p>Empowering seniors to assess and manage fall risk with cutting-edge technology.</p>
+          <a href="./login.html" class="btn btn-primary mt-4">
+            <i class="fas fa-heartbeat"></i> Get Started
+          </a>
+        </div>
+      </div>
+    </section>
 
-          <main class="container my-5">
-            <h2>Our Solution</h2>
-            <div class="row">
-              <div class="col-md-4">
+    <!-- Main Content -->
+    <main>
+      <section class="section">
+        <div class="container">
+          <h2 class="section-title">Our Solution</h2>
+          <div class="row align-items-center">
+            <div class="col-lg-5 mb-4 mb-lg-0">
+              <div class="content-card">
                 <img
                   src="./img/art.jpg"
                   alt="FallSafe Illustration"
-                  class="img-fluid"
+                  class="img-fluid rounded"
                 />
               </div>
-              <div class="col-md-8 d-flex flex-column justify-content-center">
-                <p class="text-secondary">
+            </div>
+            <div class="col-lg-7">
+              <div class="content-card">
+                <p>
                   <strong>FallSafe</strong> provides seniors with an
                   <strong>easy-to-use platform</strong> for preliminary
                   <strong>fall risk assessments</strong> from the comfort of
@@ -97,16 +104,17 @@ <h2>Our Solution</h2>
                   healthcare providers to act <strong>proactively</strong>,
                   reducing risks and improving <strong>quality of life</strong>.
                 </p>
-                <a href="./login.html" class="btn btn-primary-outline mt-3">
-                  <i class="fas fa-heartbeat"></i> Get Started
-                </a>
+                <div class="text-center text-lg-start mt-4">
+                  <a href="./about.html" class="btn btn-primary-outline">
+                    <i class="fas fa-info-circle"></i> Learn More
+                  </a>
+                </div>
               </div>
             </div>
-          </main>
-          <!-- ######################################## END OF PAGE'S CONTENT ########################################################### -->
+          </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
 
     <!-- Footer -->
     <footer class="bd-footer">
@@ -116,4 +124,4 @@ <h2>Our Solution</h2>
       ></div>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/js/index.js b/frontend/js/index.js
index e69de29..3674df8 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -0,0 +1,21 @@
+// Load navbar
+$(document).ready(function() {
+    $("#navbar-container").load("navbar.html");
+    
+    // Simple animation when content cards enter viewport
+    const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+    if (entry.isIntersecting) {
+        entry.target.style.opacity = 1;
+        entry.target.style.transform = "translateY(0)";
+    }
+    });
+});
+
+document.querySelectorAll('.content-card').forEach(card => {
+    card.style.opacity = 0;
+    card.style.transform = "translateY(30px)";
+    card.style.transition = "opacity 0.6s ease, transform 0.6s ease";
+    observer.observe(card);
+    });
+});
\ No newline at end of file
diff --git a/frontend/js/signup.js b/frontend/js/signup.js
index 802f755..e08514e 100644
--- a/frontend/js/signup.js
+++ b/frontend/js/signup.js
@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", function () {
-  // Get the Send Code button
+  // Original code - Send Code button functionality
   const sendCodeButton = document.getElementById("sendCode");
 
   // Add a click event listener to the Send Code button
@@ -55,16 +55,37 @@ document.addEventListener("DOMContentLoaded", function () {
     return emailRegex.test(email);
   }
 
+  // Original form submit event
   document.querySelector("form").addEventListener("submit", async (e) => {
     e.preventDefault();
 
+    // Only process form submission if we're on the final step
+    if (!document.getElementById("step3").classList.contains("active")) {
+      return;
+    }
+
+    // Validate password fields
+    const password = document.getElementById("password").value;
+    const confirmPassword = document.getElementById("confirmPassword").value;
+    
+    if (password !== confirmPassword) {
+      document.getElementById("confirmPassword-error").style.display = "block";
+      return;
+    }
+    
+    // Validate password strength
+    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+    if (!passwordRegex.test(password)) {
+      document.getElementById("password-error").style.display = "block";
+      return;
+    }
+
     const email = document.getElementById("email").value;
     const verificationCode = document.getElementById("verificationCode").value;
     const name =
       document.getElementById("firstName").value +
       " " +
       document.getElementById("lastName").value;
-    const password = document.getElementById("password").value;
     const age = parseInt(document.getElementById("age").value, 10); // Convert age to a number
     const phoneNumber = document.getElementById("phoneNumber").value;
     const address = document.getElementById("address").value;
@@ -95,4 +116,172 @@ document.addEventListener("DOMContentLoaded", function () {
       showCustomAlert(`Error: ${data.message || "Failed to register"}`);
     }
   });
-});
+
+  // NEW CODE BELOW - Step-by-step functionality
+  
+  // Get all step containers
+  const step1 = document.getElementById('step1');
+  const step2 = document.getElementById('step2');
+  const step3 = document.getElementById('step3');
+  
+  // Get navigation buttons
+  const step1Next = document.getElementById('step1Next');
+  const step2Back = document.getElementById('step2Back');
+  const step2Next = document.getElementById('step2Next');
+  const step3Back = document.getElementById('step3Back');
+  
+  // Get step indicators
+  const stepIndicator1 = document.getElementById('step-indicator-1');
+  const stepIndicator2 = document.getElementById('step-indicator-2');
+  const stepIndicator3 = document.getElementById('step-indicator-3');
+  const connector12 = document.getElementById('connector-1-2');
+  const connector23 = document.getElementById('connector-2-3');
+  
+  // Step 1 validation and navigation
+  step1Next.addEventListener('click', function() {
+    const firstName = document.getElementById('firstName').value.trim();
+    const lastName = document.getElementById('lastName').value.trim();
+    const age = document.getElementById('age').value;
+    
+    let isValid = true;
+    
+    // Validate first name
+    if (firstName === '') {
+      document.getElementById('firstName-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('firstName-error').style.display = 'none';
+    }
+    
+    // Validate last name
+    if (lastName === '') {
+      document.getElementById('lastName-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('lastName-error').style.display = 'none';
+    }
+    
+    // Validate age
+    if (age === '' || parseInt(age) < 18) {
+      document.getElementById('age-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('age-error').style.display = 'none';
+    }
+    
+    // If all fields are valid, move to step 2
+    if (isValid) {
+      step1.classList.remove('active');
+      step2.classList.add('active');
+      stepIndicator1.classList.remove('active');
+      stepIndicator1.classList.add('completed');
+      stepIndicator2.classList.add('active');
+      connector12.classList.add('active');
+    }
+  });
+  
+  // Step 2 back button
+  step2Back.addEventListener('click', function() {
+    step2.classList.remove('active');
+    step1.classList.add('active');
+    stepIndicator2.classList.remove('active');
+    stepIndicator1.classList.remove('completed');
+    stepIndicator1.classList.add('active');
+    connector12.classList.remove('active');
+  });
+  
+  // Step 2 validation and navigation
+  step2Next.addEventListener('click', function() {
+    const phoneNumber = document.getElementById('phoneNumber').value.trim();
+    const address = document.getElementById('address').value.trim();
+    const email = document.getElementById('email').value.trim();
+    const verificationCode = document.getElementById('verificationCode').value.trim();
+    
+    let isValid = true;
+    
+    // Validate phone number (basic validation)
+    if (phoneNumber === '' || phoneNumber.length < 8) {
+      document.getElementById('phoneNumber-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('phoneNumber-error').style.display = 'none';
+    }
+    
+    // Validate address
+    if (address === '') {
+      document.getElementById('address-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('address-error').style.display = 'none';
+    }
+    
+    // Validate email (using existing validateEmail function)
+    if (!validateEmail(email)) {
+      document.getElementById('email-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('email-error').style.display = 'none';
+    }
+    
+    // Validate verification code
+    if (verificationCode === '') {
+      document.getElementById('verificationCode-error').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('verificationCode-error').style.display = 'none';
+    }
+    
+    // If all fields are valid, move to step 3
+    if (isValid) {
+      step2.classList.remove('active');
+      step3.classList.add('active');
+      stepIndicator2.classList.remove('active');
+      stepIndicator2.classList.add('completed');
+      stepIndicator3.classList.add('active');
+      connector23.classList.add('active');
+    }
+  });
+  
+  // Step 3 back button
+  step3Back.addEventListener('click', function() {
+    step3.classList.remove('active');
+    step2.classList.add('active');
+    stepIndicator3.classList.remove('active');
+    stepIndicator2.classList.remove('completed');
+    stepIndicator2.classList.add('active');
+    connector23.classList.remove('active');
+  });
+  
+  // Password live validation
+  document.getElementById('confirmPassword').addEventListener('input', function() {
+    const password = document.getElementById('password').value;
+    const confirmPassword = this.value;
+    
+    if (password !== confirmPassword) {
+      document.getElementById('confirmPassword-error').style.display = 'block';
+    } else {
+      document.getElementById('confirmPassword-error').style.display = 'none';
+    }
+  });
+  
+  document.getElementById('password').addEventListener('input', function() {
+    const password = this.value;
+    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+    
+    if (!passwordRegex.test(password)) {
+      document.getElementById('password-error').style.display = 'block';
+    } else {
+      document.getElementById('password-error').style.display = 'none';
+      
+      // Also check confirm password match if it has a value
+      const confirmPassword = document.getElementById('confirmPassword').value;
+      if (confirmPassword) {
+        if (password !== confirmPassword) {
+          document.getElementById('confirmPassword-error').style.display = 'block';
+        } else {
+          document.getElementById('confirmPassword-error').style.display = 'none';
+        }
+      }
+    }
+  });
+});
\ No newline at end of file
diff --git a/frontend/login.html b/frontend/login.html
index d9c90ac..445f702 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -64,17 +69,17 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
           <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
           <h1>Member Login</h1>
-          <p class="mb-4">Welcome back!</p>
+          <p>Welcome back!</p>
 
           <!-- Login Form Card -->
           <div
-            class="card p-4 shadow-sm text-start"
+            class="card p-4 text-start"
             style="max-width: 400px; margin: 0 auto"
           >
             <form>
@@ -102,7 +107,7 @@ <h1>Member Login</h1>
             </form>
           </div>
           <!-- Sign Up Link Outside Card -->
-          <p class="mt-3">
+          <p class="mt-5">
             New here? <a href="./signup.html">Sign up</a> to join FallSafe!
           </p>
           <p>Sign in as <a href="./adminLogin.html">Admin</a></p>
diff --git a/frontend/signup.html b/frontend/signup.html
index 0a4055d..2856e00 100644
--- a/frontend/signup.html
+++ b/frontend/signup.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -34,19 +39,17 @@
     <link rel="stylesheet" href="./css/normalize.css" />
     <link rel="stylesheet" href="./css/style.css" />
 
-    <!-- ######################################## INSERT PAGE'S CSS HERE \/ ########################################################### -->
-    <!-- <link rel="stylesheet" href="./css/signup.css" /> -->
+    <!--################################### INSERT PAGE'S CSS HERE \/ ########################################################### -->
+    <link rel="stylesheet" href="./css/signUp.css" />
     <!-- ######################################## END OF PAGE'S CSS ########################################################### -->
 
     <!-- Linking JS -->
     <script src="./js/script.js" defer></script>
-
-    <!-- ######################################## INSERT PAGE'S JS HERE \/ ########################################################### -->
     <script src="./js/signup.js" defer></script>
-    <!-- ######################################## END OF PAGE'S JS ########################################################### -->
 
     <!-- Add a favicon to the tab bar -->
     <link rel="icon" type="image/x-icon" href="./img/FallSafe-Small.png" />
+
   </head>
   <body>
     <!-- Header -->
@@ -64,7 +67,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
   
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
@@ -74,146 +77,193 @@ <h1>Sign Up for FallSafe</h1>
             Join us today and drive towards a sustainable future!
           </p>
 
+          <!-- Step Progress Bar -->
+          <div class="steps-progress" style="max-width: 500px; margin: 0 auto 20px auto">
+            <div class="step-indicator active" id="step-indicator-1">1</div>
+            <div class="step-connector" id="connector-1-2"></div>
+            <div class="step-indicator" id="step-indicator-2">2</div>
+            <div class="step-connector" id="connector-2-3"></div>
+            <div class="step-indicator" id="step-indicator-3">3</div>
+          </div>
+
           <!-- Sign Up Form Card -->
           <div
             class="card p-4 shadow-sm text-start"
             style="max-width: 500px; margin: 0 auto"
           >
             <form>
-              <!-- First Name -->
-              <div class="mb-3">
-                <label for="firstName" class="form-label">First Name</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  id="firstName"
-                  placeholder="Enter your first name"
-                  required
-                />
-              </div>
+              <!-- Step 1: Basic Info -->
+              <div class="step-container active" id="step1">
+                <h4 class="mb-5 mt-4">Step 1: Basic Information</h4>
+                
+                <!-- First Name -->
+                <div class="mb-3">
+                  <label for="firstName" class="form-label">First Name</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="firstName"
+                    placeholder="Enter your first name"
+                    required
+                  />
+                  <div class="form-error" id="firstName-error">Please enter your first name</div>
+                </div>
 
-              <!-- Last Name -->
-              <div class="mb-3">
-                <label for="lastName" class="form-label">Last Name</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  id="lastName"
-                  placeholder="Enter your last name"
-                  required
-                />
-              </div>
+                <!-- Last Name -->
+                <div class="mb-3">
+                  <label for="lastName" class="form-label">Last Name</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="lastName"
+                    placeholder="Enter your last name"
+                    required
+                  />
+                  <div class="form-error" id="lastName-error">Please enter your last name</div>
+                </div>
 
-              <!-- Age -->
-              <div class="mb-3">
-                <label for="age" class="form-label">Age</label>
-                <input
-                  type="number"
-                  class="form-control"
-                  id="age"
-                  placeholder="Enter your age"
-                  required
-                />
-              </div>
+                <!-- Age -->
+                <div class="mb-3">
+                  <label for="age" class="form-label">Age</label>
+                  <input
+                    type="number"
+                    class="form-control"
+                    id="age"
+                    placeholder="Enter your age"
+                    required
+                  />
+                  <div class="form-error" id="age-error">Please enter a valid age (18 or older)</div>
+                </div>
 
-              <!-- Phone Number -->
-              <div class="mb-3">
-                <label for="phoneNumber" class="form-label"
-                  >Phone Number</label
-                >
-                <input
-                  type="text"
-                  class="form-control"
-                  id="phoneNumber"
-                  placeholder="Enter your phone number"
-                  required
-                />
+                <!-- Next Button -->
+                <button type="button" class="btn btn-primary w-100" id="step1Next">
+                  Next
+                </button>
               </div>
 
-              <!-- Address -->
-              <div class="mb-3">
-                <label for="address" class="form-label">Address</label>
-                <input
-                  type="text"
-                  class="form-control"
-                  id="address"
-                  placeholder="Enter your address"
-                  required
-                ></input>
-              </div>
+              <!-- Step 2: Contact Information -->
+              <div class="step-container" id="step2">
+                <h4 class="mb-5 mt-4">Step 2: Contact Information</h4>
+                
+                <!-- Phone Number -->
+                <div class="mb-3">
+                  <label for="phoneNumber" class="form-label">Phone Number</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="phoneNumber"
+                    placeholder="Enter your phone number"
+                    required
+                  />
+                  <div class="form-error" id="phoneNumber-error">Please enter a valid phone number</div>
+                </div>
 
-              <!-- Email Input with Send Code Button -->
-              <div class="mb-3">
-                <label for="email" class="form-label">Email Address</label>
-                <div class="input-group">
+                <!-- Address -->
+                <div class="mb-3">
+                  <label for="address" class="form-label">Address</label>
                   <input
-                    type="email"
+                    type="text"
                     class="form-control"
-                    id="email"
-                    placeholder="Enter your email"
+                    id="address"
+                    placeholder="Enter your address"
                     required
                   />
-                  <button
-                    type="button"
-                    class="btn btn-outline-secondary"
-                    id="sendCode"
-                  >
-                    Send Code
+                  <div class="form-error" id="address-error">Please enter your address</div>
+                </div>
+
+                <!-- Email Input with Send Code Button -->
+                <div class="mb-3">
+                  <label for="email" class="form-label">Email Address</label>
+                  <div class="input-group">
+                    <input
+                      type="email"
+                      class="form-control"
+                      id="email"
+                      placeholder="Enter your email"
+                      required
+                    />
+                    <button
+                      type="button"
+                      class="btn btn-outline-primary"
+                      id="sendCode"
+                    >
+                      Send Code
+                    </button>
+                  </div>
+                  <div class="form-error" id="email-error">Please enter a valid email address</div>
+                </div>
+
+                <!-- Verification Code Input with Confirm Button -->
+                <div class="mb-3">
+                  <label for="verificationCode" class="form-label">Verification Code</label>
+                  <div class="input-group">
+                    <input
+                      type="text"
+                      class="form-control"
+                      id="verificationCode"
+                      placeholder="Enter verification code"
+                      required
+                    />
+                  </div>
+                  <div class="form-error" id="verificationCode-error">Please enter the verification code</div>
+                </div>
+
+                <!-- Back & Next Buttons -->
+                <div class="d-flex justify-content-between">
+                  <button type="button" class="btn btn-secondary" id="step2Back" style="width: 48%">
+                    Back
+                  </button>
+                  <button type="button" class="btn btn-primary" id="step2Next" style="width: 48%">
+                    Next
                   </button>
                 </div>
               </div>
 
-              <!-- Verification Code Input with Confirm Button -->
-              <div class="mb-3">
-                <label for="verificationCode" class="form-label"
-                  >Verification Code</label
-                >
-                <div class="input-group">
+              <!-- Step 3: Security -->
+              <div class="step-container" id="step3">
+                <h4 class="mb-5 mt-4">Step 3: Set Password</h4>
+                
+                <!-- Password -->
+                <div class="mb-3">
+                  <label for="password" class="form-label">Password</label>
                   <input
-                    type="text"
+                    type="password"
                     class="form-control"
-                    id="verificationCode"
-                    placeholder="Enter verification code"
+                    id="password"
+                    placeholder="Enter your password"
                     required
                   />
+                  <div class="form-error" id="password-error">Password must be at least 8 characters with letters and numbers</div>
                 </div>
-              </div>
 
-              <!-- Password -->
-              <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
-                <input
-                  type="password"
-                  class="form-control"
-                  id="password"
-                  placeholder="Enter your password"
-                  required
-                />
-              </div>
+                <!-- Confirm Password -->
+                <div class="mb-3">
+                  <label for="confirmPassword" class="form-label">Confirm Password</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    id="confirmPassword"
+                    placeholder="Confirm your password"
+                    required
+                  />
+                  <div class="form-error" id="confirmPassword-error">Passwords do not match</div>
+                </div>
 
-              <!-- Confirm Password -->
-              <div class="mb-3">
-                <label for="confirmPassword" class="form-label"
-                  >Confirm Password</label
-                >
-                <input
-                  type="password"
-                  class="form-control"
-                  id="confirmPassword"
-                  placeholder="Confirm your password"
-                  required
-                />
+                <!-- Back & Submit Buttons -->
+                <div class="d-flex justify-content-between">
+                  <button type="button" class="btn btn-secondary" id="step3Back" style="width: 48%">
+                    Back
+                  </button>
+                  <button type="submit" class="btn btn-success" style="width: 48%">
+                    Signup
+                  </button>
+                </div>
               </div>
-
-              <!-- Submit Button -->
-              <button type="submit" class="btn btn-primary w-100">
-                Sign Up
-              </button>
             </form>
           </div>
 
           <!-- Link to Login Page -->
-          <p class="mt-3">
+          <p class="mt-5">
             Already have an account? <a href="./login.html">Log in</a>.
           </p>
         </div>
@@ -228,4 +278,4 @@ <h1>Sign Up for FallSafe</h1>
       ></div>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/userConsultDoctor.html b/frontend/userConsultDoctor.html
index e65753e..17f0cca 100644
--- a/frontend/userConsultDoctor.html
+++ b/frontend/userConsultDoctor.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -64,13 +69,13 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
           <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
-          <h2 class="mb-4">Schedule Your Appointment</h2>
-          <p class="mb-4">Easily book an appointment with a doctor</p>
+          <h1 class="text-center">Schedule Your Appointment</h1>
+          <p>Easily book an appointment with a doctor</p>
 
           <!-- Calendly inline widget begin -->
           <div
diff --git a/frontend/userFATResults.html b/frontend/userFATResults.html
index 10d274f..c33cc1a 100644
--- a/frontend/userFATResults.html
+++ b/frontend/userFATResults.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
diff --git a/frontend/userFES.html b/frontend/userFES.html
index 5e39dbb..fbe7097 100644
--- a/frontend/userFES.html
+++ b/frontend/userFES.html
@@ -27,23 +27,22 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
-    <title>FallSafe</title>
+    <title>FallSafe - Falls Efficacy Scale</title>
 
     <!-- Linking CSS -->
     <link rel="stylesheet" href="./css/normalize.css" />
     <link rel="stylesheet" href="./css/style.css" />
-
-    <!-- ######################################## INSERT PAGE'S CSS HERE \/ ########################################################### -->
     <link rel="stylesheet" href="./css/userFES.css" />
-    <!-- ######################################## END OF PAGE'S CSS ########################################################### -->
 
     <!-- Linking JS -->
     <script src="./js/script.js" defer></script>
-
-    <!-- ######################################## INSERT PAGE'S JS HERE \/ ########################################################### -->
     <script src="./js/userFES.js" defer></script>
-    <!-- ######################################## END OF PAGE'S JS ########################################################### -->
 
     <!-- Add a favicon to the tab bar -->
     <link rel="icon" type="image/x-icon" href="./img/FallSafe-Small.png" />
@@ -55,102 +54,104 @@
       <div id="navbar-container"></div>
     </header>
 
-    <!-- Transparent Row with Small Height at the Top -->
-    <div
-      class="row"
-      style="width: 10vw; height: 50px; background-color: transparent"
-    ></div>
-
     <!-- Main Content Container -->
-    <div class="container text-center">
+    <div class="container py-5">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
-          <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
-          <!-- Page Content -->
-          <div id="start-screen" class="start-screen">
-            <h1>Falls Efficacy Scale</h1>
-            <div class="start-content">
-              <p id="subtitle" class="lead text-muted">
-                Please rate your confidence in completing each of the 16 tasks
-                listed below. These tasks assess your confidence in avoiding
-                falls in various situations.
-              </p>
-
-              <div class="info-box mb-4">
-                <h3>Last Assessment Details</h3>
-                <div id="last-assessment-info" class="d-flex align-items-center">
-                  <p>Taken on: <span id="last-taken-date">Loading...</span> 
-                  <p id="months-days-ago" style="margin-left: 10px;"></p>
-                </div>
-                <div id="countdown-timer" class="countdown">
-                  <p>Recommended time until next assessment:</p>
-                  <div class="timer">
-                    <span id="months">0</span>months
-                    <span id="days">0</span>days <span id="hours">
+            <!-- Start Screen -->
+            <div id="start-screen" class="start-screen fade-in">
+              <h1 class="text-center">Falls Efficacy Scale</h1>
+              <div class="start-content">
+                <p id="subtitle" class="lead text-center">
+                  Please rate your confidence in avoiding falls for each task in the questionnaire
+                </p>
+
+                <div class="info-box mb-4">
+                  <h3>Last Assessment Details</h3>
+                  <div id="last-assessment-info" class="d-flex justify-content-center align-items-center flex-wrap">
+                    <p class="mb-0">Taken on: <span id="last-taken-date">Loading...</span></p>
+                    <p id="months-days-ago" class="mb-0 ms-2"></p>
                   </div>
-                </div>
-                <div id="voucher-status" class="mt-3" style="display: none">
-                  <div class="alert alert-success">
-                    <p>                     🎉 You are eligible for a voucher! <br />You can get 1 x
-                      $10 NTUC Vouchers upon completion.</p>
-                    <img
-                      src="./img/voucher.jpg"
-                      alt="Voucher"
-                      class="img-fluid"
-                      style="max-width: 200px"
-                    />
+                  <div id="countdown-timer" class="countdown">
+                    <p class="text-center mb-1">Recommended time until next assessment:</p>
+                    <div class="timer">
+                      <div><span id="months">0</span> months</div>
+                      <div><span id="days">0</span> days</div>
+                      <div><span id="hours">0</span> hours</div>
+                    </div>
+                  </div>
+                  <div id="voucher-status" class="mt-3 text-center" style="display: none">
+                    <div class="alert alert-success">
+                      <p class="mb-2">🎉 You are eligible for a voucher!</p>
+                      <p class="mb-2">You can get 1 x $10 NTUC Vouchers upon completion.</p>
+                      <img
+                        src="./img/voucher.jpg"
+                        alt="Voucher"
+                        class="img-fluid"
+                        style="max-width: 180px"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div class="recommendation-box mb-4">
-                <p class="recommendation">
-                  💡 It is recommended to take this assessment
-                  <strong>Once Every 6 Months</strong> to:
-                </p>
-                <ul class="text-start">
-                  <li>Track your progress over time</li>
-                  <li>Earn rewards</li>
-                  <li>Identify areas that need attention</li>
-                </ul>
-              </div>
+                <div class="recommendation-box mb-4">
+                  <p class="recommendation mb-2">
+                    💡 It is recommended to take this assessment
+                    <strong>Once Every 6 Months</strong> to:
+                  </p>
+                  <ul class="text-start">
+                    <li>Track your progress over time</li>
+                    <li>Identify areas that need attention</li>
+                    <li>Earn rewards</li>
+                  
+                  </ul>
+                </div>
 
-              <button id="start-button" class="btn btn-primary btn-lg">
-                Continue
-              </button>
-            </div>
-          </div>
-
-          <div id="questions-screen" style="display: none">
-            <h2 id="fes-header" style="padding-top: 1em; padding-bottom: 1em">
-              How Confident are you in the following:
-            </h2>
-            <div id="questions-container"></div>
-            <div class="d-flex justify-content-between mt-4">
-              <button id="back-button" class="btn btn-secondary" disabled>
-                Back
-              </button>
-              <button id="next-button" class="btn btn-secondary">Next</button>
-            </div>
-            <div class="d-flex justify-content-center mt-3">
-              <button id="submit-button" class="btn btn-primary" disabled>
-                Submit
-              </button>
+                <div class="text-center">
+                  <button id="start-button" class="btn btn-primary btn-lg">
+                    <i class="fas fa-play me-2"></i> Start 
+                  </button>
+                </div>
+              </div>
             </div>
 
-            <div
-              id="loading-spinner"
-              class="spinner-border text-primary"
-              role="status"
-              style="display: none"
-            >
-              <span class="visually-hidden">Loading...</span>
+            <!-- Questions Screen -->
+            <div id="questions-screen" class="fade-in" style="display: none">
+              <h2 id="fes-header" class="text-center">
+                How confident are you in the following:
+              </h2>
+              
+              <div id="questions-container">
+                <!-- Questions will be inserted here -->
+              </div>
+              
+              <div class="d-flex justify-content-between mt-4">
+                <button id="back-button" class="btn btn-primary" disabled>
+                  <i class="fas fa-arrow-left me-2"></i> Back
+                </button>
+                <button id="next-button" class="btn btn-primary">
+                  Next <i class="fas fa-arrow-right ms-2"></i>
+                </button>
+              </div>
+              
+              <div class="d-flex justify-content-center mt-3">
+                <button id="submit-button" class="btn btn-primary" disabled>
+                  <i class="fas fa-check me-2"></i> Submit
+                </button>
+              </div>
+
+              <div
+                id="loading-spinner"
+                class="spinner-border text-primary mt-4"
+                role="status"
+                style="display: none; margin: 0 auto;"
+              >
+                <span class="visually-hidden">Loading...</span>
+              </div>
             </div>
-          </div>
-          <!-- ######################################## END OF PAGE'S CONTENT ########################################################### -->
         </div>
       </div>
     </div>
@@ -163,4 +164,4 @@ <h2 id="fes-header" style="padding-top: 1em; padding-bottom: 1em">
       ></div>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/userFESResults.html b/frontend/userFESResults.html
index e25d92a..b9007b5 100644
--- a/frontend/userFESResults.html
+++ b/frontend/userFESResults.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -58,7 +63,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
diff --git a/frontend/userHome.html b/frontend/userHome.html
index 1c4317f..c53267e 100644
--- a/frontend/userHome.html
+++ b/frontend/userHome.html
@@ -27,23 +27,22 @@
       crossorigin="anonymous"
     ></script>
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
-    <title>FallSafe</title>
+    <title>FallSafe - User Dashboard</title>
 
     <!-- Linking CSS -->
     <link rel="stylesheet" href="./css/normalize.css" />
     <link rel="stylesheet" href="./css/style.css" />
-
-    <!-- ######################################## INSERT PAGE'S CSS HERE \/ ########################################################### -->
     <link rel="stylesheet" href="./css/userHome.css" />
-    <!-- ######################################## END OF PAGE'S CSS ########################################################### -->
 
     <!-- Linking JS -->
     <script src="./js/script.js" defer></script>
-
-    <!-- ######################################## INSERT PAGE'S JS HERE \/ ########################################################### -->
     <script src="./js/userHome.js" defer></script>
-    <!-- ######################################## END OF PAGE'S JS ########################################################### -->
 
     <!-- Add a favicon to the tab bar -->
     <link rel="icon" type="image/x-icon" href="./img/FallSafe-Small.png" />
@@ -55,59 +54,69 @@
       <div id="navbar-container"></div>
     </header>
 
-    <!-- Transparent Row with Small Height at the Top -->
-    <div
-      class="row"
-      style="width: 10vw; height: 50px; background-color: transparent"
-    ></div>
-
     <!-- Main Content Container -->
-    <div class="container text-center">
+    <div class="container py-5">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
-          <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
-
-          <!-- Welcome Message -->
-          <h1 class="welcome-message">
-            Welcome, <span id="userName">user Name</span>!
-          </h1>
-          <p class="mb-3">What would you like to do today?</p>
+          <!-- Welcome Section -->
+          <section class="welcome-section">
+            <div class="container">
+              <div class="row align-items-center">
+                <div class="col-md-8">
+                  <div class="user-profile">
+                    <div>
+                      <h1 class="welcome-message">
+                        Welcome, <span id="userName">User</span>!
+                      </h1>
+                      <p class="text-muted">What would you like to do today?</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
 
-          <!-- Action Buttons -->
-          <div class="action-buttons">
-            <button
-              class="btn btn-primary"
-              id="fallsEfficacyScaleButton"
-              onclick="window.location.href='./userFES.html'"
-            >
-              <i class="fas fa-chart-line"></i> Falls Efficacy Scale
-            </button>
-            <button
-              class="btn btn-primary"
-              id="selfFallRiskAssessmentButton"
-              onclick="window.location.href='./userSelfAssessment.html'"
-            >
-              <i class="fas fa-file-alt"></i> Self Assessment
-            </button>
-            <button
-              class="btn btn-primary"
-              id="consultDoctorButton"
-              onclick="window.location.href='./userConsultDoctor.html'"
-            >
-              <i class="fas fa-user-md"></i> Consult Doctor
-            </button>
-            <button
-              class="btn btn-primary"
-              id="viewResultsButton"
-              onclick="window.location.href='./userResults.html'"
-            >
-              <i class="fas fa-chart-bar"></i> View Results
-            </button>
+          <!-- Action Cards Section -->
+          <div class="row action-cards">
+            <div class="col-md-6 col-lg-3" onclick="window.location.href='./userFES.html'">
+              <div class="action-card">
+                <div class="action-icon">
+                  <i class="fas fa-chart-line"></i>
+                </div>
+                <h3 class="action-title">Falls Efficacy Scale</h3>
+              </div>
+            </div>
+            
+            <div class="col-md-6 col-lg-3" onclick="window.location.href='./userSelfAssessment.html'">
+              <div class="action-card">
+                <div class="action-icon">
+                  <i class="fas fa-file-alt"></i>
+                </div>
+                <h3 class="action-title">Physical Self Assessment</h3>
+              </div>
+            </div>
+            
+            <div class="col-md-6 col-lg-3" onclick="window.location.href='./userConsultDoctor.html'">
+              <div class="action-card">
+                <div class="action-icon">
+                  <i class="fas fa-user-md"></i>
+                </div>
+                <h3 class="action-title">Consult Doctor</h3>
+              </div>
+            </div>
+            
+            <div class="col-md-6 col-lg-3" onclick="window.location.href='./userResults.html'">
+              <div class="action-card">
+                <div class="action-icon">
+                  <i class="fas fa-chart-bar"></i>
+                </div>
+                <h3 class="action-title">View Results</h3>
+              </div>
+            </div>
           </div>
-          <!-- ######################################## END OF PAGE'S CONTENT ########################################################### -->
         </div>
       </div>
     </div>
@@ -118,6 +127,6 @@ <h1 class="welcome-message">
         id="footer-container"
         class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"
       ></div>
-    </footer>
+    </footer>    
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/userResults.html b/frontend/userResults.html
index 0bc8e92..ba1d5e6 100644
--- a/frontend/userResults.html
+++ b/frontend/userResults.html
@@ -27,6 +27,11 @@
       crossorigin="anonymous"
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -64,7 +69,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
diff --git a/frontend/userSelfAssessment.html b/frontend/userSelfAssessment.html
index cc8f953..d695467 100644
--- a/frontend/userSelfAssessment.html
+++ b/frontend/userSelfAssessment.html
@@ -39,6 +39,11 @@
       crossorigin="anonymous"
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Page Name -->
     <title>FallSafe</title>
 
@@ -76,13 +81,13 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>
 
           <!-- ######################################## INSERT PAGE'S CONTENT HERE \/ ########################################################### -->
 
-          <h1 id="title">Self Assessment</h1>
+          <h1 id="title">Physical Self Assessment</h1>
           <p id="subtitle2"></p>
           <!-- Start Screen Layout -->
           <div
@@ -104,13 +109,16 @@ <h3>Last Assessment Details</h3>
                   <p>Taken on: <span id="last-taken-date">Loading...</span></p>
                   <p id="months-days-ago" style="margin-left: 10px"></p>
                 </div>
+                
                 <div id="countdown-timer" class="countdown">
                   <p>Recommended time until next assessment:</p>
                   <div class="timer">
-                    <span id="months">0</span> months
-                    <span id="days">0</span> days
+                    <div><span id="months">0</span> months</div>
+                    <div><span id="days">0</span> days</div>
+                    <div><span id="hours">0</span> hours</div>
                   </div>
                 </div>
+
                 <div id="voucher-status" class="mt-3" style="display: none">
                   <div class="alert alert-success">
                     <p>
@@ -160,9 +168,10 @@ <h3>Last Assessment Details</h3>
                 </ul>
               </div>
 
-              <button id="startTestButton" class="btn btn-primary">
-                Continue
+              <button id="start-button" class="btn btn-primary btn-lg">
+                <i class="fas fa-play me-2"></i> Start 
               </button>
+              
               <div id="connectionStatus" class="mt-3"></div>
             </div>
           </div>
diff --git a/frontend/userSettings.html b/frontend/userSettings.html
index 3d41ba4..657e9ae 100644
--- a/frontend/userSettings.html
+++ b/frontend/userSettings.html
@@ -18,6 +18,11 @@
       defer
     ></script>
 
+        <!-- Google Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- JQuery Link -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
@@ -64,7 +69,7 @@
     <!-- Main Content Container -->
     <div class="container text-center">
       <div class="row justify-content-center">
-        <div class="col-12 mt-5">
+        <div class="col-12 fade-in" style="margin-top: 4.5rem;">
           <!-- Load customAlert.html dynamically -->
           <div id="customAlertContainer"></div>