diff --git a/public/images/MeBalanced.png b/public/images/MeBalanced.png
new file mode 100644
index 0000000..7ee0c60
Binary files /dev/null and b/public/images/MeBalanced.png differ
diff --git a/public/styles/home.css b/public/styles/home.css
index fc832b4..e8bba2f 100644
--- a/public/styles/home.css
+++ b/public/styles/home.css
@@ -10,6 +10,9 @@ html, body {
   font-family: Arial, sans-serif;
 }
 
+html {
+  overflow-y: scroll;
+}
 /* General Styles */
  body {
    font-family: Arial, sans-serif;
@@ -154,7 +157,7 @@ html, body {
    font-style: italic;
  }
  
- /* Navigation Bar */
+ /* Navigation Bar
  .navbar {
    display: flex;
    align-items: center;
@@ -185,7 +188,7 @@ html, body {
  .navbar a:hover {
    background-color: #444;
    border-radius: 5px;
- }
+ } */
  
  /* Select */
  select {
@@ -1007,4 +1010,5 @@ body.buddy-modal-open {
   .buddy-modal-panel {
     padding: 22px 18px;
   }
+
 }
diff --git a/public/styles/navbar.css b/public/styles/navbar.css
new file mode 100644
index 0000000..c2fad6b
--- /dev/null
+++ b/public/styles/navbar.css
@@ -0,0 +1,132 @@
+.hamburger-menu {
+    font-size: 20px;
+    background-color: transparent;
+    color: #ffffff;
+    cursor: pointer;
+    display: none;
+    border: none;
+  }
+
+.custom-navbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    background: linear-gradient(90deg, #1f1f1f 0%, #2a2a2a 100%);
+    padding: 14px 32px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
+    position: relative;
+    z-index: 1000;
+  }
+
+.custom-navbar .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.custom-navbar .bee-icon {
+    width: 200px;
+    object-fit: cover;
+}
+
+.logo-text {
+    font-size: 2rem;
+    font-weight: 800;
+    font-family: Arial, sans-serif;
+    line-height: 1;
+    letter-spacing: 0.4px;
+    color: #ffd700;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+.custom-navbar .custom-nav-links {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.custom-navbar a,
+.custom-dropbtn {
+    color: #f5f5f5;
+    text-decoration: none;
+    font-size: 1.05rem;
+    font-weight: 600;
+    padding: 10px 16px;
+    border-radius: 10px;
+    transition: all 0.25s ease;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-family: Arial, sans-serif;
+    display: inline-block;
+    line-height: 1.2;
+}
+
+.custom-navbar a:hover,
+.custom-dropdown:hover .custom-dropbtn {
+    background: rgba(255, 215, 0, 0.12);
+    color: #ffd700;
+    transform: translateY(-1px);
+}
+
+.custom-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.custom-dropdown-content {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: auto;
+    min-width: 210px;
+    background: #2f2f2f;
+    border-radius: 12px;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
+    border: 1px solid rgba(255, 215, 0, 0.12);
+    overflow: hidden;
+    z-index: 1001;
+}
+
+.custom-dropdown-content a {
+    display: block;
+    padding: 14px 16px;
+    font-size: 0.98rem;
+    font-weight: 500;
+    color: #f5f5f5;
+    border-radius: 0;
+}
+
+.custom-dropdown-content a:hover {
+    background: rgba(255, 215, 0, 0.12);
+    color: #ffd700;
+    transform: none;
+}
+
+.custom-dropdown:hover .custom-dropdown-content {
+    display: block;
+}
+
+@media screen and (max-width: 970px) {
+    .custom-navbar .custom-nav-links {
+      display: none;
+      width: 100%;
+      flex-direction: column;
+    }
+
+
+    .custom-navbar {
+        flex-direction: row;
+    }
+
+    .hamburger-menu {
+      display: block;
+    }
+
+    .custom-nav-links.active {
+      display: flex;
+    }
+}
\ No newline at end of file
diff --git a/public/styles/survey.css b/public/styles/survey.css
index 52a4ba6..43f03a0 100644
--- a/public/styles/survey.css
+++ b/public/styles/survey.css
@@ -10,6 +10,10 @@ html, body {
   font-family: Arial, sans-serif;
 }
 
+html {
+  overflow-y: scroll;
+}
+
 /* General Styles */
 body {
   font-family: Arial, sans-serif;
@@ -86,7 +90,7 @@ body {
     align-items: center;
 }
 
-.circular-card {
+/* .circular-card {
     width: 100px;
     height: 100px;
     aspect-ratio: 1/1;
@@ -101,7 +105,26 @@ body {
     padding: 10px;
     text-align: center;
     box-sizing: border-box;
-        }
+} */
+
+.circular-card {
+  width: 110px;
+  height: 70px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+
+.circular-card div {
+  width: 100%;
+  word-wrap: break-word;
+  font-style: italic;
+}
+
 .circular-card:hover{
             transform: translateY(-3px);
             box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
@@ -161,7 +184,7 @@ body {
 }
                 
 #iconContainer{
-   background-color: rgba(255, 255, 255, 0.6);
+   background-color: #ffffff99;
 }
 
 #nextButton{
@@ -176,6 +199,7 @@ body {
   padding: 20px;
   margin: 45px auto;
   max-width: 75%;
+  max-height: 100%;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   text-align: center;
@@ -267,3 +291,50 @@ body {
   margin-bottom: 15px;
   text-align: center;
 }
+
+@media screen and (max-width: 970px){
+  #iconResponse {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #iconResponse > * {
+    width: 50%;
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+  
+  .survey-container {
+    max-height: 970px;
+  }
+
+  .coins-display p {
+    padding: 10px;
+    font-size: 1rem;
+  }
+
+  #surveyTitle {
+    font-size: 1.2rem;
+  }
+
+  #progressText {
+    font-size: 0.75rem;
+  }
+
+  #questionText {
+    font-size: 1rem;
+  }
+
+  .circular-card {
+    width: 90px;
+    height: 50px;
+  }
+
+  .circular-card div {
+    font-size: 10px;
+  }
+
+  #backButton, #nextButton {
+    font-size: 0.75rem;
+  }
+}
\ No newline at end of file
diff --git a/views/calendar.ejs b/views/calendar.ejs
index 2a4f37a..5b336c3 100644
--- a/views/calendar.ejs
+++ b/views/calendar.ejs
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/styles/home.css">
   <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
 </head>
 <body>
   <%- include('partials/navbar') %>
diff --git a/views/chart.ejs b/views/chart.ejs
index 04a865c..901d7d2 100644
--- a/views/chart.ejs
+++ b/views/chart.ejs
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/styles/home.css">
   <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
 </head>
 <body>
   <%- include('partials/navbar') %>
diff --git a/views/chatbot.ejs b/views/chatbot.ejs
index c6ad4c9..03fc9dc 100644
--- a/views/chatbot.ejs
+++ b/views/chatbot.ejs
@@ -8,6 +8,8 @@
   <link rel="stylesheet" href="/styles/chatbot.css">
   <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet"  href="/styles/navbar.css">
 <!--
 <style>
 html, body {
diff --git a/views/feedback.ejs b/views/feedback.ejs
index 6a6db3a..1932c41 100644
--- a/views/feedback.ejs
+++ b/views/feedback.ejs
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/styles/home.css">
   <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
 </head>
 <body>
   <%- include('partials/navbar') %>
diff --git a/views/games.ejs b/views/games.ejs
index f40894d..b972cc8 100644
--- a/views/games.ejs
+++ b/views/games.ejs
@@ -5,9 +5,16 @@
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mini Games</title>
      <link rel="icon" href="/favicon.ico" type="image/x-icon">
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+     <link rel="stylesheet" href="/styles/navbar.css">
      <script src="/js/phaser.min.js"></script>
      <style>
-         body {
+         html {
+           overflow-y: scroll;
+         }
+        
+         html, body {
+              height: 100%;
               background: linear-gradient(
                 135deg,
                 #B8C6FF 0%, 
diff --git a/views/home.ejs b/views/home.ejs
index a77fedc..5ab6bfa 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/styles/home.css">
   <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
 </head>
 <body>
   <%- include('partials/navbar') %>
diff --git a/views/partials/navbar.ejs b/views/partials/navbar.ejs
index f2aa894..b3b9fee 100644
--- a/views/partials/navbar.ejs
+++ b/views/partials/navbar.ejs
@@ -1,17 +1,20 @@
-<nav class="navbar">
+<nav class="custom-navbar">
   <div class="logo">
-    <img src="/images/beebalancedlogo.jpg" alt="Bee Logo" class="bee-icon">
-    <span class="logo-text">Me Balanced</span>
+    <img src="/images/MeBalanced.png" alt="Bee Logo" class="bee-icon" width="50px" height="50px">
   </div>
 
-  <div class="nav-links">
+  <button class="hamburger-menu" id="hamburgerButton">
+    <i class="fas fa-bars"></i>
+  </button>
+
+  <div class="custom-nav-links" id="navLinks">
     <a href="/home">Home</a>
     <a href="/chatbot">Chatbot</a>
     <a href="/survey">Survey</a>
 
-    <div class="dropdown">
-      <a href="#" class="dropbtn">Progress</a>
-      <div class="dropdown-content">
+    <div class="custom-dropdown">
+      <a href="#" class="custom-dropbtn">Progress</a>
+      <div class="custom-dropdown-content">
         <a href="/chart">Weekly Progress</a>
         <a href="/calendar">Monthly Progress</a>
         <a href="/feedback">Recent Feedback</a>
@@ -20,9 +23,9 @@
 
     <a href="/games">Games</a>
 
-    <div class="dropdown">
-      <a href="#" class="dropbtn">Account</a>
-      <div class="dropdown-content">
+    <div class="custom-dropdown">
+      <a href="#" class="custom-dropbtn">Account</a>
+      <div class="custom-dropdown-content">
         <a href="/edit-account">Edit Account</a>
         <a href="/logout">Logout</a>
       </div>
@@ -34,107 +37,11 @@
   </div>
 </nav>
 
-<style>
-  .navbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: linear-gradient(90deg, #1f1f1f 0%, #2a2a2a 100%);
-    padding: 14px 32px;
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
-    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
-    position: relative;
-    z-index: 1000;
-  }
-
-  .navbar .logo {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .navbar .bee-icon {
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    object-fit: cover;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  }
-
-  .logo-text {
-    font-size: 2rem;
-    font-weight: 800;
-    letter-spacing: 0.4px;
-    color: #ffd700;
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  .navbar .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .navbar a,
-  .dropbtn {
-    color: #f5f5f5;
-    text-decoration: none;
-    font-size: 1.05rem;
-    font-weight: 600;
-    padding: 10px 16px;
-    border-radius: 10px;
-    transition: all 0.25s ease;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-family: Arial, sans-serif;
-    display: inline-block;
-    line-height: 1.2;
-  }
-
-  .navbar a:hover,
-  .dropdown:hover .dropbtn {
-    background: rgba(255, 215, 0, 0.12);
-    color: #ffd700;
-    transform: translateY(-1px);
-  }
-
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: auto;
-    min-width: 210px;
-    background: #2f2f2f;
-    border-radius: 12px;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
-    border: 1px solid rgba(255, 215, 0, 0.12);
-    overflow: hidden;
-    z-index: 1001;
-  }
-
-  .dropdown-content a {
-    display: block;
-    padding: 14px 16px;
-    font-size: 0.98rem;
-    font-weight: 500;
-    color: #f5f5f5;
-    border-radius: 0;
-  }
-
-  .dropdown-content a:hover {
-    background: rgba(255, 215, 0, 0.12);
-    color: #ffd700;
-    transform: none;
-  }
+<script>
+  const hamburgerButton = document.getElementById("hamburgerButton");
+  const navLinks = document.getElementById("navLinks");
 
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
-</style>
\ No newline at end of file
+  hamburgerButton.addEventListener("click", () => {
+    navLinks.classList.toggle('active');
+  });
+</script>
\ No newline at end of file
diff --git a/views/survey-choice.ejs b/views/survey-choice.ejs
index 886b8e1..317f4c3 100644
--- a/views/survey-choice.ejs
+++ b/views/survey-choice.ejs
@@ -6,6 +6,9 @@
   <title>Survey Choice</title>
   <link rel="stylesheet" href="/styles/survey.css">
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
+
 </head>
 <body>
   <div class="survey-choice-container">
diff --git a/views/survey.ejs b/views/survey.ejs
index 01eb5e9..72a4d18 100644
--- a/views/survey.ejs
+++ b/views/survey.ejs
@@ -6,15 +6,16 @@
   <title>Survey</title>
   <link rel="stylesheet" href="/styles/survey.css">
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <link rel="stylesheet" href="/styles/navbar.css">
   <link
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
     rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
     crossorigin="anonymous"
     >
-  <!-- Bootstrap Icons -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
-
 </head>
 <body>
   <%- include('partials/navbar') %>
@@ -122,7 +123,7 @@
       <a href="/shop" class="btn">Shop</a>
 
     <%}%> <% if (section !== "choice" && section !== "completed" && typeof questions !== 'undefined') { %>
-      <div class="container py-5" id="surveyFormContainer">
+      <div class="container py-4" id="surveyFormContainer">
         <div class="coins-display">
           <p>
             <span id="coin-count"><%= coins ?? 0 %></span>
@@ -130,7 +131,7 @@
           </p>
         </div>
         <div class="mb-3">
-            <h3 class="fw-semibold"><%= section.charAt(0).toUpperCase() + section.slice(1) %> Check-In</h3>
+            <h3 class="fw-semibold" id="surveyTitle"><%= section.charAt(0).toUpperCase() + section.slice(1) %> Check-In</h3>
                         <div class="small text-muted mt-2">
                 <span id="progressText">Question 1 of <%= questions.length %></span>
             </div>
@@ -150,15 +151,15 @@
           <div class="border rounded-4 p-4" id="iconContainer">
             <% questions.forEach((q, index) => { %>
               <section class="step <%= index === 0 ? 'active' : '' %>" data-step="<%= index + 1 %>">
-                <h2 class="h5 fw-semibold mb-3"><%= q.question %></h2>
-                <div class="row g-3">
+                <h2 class="h5 fw-semibold mb-3" id="questionText"><%= q.question %></h2>
+                <div class="col row row-cols-1 row-cols-sm-5 g-4" id="iconResponse">
                   <% q.responses.forEach((response) => { %>
-                    <div class="col text-center">
-                      <label class="card circular-card">
+                    <div class="col text-center d-flex flex-column align-items-center">
+                      <label class="circular-card">
                         <input type="radio" name="<%= q.id %>" value="<%= response.value %>" class="hidden-radio">
                         <div>
                           <i class="bi <%= response.icon %>"></i>
-                          <div class="fs-12"><%= response.label %></div>
+                          <div class="fs-12" id="responseText"><%= response.label %></div>
                         </div>
                       </label>
                     </div>