diff --git a/src/App.vue b/src/App.vue
index 3445c9d..d75967e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,22 +9,25 @@
     </div>
 
     <HistoryForTracker/>
+    <CustomBookForTracker/>
     <TasksForTracker/>
     <History/>
 </template>
 
 <script>
 import moment from 'moment'
-import bootstrap from 'bootstrap'
+import { Tooltip } from 'bootstrap'
 import iziToast from "izitoast";
 import Menu from "./views/Menu";
 import History from "./views/History";
 import TasksForTracker from "./views/TasksForTracker";
 import HistoryForTracker from "./views/HistoryForTracker";
+import CustomBookForTracker from "./views/CustomBookForTracker";
 
 export default {
     el: '#root',
     components: {
+        CustomBookForTracker,
         HistoryForTracker,
         TasksForTracker,
         History,
@@ -73,7 +76,7 @@ export default {
         loadTooltips() {
             let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
             tooltipTriggerList.map((tooltipTriggerEl) => {
-                return new bootstrap.Tooltip(tooltipTriggerEl)
+                return new Tooltip(tooltipTriggerEl)
             });
         },
         startTracking(tracker, individual = false, timeBoxMinutes = null) {
@@ -166,31 +169,31 @@ export default {
         this.stopActiveTracker();
     },
     watch: {
-        trackers: {
-            handler() {
-                this.$store.commit('saveTrackers');
-            },
-            deep: true
-        },
-        publicDB() {
-            this.publicDB = this.validateBooleans(this.publicDB)
-            this.$store.commit('saveTrackers');
-            this.$forceUpdate();
-        },
-        showPT() {
-            this.showPT = this.validateBooleans(this.showPT)
-            this.$store.commit('saveTrackers');
-            this.$forceUpdate();
-        },
-        dontShowMinutes() {
-            this.dontShowMinutes = this.validateBooleans(this.dontShowMinutes)
-            this.$store.commit('saveTrackers');
-            this.$forceUpdate();
-        },
-        theme() {
-            this.$store.commit('saveTrackers');
-            this.$forceUpdate();
-        }
+        // trackers: {
+        //     handler() {
+        //         this.$store.commit('saveTrackers');
+        //     },
+        //     deep: true
+        // },
+        // publicDB() {
+        //     this.publicDB = this.validateBooleans(this.publicDB)
+        //     this.$store.commit('saveTrackers');
+        //     this.$forceUpdate();
+        // },
+        // showPT() {
+        //     this.showPT = this.validateBooleans(this.showPT)
+        //     this.$store.commit('saveTrackers');
+        //     this.$forceUpdate();
+        // },
+        // dontShowMinutes() {
+        //     this.dontShowMinutes = this.validateBooleans(this.dontShowMinutes)
+        //     this.$store.commit('saveTrackers');
+        //     this.$forceUpdate();
+        // },
+        // theme() {
+        //     this.$store.commit('saveTrackers');
+        //     this.$forceUpdate();
+        // }
     },
     computed: {
         exportJson() {
diff --git a/src/css/app.scss b/src/css/app.scss
index 0aafc4b..c7ef347 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -23,10 +23,6 @@ nav, .card {
     margin-bottom: 20px;
 }
 
-.modal-content {
-    max-width: 1000px;
-}
-
 .btn-full-width {
     width: 100%;
 }
@@ -48,12 +44,6 @@ nav, .card {
     margin-bottom: 1px;
 }
 
-#settingsModal .modal-dialog,
-#showTicketsModal .modal-dialog,
-#showArchivedTicketsModal .modal-dialog {
-    max-width: 900px;
-}
-
 .btn {
     text-transform: initial !important;
 }
@@ -63,10 +53,6 @@ nav, .card {
     margin-top: 0.5em;
 }
 
-#settingsModal .form-group {
-    margin-bottom: 0.5em;
-}
-
 .search-field {
     display: inline-block;
     max-width: 85%;
@@ -130,11 +116,11 @@ nav, .card {
     text-decoration: line-through;
 }
 
-#trackerTasksModal a li {
+#trackerTasksCanvas a li {
     color: black !important;
 }
 
-#trackerTasksModal input[type=range] {
+#trackerTasksCanvas input[type=range] {
     width: 100%;
 }
 
diff --git a/src/views/Archive.vue b/src/views/Archive.vue
index 827fa4b..d1828f4 100644
--- a/src/views/Archive.vue
+++ b/src/views/Archive.vue
@@ -1,6 +1,5 @@
 <template>
     <h5><i class="fas fa-archive"></i> Archivierte Tracker</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     <div class="row">
         <div class="col-sm-6"></div>
         <div class="col-sm-6">
@@ -36,7 +35,7 @@
                         </router-link>
                     </div>
                     <div class="col" v-if="tracker.history.length > 0">
-                        <button class="btn btn-info tracker-action-button" data-bs-dismiss="modal"
+                        <button class="btn btn-info tracker-action-button"
                                 @click="showHistoryForTracker(tracker)" title="History">
                             <i class="fas fa-history"></i>
                         </button>
@@ -63,7 +62,7 @@
 
 <script>
 import moment from "moment";
-import bootstrap from "bootstrap";
+import { Offcanvas } from "bootstrap";
 
 export default {
     name: "Archive",
@@ -98,7 +97,7 @@ export default {
         timeWithPostFix(time) {
             let postFix = ' Minute';
 
-            if (time >= 480 && this.showPT) {
+            if (time >= 480 && this.$store.state.settings.showPT) {
                 postFix = ' PT';
                 time = (time / 480).toFixed(1);
             } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@@ -138,8 +137,8 @@ export default {
         showHistoryForTracker(tracker) {
             this.$store.commit('selectTracker', tracker);
             setTimeout(() => {
-                let historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
-                historyModal.toggle();
+                let historyCanvas = new Offcanvas(document.getElementById('historyCancas'));
+                historyCanvas.toggle();
             }, 50);
         },
     }
diff --git a/src/views/Boardview.vue b/src/views/Boardview.vue
index f975967..b7d7698 100644
--- a/src/views/Boardview.vue
+++ b/src/views/Boardview.vue
@@ -59,7 +59,7 @@
                                 </div>
 
                                 <div class="col-md-12">
-                                    <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
+                                    <button class="btn btn-warning tracker-action-button"
                                             @click="archiveTracker(trackerIndex)" title="Archivieren">
                                         <i class="fas fa-archive"></i>
                                     </button>
@@ -124,7 +124,7 @@
                                 </div>
 
                                 <div class="col-md-12">
-                                    <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
+                                    <button class="btn btn-warning tracker-action-button"
                                             @click="archiveTracker(trackerIndex)" title="Archivieren">
                                         <i class="fas fa-archive"></i>
                                     </button>
diff --git a/src/views/CustomBookForTracker.vue b/src/views/CustomBookForTracker.vue
index 1d308c1..848c964 100644
--- a/src/views/CustomBookForTracker.vue
+++ b/src/views/CustomBookForTracker.vue
@@ -1,25 +1,22 @@
 <template>
-    <div class="modal fade" id="customBookingModal" tabindex="-1" role="dialog" aria-labelledby="customBookingModalLabel"
-         aria-hidden="true" v-if="selectedTracker">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5><i class="fas fa-user-edit"></i> Buchung für {{selectedTracker.number}}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    <div class="offcanvas offcanvas-end" id="customBookingCanvas"
+         v-if="$store.state.selectedTracker">
+        <div class="offcanvas-header">
+            <h5><i class="fas fa-user-edit"></i> Buchung für {{ $store.state.selectedTracker.number }}</h5>
+        </div>
+        <div class="offcanvas-body">
+            <div class="form-group">
+                <label>Zeit in Minuten:</label>
+                <input type="text" class="form-control" v-model="customBookingValue">
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <a href="javascript:" class="btn btn-success btn-full-width" data-bs-dismiss="offcanvas"
+                       @click="makeCustomBooking()">+ Hinzubuchen</a>
                 </div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label>Zeit in Minuten:</label>
-                        <input type="text" class="form-control" v-model="customBookingValue">
-                    </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <a href="javascript:" class="btn btn-success btn-full-width" data-bs-dismiss="modal" @click="makeCustomBooking()">+ Hinzubuchen</a>
-                        </div>
-                        <div class="col-6">
-                            <a href="javascript:" class="btn btn-danger btn-full-width" data-bs-dismiss="modal" @click="makeCustomBooking(true)">- Abbuchen</a>
-                        </div>
-                    </div>
+                <div class="col-6">
+                    <a href="javascript:" class="btn btn-danger btn-full-width" data-bs-dismiss="offcanvas"
+                       @click="makeCustomBooking(true)">- Abbuchen</a>
                 </div>
             </div>
         </div>
@@ -27,8 +24,40 @@
 </template>
 
 <script>
+import iziToast from "izitoast";
+import moment from "moment";
+
 export default {
-    name: "CustomBookForTracker"
+    name: "CustomBookForTracker",
+    data() {
+        return {
+            customBookingValue: ''
+        }
+    },
+    methods: {
+        makeCustomBooking(subtract = false) {
+            if (subtract) {
+                this.customBookingValue -= (this.customBookingValue * 2)
+            }
+
+            iziToast.show({
+                message: 'Buchung erfolgreich',
+                color: 'green'
+            });
+
+            this.bookTimeManually(this.$store.state.selectedTracker, this.customBookingValue);
+        },
+        bookTimeManually(tracker, minutes) {
+            tracker.history.pushToBeginning({
+                trackingStarted: moment(),
+                trackingStopped: moment(),
+                manually: true,
+                minutes: Math.round(minutes)
+            });
+
+            this.$store.commit('saveTrackers');
+        },
+    }
 }
 </script>
 
diff --git a/src/views/History.vue b/src/views/History.vue
index 3a8a3c8..d3d1e58 100644
--- a/src/views/History.vue
+++ b/src/views/History.vue
@@ -1,10 +1,9 @@
 <template>
-    <div class="offcanvas offcanvas-end" id="pastDaysModal" tabindex="-1" role="dialog"
-         aria-labelledby="pastDaysModalLabel"
+    <div class="offcanvas offcanvas-end" id="pastDaysCanvas"
          aria-hidden="true">
         <div class="offcanvas-header">
             <h5><i class="fas fa-random"></i> Buchungsverlauf</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
             <div class="row">
@@ -104,7 +103,7 @@ export default {
         timeWithPostFix(time) {
             let postFix = ' Minute';
 
-            if (time >= 480 && this.showPT) {
+            if (time >= 480 && this.$store.state.settings.showPT) {
                 postFix = ' PT';
                 time = (time / 480).toFixed(1);
             } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
diff --git a/src/views/HistoryForTracker.vue b/src/views/HistoryForTracker.vue
index 27bec26..8abe07f 100644
--- a/src/views/HistoryForTracker.vue
+++ b/src/views/HistoryForTracker.vue
@@ -1,68 +1,64 @@
 <template>
-    <div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel"
+    <div class="offcanvas offcanvas-end" id="historyCancas" tabindex="-1" role="dialog"
+         aria-labelledby="historyCancasLabel"
          aria-hidden="true" v-if="$store.state.selectedTracker">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5><i class="fas fa-history"></i> History von
-                        {{ $store.state.selectedTracker.number }}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <ul class="list-group tracker-history">
-                        <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
-                                  v-bind:key="historyIndex">
-                            <li class="list-group-item" v-if="!tracker.manually">
-                                <div>
-                                    <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
-                                        {{ formattedDate(tracker.trackingStarted) }}
-                                    </div>
-                                    Start:
-                                </div>
-                                <div>
-                                    <div class="float-end" :title="exactTimestamp(tracker.trackingStopped)">
-                                        {{ formattedDate(tracker.trackingStopped) }}
-                                    </div>
-                                    Ende:
-                                </div>
-                                <div>
-                                    <div class="float-end">
-                                        {{ timeWithPostFix(tracker.minutes) }}
-                                    </div>
-                                    Zeit:
-                                </div>
-                                <a href="javascript:" @click="deleteHistoryEntry(null, historyIndex)" class="float-end">
-                                    <i class="fas fa-trash"></i>
-                                </a>
-                                <br/>
-                            </li>
-                        </template>
-                        <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
-                                  v-bind:key="historyIndex">
-                            <li class="list-group-item bg-light"
-                                v-if="tracker.manually">
-                                <div>
-                                    <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
-                                        {{ formattedDate(tracker.trackingStarted) }}
-                                    </div>
-                                    Manuell erfasst am:
-                                </div>
-                                <div>
-                                    <div class="float-end">
-                                        {{ timeWithPostFix(tracker.minutes) }}
-                                    </div>
-                                    Zeit:
-                                </div>
-                                <a href="javascript:" @click="deleteHistoryEntry(trackerIndex, historyIndex)"
-                                   class="float-end">
-                                    <i class="fas fa-trash"></i>
-                                </a>
-                                <br/>
-                            </li>
-                        </template>
-                    </ul>
-                </div>
-            </div>
+        <div class="offcanvas-header">
+            <h5><i class="fas fa-history"></i> History von
+                {{ $store.state.selectedTracker.number }}</h5>
+        </div>
+        <div class="offcanvas-body">
+            <ul class="list-group tracker-history">
+                <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
+                          v-bind:key="historyIndex">
+                    <li class="list-group-item" v-if="!tracker.manually">
+                        <div>
+                            <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
+                                {{ formattedDate(tracker.trackingStarted) }}
+                            </div>
+                            Start:
+                        </div>
+                        <div>
+                            <div class="float-end" :title="exactTimestamp(tracker.trackingStopped)">
+                                {{ formattedDate(tracker.trackingStopped) }}
+                            </div>
+                            Ende:
+                        </div>
+                        <div>
+                            <div class="float-end">
+                                {{ timeWithPostFix(tracker.minutes) }}
+                            </div>
+                            Zeit:
+                        </div>
+                        <a href="javascript:" @click="deleteHistoryEntry(null, historyIndex)" class="float-end">
+                            <i class="fas fa-trash"></i>
+                        </a>
+                        <br/>
+                    </li>
+                </template>
+                <template v-for="(tracker, historyIndex) in $store.state.selectedTracker.history"
+                          v-bind:key="historyIndex">
+                    <li class="list-group-item bg-light"
+                        v-if="tracker.manually">
+                        <div>
+                            <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
+                                {{ formattedDate(tracker.trackingStarted) }}
+                            </div>
+                            Manuell erfasst am:
+                        </div>
+                        <div>
+                            <div class="float-end">
+                                {{ timeWithPostFix(tracker.minutes) }}
+                            </div>
+                            Zeit:
+                        </div>
+                        <a href="javascript:" @click="deleteHistoryEntry(trackerIndex, historyIndex)"
+                           class="float-end">
+                            <i class="fas fa-trash"></i>
+                        </a>
+                        <br/>
+                    </li>
+                </template>
+            </ul>
         </div>
     </div>
 </template>
@@ -78,10 +74,11 @@ export default {
         },
         deleteHistoryEntry(trackerIndex, historyIndex) {
             if (trackerIndex) {
-                this.trackers[trackerIndex].history.splice(historyIndex, 1);
+                this.$store.state.trackers[trackerIndex].history.splice(historyIndex, 1);
             } else {
-                this.selectedTracker.history.splice(historyIndex, 1);
+                this.$store.state.selectedTracker.history.splice(historyIndex, 1);
             }
+
             this.$store.commit('saveTrackers');
         },
         formattedDate(date) {
@@ -90,7 +87,7 @@ export default {
         timeWithPostFix(time) {
             let postFix = ' Minute';
 
-            if (time >= 480 && this.showPT) {
+            if (time >= 480 && this.$store.state.settings.showPT) {
                 postFix = ' PT';
                 time = (time / 480).toFixed(1);
             } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
diff --git a/src/views/Menu.vue b/src/views/Menu.vue
index 50c06eb..097f7ad 100644
--- a/src/views/Menu.vue
+++ b/src/views/Menu.vue
@@ -49,7 +49,7 @@
             <a type="button"
                class="btn btn-info text-light bottom-menu-item"
                data-bs-toggle="offcanvas"
-               data-bs-target="#pastDaysModal"
+               data-bs-target="#pastDaysCanvas"
                data-bs-placement="top"
                title="Buchungsverlauf">
                 <i class="fas fa-history"></i>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 95d577e..69a90d7 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -15,14 +15,14 @@
             <br/>
             <div class="form-group">
                 <label>
-                    <input type="checkbox" class="form-control-checkbox" v-model="showPT">
+                    <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.showPT">
                     Ab 8 Stunden nurmehr PT anzeigen
                 </label>
             </div>
             <br/>
             <div class="form-group">
                 <label>
-                    <input type="checkbox" class="form-control-checkbox" v-model="dontShowMinutes">
+                    <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.dontShowMinutes">
                     Zeit immer in Stunden anzeigen
                 </label>
             </div>
@@ -64,8 +64,8 @@
         </div>
     </div>
     <div class="modal-footer">
-        <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="modal">Speichern</button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="offcanvas" >Speichern</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas" >Schließen</button>
     </div>
 </template>
 
diff --git a/src/views/TasksForTracker.vue b/src/views/TasksForTracker.vue
index d7b3352..3364000 100644
--- a/src/views/TasksForTracker.vue
+++ b/src/views/TasksForTracker.vue
@@ -1,16 +1,15 @@
 <template>
     <div class="offcanvas offcanvas-end"
-         id="trackerTasksModal"
+         id="trackerTasksCanvas"
          tabindex="-1"
          role="dialog"
          v-if="$store.state.selectedTracker"
-         aria-labelledby="showTrackerTasksModal"
+         aria-labelledby="showTrackerCanvasCanvas"
          aria-hidden="true">
         <div class="offcanvas-header">
             <h5><i class="fas fa-clock"></i> Tasks für {{ $store.state.selectedTracker.number }}</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
+        <div class="offcanvas-body">
             <div class="form-group">
                 <input type="text" id="newTaskInput" class="form-control"
                        v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/>
diff --git a/src/views/Trackers.vue b/src/views/Trackers.vue
index 2aa6484..fb5ba40 100644
--- a/src/views/Trackers.vue
+++ b/src/views/Trackers.vue
@@ -58,7 +58,6 @@
 
                                             <div class="col-md-6">
                                                 <button class="btn btn-warning tracker-action-button"
-                                                        data-bs-dismiss="modal"
                                                         @click="archiveTracker(trackerIndex)" title="Archivieren">
                                                     <i class="fas fa-archive"></i> <small>Archivieren</small>
                                                 </button>
@@ -262,7 +261,7 @@ export default {
         timeWithPostFix(time) {
             let postFix = ' Minute';
 
-            if (time >= 480 && this.showPT) {
+            if (time >= 480 && this.$store.state.settings.showPT) {
                 postFix = ' PT';
                 time = (time / 480).toFixed(1);
             } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@@ -345,7 +344,7 @@ export default {
             this.$store.commit('selectTracker', tracker);
 
             setTimeout(() => {
-                let canvas = document.getElementById('trackerTasksModal');
+                let canvas = document.getElementById('trackerTasksCanvas');
                 let tasksCanvas = new Offcanvas(canvas);
                 tasksCanvas.show();
             }, 50)
diff --git a/src/views/TrackersDetail.vue b/src/views/TrackersDetail.vue
index 21fa716..dbced2b 100644
--- a/src/views/TrackersDetail.vue
+++ b/src/views/TrackersDetail.vue
@@ -1,7 +1,6 @@
 <template>
     <div>
         <h5><i class="fas fa-clock"></i> Tracker</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="row">
         <div class="col-md-6" v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
@@ -26,13 +25,13 @@
                     </button>
                 </div>
                 <div class="col">
-                    <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
+                    <button class="btn btn-warning tracker-action-button"
                             @click="archiveTracker(trackerIndex)" title="Archivieren">
                         <i class="fas fa-archive"></i>
                     </button>
                 </div>
                 <div class="col" v-if="tracker.history.length > 0">
-                    <button class="btn btn-info tracker-action-button" data-bs-dismiss="modal"
+                    <button class="btn btn-info tracker-action-button"
                             @click="showHistoryForTracker(tracker)" title="History">
                         <i class="fas fa-history"></i>
                     </button>
@@ -58,8 +57,7 @@
 
 <script>
 import moment from "moment";
-import bootstrap from "bootstrap";
-import iziToast from "izitoast";
+import { Offcanvas } from "bootstrap";
 
 export default {
     name: "TrackersDetail",
@@ -89,7 +87,7 @@ export default {
         timeWithPostFix(time) {
             let postFix = ' Minute';
 
-            if (time >= 480 && this.showPT) {
+            if (time >= 480 && this.$store.state.settings.showPT) {
                 postFix = ' PT';
                 time = (time / 480).toFixed(1);
             } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
@@ -129,40 +127,20 @@ export default {
         showHistoryForTracker(tracker) {
             this.$store.commit('selectTracker', tracker);
             setTimeout(() => {
-                let historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
-                historyModal.toggle();
+                let historyCanvas = new Offcanvas(document.getElementById('historyCancas'));
+                historyCanvas.toggle();
             }, 50);
         },
-        bookTimeManually(tracker, minutes) {
-            tracker.history.pushToBeginning({
-                trackingStarted: moment(),
-                trackingStopped: moment(),
-                manually: true,
-                minutes: Math.round(minutes)
-            });
-
-            this.$store.commit('saveTrackers');
-        },
         showCustomBookingForTracker(tracker) {
-            this.selectedTracker = tracker;
+            this.$store.commit('selectTracker', tracker);
             this.$forceUpdate();
+
             setTimeout(() => {
-                let customBookingModal = new bootstrap.Modal(document.getElementById('customBookingModal'));
-                customBookingModal.toggle();
+                let customBookingCanvas = new Offcanvas(document.getElementById('customBookingCanvas'));
+                customBookingCanvas.toggle();
             }, 50);
         },
-        makeCustomBooking(subtract = false) {
-            if (subtract) {
-                this.customBookingValue -= (this.customBookingValue * 2)
-            }
 
-            iziToast.show({
-                message: 'Buchung erfolgreich',
-                color: 'green'
-            });
-
-            this.bookTimeManually(this.selectedTracker, this.customBookingValue);
-        },
     }
 }
 </script>