diff --git a/public/images/facebook_ui.png b/public/images/facebook_ui.png
new file mode 100644
index 0000000..378c88b
Binary files /dev/null and b/public/images/facebook_ui.png differ
diff --git a/public/styles.css b/public/styles.css
index b62181e..a42fdf0 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -58,26 +58,15 @@ p{
     font-size: 20px;
 }
 
-.questions {
+/* .questions {
     padding-top: 20px;
-}
+} */
 
 .fb {
     width: 10%;
     height: auto;
 }
 
-/* .footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    background-color: rgb(87, 139, 216);
-    color: rgb(255, 255, 255);
-    text-align: center;
-} */
-
 .button {
     background-color: rgb(87, 139, 216);
     border-color: transparent;
@@ -97,33 +86,55 @@ p{
 }
 
 /* Shared classes */
-.questions{
-  margin: 4% 3%;
-}
+
 
 
 /* Title section */
 #title {
   background-color: #F4C983;
-  padding : 3% 7%;
+  padding : 3% 4%;
 }
 /* Form Section */
 #form {
-  padding: 3% 7%;
+  padding: 3% 5%;
   text-align: center;
   /* background-color: #5B6D5B; */
   /* #F4C983; */
 }
-.SurveyIntro{
-  margin: 3%;
+.surveryForm {
+  /* #DDDDDD; */
+  background-color: #DDDDDD;
+}
+
+.surveyIntro{
+  /* margin: 4%; */
+  /* background-color: #F39189; */
+  padding : 5%;
+}
+.headerImg{
+  width: 40%;
 }
 .userInfo{
   margin: 2.5%;
 }
 
-.surveryForm {
-  /* #DDDDDD; */
-  /* background-color: #5B6D5B; */
+.userLabel{
+  margin: 3% 20%;
+  text-align: left;
+}
+
+.questions{
+  margin:  5% 7%;
+  text-align: left;
+}
+
+
+.commentBox{
+  margin: 4% 15%;
+}
+
+.btnClass{
+  margin: 4%;
 }
 
 /* Footer section */
diff --git a/views/index.html b/views/index.html
index 587f76a..758fcaa 100644
--- a/views/index.html
+++ b/views/index.html
@@ -4,13 +4,14 @@
 
 <head>
   <meta charset="utf-8">
-  <link rel="stylesheet" href="styles.css">
 
   <title>Survey of Facebook UI</title>
   <meta name="description" content="Survey of Facebook UI">
   <meta name="author" content="SitePoint">
-
+  <!-- Stylesheets -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="styles.css">
+  <!-- Bootstrap Extensions -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
@@ -18,37 +19,40 @@
 </head>
 
 <body>
-  <!-- The Nav section for the survey title---->
-  <section id="title">
-    <div class="container-fluid">
-      <navbar>
-        <div class="row">
-          <div class="col-6">
-            <h1>Questionnaire of the Facebook UI/UX</h1>
-            <a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook" class="fb"></a>
-          </div>
-          <div class="col-6">
-            <img src="images/facebook.jpg" alt="UI" class="facebook">
-            <p style="font-size:150%;">Give us your opinion about <a href="https://www.facebook.com/">Facebook</a> user interface</p>
-          </div>
-        </div>
-      </navbar>
-    </div>
-  </section>
-
   <!-- the form section for the survey -->
   <section id="form">
     <div class="container-fluid">
-      <!-- The form header -->
-      <div class="SurveyIntro">
-        <h2>Facebook Evaluation Form</h2>
-        <p>Please let us about your thoughts/experience with facebook user interface.</p>
-      </div>
-      <hr>
-
       <!-- the content of the form -->
-      <!-- action="index.html" method="post" -->
       <form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);">
+        <!-- The form header -->
+        <div class="surveyIntro">
+          <h1>Facebook UI/UX Survey</h1>
+          <p>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</p>
+          <!-- Carousel for different User Interfaces -->
+          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img src="images/fb.png" class="headerImg" alt="...">
+              </div>
+              <div class="carousel-item">
+                <img src="images/facebook_ui.png" alt="UI" class="headerImg">
+              </div>
+              <div class="carousel-item">
+                <img src="..." class="d-block w-100" alt="...">
+              </div>
+            </div>
+            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="sr-only">Next</span>
+            </a>
+          </div>
+          <!-- <img src="images/facebook_ui.png" alt="UI" class="headerImg"> -->
+        </div>
+        <hr>
         <!-- User Information -->
         <div class="userInfo">
           <h2>User Information</h2>
@@ -56,23 +60,22 @@
         </div>
         <!-- the text box for the user filling the form -->
         <div class="form-group">
-          <div class="row">
+          <div class="row userLabel">
             <div class="col-6">
               <label for="fnameLabel">First Name</label>
-              <input type="text" id="fname" name="firstName" placeholder="First Name" required>
+              <input type="text" class="form-control" id="fname" name="firstName" placeholder="First Name" required>
             </div>
             <div class="col-6">
               <label for="lnameLabel">Last Name</label>
-              <input type="text" id="lname" name="lastName" placeholder="Last Name" required>
+              <input type="text" class="form-control" id="lname" name="lastName" placeholder="Last Name" required>
             </div>
           </div>
         </div>
         <div class="form-group">
-          <div class="row">
-            <!-- style="float: right;" -->
+          <div class="row userLabel">
             <div class="col-6">
               <label for="emailLabel">Email</label>
-              <input type="text" id="email" name="email" placeholder="Email" required>
+              <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
             </div>
           </div>
         </div>
@@ -145,26 +148,34 @@
             <input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
           </div>
         </div>
+        <hr>
         <!-- feeback section -->
         <!-- texto -->
-        <div class="questions">
-          <p style="font-size:120%;">Please write down your comments</p>
-          <textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea>
+        <div class="commentBox">
+          <!-- <p>Please write down your comments</p>
+          <textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea> -->
+          <label for="exampleFormControlTextarea1">Please write down your comments</label>
+          <textarea class="form-control" name="comments" id="exampleFormControlTextarea1" rows="8"></textarea>
         </div>
 
         <!-- Submit button -->
         <div class="btnClass">
-          <button type="submit" class="button" id="bb">Submit</button>
+          <!-- <button type="submit" class="button" >Submit</button> -->
+          <button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
         </div>
 
+        <!-- Footer of the form -->
+        <footer id="footer">
+          <p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
+        </footer>
       </form>
     </div>
 
   </section>
 
-  <footer id="footer">
-    <p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
-  </footer>
+  <!-- Sources -->
+  <!-- https://cdn.vox-cdn.com/thumbor/8mDnaewReT78MFwXUsOJGp9u64Q=/0x0:2732x1536/920x0/filters:focal(0x0:2732x1536):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19819048/News_Feed.jpg -->
+
 
 
 
