diff --git a/app/Http/Controllers/ScheduleController.php b/app/Http/Controllers/ScheduleController.php
index b44da9a..f4106d8 100644
--- a/app/Http/Controllers/ScheduleController.php
+++ b/app/Http/Controllers/ScheduleController.php
@@ -21,17 +21,23 @@ class ScheduleController extends Controller
     public function index(Request $request)
     {
         $date = CarbonImmutable::now()->startOfWeek();
-        $nbweek = 2;
-        $users = User::where('role', Role::developper())->get();
+        $nbweeks = 2;
         if ($request->p) {
             $date = CarbonImmutable::createFromFormat('d/m/Y', $request->p)->startOfWeek();
         }
 
+
+        $dbusers = User::where('role', Role::developper())->get();
+        $users = [];
+        foreach ($dbusers as $user) {
+            $users[$user->id] = ['name' => $user->name];
+        }
+
         $schedules = Schedule::whereDate('date', '>=', $date)
-                               ->whereDate('date', '<=', $date->addDays($nbweek * 7))
+                               ->whereDate('date', '<=', $date->addDays($nbweeks * 7 - 1))
                                ->orderBy('user_id')
-                               ->orderBy('date')
                                ->orderBy('slot')
+                               ->orderBy('date')
                                ->get();
 
         $arSchedules = array();
@@ -42,8 +48,8 @@ class ScheduleController extends Controller
             if ($prevUserId != $schedule->user_id) {
                 //nouveau user
                 $arSchedules[$schedule->user_id] = array(
-                    $schedule->date->format('d/m/Y') => array(
-                        $schedule->slot => array(
+                    $schedule->slot => array(
+                        $schedule->date->format('d/m/Y') => array(
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
                             'id_lie' => $schedule->id_lie,
@@ -53,10 +59,10 @@ class ScheduleController extends Controller
                 );
             } else {
                 //same user
-                if ($prevDate != $schedule->date) {
-                    //new date
-                    $arSchedules[$schedule->user_id][$schedule->date->format('d/m/Y')] = array(
-                        $schedule->slot => array(
+                if ($prevSlot != $schedule->slot) {
+                    //new slot
+                    $arSchedules[$schedule->user_id][$schedule->slot] = array(
+                        $schedule->date->format('d/m/Y') => array(
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
                             'id_lie' => $schedule->id_lie,
@@ -64,28 +70,37 @@ class ScheduleController extends Controller
                         ),
                     );
                 } else {
-                    //same date
-                    if ($prevSlot != $schedule->slot) {
-                        //new slot
-                        $arSchedules[$schedule->user_id][$schedule->date->format('d/m/Y')][$schedule->slot] = array(
+                    //same slot
+                    if ($prevDate != $schedule->date) {
+                        //new date
+                        $arSchedules[$schedule->user_id][$schedule->slot][$schedule->date->format('d/m/Y')] = array(
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
                             'id_lie' => $schedule->id_lie,
                             'model_lie' => $schedule->model_lie,
                         );
                     } else {
-                        //same slot ?
-                        //should never en here
+                        //same date
+                        //should never be here
                     }
                 }
-
             }
             $prevUserId = $schedule->user_id;
             $prevDate = $schedule->date;
             $prevSlot = $schedule->slot;
         }
 
-        return view('schedule.index', compact('users', 'date', 'nbweek', 'arSchedules'));
+        $weekCells = array();
+        for ($i=0; $i < $nbweeks; $i++) {
+            $weekCells[] = array(
+                            "num" => $date->addDays($i * 7)->weekOfYear,
+                            "month" => $date->addDays($i * 7)->shortLocaleMonth,
+                            "year" => $date->addDays($i * 7)->format('Y')
+                        );
+        }
+
+
+        return view('schedule.index', compact('users', 'date', 'weekCells', 'arSchedules'));
     }
 
     /**
diff --git a/resources/js/components/ScheduleComponent.vue b/resources/js/components/ScheduleComponent.vue
new file mode 100644
index 0000000..8cb1532
--- /dev/null
+++ b/resources/js/components/ScheduleComponent.vue
@@ -0,0 +1,168 @@
+<template>
+<div class="plannings">
+    <div class="row justify-content-center">
+        <div class="col-1 text-center">
+            <a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(false)">←</a>
+        </div>
+        <div :class="'col-10 grid-week grid-'+weeksCells.length+'week'">
+            <!--line header 1 -->
+            <div class="empty"></div>
+            <div class="week" v-for="item in weeksCells">
+                S {{item.num}} - {{item.month}} {{item.year}}
+            </div>
+            <!--line header 2 -->
+            <div v-for="day in days" :class="'day '+day.eday">
+                {{day.day}} {{day.num}}
+            </div>
+            <template v-for="(user,index) in schedules">
+                <div class="name">{{users[index].name}}</div>
+                <template v-for="(slot,key) in user">
+                    <div v-for="day in days" :class="'day '+user[key][day.key].type.value+ ' ' +day.eday">
+                        {{user[key][day.key]['text']}}
+                    </div>
+                </template>
+            </template>
+        </div>
+        <div class="col-1 text-center">
+            <a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(true)">→</a>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        dbSchedules: {
+            type: String,
+        },
+        dbUsers: {
+            type: String,
+        },
+        weeks: {
+            type: String,
+        },
+        browseDate: {
+            type: String,
+            default: function() {
+                return new Date();
+            }
+        },
+    },
+    mounted() {
+        this.currentDate = JSON.parse(this.browseDate);
+        this.weeksCells = JSON.parse(this.weeks);
+        this.numweeks = this.weeksCells.length;
+        this.days = this.prepareDays();
+        this.users = JSON.parse(this.dbUsers);
+        this.schedules = this.prepareSched(JSON.parse(this.dbSchedules));
+    },
+    data() {
+        return {
+            currentDate: null,
+            weeksCells: [],
+            days: [],
+            users:[],
+            schedules: [],
+        };
+    },
+    watch: {
+    },
+    methods: {
+        goToPlanning(forward) {
+            console.log(forward);
+            let date = this.moment(this.currentDate).startOf('week').subtract(7, 'day');
+            if(forward) {
+                date = this.moment(this.currentDate).add(7, 'day')
+            }
+            let url = new URL(this.route('schedule.index'))
+            location = url.origin+ url.pathname + '?p='+date.format('DD/MM/YYYY')
+        },
+        prepareDays() {
+            let mydays = [];
+            for(let i=0; i < this.numweeks * 7; i++) {
+                let date = this.moment(this.currentDate).add(i, 'day');
+                let obj = {
+                    day: date.format('ddd'),
+                    num: date.format('DD'),
+                    eday: date.locale("en").format('ddd'),
+                    key: date.format('DD/MM/YYYY'),
+                }
+                mydays.push(obj);
+                if(date.day() == 5) {
+                    i+=2;
+                }
+            }
+            return mydays;
+        },
+        prepareSched(dbscheds) {
+            var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":null,"model_lie":null}
+            //we need to make missing users
+            Object.keys(this.users).forEach(id => {
+                if(dbscheds[id] === undefined) {
+                    dbscheds[id] = {};
+                }
+            });
+            Object.keys(dbscheds).forEach(userid => {
+                //what if we missing a slot for the whole period ?
+                //we need to make missing slots too
+                for(let i=1; i < 5; i++) {
+                    if(dbscheds[userid][i] === undefined) {
+                        dbscheds[userid][i] = {};
+                    }
+                }
+                Object.keys(dbscheds[userid]).forEach(slotkey => {
+                    this.days.forEach(day => {
+                        if(dbscheds[userid][slotkey][day.key] === undefined) {
+                            //console.log('need ' + day.key + ' for slot ' + slotkey + ' for user ' + userid);
+                            dbscheds[userid][slotkey][day.key] = templateObj;
+                        }
+                    });
+                });
+            });
+            return dbscheds;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+@import "vue-select/src/scss/vue-select.scss";
+.plannings {
+    .sticky-top {
+        top: 20rem !important;
+    }
+}
+.grid-1week {
+    display: grid;
+    grid-template-columns: 2fr repeat(5, 1fr);
+    grid-auto-rows: minmax(50px, auto);
+}
+.grid-2week {
+    display: grid;
+    grid-template-columns: 2fr repeat(10, 1fr);
+    grid-auto-rows: minmax(50px, auto);
+    align-items: center;
+}
+.grid-week div {
+    border-width:0 1px 1px 0;
+    border-style: solid;
+    border-color: var(--bs-cyan);
+    display: flex;
+    justify-content: center;
+    align-self: stretch;
+    align-items: center;
+}
+.empty {
+    grid-column: auto;
+    grid-row: auto /span 2;
+}
+.week {
+    grid-column: auto /span 5;
+    grid-row: auto;
+}
+.name {
+    grid-column: auto;
+    grid-row: auto /span 4;
+}
+</style>
diff --git a/resources/views/schedule/index.blade.php b/resources/views/schedule/index.blade.php
index 4f11575..b21b5ff 100644
--- a/resources/views/schedule/index.blade.php
+++ b/resources/views/schedule/index.blade.php
@@ -2,6 +2,7 @@
 
 @push('customCss')
     <style>
+{{--
         .grid-1week {
             display: grid;
             grid-template-columns: 2fr repeat(5, 1fr);
@@ -37,7 +38,7 @@
             grid-column: auto;
             grid-row: auto /span 4;
         }
-
+--}}
         .support {
             background-color: {{CellType::support()->value}};
         }
@@ -74,21 +75,26 @@
             </div>
         </div>
     </div>
-    <div class="plannings">
+    <schedule-component
+        browse-date='@json($date)'
+        db-schedules='@json($arSchedules)'
+        db-users='@json($users)'
+        weeks='@json($weekCells)'></schedule-component>
+{{--    <div class="plannings">
         <div class="row justify-content-center">
             <div class="col-1 text-center">
                 <a class="sticky-top btn btn-primary mt-5" href="{{route('schedule.index')}}?p={{$date->addDays(-7)->format('d/m/Y')}}">←</a>
             </div>
-            <div class="col-10 grid-week grid-{{$nbweek}}week">
+            <div class="col-10 grid-week grid-{{count($weekCells)}}week">
                 <!--line header 1 -->
                 <div class="empty"></div>
-                @for ($i = 0; $i < $nbweek; $i++)
+                @for ($i = 0; $i < count($weekCells); $i++)
                     <div class="week">
                        S{{$date->addDays($i*7)->weekOfYear}} - {{$date->addDays($i*7)->shortLocaleMonth}} {{$date->addDays($i*7)->format('Y')}}
                     </div>
                 @endfor
                 <!--line header 2 -->
-                @for ($i = 0; $i < ($nbweek*7); $i++)
+                @for ($i = 0; $i < (count($weekCells)*7); $i++)
                     <div class="day {{$date->addDays($i)->shortEnglishDayOfWeek}}">
                         {{$date->addDays($i)->localeDayOfWeek}} {{$date->addDays($i)->format('d')}}
                     </div>
@@ -98,14 +104,14 @@
                         }
                     @endphp
                 @endfor
-                @foreach($users as $user)
+                @foreach($users as $id => $user)
                     <!-- user $j -->
-                    <div class="name">{{$user->name}}</div>
+                    <div class="name">{{$user["name"]}}</div>
                     @for ($k=1; $k < 5; $k++)
                         <!--line slot $k-->
-                        @for ($i = 0; $i < ($nbweek*7); $i++)
-                            <div class="day {{ $arSchedules[$user->id][$date->addDays($i)->format('d/m/Y')][$k]['type'] ?? '' }} {{$date->addDays($i)->shortEnglishDayOfWeek}}">
-                                {{$arSchedules[$user->id][$date->addDays($i)->format('d/m/Y')][$k]['text'] ?? ''}}
+                        @for ($i = 0; $i < (count($weekCells)*7); $i++)
+                            <div class="day {{ $arSchedules[$id][$k][$date->addDays($i)->format('d/m/Y')]['type'] ?? '' }} {{$date->addDays($i)->shortEnglishDayOfWeek}}">
+                                {{$arSchedules[$id][$k][$date->addDays($i)->format('d/m/Y')]['text'] ?? ''}}
                             </div>
                             @php
                                 if( $date->addDays($i)->dayOfWeek == 5) {
@@ -120,14 +126,15 @@
                 <a class="sticky-top btn btn-primary mt-5" href="{{route('schedule.index')}}?p={{$date->addDays(7)->format('d/m/Y')}}">→</a>
             </div>
         </div>
-    </div>
+    </div>--}}
 </div>
 @endsection
 
 @push('scriptsConstants')
 <script>
     window._routes = {
-        "planning.index": "{{ route('planning.index') }}",
+        "schedule.index": "{{ route('schedule.index') }}",
+
         "ticket.show": "{{ route('ticket.show', 'TICKET') }}",
         "projects.show": "{{ route('projects.show', 'PROJECT') }}",
         "sites.show": "{{ route('sites.show', 'SITE') }}",