diff --git a/assets/vue/views/user/courses/CourseCard.vue b/assets/vue/views/user/courses/CourseCard.vue
index e3087e12a3..8defc27ffa 100644
--- a/assets/vue/views/user/courses/CourseCard.vue
+++ b/assets/vue/views/user/courses/CourseCard.vue
@@ -1,13 +1,14 @@
 <template>
   <b-row no-gutters>
-    <b-col md="4">
+    <b-col md="2">
       <b-card-img
         src="/img/icons/64/course.png"
         alt="Image"
+        img-left
         class="rounded-0"
       />
     </b-col>
-    <b-col md="8">
+    <b-col md="10">
       <b-card-body :title="course.title">
         <!--              <b-card-text>-->
         <!--                Course description-->
diff --git a/assets/vue/views/user/sessions/List.vue b/assets/vue/views/user/sessions/List.vue
index 2c4245f764..adebe302d6 100644
--- a/assets/vue/views/user/sessions/List.vue
+++ b/assets/vue/views/user/sessions/List.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="course-list">
-      {{ status }}
-      <SessionCard :sessions="sessions"></SessionCard>
+    {{ status }}
+    <SessionCardList :sessions="sessions"></SessionCardList>
   </div>
 </template>
 
 <script>
-import SessionCard from './SessionCard';
+import SessionCardList from './SessionCardList';
 import ListMixin from '../../../mixins/ListMixin';
 import { ENTRYPOINT } from '../../../config/entrypoint';
 import axios from "axios";
@@ -16,7 +16,7 @@ export default {
   servicePrefix: 'Course',
   mixins: [ListMixin],
   components: {
-      SessionCard
+      SessionCardList
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
         this.status = 'Loading';
         let user = this.$store.getters['security/getUser'];
         if (user) {
-          axios.get(ENTRYPOINT + 'users/' + user.id + '/session_course_subscriptions.json').then(response => {
+          axios.get(ENTRYPOINT + 'users/' + user.id + '/sessions_rel_users.json').then(response => {
             this.status = '';
             if (Array.isArray(response.data)) {
               this.sessions = response.data;
diff --git a/assets/vue/views/user/sessions/SessionCard.vue b/assets/vue/views/user/sessions/SessionCard.vue
index fd1cbde19a..9c9d35ef44 100644
--- a/assets/vue/views/user/sessions/SessionCard.vue
+++ b/assets/vue/views/user/sessions/SessionCard.vue
@@ -1,46 +1,50 @@
 <template>
-  <v-container grid-list-xl fluid>
-    <v-layout row wrap>
-      <v-row dense>
-        <v-col
-              v-for="card in sessions"
-              :key="card.course.title"
-              :cols="12"
+  <b-row no-gutters>
+    <b-col md="2">
+      <b-card-img
+          src="/img/icons/64/session.png"
+          alt="Image"
+          class="mb-3"
+          img-left
+      />
+    </b-col>
+    <b-col md="10">
+      <b-card-body :title="sessionRelUser.session.name">
+        <b-card
+            v-for="course in sessionRelUser.courses"
+            :key="course.id"
+            no-body
+            class="overflow-hidden"
+            style="max-width: 540px;"
         >
-          <v-card>
-            <div class="d-flex flex-no-wrap">
-              <v-avatar
-                      class="ma-3"
-                      tile
-              >
-                <v-img src="/img/icons/48/blackboard_blue.png"></v-img>
-              </v-avatar>
-              <div >
-                <v-card-title v-text="card.course.title">
-                </v-card-title>
-              </div>
-            </div>
-            <v-card-actions>
-              <v-btn
-                      :href=" '/course/' + card.course.id + '/home'"
-                      text
-                      color="deep-purple accent-4"
-              >
-                Go
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-layout>
-  </v-container>
+          <b-card-body :title="course.course.title">
+            <!--              <b-card-text>-->
+            <!--                Course description-->
+            <!--              </b-card-text>-->
+            <b-button
+                :href=" '/course/' + course.course.id + '/home' + '?sid=' + sessionRelUser.session.id"
+                variant="primary"
+            >
+              Go
+            </b-button>
+          </b-card-body>
+        </b-card>
+      </b-card-body>
+    </b-col>
+  </b-row>
 </template>
 
 <script>
 export default {
   name: 'SessionCard',
   props: {
-    sessions: Array
+    sessionRelUser: Object,
   },
+  data() {
+    return {
+    };
+  },
+  methods: {
+  }
 };
 </script>
diff --git a/assets/vue/views/user/sessions/SessionCardList.vue b/assets/vue/views/user/sessions/SessionCardList.vue
new file mode 100644
index 0000000000..aa12885e4f
--- /dev/null
+++ b/assets/vue/views/user/sessions/SessionCardList.vue
@@ -0,0 +1,87 @@
+<template>
+  <span>
+    <b-button-group>
+      <b-button
+        rounded
+        :variant="isList()"
+        @click="changeLayout"
+      >
+        <font-awesome-icon icon="bars" />
+      </b-button>
+      <b-button
+        :variant="isDeck()"
+        rounded
+        @click="changeLayout"
+      >
+        <font-awesome-icon icon="th-large" />
+      </b-button>
+    </b-button-group>
+
+    <b-card-group
+      v-if="deck"
+      columns
+    >
+      <b-card
+        v-for="card in sessions"
+        :key="card.session.id"
+        no-body
+        class="overflow-hidden"
+        style="max-width: 540px;"
+      >
+        <SessionCard
+          :session="card"
+        />
+      </b-card>
+    </b-card-group>
+    <span v-else>
+      <b-card
+        v-for="card in sessions"
+        :key="card.session.id"
+        no-body
+        class="overflow-hidden"
+        style="max-width: 540px;"
+      >
+        <SessionCard
+          :sessionRelUser="card"
+        />
+      </b-card>
+      <span />
+    </span>
+  </span>
+</template>
+
+<script>
+
+import SessionCard from './SessionCard';
+export default {
+  name: 'SessionCardList',
+  components: {
+    SessionCard
+  },
+  props: {
+    sessions: Array,
+  },
+  data() {
+    return {
+      deck: false
+    };
+  },
+  methods: {
+    isList: function (){
+      if (!this.deck) {
+        return 'primary';
+      }
+      return 'secondary';
+    },
+    isDeck: function (){
+      if (this.deck) {
+        return 'primary';
+      }
+      return 'secondary';
+    },
+    changeLayout: function () {
+      this.deck = !this.deck;
+    },
+  }
+};
+</script>