diff --git a/front/package-lock.json b/front/package-lock.json
index 8597929..099effa 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,9 +8,11 @@
       "name": "mail",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.3.4",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -3546,6 +3548,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3590,6 +3597,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4213,6 +4230,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
@@ -4974,6 +5002,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -6055,7 +6091,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6072,6 +6107,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -7510,7 +7558,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -7520,7 +7567,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -9060,6 +9106,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -10903,6 +10954,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -13930,6 +13992,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -13950,6 +14017,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -14375,6 +14452,14 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
@@ -14876,6 +14961,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -15654,8 +15744,17 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
     },
     "forwarded": {
       "version": "0.2.0",
@@ -16658,14 +16757,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -17665,6 +17762,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -18941,6 +19043,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/front/package.json b/front/package.json
index 3b305b1..daba1d6 100644
--- a/front/package.json
+++ b/front/package.json
@@ -8,9 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.3.4",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -33,7 +35,9 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {"vue/multi-word-component-names": "off"}
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   },
   "browserslist": [
     "> 1%",
diff --git a/front/src/App.vue b/front/src/App.vue
index 45e929e..245511c 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -1,11 +1,19 @@
+<script setup>
+import { RouterView } from "vue-router";
+</script>
+
 <template>
-  <Sidebar />
-  <RoomView />
+  <div id="app">
+    <!-- <router-link to="/">Home</router-link> -->
+    <RouterView/>
+    <Sidebar />
+    <RoomView />
+  </div>
 </template>
 
 <script>
-import Sidebar from './components/sidebar/Sidebar';
-import RoomView from './components/room/RoomView';
+import Sidebar from './views/sidebar/Sidebar';
+import RoomView from './views/room/RoomView';
 
 export default {
   name: 'App',
@@ -22,4 +30,5 @@ export default {
   height: 100%;
   width: 100%;
 }
+
 </style>
diff --git a/front/src/main.js b/front/src/main.js
index bbca5ba..d80be33 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -1,20 +1,11 @@
 import { createApp } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
+import router from './router'
 import App from './App.vue'
+import roomsStore from './store/rooms'
 
-const routes = [
-//   { path: '/', component: Home },
-//   { path: '/about', component: About },
-]
 
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes
-});
-
-const app = createApp({});
+const app = createApp(App);
 app.use(router);
+app.use(roomsStore);
 
-app.mount('#app');
-
-createApp(App).mount('#app')
+app.mount('#app');
\ No newline at end of file
diff --git a/front/src/router/index.js b/front/src/router/index.js
new file mode 100644
index 0000000..83b8288
--- /dev/null
+++ b/front/src/router/index.js
@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;
diff --git a/front/src/store/rooms.js b/front/src/store/rooms.js
new file mode 100644
index 0000000..317e639
--- /dev/null
+++ b/front/src/store/rooms.js
@@ -0,0 +1,52 @@
+import { createStore } from "vuex";
+
+const roomsStore = createStore({
+  state() {
+    return {
+      rooms: [
+        {
+          users: "clemnce",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 1,
+        },
+        {
+          users: "juliette",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 1,
+        },
+        {
+          users: "jean",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 2,
+        },
+        {
+          users: "luc",
+          object:
+            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+          mailbox: 2,
+        },
+      ],
+      mailboxes: [
+        { mail: "mail@domain.com", id: 1 },
+        { mail: "name@example.com", id: 2 },
+      ],
+      activeMailbox: -1
+    };
+  },
+  mutations: {
+    setActiveMailbox(state, payload) {
+        state.activeMailbox = payload;
+    }
+  },
+  getters: {
+    folderRooms: (state) => () => {
+        if (state.activeMailbox == -1) return state.rooms;
+        return state.rooms.filter(room => room.mailbox == state.activeMailbox);
+    }
+  }
+});
+
+export default roomsStore;
diff --git a/front/src/views/About.vue b/front/src/views/About.vue
new file mode 100644
index 0000000..2e3b1cc
--- /dev/null
+++ b/front/src/views/About.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>About</h1>
+</template>
\ No newline at end of file
diff --git a/front/src/views/Home.vue b/front/src/views/Home.vue
new file mode 100644
index 0000000..b62930f
--- /dev/null
+++ b/front/src/views/Home.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>home</h1>
+</template>
\ No newline at end of file
diff --git a/front/src/components/views/avatars/BaseAvatar.vue b/front/src/views/avatars/BaseAvatar.vue
similarity index 78%
rename from front/src/components/views/avatars/BaseAvatar.vue
rename to front/src/views/avatars/BaseAvatar.vue
index 1a4fc75..75fe92c 100644
--- a/front/src/components/views/avatars/BaseAvatar.vue
+++ b/front/src/views/avatars/BaseAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <img :src="require('../../../assets/'+ url)" >
+    <img :src="require('../../assets/'+ url)" >
 </template>
 
 <script>
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
new file mode 100644
index 0000000..569ebc8
--- /dev/null
+++ b/front/src/views/room/Header.vue
@@ -0,0 +1,26 @@
+<template>
+    <div id="main">
+        header -> sender
+                    -> thread
+                    -> single click open side
+                    -> double click open plain
+        is thread
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Header',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+#main {
+    background-color: blue;
+    width: 100%;
+    height: 51px;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/room/RoomView.vue b/front/src/views/room/RoomView.vue
similarity index 55%
rename from front/src/components/room/RoomView.vue
rename to front/src/views/room/RoomView.vue
index 08ce290..027d63d 100644
--- a/front/src/components/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -1,23 +1,31 @@
 <template>
     <div>
