merge conflict

public/css/style.css

 /*======================================
 //--//-->   FORM INPUT
 ======================================*/
+.login-page {
+    width: 360px;
+    padding: 8% 0 0;
+    margin: auto;
+}
+
+.reg-page {
+    width: 800px;
+    padding: 8% 0 0;
+    margin: auto;
+}
+
+.form {
+    position: relative;
+    z-index: 1;
+    background: rgb(236, 233, 233);
+    max-width: 360px;
+    margin: 0 auto 100px;
+    padding: 45px;
+    text-align: center;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.regform {
+    position: relative;
+    z-index: 1;
+    background: rgb(236, 233, 233);
+    max-width: 600px;
+    margin: 0 auto 100px;
+    padding: 45px;
+    text-align: center;
+    font-size: 10pt;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
 
 .form-a #sendmessage {
     color: #60CBEB;

src/components/property/propertyImage.vue

 <template>
   <div>
     <div>
-      <label class="btn btn-a" style="width: 137px; height:58px;">
+      <label class="btn btn-b-n" style="width: 85px; height:40px;">
         Upload
         <input
           type="file"
   data() {
     return {
       images: {},
-      image: [],
+      image: []
     };
   },
 
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
           console.log(vm.image);
         };
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = '';
+        this.$refs.im.value = "";
       }
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/components/property/propertyeditPage.vue

           >
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label for="Property Type"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.propertyTypeId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Property Type</option>
                   <option v-for="item in propertyTypes" :value="item.id">{{ item.description }}</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Address Line 1</label>
+                <label for="Address Line 1"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 1"
                   name="address1"
                   id="address1"
                   v-model="property.addressLine1"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 2</label>
+                <label for="Address Line 2"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 2"
                   name="address2"
                   id="address2"
                   v-model="property.addressLine2"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 3</label>
+                <label for="Address Line 3"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 3"
                   name="address3"
                   id="address3"
                   v-model="property.addressLine3"
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Province</label>
+                <label for="Province"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="ProvinceSelected"
                   v-model="property.provinceId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Province</option>
                   <option
                     v-for="province in provinces"
                     :value="province.id"
                 </select>
               </div>
               <div class="col-md-4">
-                <label>City</label>
+                <label for="City"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="CitySelected"
                   v-model="property.cityId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select City</option>
                   <option v-for="city in cities" :value="city.id">{{ city.description }}</option>
                 </select>
               </div>
               <div class="col-md-4">
-                <label>Suburb</label>
+                <label for="Suburb"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="suburbselector"
                   v-model="property.suburbId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Suburb</option>
                   <option v-for="suburb in suburbs" :value="suburb.id">{{ suburb.description }}</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label v-if="salesType === 'Rental'">Rental</label>
-                <label v-if="salesType !== 'Rental'">Sale Price</label>
+                <label v-if="salesType === 'Rental'">Rental Price</label>
+                <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="number"
                   name="price"
                   id="price"
+                  placeholder="R"
                   v-model="property.price"
                 />
               </div>
               <div class="col-md-4" v-if="salesType === 'Rental'">
                 <label>Per</label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.per"
                 >
-                  <option value>Please Select</option>
+                  <option value>Please select</option>
                   <option value="month">Month</option>
                   <option value="day">Day</option>
                 </select>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
-                <label>Property Description</label>
+                <label for="Property Description"></label>
                 <textarea
-                  class="form-control editor form-control-lg form-control-a"
+                  class="form-control editor"
+                  placeholder="Property Description"
                   name="description"
                   v-model="property.description"
                 ></textarea>
+                <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
             </div>
               </div>
             </div>
             <ImageLoad />
-            <button type="submit" class="btn btn-a">Save</button>
+            <button type="submit" class="btn btn-b-n" style="width: 85px; height:40px;">Save</button>
           </form>
         </div>
       </div>
 </template>
 
 <script>
