diff --git a/resources/js/components/content/Archive.vue b/resources/js/components/content/Archive.vue
new file mode 100644
index 0000000..5438fae
--- /dev/null
+++ b/resources/js/components/content/Archive.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import axios from "axios";
+import {useAuthStore} from "@/stores/auth.store.ts";
+import {ref, onMounted, reactive, computed} from "vue";
+const auth = useAuthStore()
+const items = ref([])
+
+const listData = reactive({
+  'per_page': 5,
+  'first_page': null,
+  'last_page': null,
+  'total_items': 0,
+  'current_page': 1,
+})
+
+const active_columns = reactive({
+  'track_title': 'Track Title',
+  'artist_name': 'Artist',
+  'genre': 'Genre',
+  'track_type': 'Track Type',
+  'length': 'Length',
+  'mtime': 'Uploaded'
+})
+
+/**
+ * ToDo: understand why per_page and other filters doesn't work
+ * @param page_info created by v-data-table-server on update
+ */
+const getItems = (page_info) => {
+  console.log(page_info);
+  return axios.get(`/file`, {
+    params: {
+      page: page_info.page,
+      per_page: page_info.per_page,
+    }
+  }).then((response) => {
+    console.log(response)
+    listData.per_page     = response.data.per_page;
+    listData.first_page   = response.data.from;
+    listData.last_page    = response.data.last_page;
+    listData.current_page = response.data.current_page;
+    listData.total_items  = response.data.total;
+
+    items.value = response.data.data.map((el) => {
+      Object.keys(el).forEach((key) => {
+        if (Object.keys(active_columns).includes(key)) {
+          el[active_columns[key]] = el[key];
+        }
+        delete el[key];
+      })
+      return el;
+    });
+    console.log(listData);
+  }).catch((error) => {
+    console.log("Error: "+error);
+  })
+}
+</script>
+
+<template>
+  <div>
+    <v-data-table-server
+      v-model:items-per-page="listData.per_page"
+      :items="items"
+      :items-length="listData.total_items"
+      loading-text="Loading..."
+      :loading="items.length === 0"
+      @update:options="getItems"
+      disable-sort
+    >
+    </v-data-table-server>
+  </div>
+</template>
+
+<style scoped>
+  .v-data-table {
+    width:100%;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/content/Dashboard.vue b/resources/js/components/content/Dashboard.vue
new file mode 100644
index 0000000..67c646e
--- /dev/null
+++ b/resources/js/components/content/Dashboard.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>dashboard</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/js/layouts/partials/Content.vue b/resources/js/layouts/partials/Content.vue
new file mode 100644
index 0000000..447755e
--- /dev/null
+++ b/resources/js/layouts/partials/Content.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {computed, defineAsyncComponent} from 'vue';
+const props = defineProps({
+  page: Object,
+});
+
+const currentPage = computed(() => props.page.id)
+
+const tabs = {
+  dashboard: defineAsyncComponent(() => import('../../components/content/Dashboard.vue')),
+  archive: defineAsyncComponent(() => import('../../components/content/Archive.vue')),
+}
+</script>
+
+<template>
+  <v-col>
+    <keep-alive>
+      <Component :is="tabs[currentPage]" />
+    </keep-alive>
+  </v-col>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/js/layouts/partials/Sidebar.vue b/resources/js/layouts/partials/Sidebar.vue
new file mode 100644
index 0000000..af40c54
--- /dev/null
+++ b/resources/js/layouts/partials/Sidebar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const pages = [
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    component: '../../components/content/Dashboard.vue',
+  },
+  {
+    id: 'archive',
+    name: 'Archive',
+    component: '../../components/content/Dashboard.vue',
+  }
+];
+</script>
+
+<template>
+  <v-col>
+    <v-btn
+        v-for="page in pages"
+        :key="page.id"
+        size="large"
+        @click="$emit('showPage', page)"
+    >{{ page.name }}</v-btn>
+  </v-col>
+</template>
+
+<style scoped>
+  .v-col {
+    width: 20vw;
+    max-width:250px;
+    display: flex;
+    flex-direction: column;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/Backoffice.vue b/resources/js/pages/Backoffice.vue
index 6eb6bd5..51cc974 100644
--- a/resources/js/pages/Backoffice.vue
+++ b/resources/js/pages/Backoffice.vue
@@ -1,18 +1,37 @@
 <script setup lang="ts">
 import {useAuthStore} from "@/stores/auth.store.ts";
 import Header from "@/layouts/partials/Header.vue";
+import Sidebar from "@/layouts/partials/Sidebar.vue";
+import Content from "@/layouts/partials/Content.vue";
+import {reactive} from "vue";
 
-const auth = useAuthStore();
+const page = reactive({
+  id: 'dashboard',
+  name: 'Dashboard',
+})
 
+const changePage = (currentPage) => {
+  page.id = currentPage.id;
+  page.name = currentPage.name;
+}
 </script>
 
 <template>
   <div>
     <Header />
-    <router-link to="/login"> Take me to login page </router-link>
+    <v-row :fluid="true">
+      <Sidebar
+        @show-page="changePage"
+      />
+      <Content
+        :page="page"
+      />
+    </v-row>
   </div>
 </template>
 
 <style scoped>
-
+  .v-row {
+    margin: 0;
+  }
 </style>
\ No newline at end of file