diff --git a/src/components/displays/user/bookings/NewTimeBookingFlow.vue b/src/components/displays/user/bookings/NewTimeBookingFlow.vue
index 99683504..c2fdaced 100644
--- a/src/components/displays/user/bookings/NewTimeBookingFlow.vue
+++ b/src/components/displays/user/bookings/NewTimeBookingFlow.vue
@@ -7,6 +7,7 @@ import NewBookingStep1 from "@/views/dashboards/userDashboard/bookings/displays/
 import NewBookingStep2 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep2.vue";
 import NewBookingStep3 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep3.vue";
 import NewBookingStep4 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep4.vue";
+import NewBookingStep5 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue";
 /**
  * This is the new time booking flow.
  * It contains the functions used to create a new time booking.
@@ -31,7 +32,7 @@ const stepComponents = {
   2: NewBookingStep2,
   3: NewBookingStep3,
   4: NewBookingStep4,
-  5: null,
+  5: NewBookingStep5,
 }
 const steps = ref<stepType[]>([
   {
diff --git a/src/components/forms/department/pos/SelectProductsFormPOS.vue b/src/components/forms/department/pos/SelectProductsFormPOS.vue
index 08bfd648..b25f37ff 100644
--- a/src/components/forms/department/pos/SelectProductsFormPOS.vue
+++ b/src/components/forms/department/pos/SelectProductsFormPOS.vue
@@ -71,6 +71,34 @@ onMounted(() => {
   }
 });
 
+// React to department or category changes
+watch(() => department_id.value, (newDeptId) => {
+  // Reload categories for the new department
+  loadCategories();
+  // Refetch products for the current category scope
+  if (getProductsCategory() === null) {
+    getProducts(newDeptId).then((response) => {
+      products.value = response.data.data;
+    });
+  } else {
+    getProductCategory(getProductsCategory(), newDeptId).then((response) => {
+      products.value = response.data.data;
+    });
+  }
+});
+
+watch(() => getProductsCategory(), (newCategory) => {
+  if (newCategory === null) {
+    getProducts(department_id.value).then((response) => {
+      products.value = response.data.data;
+    });
+  } else {
+    getProductCategory(newCategory, department_id.value).then((response) => {
+      products.value = response.data.data;
+    });
+  }
+});
+
 
 
 
@@ -129,9 +157,10 @@ const loadCategories = async () => {
   categories.value.push(...categories_static.value);
   // Get the department id from the route
   const route = useRoute();
-  const departmentId = route.params.departmentId;
+  // Prefer route param, otherwise fallback to global POS department_id
+  const departmentId = route.params.departmentId ?? department_id.value;
   // If the department id is not set, return
-  if (departmentId === undefined) {
+  if (departmentId === undefined || departmentId === null) {
     return;
   }
   // Get the categories
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
index d8b05784..3eb15c1a 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import {manageSteps} from "@/components/displays/user/bookings/NewTimeBookingFlow.vue";
-import {computed, ref, watch, nextTick} from "vue";
+import {computed, ref, watch, nextTick, onUnmounted} from "vue";
 import NewBookingControlNavigation
   from "@/views/dashboards/userDashboard/bookings/displays/controls/NewBookingControlNavigation.vue";
 import NewBookingStep1 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep1.vue";
@@ -12,6 +12,7 @@ import PosDepartmentStepMobileFixedBottomControl
 import NewBookingElementVehicles
   from "@/views/dashboards/userDashboard/bookings/displays/elements/NewBookingElementVehicles.vue";
 import NewBookingStep4 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep4.vue";
+import NewBookingStep5 from "@/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue";
 import {departments} from "@/components/pagination/departmentTabs.vue";
 import type {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
 import type {PosAddon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
@@ -52,6 +53,7 @@ import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
 import products from "@/components/displays/Products.vue";
 import PosDepartmentStepMobile2Addons
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
+import { setDepartment, getProductsCategory, setProductsCategory, nextStep } from "@/components/shop/POSDepartmentProcess.vue";
 
 const department = ref(departments[0]);
 const isDepartmentInput = ref(false);
@@ -90,6 +92,29 @@ const onClickSelectDepartment = () => {
   isDepartmentInput.value = true;
   setInputFocus('department');
 };
+
+// Keep POS context department_id in sync with selected department for proper product filtering
+watch(() => department.value, (newDept) => {
+  try {
+    if (newDept && newDept.id) {
+      setDepartment(newDept.id);
+    }
+  } catch (e) {
+    console.warn('Could not set POS department from booking view', e);
+  }
+});
+
+// Auto-select a sensible category when a vehicle type is identified (user can still override later)
+watch([() => reg1Type.value, () => reg2Type.value], ([newReg1Type, newReg2Type]) => {
+  try {
+    // If no category chosen yet, prefer exterior category id 6 by default when a vehicle is known
+    if (getProductsCategory() === null && (newReg1Type || newReg2Type)) {
+      setProductsCategory(6);
+    }
+  } catch (e) {
+    console.warn('Could not auto-select category based on vehicle type', e);
+  }
+});
 const onClickSelectReg1 = () => {
   // Set the input to true
   isReg1Input.value = true;
@@ -576,6 +601,34 @@ const completeBasket = computed({
   set: () => {}
 })
 
+// Confirmation / summary (fullscreen)
+const showSummary = ref(false);
+const summaryOverlay = ref<HTMLElement | null>(null);
+const openSummary = () => { showSummary.value = true; nextTick(() => summaryOverlay.value?.focus()); };
+const onSummaryBack = () => { showSummary.value = false; };
+const onSummaryConfirm = () => {
+  showSummary.value = false;
+  try {
+    nextStep({ isMobile: false, orderCreation: true });
+  } catch (e) {
+    console.warn('Proceeding to next step failed', e);
+  }
+};
+
+// Lock background scroll when fullscreen summary is open
+watch(showSummary, (val) => {
+  const html = document.documentElement;
+  if (val) {
+    html.classList.add('is-clipped');
+  } else {
+    html.classList.remove('is-clipped');
+  }
+});
+// Cleanup on unmount
+onUnmounted(() => {
+  document.documentElement.classList.remove('is-clipped');
+});
+
 </script>
 
 <template>
@@ -652,10 +705,9 @@ const completeBasket = computed({
               <!--<PosSelectedCustomer class="mt-3"/> -->
               <NextStepError class="is-fullwidth" />
               <div class="buttons">
-                <NextStep
-                    class="is-fullwidth"
-                    label="Næste"
-                />
+                <button class="button is-fullwidth is-primary" @click="openSummary">
+                  Gå til bekræftelse
+                </button>
                 <Cancel class="is-fullwidth" />
               </div>
             </div>
@@ -1105,6 +1157,42 @@ const completeBasket = computed({
       </PosDepartmentStepMobileFixedBottomControl>
       </template>
     </UserDashboardPageWrapper>
+
+    <!-- Summary / confirmation fullscreen overlay -->
+    <div
+      v-if="showSummary"
+      class="booking-summary-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="booking-summary-title"
+      ref="summaryOverlay"
+      tabindex="-1"
+      @keydown.esc="onSummaryBack"
+    >
+      <div class="booking-summary-header">
+        <p id="booking-summary-title" class="title is-5 mb-0">Bekræft booking</p>
+        <div class="buttons">
+          <button class="button" @click="onSummaryBack">Tilbage</button>
+          <button class="button is-primary" @click="onSummaryConfirm">Bekræft booking</button>
+        </div>
+      </div>
+      <div class="booking-summary-body">
+        <NewBookingStep5
+            :department="department"
+            :reg1="reg1"
+            :reg1Type="reg1Type"
+            :reg2="reg2"
+            :reg2Type="reg2Type"
+            :dateTime="dateTime"
+            :basket="completeBasket"
+            :notes="notes"
+            :reference="reference"
+            :poNumber="poNumber"
+            @back="onSummaryBack"
+            @confirm="onSummaryConfirm"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1199,4 +1287,39 @@ const completeBasket = computed({
 .custom-date-picker-time.is-selected:hover {
   background-color: #d0dff5;
 }
-</style>
\ No newline at end of file
+</style>
+<style scoped>
+.booking-summary-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 50; /* Above most UI; Bulma modal uses 40 */
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+}
+.booking-summary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #ffffff;
+  border-bottom: 1px solid rgba(10,10,10,0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.booking-summary-body {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 1rem;
+}
+@media screen and (min-width: 1024px) {
+  .booking-summary-body {
+    padding: 1.5rem 2rem;
+  }
+}
+</style>