-import UserField from './propertyUserField.vue';
-import ImageLoad from './propertyImage.vue';
+import UserField from "./propertyUserField.vue";
+import ImageLoad from "./propertyImage.vue";
 
 export default {
-  name: 'PropertyEdit',
+  name: "PropertyEdit",
   components: {
     UserField,
-    ImageLoad,
+    ImageLoad
   },
   data() {
     return {
       ApiRunning: false,
-      propertyType: 'Residential',
-      salesType: 'Rental',
-      imageFile: '',
+      propertyType: "Residential",
+      salesType: "Rental",
+      imageFile: "",
       provinces: [],
       cities: [],
       suburbs: [],
       propertyValues: [],
       propValuesProp: [],
       propertyTypes: [],
-      selectedProvince: '',
-      selectedCity: '',
+      selectedProvince: "",
+      selectedCity: "",
       property: {
         propertyTypeId: 0,
-        addressLine1: '',
-        addressLine2: '',
-        addressLine3: '',
+        addressLine1: "",
+        addressLine2: "",
+        addressLine3: "",
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: '',
-        per: '',
-        description: '',
-        isSale: false,
-      },
+        price: "",
+        per: "",
+        description: "",
+        isSale: false
+      }
     };
   },
   methods: {
     SubmitData() {
-      const axios = require('axios');
+      const axios = require("axios");
       axios
-        .post('http://localhost:57260/Property/Property', this.property, {
+        .post("http://localhost:57260/Property/Property", this.property, {
           headers: {
-            'Content-type': 'application/json',
-          },
+            "Content-type": "application/json"
+          }
         })
-        .then((response) => {})
-        .catch((e) => {
+        .then(response => {})
+        .catch(e => {
           alert(e);
         });
 
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
+            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
           )
           .then(response => (this.cities = response.data));
       }
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
+            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
           )
           .then(response => (this.suburbs = response.data));
       }
-    },
+    }
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require('axios');
+    const axios = require("axios");
     axios
-      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
       .then(response => (this.propValuesProp = response.data));
 
     axios
-      .get('http://localhost:57260/Property/PropertyFields')
+      .get("http://localhost:57260/Property/PropertyFields")
       .then(response => (this.propertyValues = response.data));
 
     axios
       .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
       )
       .then(response => (this.propertyTypes = response.data));
 
     axios
-      .get('http://localhost:57260/region/province')
+      .get("http://localhost:57260/region/province")
       .then(response => (this.provinces = response.data));
   },
   computed: {
       this.propertyType = this.$route.params.propType;
       this.salesType = this.$route.params.saleType;
 
-      const axios = require('axios');
+      const axios = require("axios");
       axios
         .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
         )
         .then(response => (this.propertyTypes = response.data));
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/components/shared/footerSection.vue

               <div class="w-footer-a">
                 <ul class="list-unstyled">
                   <li class="color-a">
-                    <span class="color-text-a">Phone .</span> +27 (0)12 492 1238
+                    <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
+                    <span class="color-text-a"></span> +27 (0)12 492 1238
                   </li>
                   <li class="color-a">
-                    <span class="color-text-a">Email .</span> info@univateproperties.co.za
+                    <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                    <span class="color-text-a"></span> info@univateproperties.co.za
                   </li>
                 </ul>
               </div>
                     </li>
                     <br />
                     <li class="list-inline-item">
-                      <a href="www.https://www.facebook.com/univateproperties/">
-                        <i class="fa fa-facebook color-b font-weight-bold" aria-hidden="true"></i>
+                      <a href="https://www.facebook.com/univateproperties/">
+                        <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
                       </a>
                     </li>
                   </ul>

src/components/shared/navBar.vue

             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">To Sell</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/timeshare/sell')"
+              >My Timeshare Weeks</a>
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
             </div>
           </li>
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/property/Residential/Sale')"
               >To Sell</div>
+              <div
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Residential/Sale')"
+              >My Residential Properties</div>
+              <div
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Residential/Sale')"
+              >Admin Residential Properties</div>
             </div>
           </li>
           <li class="nav-item dropdown">
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/property/Commercial/Sale')"
               >To Sell</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Commercial/Sale')"
+              >My Commercial Properties</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/property/Commercial/Sale')"
+              >Admin Commercial Properties</a>
             </div>
           </li>
           <li class="nav-item dropdown">
             >Admin</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/status/list')"
+              >Timeshare Week Admin</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/status/list')"
+              >Changes Logs</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/status/list')"
+              >User Management & Access</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/status/list')"
+              >Tender Week Management</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/status/list')"
+              >Timeshare Week Approval</a>
               <a
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/unitConfiguration/list')"
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
               <a class="dropdown-item cursor-pointer">Logout</a>