-        Room
+        <Header></Header>
+        <div>
+           
+            Room
+            is thread
+        </div>
+
     </div>
 </template>
 
 <script>
+import Header from './Header.vue'
 
 export default {
   name: 'RoomView',
   components: {
+    Header
   }
 }
 </script>
 
 <style scoped>
 div {
-    flex-grow: 1;
     background-color: #1D1D23;
     color: white;
+    width: 100%;
 }
 </style>
 
diff --git a/front/src/components/sidebar/Sidebar.vue b/front/src/views/sidebar/Sidebar.vue
similarity index 95%
rename from front/src/components/sidebar/Sidebar.vue
rename to front/src/views/sidebar/Sidebar.vue
index 604a316..eb71918 100644
--- a/front/src/components/sidebar/Sidebar.vue
+++ b/front/src/views/sidebar/Sidebar.vue
@@ -26,6 +26,7 @@ div {
 
 #users {
   max-width: 300px;
+  min-width: 250px;
 }
 
 /* todo setup max size */
diff --git a/front/src/views/sidebar/folders/Account.vue b/front/src/views/sidebar/folders/Account.vue
new file mode 100644
index 0000000..dcc61ba
--- /dev/null
+++ b/front/src/views/sidebar/folders/Account.vue
@@ -0,0 +1,23 @@
+<template>
+    <div id="main">
+        <div id="userMenu">
+          <!-- deconnect -->
+        </div>
+        <span class="divider"></span>
+        <!-- <h5>Accounts: </h5> -->
+        <span class="divider"></span>
+        <!-- <h5>Folders: </h5> -->
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Account',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/front/src/views/sidebar/folders/All.vue b/front/src/views/sidebar/folders/All.vue
new file mode 100644
index 0000000..9e662bb
--- /dev/null
+++ b/front/src/views/sidebar/folders/All.vue
@@ -0,0 +1,18 @@
+<template>
+    <div id="main">
+        jij
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'All',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/front/src/views/sidebar/folders/Folder.vue b/front/src/views/sidebar/folders/Folder.vue
new file mode 100644
index 0000000..4c0ded3
--- /dev/null
+++ b/front/src/views/sidebar/folders/Folder.vue
@@ -0,0 +1,35 @@
+<template>
+    <div id="main" @click="setActiveMailbox(data.id)">
+        {{ data.mail }}
+    </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'Folder',
+  components: {
+  },
+  props: {
+    data: {mail: String, id: Number}
+  },
+  methods: {
+    ...mapMutations(['setActiveMailbox'])
+  }
+}
+</script>
+
+<style scoped>
+#main {
+  max-width: 32px;
+  white-space: normal;
+  word-wrap: break-word;
+  padding: 0px;
+  cursor: pointer;
+}
+
+div:hover {
+  background-color: aqua !important;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/sidebar/folders/Folders.vue b/front/src/views/sidebar/folders/Folders.vue
similarity index 65%
rename from front/src/components/sidebar/folders/Folders.vue
rename to front/src/views/sidebar/folders/Folders.vue
index 6ac16ca..215f91b 100644
--- a/front/src/components/sidebar/folders/Folders.vue
+++ b/front/src/views/sidebar/folders/Folders.vue
@@ -1,20 +1,27 @@
 <template>
     <div id="main">
         <div id="userMenu">
-        
+          <!-- deconnect -->
         </div>
         <span class="divider"></span>
-        <!-- <h5>Accounts: </h5> -->
+        <Folder :data="{'id': -1, 'mail': 'all'}"/>
+        <Folder v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
         <span class="divider"></span>
         <!-- <h5>Folders: </h5> -->
     </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import Folder from './Folder.vue'
 
 export default {
   name: 'Folders',
   components: {
+    Folder
+  },
+  computed: {
+    ...mapState(['mailboxes'])
   }
 }
 </script>
diff --git a/front/src/components/sidebar/users/User.vue b/front/src/views/sidebar/users/User.vue
similarity index 74%
rename from front/src/components/sidebar/users/User.vue
rename to front/src/views/sidebar/users/User.vue
index e73b801..be2adfd 100644
--- a/front/src/components/sidebar/users/User.vue
+++ b/front/src/views/sidebar/users/User.vue
@@ -1,18 +1,18 @@
 <template>
-    <div id="main">
-        <BaseAvatar url="vue.png"/>
-        <div id="content">
-            <div id="sender">{{ sender }}</div>
-            <div id="object">{{ object }}</div>
-        </div>
-    </div>
-    <ThreadList />
     <div>
+        <div id="user">
+            <BaseAvatar url="vue.png"/>
+            <div id="content">
+                <div id="sender">{{ sender }}</div>
+                <div id="object">{{ object }}</div>
+            </div>
+        </div>
+        <ThreadList />
     </div>
 </template>
 
 <script>
-import BaseAvatar from '../../views/avatars/BaseAvatar.vue'
+import BaseAvatar from '../../avatars/BaseAvatar.vue'
 import ThreadList from './threads/ThreadList.vue'
 
 export default {
@@ -29,16 +29,17 @@ export default {
 </script>
 
 <style scoped>
-#main {
+#user {
     box-sizing: border-box;
     contain: content;
     display: flex;
     margin-bottom: 4px;
     margin: 4px;
     padding: 4px;
+    cursor: pointer;
 }
 
-#main:hover {
+#user:hover {
     background-color: #41474f;;
     border-radius: 8px;
 }
diff --git a/front/src/components/sidebar/users/Users.vue b/front/src/views/sidebar/users/Users.vue
similarity index 58%
rename from front/src/components/sidebar/users/Users.vue
rename to front/src/views/sidebar/users/Users.vue
index 6ae2e31..c118262 100644
--- a/front/src/components/sidebar/users/Users.vue
+++ b/front/src/views/sidebar/users/Users.vue
@@ -1,10 +1,11 @@
 <template>
     <div>
-      <User sender="Clemence" object="Proident sunt voluptate enim nisi duis fugiat veniam consequat do irure irure irure id. "/>
+      <User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import User from './User'
 
 export default {
@@ -14,6 +15,9 @@ export default {
   },
   components: {
     User
+  },
+  computed: {
+    ...mapGetters(['folderRooms'])
   }
 }
 </script>
diff --git a/front/src/components/sidebar/users/threads/ThreadList.vue b/front/src/views/sidebar/users/threads/ThreadList.vue
similarity index 100%
rename from front/src/components/sidebar/users/threads/ThreadList.vue
rename to front/src/views/sidebar/users/threads/ThreadList.vue
diff --git a/front/yarn.lock b/front/yarn.lock
index 165590e..2df91b5 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1602,7 +1602,7 @@
   optionalDependencies:
     "prettier" "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.4.5":
   "integrity" "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
   "resolved" "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz"
   "version" "6.5.0"
@@ -1980,6 +1980,11 @@
   dependencies:
     "lodash" "^4.17.14"
 
+"asynckit@^0.4.0":
+  "integrity" "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+  "resolved" "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  "version" "0.4.0"
+
 "at-least-node@^1.0.0":
   "integrity" "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
   "resolved" "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz"
@@ -1997,6 +2002,15 @@
     "picocolors" "^1.0.0"
     "postcss-value-parser" "^4.2.0"
 
+"axios@^1.3.4":
+  "integrity" "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz"
+  "version" "1.3.4"
+  dependencies:
+    "follow-redirects" "^1.15.0"
+    "form-data" "^4.0.0"
+    "proxy-from-env" "^1.1.0"
+
 "babel-loader@^8.2.2":
   "integrity" "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q=="
   "resolved" "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz"
@@ -2372,6 +2386,13 @@
   "resolved" "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz"
   "version" "2.0.19"
 
+"combined-stream@^1.0.8":
+  "integrity" "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="
+  "resolved" "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  "version" "1.0.8"
+  dependencies:
+    "delayed-stream" "~1.0.0"
+
 "commander@^2.20.0":
   "integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
   "resolved" "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz"
@@ -2704,6 +2725,11 @@
     "has-property-descriptors" "^1.0.0"
     "object-keys" "^1.1.1"
 
+"delayed-stream@~1.0.0":
+  "integrity" "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+  "resolved" "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  "version" "1.0.0"
+
 "depd@~1.1.2":
   "integrity" "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
   "resolved" "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz"
@@ -3284,11 +3310,20 @@
   "resolved" "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz"
   "version" "3.2.7"
 
-"follow-redirects@^1.0.0":
+"follow-redirects@^1.0.0", "follow-redirects@^1.15.0":
   "integrity" "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
   "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
   "version" "1.15.2"
 
+"form-data@^4.0.0":
+  "integrity" "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww=="
+  "resolved" "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  "version" "4.0.0"
+  dependencies:
+    "asynckit" "^0.4.0"
+    "combined-stream" "^1.0.8"
+    "mime-types" "^2.1.12"
+
 "forwarded@0.2.0":
   "integrity" "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
   "resolved" "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz"
@@ -4157,7 +4192,7 @@
   "resolved" "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz"
   "version" "1.52.0"
 
-"mime-types@^2.1.27", "mime-types@^2.1.31", "mime-types@~2.1.17", "mime-types@~2.1.24", "mime-types@~2.1.34":
+"mime-types@^2.1.12", "mime-types@^2.1.27", "mime-types@^2.1.31", "mime-types@~2.1.17", "mime-types@~2.1.24", "mime-types@~2.1.34":
   "integrity" "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="
   "resolved" "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz"
   "version" "2.1.35"
@@ -4931,6 +4966,11 @@
     "forwarded" "0.2.0"
     "ipaddr.js" "1.9.1"
 
+"proxy-from-env@^1.1.0":
+  "integrity" "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+  "resolved" "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  "version" "1.1.0"
+
 "pseudomap@^1.0.2":
   "integrity" "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
   "resolved" "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz"
@@ -5914,7 +5954,7 @@
   "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   "version" "1.9.1"
 
-"vue@*", "vue@^2 || ^3.2.13", "vue@^3.2.0", "vue@^3.2.13", "vue@3.2.47":
+"vue@*", "vue@^2 || ^3.2.13", "vue@^3.0.2", "vue@^3.2.0", "vue@^3.2.13", "vue@3.2.47":
   "integrity" "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ=="
   "resolved" "https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz"
   "version" "3.2.47"
@@ -5925,6 +5965,13 @@
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"vuex@^4.0.2":
+  "integrity" "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q=="
+  "resolved" "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz"
+  "version" "4.0.2"
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 "watchpack@^2.4.0":
   "integrity" "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg=="
   "resolved" "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz"