diff --git a/src/assets/img/cover.png b/src/assets/img/cover.png
new file mode 100644
index 00000000..bf1d6aed
Binary files /dev/null and b/src/assets/img/cover.png differ
diff --git a/src/assets/img/imgpsh_fullsize_anim.jpeg b/src/assets/img/imgpsh_fullsize_anim.jpeg
new file mode 100644
index 00000000..06396d4d
Binary files /dev/null and b/src/assets/img/imgpsh_fullsize_anim.jpeg differ
diff --git a/src/assets/img/profile.png b/src/assets/img/profile.png
new file mode 100644
index 00000000..5f8037b8
Binary files /dev/null and b/src/assets/img/profile.png differ
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index 1bcf4170..74dded4b 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -36,9 +36,9 @@ export default {
 
 <style scoped>
 .pan-item {
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
+  width: 38px;
+  height: 38px;
+  border-radius: 6px;
   display: inline-block;
   position: relative;
   cursor: default;
@@ -55,7 +55,7 @@ export default {
   height: 100%;
   background-position: center center;
   background-size: cover;
-  border-radius: 50%;
+  border-radius: 6px;
   overflow: hidden;
   position: absolute;
   transform-origin: 95% 40%;
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 37bc1e69..15ab88a8 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -20,26 +20,8 @@
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <img :src="require('@/assets/img/profile.png')" class="user-avatar">
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
-          </router-link>
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
       </el-dropdown>
     </div>
   </div>
diff --git a/src/styles/fonts/SFProDisplay-Heavy-1.ttf b/src/styles/fonts/SFProDisplay-Heavy-1.ttf
new file mode 100644
index 00000000..ad0b81f5
Binary files /dev/null and b/src/styles/fonts/SFProDisplay-Heavy-1.ttf differ
diff --git a/src/styles/fonts/SFProDisplay-Regular.ttf b/src/styles/fonts/SFProDisplay-Regular.ttf
new file mode 100644
index 00000000..5ae2fafb
Binary files /dev/null and b/src/styles/fonts/SFProDisplay-Regular.ttf differ
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96095ef6..36343923 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,6 +5,16 @@
 @import './sidebar.scss';
 @import './btn.scss';
 
+@font-face {
+  font-family: "SF Pro Display";
+  src: local("SFProDisplay"),   url(./fonts/SFProDisplay-Regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "SF Pro Display Bold";
+  src: local("SFProDisplayBold"),   url(./fonts/SFProDisplay-Heavy-1.ttf) format("truetype");
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/vendor/FontsFree-Net-SFProDisplay-Regular.ttf b/src/vendor/FontsFree-Net-SFProDisplay-Regular.ttf
new file mode 100644
index 00000000..5ae2fafb
Binary files /dev/null and b/src/vendor/FontsFree-Net-SFProDisplay-Regular.ttf differ
diff --git a/src/views/dashboard/admin/components/BillingCard.vue b/src/views/dashboard/admin/components/BillingCard.vue
new file mode 100644
index 00000000..20ba289e
--- /dev/null
+++ b/src/views/dashboard/admin/components/BillingCard.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Billing</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-bank-card" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <el-tabs type="border-card">
+        <el-tab-pane label="Statements">
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="DATE" width="180" />
+            <el-table-column prop="orderId" label="ORDER ID" width="180" />
+            <el-table-column prop="amount" label="AMOUNT" />
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="Credit Cards">
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="DATE" width="180" />
+            <el-table-column prop="orderId" label="ORDER ID" width="180" />
+            <el-table-column prop="amount" label="AMOUNT" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    avatar: {
+      type: String,
+      default:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£20'
+        },
+        {
+          date: '16-11-2021',
+          orderId: '4576786',
+          amount: '£40'
+        },
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£40'
+        },
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£20'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #e03282 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.form {
+  padding-bottom: 30px;
+}
+
+.el-table__header-wrapper {
+  background: #778298!important;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+    border-radius: 6px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/BookingCard.vue b/src/views/dashboard/admin/components/BookingCard.vue
new file mode 100644
index 00000000..5ac70778
--- /dev/null
+++ b/src/views/dashboard/admin/components/BookingCard.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">My booking</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-date" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <div class="arrow arrow-left"><i class="el-icon-arrow-left" /></div>
+      <el-col class="heading-content__right">
+        <p>
+          <span>INJURY</span><br>
+          <span class="major">Right Elbow</span>
+        </p>
+        <el-row :gutter="10">
+          <el-col :span="2.5" :offset="0">
+            <pan-thumb :image="avatar" class="avatar" />
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <p>
+              <span class="content">PT NAME</span><br>
+              <span class="content-value">DIMITRI ALEXIOU</span>
+            </p>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">DATE</span>
+              <br>
+              <span class="content-value">{{ date }}</span>
+            </p>
+            <p class="border-bottom border-right">
+              <span class="content-title">TIME</span>
+              <br>
+              <span class="content-value">{{ time }}</span>
+            </p>
+            <p class="border-right">
+              <span class="content-title">ORDER ID</span>
+              <br>
+              <span class="content-value">{{ orderId }}</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+      <el-button
+        type="primary"
+        icon="el-icon-monitor"
+        class="action"
+        :rounded="false"
+      >Go to Consultation</el-button>
+      <div class="arrow arrow-right"><i class="el-icon-arrow-right" /></div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+export default {
+  components: {
+    PanThumb
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: require('@/assets/img/imgpsh_fullsize_anim.jpeg')
+    }
+  },
+  data() {
+    return {
+      date: '28-10-2021',
+      time: '18:30 - 18:50',
+      orderId: '346789'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  background: #de3182 0% 0% no-repeat padding-box;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #ffec03;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    height: 251px;
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #e03282 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display Bold;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display Bold;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 521px;
+  border-radius: none;
+  border-color: #6e1c80;
+  background: #6e1c80;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.arrow {
+  position: absolute;
+  color: var(--unnamed-color-6e1c80);
+  font: normal normal normal 18px/22px FontAwesome;
+  letter-spacing: 0px;
+  color: #6e1c80;
+  opacity: 1;
+  top: 100px;
+  &-left {
+    left: -3%;
+  }
+  &-right {
+    right: 11%;
+  }
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/ExerciseCard.vue b/src/views/dashboard/admin/components/ExerciseCard.vue
new file mode 100644
index 00000000..d3abac74
--- /dev/null
+++ b/src/views/dashboard/admin/components/ExerciseCard.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">My booking</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-date" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <div class="arrow arrow-left"><i class="el-icon-arrow-left" /></div>
+      <el-col class="heading-content__right">
+        <p>
+          <span>INJURY</span><br>
+          <span class="major">Left Shoulder</span>
+        </p>
+        <el-row :gutter="10">
+          <el-col :span="2.5" :offset="0">
+            <pan-thumb :image="avatar" class="avatar" />
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <p>
+              <span class="content">PT NAME</span><br>
+              <span class="content-value">DIMITRI ALEXIOU</span>
+            </p>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">DATE</span>
+              <br>
+              <span class="content-value">{{ date }}</span>
+            </p>
+            <p class="border-bottom border-right">
+              <span class="content-title">TIME</span>
+              <br>
+              <span class="content-value">{{ time }}</span>
+            </p>
+            <p class="border-right">
+              <span class="content-title">ORDER ID</span>
+              <br>
+              <span class="content-value">{{ orderId }}</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+      <el-button
+        type="primary"
+        icon="el-icon-help"
+        class="action"
+        :rounded="false"
+      >My Exercises</el-button>
+      <div class="arrow arrow-right"><i class="el-icon-arrow-right" /></div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+export default {
+  components: {
+    PanThumb
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: require('@/assets/img/imgpsh_fullsize_anim.jpeg')
+    }
+  },
+  data() {
+    return {
+      date: '27-10-2021',
+      time: '18:30 - 18:50',
+      orderId: '346785'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  background: #f48d00 0% 0% no-repeat padding-box;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #ffec03;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    height: 251px;
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #f48d00 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display Bold;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display Bold;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 521px;
+  border-radius: none;
+  border-color: #6e1c80;
+  background: #6e1c80;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.arrow {
+  position: absolute;
+  color: var(--unnamed-color-6e1c80);
+  font: normal normal normal 18px/22px FontAwesome;
+  letter-spacing: 0px;
+  color: #6e1c80;
+  opacity: 1;
+  top: 100px;
+  &-left {
+    left: -3%;
+  }
+  &-right {
+    right: 11%;
+  }
+}
+
+.card-content {
+  height: 251px;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/InjuriesCard.vue b/src/views/dashboard/admin/components/InjuriesCard.vue
new file mode 100644
index 00000000..acffa6ca
--- /dev/null
+++ b/src/views/dashboard/admin/components/InjuriesCard.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Injuries</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-help" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <div class="injuries">
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Left Shoulder</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Right Elbow</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Right Elbow</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+      </div>
+      <el-button
+        type="primary"
+        class="action"
+        :rounded="false"
+      >Add new injury</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    avatar: {
+      type: String,
+      default:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
+    }
+  },
+  data() {
+    return {
+      form: {
+        firstName: 'John',
+        lastName: 'Scott',
+        birthDate: '28/3/70',
+        email: 'John@gmail.com',
+        country: 'England',
+        city: 'London',
+        language: 'English, Greek',
+        mobile: '4567 7867897'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #e03282 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 481px;
+  margin: 20px;
+  border-radius: none;
+  border-color: #dee0e6;
+  background: #7ad9fd;
+  color: #1c233d;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.card-content {
+  background: #ffffff;
+  padding: 20px;
+}
+
+.injuries {
+  margin-bottom: 50px;
+}
+
+.injuries-bloc {
+  margin-left: 0px !important;
+  margin-right: -30px !important;
+}
+
+.injury-bloc {
+  height: 60px;
+  background: #f2f3f5;
+}
+
+.injury-text {
+  padding: 20px;
+  font: normal normal 16px/21px SF Pro Display Bold;
+  letter-spacing: 0px;
+  color: #192440;
+}
+
+.injury-book {
+  padding: 20px;
+  text-align: center;
+  font: normal normal normal 13px/15px SF Pro Display;
+  letter-spacing: 0px;
+  color: #192440;
+}
+
+.injury-name {
+  margin-right: 5px;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/PhysioCard.vue b/src/views/dashboard/admin/components/PhysioCard.vue
new file mode 100644
index 00000000..235bee2c
--- /dev/null
+++ b/src/views/dashboard/admin/components/PhysioCard.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">Add a consultation</span>
+              <br>
+              <span class="content-value">Book a physio</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {
+    image() {
+      return require('@/assets/img/cover.png')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  color: #ffec03;
+  padding: 10px;
+  mix-blend-mode: soft-light;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    height: 293px;
+    border-radius: 7px;
+    background-image: url('https://i.ibb.co/tMg8c4t/cover.png'), linear-gradient(180deg, #58B8EB 0%, #6E1C80 85%, #6E1C80 100%);
+    background-repeat: no-repeat;
+    background-position: center;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/16px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  margin-top: 20%;
+  margin-left: 20px;
+  &-value {
+    font: normal normal 900 34px/40px SF Pro Display Bold;
+  }
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/components/ProfileCard.vue b/src/views/dashboard/admin/components/ProfileCard.vue
new file mode 100644
index 00000000..023ed0d6
--- /dev/null
+++ b/src/views/dashboard/admin/components/ProfileCard.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Profile</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-document" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <el-tabs type="border-card">
+        <el-tab-pane label="General Profile">
+          <el-row :gutter="20">
+            <el-col :span="6" :offset="0">
+              <img
+                src="../../../../assets/img/profile.png"
+                class="profile-picture"
+              >
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="1"
+                :on-exceed="handleExceed"
+                :file-list="fileList"
+              >
+                <el-button
+                  class="upload-btn"
+                  size="small"
+                >Upload photo</el-button>
+              </el-upload>
+            </el-col>
+            <el-col :span="18" :offset="0">
+              <el-form
+                ref="form"
+                :model="form"
+                label-width="96px"
+                label-position="left"
+                class="form"
+              >
+                <el-form-item label="First name">
+                  <el-input v-model="form.firstName" />
+                </el-form-item>
+                <el-form-item label="Last name">
+                  <el-input v-model="form.lastName" />
+                </el-form-item>
+                <el-form-item label="Date of birth">
+                  <el-input v-model="form.birthDate" />
+                </el-form-item>
+                <el-form-item label="email">
+                  <el-input v-model="form.email" />
+                </el-form-item>
+                <el-form-item label="Country">
+                  <el-input v-model="form.country" />
+                </el-form-item>
+                <el-form-item label="City">
+                  <el-input v-model="form.city" />
+                </el-form-item>
+                <el-form-item label="Language">
+                  <el-input v-model="form.language" />
+                </el-form-item>
+                <el-form-item label="Mobile">
+                  <el-input v-model="form.mobile" />
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="Medical related info">
+          <el-form
+            ref="form"
+            :model="form"
+            label-width="96px"
+            label-position="left"
+            class="form"
+          >
+            <el-form-item label="First name">
+              <el-input v-model="form.firstName" />
+            </el-form-item>
+            <el-form-item label="Last name">
+              <el-input v-model="form.lastName" />
+            </el-form-item>
+            <el-form-item label="Date of birth">
+              <el-input v-model="form.birthDate" />
+            </el-form-item>
+            <el-form-item label="email">
+              <el-input v-model="form.email" />
+            </el-form-item>
+            <el-form-item label="Country">
+              <el-input v-model="form.country" />
+            </el-form-item>
+            <el-form-item label="City">
+              <el-input v-model="form.city" />
+            </el-form-item>
+            <el-form-item label="Language">
+              <el-input v-model="form.language" />
+            </el-form-item>
+            <el-form-item label="Mobile">
+              <el-input v-model="form.mobile" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button
+        type="primary"
+        class="action"
+        :rounded="false"
+      >Save Profile</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        firstName: 'John',
+        lastName: 'Scott',
+        birthDate: '28/3/70',
+        email: 'John@gmail.com',
+        country: 'England',
+        city: 'London',
+        language: 'English, Greek',
+        mobile: '4567 7867897'
+      },
+      fileList: []
+    }
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `The limit is 3, you selected ${
+          files.length
+        } files this time, add up to ${files.length + fileList.length} totally`
+      )
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`Cancel the transfert of ${file.name} ?`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #e03282 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.profile-picture {
+  width: 101px;
+  height: 101px;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 481px;
+  margin: 20px;
+  border-radius: none;
+  border-color: #dee0e6;
+  background: #dee0e6;
+  color: #778298;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.form {
+  padding-bottom: 30px;
+}
+
+.upload-btn {
+  padding: 10px;
+  background: #778298;
+  color: #FFFFFF;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+.card {
+  &-content {
+    border-radius: 6px;
+  }
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8cb557be..232ebeb7 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,98 +1,47 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
+    <el-row :gutter="20" class="bookings">
+      <el-col :span="8" :offset="0">
+        <booking-card />
+        <br><br>
+        <profile-card />
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
+      <el-col :span="8" :offset="0">
+        <exercise-card />
+        <br><br>
+        <injuries-card />
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
+      <el-col :span="8" :offset="0">
+        <physio-card />
+        <br><br>
+        <billing-card />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
+import BookingCard from './components/BookingCard'
+import ExerciseCard from './components/ExerciseCard'
+import PhysioCard from './components/PhysioCard'
+import ProfileCard from './components/ProfileCard'
+import InjuriesCard from './components/InjuriesCard'
+import BillingCard from './components/BillingCard'
 
 export default {
   name: 'DashboardAdmin',
   components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
+    BookingCard,
+    ExerciseCard,
+    PhysioCard,
+    ProfileCard,
+    InjuriesCard,
+    BillingCard
   },
   data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
+    return {}
   },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
+  methods: {}
 }
 </script>
 
@@ -101,24 +50,6 @@ export default {
   padding: 32px;
   background-color: rgb(240, 242, 245);
   position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
 }
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
 </style>