-            </div>
-          </li>
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Register</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/user/register')"
-              >Private Individual</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
               <a
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/user/registeragency')"

src/components/timeshare/buy/buyPage.vue

               <div class="accordion" id="accordionExample">
                 <div class="card" v-for="(region, r) in detailedRegion" :key="r">
                   <a
-                    class="btn-link"
+                    class="btn btn-b-n"
                     type="button"
                     data-toggle="collapse"
                     :data-target="'#collapse' + region.id"
                     aria-expanded="false"
                     :aria-controls="'collapse' + region.id"
                   >
-                    <div class="card-header" :id="'header' + region.id">
-                      <h4 class="mb-0">{{ region.regionName }}</h4>
+                    <div :id="'header' + region.id">
+                      <h5 class="mb-0">{{ region.regionName }}</h5>
                     </div>
                   </a>
                   <div

src/components/timeshare/faqPage.vue

   <section class="collapse-items">
     <section class="intro-single">
       <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">Frequently Asked Questions</h1>
-            </div>
-          </div>
+        <div class="title-single-box">
+          <h3 class="title-single" style="text-align:left;">Frequently Asked Questions</h3>
         </div>
       </div>
     </section>

src/components/user/loginPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
-    <div class="goDown"></div>
-    <form id="mainForm">
-      <div class="form-group row"></div>
-      <h4>Login</h4>
-      <div class="form-group row"></div>
-      <div class="form-group row">
-        <div class="offset-md-1 col-md-5">
-          <div class="row">
-            <div class="col-md-1">
-              <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-            </div>
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                v-model="username"
-                placeholder="Username"
-                type="text"
-                name="username"
-                value
-              />
-            </div>
-          </div>
+  <div class="login-page">
+    <form id="signIn">
+      <div class="form">
+        <div>
+          <h4>Login</h4>
         </div>
-        <div class="col-md-5">
-          <div class="row">
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="password"
-                id="password"
-                placeholder="Password"
-                name="password"
-                value
-              />
-            </div>
+        <div class="row">
+          <div>
+            <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
+          </div>
+          <div class="col-md-11">
+            <input
+              class="form-control"
+              v-model="username"
+              placeholder="Username"
+              type="text"
+              name="username"
+              value
+            />
+          </div>
+          <div>
             <eva-icon v-if="!showPassword" name="eye-off" fill="#60CBEB" @click="togglePassword()"></eva-icon>
             <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
           </div>
+          <div class="col-md-11">
+            <input
+              class="form-control"
+              :type="isPasswordShown"
+              v-model="password"
+              id="password"
+              placeholder="Password"
+              name="password"
+              value
+            />
+          </div>
         </div>
+        <div class="form-group row"></div>
+        <button @click="Login" class="btn btn-b-n" type="submit">Sign In</button>
+        <p v-if="user !== null">{{ user }}</p>
       </div>
-      <div class="form-group row"></div>
-      <eva-icon name="log-in-outline" fill="#60CBEB"></eva-icon>
-      <button @click="Login" class="btn btn-b-n">Sign In</button>
-      <p v-if="user !== null">{{ user }}</p>
     </form>
-    <br />
-    <br />
-    <br />
-    <form>
-      <h5>Trouble signing in?</h5>
-      <div class="form-group row"></div>
-      <div class="from-group row">
-        <div class="col-md-12">
-          <input class="form-control" placeholder="Your Email" type="text" name="email" value />
+
+    <form id="forgot">
+      <div class="form">
+        <h5>Trouble signing in?</h5>
+        <div>
+          <div class="row">
+            <eva-icon name="email" fill="#60CBEB"></eva-icon>
+
+            <div class="col-md-11">
+              <input class="form-control" placeholder="Your Email" type="text" name="email" value />
+            </div>
+          </div>
+        </div>
+        <div class="form-group row"></div>
+        <div class="offset-md-3 col-md-5">
+          <button class="btn btn-b-n" type="submit">Get Help</button>
         </div>
       </div>
