diff --git a/data/comments.json b/data/comments.json
index 7e39ddf..dec4ab5 100644
--- a/data/comments.json
+++ b/data/comments.json
@@ -1,13 +1 @@
-[{
-    "comments": "Hey",
-    "count": 1
-}, {
-    "comments": "ssdfg",
-    "count": 1
-}, {
-    "comments": "sacdasdasdx",
-    "count": 1
-}, {
-    "comments": "nfgn",
-    "count": 1
-}]
\ No newline at end of file
+[{"comments":"Hey","count":1},{"comments":"ssdfg","count":1},{"comments":"sacdasdasdx","count":1},{"comments":"nfgn","count":1},{"comments":"cvvcvvc","count":1},{"comments":"dgfffgdfgd","count":1},{"comments":"dvssdvvdvddsvvsvsdvvdvdsvdsvsdl mksdvjnbijovnvsapslvib9vuodbfaviuovlvboaidslvbdlvabdsvvoulvgovdbvuvavovbbvdebvdvivvv","count":1}]
\ No newline at end of file
diff --git a/data/email.json b/data/email.json
index 6502909..d1182e1 100644
--- a/data/email.json
+++ b/data/email.json
@@ -1 +1 @@
-[{ "email": "bbaso079@uottawa.ca", "count": 1 }, { "email": "ruchirawperera@gmail.com", "count": 1 }, { "email": "fsdfsd", "count": 1 }, { "email": "dgfbb", "count": 1 }]
\ No newline at end of file
+[{"email":"bbaso079@uottawa.ca","count":1},{"email":"ruchirawperera@gmail.com","count":1},{"email":"fsdfsd","count":1},{"email":"dgfbb","count":1},{"email":"a@g.com","count":1}]
\ No newline at end of file
diff --git a/data/firstName.json b/data/firstName.json
index b54617e..d4272cf 100644
--- a/data/firstName.json
+++ b/data/firstName.json
@@ -1,13 +1 @@
-[{
-    "firstName": "Batuhan",
-    "count": 1
-}, {
-    "firstName": "Ruchira",
-    "count": 1
-}, {
-    "firstName": "dzsfvs",
-    "count": 1
-}, {
-    "firstName": "xff",
-    "count": 1
-}]
\ No newline at end of file
+[{"firstName":"Batuhan","count":1},{"firstName":"Ruchira","count":1},{"firstName":"dzsfvs","count":1},{"firstName":"xff","count":1},{"firstname":["vvcv","cvv"],"count":1},{"firstname":["dfdgfgdf","dwa@g.com"],"count":1},{"firstName":"cddvdvd","count":1}]
\ No newline at end of file
diff --git a/data/lastName.json b/data/lastName.json
index 96d7b00..ed9c6c9 100644
--- a/data/lastName.json
+++ b/data/lastName.json
@@ -1 +1 @@
-[{"lastName":"Basoglu","count":1},{"lastName":"Perera","count":1},{"lastName":"asdasd","count":1},{"lastName":"dthbh","count":1}]
\ No newline at end of file
+[{"lastName":"Basoglu","count":1},{"lastName":"Perera","count":1},{"lastName":"asdasd","count":1},{"lastName":"dthbh","count":1},{"lastname":"vcvc","count":1},{"lastname":"gdgfdfggf","count":1},{"lastName":"sddsdsds","count":1}]
\ No newline at end of file
diff --git a/data/question1.json b/data/question1.json
index e23492b..3517c21 100644
--- a/data/question1.json
+++ b/data/question1.json
@@ -1 +1 @@
-[{"question1":"yes","count":2},{"question1":"no","count":2}]
\ No newline at end of file
+[{"question1":"yes","count":3},{"question1":"no","count":4}]
\ No newline at end of file
diff --git a/data/question2.json b/data/question2.json
index 1b54645..e3cf0ca 100644
--- a/data/question2.json
+++ b/data/question2.json
@@ -1 +1 @@
-[{"question2":"Old UI","count":3},{"question2":"New UI","count":1}]
\ No newline at end of file
+[{"question2":"Old UI","count":4},{"question2":"New UI","count":3}]
\ No newline at end of file
diff --git a/data/question3.json b/data/question3.json
index 8698d6c..7b50be3 100644
--- a/data/question3.json
+++ b/data/question3.json
@@ -1 +1 @@
-[{"question3":"on","count":4}]
\ No newline at end of file
+[{"question3":"on","count":7}]
\ No newline at end of file
diff --git a/data/question4.json b/data/question4.json
index 694dd60..f91f2f5 100644
--- a/data/question4.json
+++ b/data/question4.json
@@ -1 +1 @@
-[{"question4":["Position of messages on the screen is consistent","Prompts for inputs are clear","System always informs about the progress of the task"],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Prompts for inputs are clear ","System always informs about the progress of the task "],"count":1}]
\ No newline at end of file
+[{"question4":["Position of messages on the screen is consistent","Prompts for inputs are clear","System always informs about the progress of the task"],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Prompts for inputs are clear ","System always informs about the progress of the task "],"count":1},{"question4":"Position of messages on the screen is consistent ","count":1},{"question4":["Prompts for inputs are clear ","System always informs about the progress of the task "],"count":1},{"question4":["Use of terms throughout the system is consistent ","Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1}]
\ No newline at end of file
diff --git a/data/question5.json b/data/question5.json
index a986a01..85bea14 100644
--- a/data/question5.json
+++ b/data/question5.json
@@ -1 +1 @@
-[{"question5":"on","count":4}]
\ No newline at end of file
+[{"question5":"on","count":7}]
\ No newline at end of file
diff --git a/data/question6.json b/data/question6.json
index 3d133a6..2cb7a38 100644
--- a/data/question6.json
+++ b/data/question6.json
@@ -1 +1 @@
-[{"question6":"yahoo","count":1},{"question6":"kl","count":1},{"question6":"asdasd","count":1},{"question6":"dbgnf","count":1}]
\ No newline at end of file
+[{"question6":"yahoo","count":1},{"question6":"kl","count":1},{"question6":"asdasd","count":1},{"question6":"dbgnf","count":1},{"question6":"vcvvc","count":1},{"question6":"dfbbdbfb","count":1},{"question6":"wcvvvsvdvsdvdvds","count":1}]
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 0f03471..b62181e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,24 +1,29 @@
 body {
-    background-color: #9caf49;
     text-align: center;
-    /* background-image: url("images/bg3.jpg"); */
 }
 
 h1 {
     font-family: "Helvetica ", sans-serif;
-    font-size: 40px;
+    font-size: 3rem;
     color: rgb(45, 43, 170);
 }
+h2{
+  font-size: 2rem;
+}
+
+p{
+  font-size : 1rem;
+}
 
 .browser {
     padding-left: 10px;
 }
 
 .survey_body {
-    background-color: #53dfe4;
-    margin: 20px;
+    /* background-color: #53dfe4; */
+    /* margin: 20px;
     padding-top: 40px;
-    padding-bottom: 40px;
+    padding-bottom: 40px; */
 }
 
 .form-control-1 {
@@ -62,7 +67,7 @@ h1 {
     height: auto;
 }
 
-.footer {
+/* .footer {
     position: fixed;
     left: 0;
     bottom: 0;
@@ -71,7 +76,7 @@ h1 {
     background-color: rgb(87, 139, 216);
     color: rgb(255, 255, 255);
     text-align: center;
-}
+} */
 
 .button {
     background-color: rgb(87, 139, 216);
@@ -89,4 +94,41 @@ h1 {
 
 .btnClass {
     text-align: center;
-}
\ No newline at end of file
+}
+
+/* Shared classes */
+.questions{
+  margin: 4% 3%;
+}
+
+
+/* Title section */
+#title {
+  background-color: #F4C983;
+  padding : 3% 7%;
+}
+/* Form Section */
+#form {
+  padding: 3% 7%;
+  text-align: center;
+  /* background-color: #5B6D5B; */
+  /* #F4C983; */
+}
+.SurveyIntro{
+  margin: 3%;
+}
+.userInfo{
+  margin: 2.5%;
+}
+
+.surveryForm {
+  /* #DDDDDD; */
+  /* background-color: #5B6D5B; */
+}
+
+/* Footer section */
+#footer {
+  padding: 3% 4%;
+  background-color: #F4C983;
+  text-align: center;
+}
diff --git a/views/index.html b/views/index.html
index 8e1feb8..7145f8e 100644
--- a/views/index.html
+++ b/views/index.html
@@ -3,157 +3,172 @@
 <html lang="en-US">
 
 <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="styles.css">
+  <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">
+  <title>Survey of Facebook UI</title>
+  <meta name="description" content="Survey of Facebook UI">
+  <meta name="author" content="SitePoint">
 
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-    <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>    
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <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>
 
 </head>
 
 <body>
-    <!-- The Nav section for the survey title---->
-    <navbar>
+  <!-- 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 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>
-    
+      </navbar>
+    </div>
+  </section>
 
-
-    <section class="survey_body">
-        
+  <!-- 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>
-        <hr>
+      </div>
+      <hr>
 
-        <div class="row">
-            <div class="col-2">
-            </div>
-            <div class="col-8">
-                <form>
-            <div class="form-control-1">
-                <label id="name-label">First Name:</label>
-                <input type="text" name="firstName" placeholder="Enter the First Name" required>
-            </div>
-            <div class="form-control-1">
-                <label id="name-label">Last Name:</label>
-                <input type="text" name="lastName" placeholder="Enter the Last Name" required>
-            </div>
-            <div class="form-control-1">
-                <label id="name-label">E-mail:</label>
-                <input type="text" name="email" placeholder="Enter the Email" required>
-            </div>
-            <br>
-
-            <div id="questions">
-                <div class="two">
-                    <form>
-                        <label id="radio">Do you use the Facebook user interface often?</label>
-                        <br>
-                        <div style="margin-right: 4px;">
-                            <input type="radio" name="question1" value="yes" name="enjoy">
-                            <label for="yes">Yes</label>
-                            <input type="radio" name="question1" value="no" name="enjoy">
-                            <label for="no">No</label>
-                        </div>
-                    </form>
-                    <br>
-
-                </div>
-
-                <div class="box">
-                    <label>Which Facebook user interface do you prefer?</label>
-                    <div style="margin-left: 22px;"> 
-                        <select name="question2">
-                            <option value="" selected=""> Select an Option</option>
-                            <option value="Old UI"> Old UI</option>
-                            <option value="New UI"> New UI </option>
-                            <option value="No Preference"> No Preference</option>
-                        </select>
-                    </div>
-
-                </div>
-
-                <div class="btn-control">
-                    <label id="radio">How difficult is reading characters on the screen?</label><br>
-                    <input type="radio" name="question3"> Very Hard<br>
-                    <input type="radio" name="question3"> Somewhat hard<br>
-                    <input type="radio" name="question3"> Somewhat easy<br>
-                    <input type="radio" name="question3"> Very easy<br>
-                </div>
-
-                <div class="btn-control">
-                    <label id="checkbox;">Please state your level of agreement for the following:</label><br>
-                    <input type="checkbox" name="question4" value="Use of terms throughout the system is consistent "> Use of terms throughout the system is consistent</input><br>
-                    <input type="checkbox" name="question4" value="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
-                    <input type="checkbox" name="question4" value="Prompts for inputs are clear "> Prompts for inputs are clear</input><br>
-                    <input type="checkbox" name="question4" value="System always informs about the progress of the task "> System always informs about the progress of the task</input><br>
-                    <input type="checkbox" name="question4" value="Error messages are helpful "> Error messages are helpful</input>
-                </div>
-
-                <div class="btn-control">
-                    <label id="radio">In which section of facebook does the user interface look most awful?</label><br>
-                    <input type="radio" name="question5"> Photos<br>
-                    <input type="radio" name="question5"> News<br>
-                    <input type="radio" name="question5"> Messaging<br>
-                    <input type="radio" name="question5"> Games<br>
-                </div>
-                
-                <div class="btn-control">
-                    <label id="radio">Is there a problem in UI that bothers you?</label><br>
-                    <input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
-                </div>
-
-                <br>
-                <div class="texto">
-                    <p style="font-size:120%;">Please enter your comments here:
-                    <p>
-                        <textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder="Enter your text...."></textarea>
-                </div>
-                <div class="btnClass">
-                    <button type="submit" class="button" id="bb">Submit</button>
-                </div>
-                
-            </div>
-
-        </form>
-            
-            </div>
-            <div class="col-2">
-            </div>
+      <!-- the content of the form -->
+      <!-- action="index.html" method="post" -->
+      <form class="surveryForm">
+        <!-- User Information -->
+        <div class="userInfo">
+          <h2>User Information</h2>
+          <p>Please provide your information before filling the survey</p>
+        </div>
+        <!-- the text box for the user filling the form -->
+        <div class="form-group">
+          <div class="row">
+            <div class="col-6">
+              <label for="fnameLabel">First Name</label>
+              <input type="text" 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>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="row">
+            <!-- style="float: right;" -->
+            <div class="col-6">
+              <label for="emailLabel">Email</label>
+              <input type="text" id="email" name="email" placeholder="Email" required>
+            </div>
+          </div>
+        </div>
+        <hr>
+        <!-- Questions in the form -->
+        <!-- Quetion 1 and 2 -->
+        <div class="row questions">
+          <!-- Question 1 -->
+          <div class="col-6">
+            <label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label>
+            <br>
+            <!-- style="margin-right: 4px;" -->
+            <div class="row">
+              <div class="col-6">
+                <input type="radio" name="question1" value="yes">
+                <label for="yes">Yes</label>
+              </div>
+              <div class="col-6">
+                <input type="radio" name="question1" value="no">
+                <label for="no">No</label>
+              </div>
+            </div>
+          </div>
+          <!-- Question 2 -->
+          <div class="col-6">
+            <label><span>2.</span> Which Facebook user interface do you prefer?</label>
+            <div style="margin-left: 22px;">
+              <select name="question2">
+                <option value="" selected=""> Select an Option</option>
+                <option value="Old UI"> Old UI</option>
+                <option value="New UI"> New UI </option>
+                <option value="No Preference"> No Preference</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <!-- Question3 and 4 -->
+        <div class="row questions">
+          <!-- Question 3-->
+          <div class="col-6">
+            <label id="radio"><span>3.</span> How difficult is reading characters on the screen?</label><br>
+            <input type="radio" name="question3"> Very Hard<br>
+            <input type="radio" name="question3"> Somewhat hard<br>
+            <input type="radio" name="question3"> Somewhat easy<br>
+            <input type="radio" name="question3"> Very easy<br>
+          </div>
+          <!-- Question 4 -->
+          <div class="col-6">
+            <label id="checkbox;"><span>4.</span> Please state your level of agreement for the following:</label><br>
+            <input type="checkbox" name="question4" value="Use of terms throughout the system is consistent "> Use of terms throughout the system is consistent</input><br>
+            <input type="checkbox" name="question4" value="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
+            <input type="checkbox" name="question4" value="Prompts for inputs are clear "> Prompts for inputs are clear</input><br>
+            <input type="checkbox" name="question4" value="System always informs about the progress of the task "> System always informs about the progress of the task</input><br>
+            <input type="checkbox" name="question4" value="Error messages are helpful "> Error messages are helpful</input>
+          </div>
+        </div>
+        <!-- Question 5 and 6 -->
+        <div class="row questions">
+          <!-- Question 5-->
+          <div class="col-6">
+            <label id="radio"><span>5.</span> In which section of facebook does the user interface look most awful?</label><br>
+            <input type="radio" name="question5"> Photos<br>
+            <input type="radio" name="question5"> News<br>
+            <input type="radio" name="question5"> Messaging<br>
+            <input type="radio" name="question5"> Games<br>
+          </div>
+          <!-- Question 6 -->
+          <div class="col-6">
+            <label id="radio"><span>6.</span> Is there a problem in UI that bothers you?</label><br>
+            <input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
+          </div>
+        </div>
+        <!-- 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>
-        
 
+        <!-- Submit button -->
+        <div class="btnClass">
+          <button type="submit" class="button" id="bb">Submit</button>
+        </div>
 
-    </section>
-
-    <footer>
-        <p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
-    </footer>
-    <!--<div class="footer">
-        
+      </form>
     </div>
 
-    </div>-->
+  </section>
+
+  <footer id="footer">
+    <p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
+  </footer>
 
 
 
-<script src="/assets/action.js"></script>
+  <script src="/assets/action.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>