diff --git a/src/components/HamburgerMenu.vue b/src/components/HamburgerMenu.vue
index de63caa..0e24546 100644
--- a/src/components/HamburgerMenu.vue
+++ b/src/components/HamburgerMenu.vue
@@ -6,7 +6,7 @@
   </div>
   <div id="navigation-host">
     <div class="navigation">
-      <li><router-link to="/personalprofile" id="profile">Profile</router-link></li>
+      <li><router-link to="/userprofile" id="profile">Profile</router-link></li>
       <li><router-link to="/swipe" id="swipe">Save and continue SWOB</router-link></li>
       <li><a class="nav-link" href="/SavedJobs">Saved Jobs</a></li>
       <li><a class="nav-link" href="/Messenger">Messenger</a></li>
diff --git a/src/router/index.js b/src/router/index.js
index 745d6bd..8aca1e6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,7 @@ import StartFilter from '../views/StartFilter.vue'
 import SwipeScreen from '../views/SwipeScreen.vue'
 import MatchScreen from '../views/MatchScreen.vue'
 import UserMessenger from '../views/UserMessenger.vue'
-import PersonalProfile from '../views/PersonalProfile.vue'
+import UserProfile from '../views/UserProfile.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -53,9 +53,9 @@ const router = createRouter({
       component: UserMessenger
     },
     {
-      path: '/personalprofile',
-      name: 'personalProfile',
-      component: PersonalProfile
+      path: '/userprofile',
+      name: 'userProfile',
+      component: UserProfile
     }
   ]
 })