-      <div class="form-group row"></div>
-      <eva-icon name="question-mark-circle-outline" fill="#60CBEB"></eva-icon>
-      <button class="btn btn-b-n">Get Help</button>
     </form>
   </div>
 </template>
       textErrors: 'Some error with the field',
       text: '',
       showPassword: false,
+      password: '',
     };
   },
   methods: {
     Login() {
       console.log(this.username + this.password);
       axios
-        .post('http://localhost:57260/api/user', {
+        .post('http://localhost:57260/api/register/authenticate', {
           username: this.username,
           password: this.password,
         })
         .then(response => console.log(response.data));
+      this.$router.push('/about/us');
     },
     togglePassword() {
       this.showPassword = true;

src/components/user/registerAgencySection.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
-    <div class="goDown"></div>
-    <form>
-      <div class="from-group row">
-        <div class="col-md-12">
-          <div class="form-group row"></div>
-          <div class="form-group row"></div>
-          <h3>Agency Details</h3>
-          <div class="form-group row"></div>
-          <div class="form-group row">
-            <div class="col-md-4">
-              <label>Agency Name</label>
-              <eva-icon name="people" fill="lightgrey"></eva-icon>
-              <input class="form-control" type="text" name="agencyname" value />
+  <form method="POST">
+    <div class="container" style="text-align:left">
+      <div class="reg-page">
+        <div class="regform" style="text-align:left">
+          <h4>Agency Details</h4>
+          <div class="col-md-8" style="margin-bottom: 1em">
+            <eva-icon name="people" fill="#60CBEB"></eva-icon>
+            <input class="form-control" type="text" name="agencyname" placeholder="Agency Name" />
+          </div>
+          <div class="col-md-8" style="margin-bottom: 1em">
+            <eva-icon name="book" fill="lightgrey"></eva-icon>
+            <input
+              class="form-control"
+              type="text"
+              name="eaabffcnumber"
+              placeholder="EAAB FFC Number"
+            />
+          </div>
+          <div class="col-md-8">
+            <eva-icon name="clipboard" fill="lightgrey"></eva-icon>
+            <input
+              class="form-control"
+              type="text"
+              name="companyregnumber"
+              placeholder="Company Registration Number"
+            />
+          </div>
+          <hr />
+          <div class="col-md-10" style="text-align:left">
+            <h5 style="margin-bottom: 1em">Agency Administrator</h5>
+            <div class="row" style="text-align:left">
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                <input class="form-control" type="text" name="name" placeholder="Name" />
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                <input class="form-control" type="text" name="surname" placeholder="Surname" />
+              </div>
             </div>
-            <div class="col-md-4">
-              <label>EAAB FFC Number</label>
-              <eva-icon name="book" fill="lightgrey"></eva-icon>
-              <input class="form-control" type="text" name="eaabffcnumber" value />
+
+            <div class="row" style="text-align:left">
+              <div class="col-md-8">
+                <eva-icon name="email" fill="lightgrey"></eva-icon>
+                <input class="form-control" type="text" name="email" placeholder="Email Address" />
+                <div class="form-group row"></div>
+              </div>
+
+              <div class="col-md-6" style="text-align:left">
+                <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="cellnumber"
+                  placeholder="Contact Number"
+                />
+              </div>
+            </div>
+            <hr />
+            <div class="row">
+              <div class="col-md-7" style="margin-bottom: 1em">
+                <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                <input class="form-control" type="text" name="username" placeholder="Username" />
+              </div>
+              <div class="col-md-7" style="margin-bottom: 1em">
+                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                <input class="form-control" type="text" name="password" placeholder="Password" />
+              </div>
+              <div class="col-md-7" style="margin-bottom: 1em">
+                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="confirmpassword"
+                  placeholder="Confirm Password"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="form-group row"></div>
+          <div class="row offset-md-1">
+            <div class="col-md-2">
+              <button class="btn btn-b-n" type="submit">Submit</button>
             </div>
-            <div class="col-md-4">
-              <label>Company Registration Number</label>
-              <eva-icon name="clipboard" fill="lightgrey"></eva-icon>
-              <input class="form-control" type="text" name="companyregnumber" value />
+            <div class="col-md-2 offset-md-1">
+              <button class="btn btn-b-n" type="submit">Cancel</button>
             </div>
-            <RegisterPage :RegisterHeader="111" />
           </div>
         </div>
       </div>
-    </form>
-  </div>
+    </div>
+  </form>
 </template>
 
 <script>

src/components/user/registerPage.vue

 <template>
-  <!-- eslint-disable max-len -->
-  <div class="container">
-    <div class="goDown"></div>
-    <form>
-      <div class="col-md-12">
-        <h3>{{ Header }}</h3>
-        <div class="form-group row"></div>
-        <div class="form-group row">
-          <div class="col-md-6">
-            <label>Name</label>
-            <eva-icon name="person" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="name" value />
-            <div class="form-group row"></div>
-          </div>
-          <div class="col-md-6">
-            <label>Surname</label>
-            <eva-icon name="person" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="surname" value />
-          </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-md-4">
-            <label>Email</label>
-            <eva-icon name="email" fill="lightgrey"></eva-icon>
-            <input class="form-control" type="text" name="email" value />
-            <div class="form-group row"></div>
+  <form method="POST">
+    <!-- eslint-disable max-len -->
+    <div class="reg-page">
+      <div class="regform">
+        <div class="col-md-10" style="text-align:left">
+          <h5 style="margin-bottom: 1em">{{ Header }}</h5>
+          <div class="row" style="text-align:left">
+            <div class="col-md-6" style="margin-bottom: 1em">
+              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+              <input class="form-control" type="text" name="name" placeholder="Name" />
+            </div>
+            <div class="col-md-6" style="margin-bottom: 1em">
+              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+              <input class="form-control" type="text" name="surname" placeholder="Surname" />
+            </div>
           </div>
-          <div class="col-md-4">
-            <label>Telephone Number</label>
-            <eva-icon name="phone" fill="lightgrey"></eva-icon>
-            <input class="form-control" type="text" name="telephonenumber" value />
+
+          <div class="row" style="text-align:left">
+            <div class="col-md-8">
+              <eva-icon name="email" fill="lightgrey"></eva-icon>
+              <input class="form-control" type="text" name="email" placeholder="Email Address" />
+              <div class="form-group row"></div>
+            </div>
+
+            <div class="col-md-6" style="text-align:left">
+              <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
+              <input
+                class="form-control"
+                type="text"
+                name="cellnumber"
+                placeholder="Contact Number"
+              />
+            </div>
           </div>
-          <div class="col-md-4">
-            <label>Cell Number</label>
-            <eva-icon name="smartphone" fill="lightgrey"></eva-icon>
-            <input class="form-control" type="text" name="cellnumber" value />
+          <hr />
+          <div class="row">
+            <div class="col-md-7" style="margin-bottom: 1em">
+              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+              <input class="form-control" type="text" name="username" placeholder="Username" />
+            </div>
+            <div class="col-md-7" style="margin-bottom: 1em">
+              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+              <input class="form-control" type="text" name="password" placeholder="Password" />
+            </div>
+            <div class="col-md-7" style="margin-bottom: 1em">
+              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+              <input
+                class="form-control"
+                type="text"
+                name="confirmpassword"
+                placeholder="Confirm Password"
+              />
+            </div>
           </div>
         </div>
-        <div class="form-group row">
-          <div class="col-md-4">
-            <label>Username</label>
-            <eva-icon name="person" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="username" value />
-          </div>
-          <div class="col-md-4">
-            <label>Password</label>
-            <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="password" value />
+        <div class="form-group row"></div>
+        <div class="row offset-md-1">
+          <div class="col-md-2">
+            <button class="btn btn-b-n" type="submit">Submit</button>
           </div>
-          <div class="col-md-4">
-            <label>Confirm Password</label>
-            <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-            <input class="form-control" type="text" name="confirmpassword" value />
+          <div class="col-md-2 offset-md-1">
+            <button class="btn btn-b-n" type="submit">Cancel</button>
           </div>
         </div>
       </div>
-      <div class="form-group row">
-        <div class="col-md-4">
-          <button class="btn btn-b-n">Cancel</button>
-        </div>
-        <div class="col-md-4">
-          <button class="btn btn-b-n">Submit</button>
-        </div>
-      </div>
-    </form>
-  </div>
+    </div>
+  </form>
 </template>
 
 <script>