diff --git a/fittrackee_client/src/components/Dashboard/Timeline.vue b/fittrackee_client/src/components/Dashboard/Timeline.vue
new file mode 100644
index 00000000..6629ae47
--- /dev/null
+++ b/fittrackee_client/src/components/Dashboard/Timeline.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Timeline</div>
+</template>
diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar.vue b/fittrackee_client/src/components/Dashboard/UserCalendar.vue
new file mode 100644
index 00000000..0ac6d44d
--- /dev/null
+++ b/fittrackee_client/src/components/Dashboard/UserCalendar.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Calendar</div>
+</template>
diff --git a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
new file mode 100644
index 00000000..86de463a
--- /dev/null
+++ b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Month stats</div>
+</template>
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords.vue b/fittrackee_client/src/components/Dashboard/UserRecords.vue
new file mode 100644
index 00000000..c331846c
--- /dev/null
+++ b/fittrackee_client/src/components/Dashboard/UserRecords.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>User records</div>
+</template>
diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue
index bb9dc419..632ea2e3 100644
--- a/fittrackee_client/src/views/DashBoard.vue
+++ b/fittrackee_client/src/views/DashBoard.vue
@@ -3,12 +3,26 @@
     <div class="container">
       <UserStats :user="authUser" v-if="authUser.username" />
     </div>
+    <div class="container">
+      <div class="left-container dashboard-container">
+        <UserMonthStats :user="authUser" />
+        <UserRecords />
+      </div>
+      <div class="right-container dashboard-container">
+        <UserCalendar />
+        <Timeline />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
   import { computed, ComputedRef, defineComponent } from 'vue'
 
+  import Timeline from '@/components/Dashboard/Timeline.vue'
+  import UserCalendar from '@/components/Dashboard/UserCalendar.vue'
+  import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
+  import UserRecords from '@/components/Dashboard/UserRecords.vue'
   import UserStats from '@/components/Dashboard/UserStats.vue'
   import { USER_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
@@ -17,6 +31,10 @@
   export default defineComponent({
     name: 'Dashboard',
     components: {
+      Timeline,
+      UserCalendar,
+      UserMonthStats,
+      UserRecords,
       UserStats,
     },
     setup() {
@@ -28,3 +46,17 @@
     },
   })
 </script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .left-container {
+    width: 35%;
+  }
+  .right-container {
+    width: 65%;
+  }
+</style>