diff --git a/src/stores/company.js b/src/stores/company.js
index 730deb0..5d1737a 100644
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 
 export const useCompanyStore = defineStore('companyStore', {
   state() {
-    return { companys: [{ id: '', logo: '', name: '' }] }
+    return { companys: [] }
   },
   actions: {
     initCompany(company) {
diff --git a/src/stores/counter.js b/src/stores/example.js
similarity index 100%
rename from src/stores/counter.js
rename to src/stores/example.js
diff --git a/src/stores/user.js b/src/stores/user.js
new file mode 100644
index 0000000..e73d88b
--- /dev/null
+++ b/src/stores/user.js
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('userStore', {
+  state() {
+    return { users: [] }
+  },
+  actions: {
+    initUsers(user) {
+      this.users = user
+    }
+  }
+})
diff --git a/src/views/RegisterScreen.vue b/src/views/RegisterScreen.vue
index c43cc4f..828a0f4 100644
--- a/src/views/RegisterScreen.vue
+++ b/src/views/RegisterScreen.vue
@@ -1,150 +1,148 @@
 <template>
-  <body>
-    <div class="grid-merge">
-      <header>
-        <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
-        <HamburgerMenu />
-      </header>
-      <div class="main-blurr"></div>
-      <main>
-        <form>
-          <div class="username-and-password">
-            <label for="username" v-html="chooseUsername"></label>
-            <input
-              type="text"
-              id="username"
-              name="username"
-              placeholder="username"
-              v-model="form.username"
-              required
-            />
+  <div class="grid-merge">
+    <header>
+      <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
+      <HamburgerMenu />
+    </header>
+    <div class="main-blurr"></div>
+    <main>
+      <form>
+        <div class="username-and-password">
+          <label for="username" v-html="chooseUsername"></label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="username"
+            v-model="form.username"
+            required
+          />
 
-            <label for="password" v-html="choosePassword"></label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              placeholder="password"
-              v-model="form.password"
-              required
-            />
-            <label for="repeatPassword"></label>
-            <input
-              type="password"
-              id="repeatPassword"
-              name="repeatPassword"
-              placeholder="repeat password"
-              v-model="form.repeatPassword"
-              required
-            />
-          </div>
-          <hr class="line" />
-          <div class="createAccount">
-            <h1 v-html="createAcc"></h1>
-            <p>fill the details to create your swob card</p>
-          </div>
-          <div class="personal-information">
+          <label for="password" v-html="choosePassword"></label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="password"
+            v-model="form.password"
+            required
+          />
+          <label for="repeatPassword"></label>
+          <input
+            type="password"
+            id="repeatPassword"
+            name="repeatPassword"
+            placeholder="repeat password"
+            v-model="form.repeatPassword"
+            required
+          />
+        </div>
+        <hr class="line" />
+        <div class="createAccount">
+          <h1 v-html="createAcc"></h1>
+          <p>fill the details to create your swob card</p>
+        </div>
+        <div class="personal-information">
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            placeholder="last name"
+            v-model="form.lastname"
+            required
+          />
+          <input
+            type="text"
+            id="firstname"
+            name="firstname"
+            placeholder="first name"
+            v-model="form.firstname"
+            required
+          />
+          <div class="date-and-gender">
             <input
-              type="text"
-              id="lastname"
-              name="lastname"
-              placeholder="last name"
-              v-model="form.lastname"
+              type="date"
+              id="birthdate"
+              name="birthdate"
+              placeholder="birth date"
+              v-model="form.birthdate"
               required
             />
-            <input
-              type="text"
-              id="firstname"
-              name="firstname"
-              placeholder="first name"
-              v-model="form.firstname"
-              required
-            />
-            <div class="date-and-gender">
-              <input
-                type="date"
-                id="birthdate"
-                name="birthdate"
-                placeholder="birth date"
-                v-model="form.birthdate"
-                required
-              />
-              <div class="radio-gender">
-                <label class="custom-radio">
-                  <input
-                    type="radio"
-                    id="female"
-                    name="gender"
-                    value="female"
-                    v-model="form.gender"
-                    required
-                  />
-                  female
-                </label>
-                <label class="custom-radio">
-                  <input type="radio" id="male" name="gender" value="male" v-model="form.gender" />
-                  male
-                </label>
-                <label class="custom-radio">
-                  <input
-                    type="radio"
-                    id="diverse"
-                    name="gender"
-                    value="diverse"
-                    v-model="form.gender"
-                  />
-                  diverse
-                </label>
-              </div>
+            <div class="radio-gender">
+              <label class="custom-radio">
+                <input
+                  type="radio"
+                  id="female"
+                  name="gender"
+                  value="female"
+                  v-model="form.gender"
+                  required
+                />
+                female
+              </label>
+              <label class="custom-radio">
+                <input type="radio" id="male" name="gender" value="male" v-model="form.gender" />
+                male
+              </label>
+              <label class="custom-radio">
+                <input
+                  type="radio"
+                  id="diverse"
+                  name="gender"
+                  value="diverse"
+                  v-model="form.gender"
+                />
+                diverse
+              </label>
             </div>
+          </div>
 
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="e-mail"
+            size="30"
+            v-model="form.email"
+            required
+          />
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            placeholder="phone number"
+            v-model="form.phone"
+            required
+          />
+          <input
+            type="text"
+            id="street"
+            name="street"
+            placeholder="street name"
+            v-model="form.street"
+            required
+          />
+          <div class="flex-postal-city-country">
             <input
-              type="email"
-              id="email"
-              name="email"
-              placeholder="e-mail"
-              size="30"
-              v-model="form.email"
+              type="number"
+              id="postalcode"
+              name="postalcode"
+              placeholder="Postal"
+              min="5"
+              max="5"
+              v-model="form.postalcode"
               required
             />
-            <input
-              type="tel"
-              id="phone"
-              name="phone"
-              placeholder="phone number"
-              v-model="form.phone"
-              required
-            />
-            <input
-              type="text"
-              id="street"
-              name="street"
-              placeholder="street name"
-              v-model="form.street"
-              required
-            />
-            <div class="flex-postal-city-country">
-              <input
-                type="number"
-                id="postalcode"
-                name="postalcode"
-                placeholder="Postal"
-                min="5"
-                max="5"
-                v-model="form.postalcode"
-                required
-              />
-              <input type="text" id="city" name="city" placeholder="City" v-model="form.city" />
-              <select name="country" id="country" v-model="form.country" required>
-                <option value="DE">Deutschland</option>
-              </select>
-            </div>
+            <input type="text" id="city" name="city" placeholder="City" v-model="form.city" />
+            <select name="country" id="country" v-model="form.country" required>
+              <option value="DE">Deutschland</option>
+            </select>
           </div>
-        </form>
-        <button class="btn-style-1" type="button" @click="goToCategory">Sign Up</button>
-      </main>
-    </div>
-  </body>
+        </div>
+      </form>
+      <button class="btn-style-1" type="button" @click="goToCategory">Sign Up</button>
+    </main>
+  </div>
 </template>
 
 <script>
diff --git a/src/views/StartFilter.vue b/src/views/StartFilter.vue
index ce5bc23..720b2fa 100644
--- a/src/views/StartFilter.vue
+++ b/src/views/StartFilter.vue
@@ -1,225 +1,223 @@
 <template>
-  <body>
-    <div class="grid-merge">
-      <header>
-        <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
-        <HamburgerMenu />
-      </header>
-      <div class="main-blurr"></div>
-      <main>
-        <img src="@/assets/icons/steps03.svg" alt="step3" class="svg-icon" />
-        <article>
-          <h1 v-html="where"></h1>
-          <select v-model="filtersStore.location" name="location" id="location">
-            <option value="berlin">Berlin</option>
-            <option value="hannover">Hannover</option>
-            <option value="dusseldorf">Düsseldorf</option>
-            <option value="mainz">Mainz</option>
-            <option value="saarbrucken">Saarbrücken</option>
-            <option value="munich">München</option>
-            <option value="stuttgart">Stuttgart</option>
-            <option value="wiesbaden">Wiesbaden</option>
-            <option value="magdeburg">Magdeburg</option>
-            <option value="potsdam">Potsdam</option>
-            <option value="schwerin">Schwerin</option>
-            <option value="kiel">Kiel</option>
-            <option value="erfurt">Erfurt</option>
-            <option value="bremen">Bremen</option>
-            <option value="hamburg">Hamburg</option>
-            <option value="cologne">Köln</option>
-            <option value="frankfurt">Frankfurt am Main</option>
-            <option value="karlsruhe">Karlsruhe</option>
-            <option value="stuttgart">Stuttgart</option>
-            <option value="dortmund">Dortmund</option>
-            <option value="essen">Essen</option>
-            <option value="leipzig">Leipzig</option>
-            <option value="dresden">Dresden</option>
-            <option value="nuremberg">Nürnberg</option>
-            <option value="duisburg">Duisburg</option>
-            <option value="bochum">Bochum</option>
-            <option value="wuppertal">Wuppertal</option>
-            <option value="bielefeld">Bielefeld</option>
-            <option value="bonn">Bonn</option>
-            <option value="mannheim">Mannheim</option>
-          </select>
-        </article>
-        <article>
-          <h1 v-html="what"></h1>
-          <div class="type-of-employment">
-            <label for="temporary">
-              <input
-                type="radio"
-                id="temporary"
-                name="employmentType"
-                value="temporary"
-                v-model="filtersStore.employmentType"
-              />
-              Temporary
-            </label>
+  <div class="grid-merge">
+    <header>
+      <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
+      <HamburgerMenu />
+    </header>
+    <div class="main-blurr"></div>
+    <main>
+      <img src="@/assets/icons/steps03.svg" alt="step3" class="svg-icon" />
+      <article>
+        <h1 v-html="where"></h1>
+        <select v-model="filtersStore.location" name="location" id="location">
+          <option value="berlin">Berlin</option>
+          <option value="hannover">Hannover</option>
+          <option value="dusseldorf">Düsseldorf</option>
+          <option value="mainz">Mainz</option>
+          <option value="saarbrucken">Saarbrücken</option>
+          <option value="munich">München</option>
+          <option value="stuttgart">Stuttgart</option>
+          <option value="wiesbaden">Wiesbaden</option>
+          <option value="magdeburg">Magdeburg</option>
+          <option value="potsdam">Potsdam</option>
+          <option value="schwerin">Schwerin</option>
+          <option value="kiel">Kiel</option>
+          <option value="erfurt">Erfurt</option>
+          <option value="bremen">Bremen</option>
+          <option value="hamburg">Hamburg</option>
+          <option value="cologne">Köln</option>
+          <option value="frankfurt">Frankfurt am Main</option>
+          <option value="karlsruhe">Karlsruhe</option>
+          <option value="stuttgart">Stuttgart</option>
+          <option value="dortmund">Dortmund</option>
+          <option value="essen">Essen</option>
+          <option value="leipzig">Leipzig</option>
+          <option value="dresden">Dresden</option>
+          <option value="nuremberg">Nürnberg</option>
+          <option value="duisburg">Duisburg</option>
+          <option value="bochum">Bochum</option>
+          <option value="wuppertal">Wuppertal</option>
+          <option value="bielefeld">Bielefeld</option>
+          <option value="bonn">Bonn</option>
+          <option value="mannheim">Mannheim</option>
+        </select>
+      </article>
+      <article>
+        <h1 v-html="what"></h1>
+        <div class="type-of-employment">
+          <label for="temporary">
+            <input
+              type="radio"
+              id="temporary"
+              name="employmentType"
+              value="temporary"
+              v-model="filtersStore.employmentType"
+            />
+            Temporary
+          </label>
 
-            <label for="open-end">
-              <input
-                type="radio"
-                id="open-end"
-                name="employmentType"
-                value="open-end"
-                v-model="filtersStore.employmentType"
-              />
-              Open-end
-            </label>
+          <label for="open-end">
+            <input
+              type="radio"
+              id="open-end"
+              name="employmentType"
+              value="open-end"
+              v-model="filtersStore.employmentType"
+            />
+            Open-end
+          </label>
 
-            <label for="freelancer">
-              <input
-                type="radio"
-                id="freelancer"
-                name="employmentType"
-                value="freelancer"
-                v-model="filtersStore.employmentType"
-              />
-              Freelancer
-            </label>
+          <label for="freelancer">
+            <input
+              type="radio"
+              id="freelancer"
+              name="employmentType"
+              value="freelancer"
+              v-model="filtersStore.employmentType"
+            />
+            Freelancer
+          </label>
 
-            <label for="trainee">
-              <input
-                type="radio"
-                id="trainee"
-                name="employmentType"
-                value="trainee"
-                v-model="filtersStore.employmentType"
-              />
-              Trainee
-            </label>
+          <label for="trainee">
+            <input
+              type="radio"
+              id="trainee"
+              name="employmentType"
+              value="trainee"
+              v-model="filtersStore.employmentType"
+            />
+            Trainee
+          </label>
 
-            <label for="part-time">
-              <input
-                type="radio"
-                id="part-time"
-                name="employmentType"
-                value="part-time"
-                v-model="filtersStore.employmentType"
-              />
-              Part-time
-            </label>
+          <label for="part-time">
+            <input
+              type="radio"
+              id="part-time"
+              name="employmentType"
+              value="part-time"
+              v-model="filtersStore.employmentType"
+            />
+            Part-time
+          </label>
 
-            <label for="fulltime">
-              <input
-                type="radio"
-                id="fulltime"
-                name="employmentType"
-                value="fulltime"
-                v-model="filtersStore.employmentType"
-              />
-              Fulltime
-            </label>
+          <label for="fulltime">
+            <input
+              type="radio"
+              id="fulltime"
+              name="employmentType"
+              value="fulltime"
+              v-model="filtersStore.employmentType"
+            />
+            Fulltime
+          </label>
 
-            <label for="studentjob">
-              <input
-                type="radio"
-                id="studentjob"
-                name="employmentType"
-                value="studentjob"
-                v-model="filtersStore.employmentType"
-              />
-              Studentjob
-            </label>
+          <label for="studentjob">
+            <input
+              type="radio"
+              id="studentjob"
+              name="employmentType"
+              value="studentjob"
+              v-model="filtersStore.employmentType"
+            />
+            Studentjob
+          </label>
 
-            <label for="minijob">
-              <input
-                type="radio"
-                id="minijob"
-                name="employmentType"
-                value="minijob"
-                v-model="filtersStore.employmentType"
-              />
-              Mini-/Midijob
-            </label>
-          </div>
-        </article>
-        <article>
-          <h1 v-html="educationLevel"></h1>
-          <select v-model="filtersStore.education" name="education" id="education">
-            <option value="Abitur">High school diploma</option>
-            <option value="Fachabitur">Technical college entrance qualification</option>
-            <option value="Student">Student</option>
-            <option value="Bachelor">Bachelor's degree</option>
-            <option value="Master">Master's degree</option>
-            <option value="Promotion">Doctorate or PhD</option>
-            <option value="Berufsausbildung">Vocational training or apprenticeship</option>
-            <option value="Meisterprüfung">Master craftsman's certificate</option>
-            <option value="Techniker">Engineering technician</option>
-            <option value="Betriebswirt">Certified specialist</option>
-            <option value="Betriebswirt">Business administrator</option>
-          </select>
-        </article>
-        <article>
-          <h1 v-html="howWork"></h1>
-          <div class="how-would-you-like-to-work">
-            <label for="office">
-              <input
-                type="radio"
-                id="office"
-                name="office"
-                value="office"
-                v-model="filtersStore.howWork"
-              />
-              Office
-            </label>
+          <label for="minijob">
+            <input
+              type="radio"
+              id="minijob"
+              name="employmentType"
+              value="minijob"
+              v-model="filtersStore.employmentType"
+            />
+            Mini-/Midijob
+          </label>
+        </div>
+      </article>
+      <article>
+        <h1 v-html="educationLevel"></h1>
+        <select v-model="filtersStore.education" name="education" id="education">
+          <option value="Abitur">High school diploma</option>
+          <option value="Fachabitur">Technical college entrance qualification</option>
+          <option value="Student">Student</option>
+          <option value="Bachelor">Bachelor's degree</option>
+          <option value="Master">Master's degree</option>
+          <option value="Promotion">Doctorate or PhD</option>
+          <option value="Berufsausbildung">Vocational training or apprenticeship</option>
+          <option value="Meisterprüfung">Master craftsman's certificate</option>
+          <option value="Techniker">Engineering technician</option>
+          <option value="Betriebswirt">Certified specialist</option>
+          <option value="Betriebswirt">Business administrator</option>
+        </select>
+      </article>
+      <article>
+        <h1 v-html="howWork"></h1>
+        <div class="how-would-you-like-to-work">
+          <label for="office">
+            <input
+              type="radio"
+              id="office"
+              name="office"
+              value="office"
+              v-model="filtersStore.howWork"
+            />
+            Office
+          </label>
 
-            <label for="remote">
-              <input
-                type="radio"
-                id="remote"
-                name="remote"
-                value="remote"
-                v-model="filtersStore.howWork"
-              />
-              Remote
-            </label>
+          <label for="remote">
+            <input
+              type="radio"
+              id="remote"
+              name="remote"
+              value="remote"
+              v-model="filtersStore.howWork"
+            />
+            Remote
+          </label>
 
-            <label for="hybrid">
-              <input
-                type="radio"
-                id="hybrid"
-                name="hybrid"
-                value="hybrid"
-                v-model="filtersStore.howWork"
-              />
-              Hybrid
-            </label>
-          </div>
-          <h1 v-html="swobFrom"></h1>
-          <div class="swob-from-recruit-or-agencies">
-            <label for="employers">
-              <input type="radio" id="employers" name="howToWork" value="employers" /> Employers
-            </label>
+          <label for="hybrid">
+            <input
+              type="radio"
+              id="hybrid"
+              name="hybrid"
+              value="hybrid"
+              v-model="filtersStore.howWork"
+            />
+            Hybrid
+          </label>
+        </div>
+        <h1 v-html="swobFrom"></h1>
+        <div class="swob-from-recruit-or-agencies">
+          <label for="employers">
+            <input type="radio" id="employers" name="howToWork" value="employers" /> Employers
+          </label>
 
-            <label for="agencies">
-              <input type="radio" id="agencies" name="howToWork" value="agencies" /> Agencies
-            </label>
+          <label for="agencies">
+            <input type="radio" id="agencies" name="howToWork" value="agencies" /> Agencies
+          </label>
 
-            <label for="both">
-              <input type="radio" id="both" name="howToWork" value="both" /> Both
-            </label>
-          </div>
-        </article>
-        <article>
-          <div class="select-languages">
-            <h1 v-html="language"></h1>
-            <p>(multiple selections possible)</p>
-          </div>
-          <div class="language-options">
-            <select name="languages" id="languages" v-model="filtersStore.language">
-              <option value="German">German</option>
-              <option value="English">English</option>
-              <option value="French">French</option>
-              <option value="Spanish">Spanish</option>
-            </select>
-          </div>
-        </article>
-        <button class="btn-style-1" @click="confirmFilters">Confirm</button>
-      </main>
-    </div>
-  </body>
+          <label for="both">
+            <input type="radio" id="both" name="howToWork" value="both" /> Both
+          </label>
+        </div>
+      </article>
+      <article>
+        <div class="select-languages">
+          <h1 v-html="language"></h1>
+          <p>(multiple selections possible)</p>
+        </div>
+        <div class="language-options">
+          <select name="languages" id="languages" v-model="filtersStore.language">
+            <option value="German">German</option>
+            <option value="English">English</option>
+            <option value="French">French</option>
+            <option value="Spanish">Spanish</option>
+          </select>
+        </div>
+      </article>
+      <button class="btn-style-1" @click="confirmFilters">Confirm</button>
+    </main>
+  </div>
 </template>
 
 <script>
diff --git a/src/views/UserMessenger.vue b/src/views/UserMessenger.vue
index d759fb4..6634c35 100644
--- a/src/views/UserMessenger.vue
+++ b/src/views/UserMessenger.vue
@@ -1,70 +1,68 @@
 <template>
-  <body>
-    <div class="grid-merge">
-      <header>
-        <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
-        <HamburgerMenu />
-      </header>
-      <main>
-        <article id="top-article" class="company-infos">
-          <div class="company-img">
-            <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
+  <div class="grid-merge">
+    <header>
+      <img class="nav-logo" src="@/assets/icons/Logo_180x180_light.png" alt="SWOB Logo" />
+      <HamburgerMenu />
+    </header>
+    <main>
+      <article id="top-article" class="company-infos">
+        <div class="company-img">
+          <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
+        </div>
+        <div class="name-wanted-job-online-status">
+          <h1 v-html="companyName"></h1>
+          <p v-html="wantedJob"></p>
+          <p>Online/Offline</p>
+        </div>
+      </article>
+      <hr class="line" />
+      <article class="chat-area">
+        <div class="text-from-company">
+          <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
+          <div class="message-left">
+            <p class="company-name">Company name</p>
+            <p class="company-message">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vero delectus ipsam
+              quo, quaerat at nobis fuga qui assumenda temporibus reprehenderit mollitia
+              perspiciatis maiores!
+            </p>
+            <span>placeholder</span>
+            <small>13:30</small>
           </div>
-          <div class="name-wanted-job-online-status">
-            <h1 v-html="companyName"></h1>
-            <p v-html="wantedJob"></p>
-            <p>Online/Offline</p>
+        </div>
+        <div class="message-right">
+          <div class="text-from-user">
+            <p class="user-message">
+              Molestiae omnis nesciunt neque, facilis vero saepe quo magnam sapiente ipsum amet
+              possimus esse molestias ea itaque, autem eos eligendi ullam aperiam?
+            </p>
+            <span>placeholder</span>
+            <small>13:30</small>
           </div>
-        </article>
-        <hr class="line" />
-        <article class="chat-area">
-          <div class="text-from-company">
-            <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
-            <div class="message-left">
-              <p class="company-name">Company name</p>
-              <p class="company-message">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vero delectus ipsam
-                quo, quaerat at nobis fuga qui assumenda temporibus reprehenderit mollitia
-                perspiciatis maiores!
-              </p>
-              <span>placeholder</span>
-              <small>13:30</small>
-            </div>
+        </div>
+        <div class="text-from-company">
+          <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
+          <div class="message-left">
+            <p class="company-name">Company name</p>
+            <p class="company-message">
+              Modi maiores debitis doloremque quo voluptatem cum quae architecto eligendi at
+              blanditiis, dolores quas voluptatum consequatur natus perferendis ipsa tempora autem
+              maxime.
+            </p>
+            <button class="icon-btn-appointment"></button>
+            <small>13:30</small>
           </div>
-          <div class="message-right">
-            <div class="text-from-user">
-              <p class="user-message">
-                Molestiae omnis nesciunt neque, facilis vero saepe quo magnam sapiente ipsum amet
-                possimus esse molestias ea itaque, autem eos eligendi ullam aperiam?
-              </p>
-              <span>placeholder</span>
-              <small>13:30</small>
-            </div>
-          </div>
-          <div class="text-from-company">
-            <img class="company" src="@/assets/icons/placeholderuser.png" alt="placeholder" />
-            <div class="message-left">
-              <p class="company-name">Company name</p>
-              <p class="company-message">
-                Modi maiores debitis doloremque quo voluptatem cum quae architecto eligendi at
-                blanditiis, dolores quas voluptatum consequatur natus perferendis ipsa tempora autem
-                maxime.
-              </p>
-              <button class="icon-btn-appointment"></button>
-              <small>13:30</small>
-            </div>
-          </div>
-        </article>
-        <article id="bottom-article" class="send-content-area">
-          <input type="text" name="message" id="message" placeholder="Type something..." />
-          <button class="icon-btn-smile"></button>
-          <button class="icon-btn-upload"></button>
-          <button class="icon-btn-attach-file"></button>
-          <button class="icon-btn-paper-plane"></button>
-        </article>
-      </main>
-    </div>
-  </body>
+        </div>
+      </article>
+      <article id="bottom-article" class="send-content-area">
+        <input type="text" name="message" id="message" placeholder="Type something..." />
+        <button class="icon-btn-smile"></button>
+        <button class="icon-btn-upload"></button>
+        <button class="icon-btn-attach-file"></button>
+        <button class="icon-btn-paper-plane"></button>
+      </article>
+    </main>
+  </div>
 </template>
 
 <script>
diff --git a/src/views/PersonalProfile.vue b/src/views/UserProfile.vue
similarity index 99%
rename from src/views/PersonalProfile.vue
rename to src/views/UserProfile.vue
index 6e893ff..df5a300 100644
--- a/src/views/PersonalProfile.vue
+++ b/src/views/UserProfile.vue
@@ -68,7 +68,9 @@
 </template>
 
 <script>
+
 import HamburgerMenu from '@/components/HamburgerMenu.vue'
+
 export default {
   components: {
     HamburgerMenu
