diff --git a/package-lock.json b/package-lock.json
index 6f4911de..be622a1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@vueuse/integrations": "^13.7.0",
         "animate.css": "^4.1.1",
         "axios": "^1.7.8",
+        "buefy": "^3.0.3",
         "bulma": "^1.0.2",
         "bulma-block-list": "^1.1.0",
         "bulma-calendar": "^7.1.1",
@@ -902,6 +903,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz",
       "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -2896,6 +2898,7 @@
       "version": "6.1.17",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.17.tgz",
       "integrity": "sha512-0W7lnIrv18ruJ5zeWBeNZXO8qCWlzxDdp9COFEsZnyNjiEhUVnrW/dPbjRKYpL0edGG0/Lhs0ghp1z/5ekt8ZA==",
+      "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
@@ -4012,6 +4015,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.22.12.tgz",
       "integrity": "sha512-xcmww1O/JFP2MrlGUMd3Q78S3Qu6W3mYTXYuIqFq33EorgYHV/HqymHfXy9GjiCJ7OI+7lWx6nYFOzU7M4rd1Q==",
+      "peer": true,
       "dependencies": {
         "@jimp/core": "^0.22.12"
       }
@@ -4540,6 +4544,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.22.12.tgz",
       "integrity": "sha512-xslz2ZoFZOPLY8EZ4dC29m168BtDx95D6K80TzgUi8gqT7LY6CsajWO0FAxDwHz6h0eomHMfyGX0stspBrTKnQ==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -4551,6 +4556,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.22.12.tgz",
       "integrity": "sha512-S0vJADTuh1Q9F+cXAwFPlrKWzDj2F9t/9JAbUvaaDuivpyWuImEKXVz5PUZw2NbpuSHjwssbTpOZ8F13iJX4uw==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -4573,6 +4579,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.22.12.tgz",
       "integrity": "sha512-xImhTE5BpS8xa+mAN6j4sMRWaUgUDLoaGHhJhpC+r7SKKErYDR0WQV4yCE4gP+N0gozD0F3Ka1LUSaMXrn7ZIA==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12",
         "tinycolor2": "^1.6.0"
@@ -4613,6 +4620,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.22.12.tgz",
       "integrity": "sha512-FNuUN0OVzRCozx8XSgP9MyLGMxNHHJMFt+LJuFjn1mu3k0VQxrzqbN06yIl46TVejhyAhcq5gLzqmSCHvlcBVw==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -4853,6 +4861,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.22.12.tgz",
       "integrity": "sha512-3NyTPlPbTnGKDIbaBgQ3HbE6wXbAlFfxHVERmrbqAi8R3r6fQPxpCauA8UVDnieg5eo04D0T8nnnNIX//i/sXg==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -4864,6 +4873,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.22.12.tgz",
       "integrity": "sha512-9YNEt7BPAFfTls2FGfKBVgwwLUuKqy+E8bDGGEsOqHtbuhbshVGxN2WMZaD4gh5IDWvR+emmmPPWGgaYNYt1gA==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -4878,6 +4888,7 @@
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.22.12.tgz",
       "integrity": "sha512-dghs92qM6MhHj0HrV2qAwKPMklQtjNpoYgAB94ysYpsXslhRTiPisueSIELRwZGEr0J0VUxpUY7HgJwlSIgGZw==",
+      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -8249,6 +8260,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8272,6 +8284,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -14254,6 +14267,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -14267,6 +14281,18 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buefy": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-3.0.3.tgz",
+      "integrity": "sha512-//QfIDgbhmpn+mFszD/lEwhlphA+hQavJED2XwjlzqS/bpxYjk/Rnj36X08QVbqiH3lt4a+G357uzsZczc7JTg==",
+      "license": "MIT",
+      "dependencies": {
+        "bulma": "^1.0.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -14323,9 +14349,11 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "node_modules/bulma": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz",
-      "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A=="
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz",
+      "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==",
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/bulma-block-list": {
       "version": "1.1.0",
@@ -14540,7 +14568,8 @@
       "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
       "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
       "devOptional": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/chardet": {
       "version": "0.7.0",
@@ -14551,6 +14580,7 @@
       "version": "4.4.7",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
       "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -15427,6 +15457,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -15592,6 +15623,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
       "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
       "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-sfc": "2.7.16",
         "csstype": "^3.1.0"
@@ -16561,6 +16593,7 @@
       "integrity": "sha512-/XxRRR90gNSuNf++w1jOQjhC5LE9Ixf/iAQctVb/miEI3dwzPZTuG27/omoh5REfSLDoPXofM84vAH/ULtz35g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/snapshot": "^3.2.4",
         "deep-eql": "^5.0.2",
@@ -18055,7 +18088,8 @@
     "node_modules/idb-keyval": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
-      "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg=="
+      "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+      "peer": true
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
@@ -18918,6 +18952,7 @@
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -19927,6 +19962,7 @@
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -21232,6 +21268,7 @@
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
       "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "dijkstrajs": "^1.0.1",
         "pngjs": "^5.0.0",
@@ -21916,6 +21953,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
       "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -22128,6 +22166,7 @@
       "version": "1.81.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.1.tgz",
       "integrity": "sha512-VNLgf4FC5yFyKwAumAAwwNh8X4SevlVREq3Y8aDZIkm0lI/zO1feycMXQ4hn+eB6FVhRbleSQ1Yb/q8juSldTA==",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -22148,6 +22187,7 @@
       "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.81.0.tgz",
       "integrity": "sha512-uZQ2Faxb1oWBHpeSSzjxnhClbMb3QadN0ql0ZFNuqWOLUxwaVhrMlMhPq6TDPbbfDUjihuwrMCuy695Bgna5RA==",
       "devOptional": true,
+      "peer": true,
       "dependencies": {
         "@bufbuild/protobuf": "^2.0.0",
         "buffer-builder": "^0.2.0",
@@ -24847,6 +24887,7 @@
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
       "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -25034,6 +25075,7 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
       "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
         "@vue/compiler-sfc": "3.5.13",
@@ -26371,6 +26413,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
diff --git a/package.json b/package.json
index 0440d19f..d57bde50 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:dev": "vite build --mode development",
     "preview": "vite preview",
     "test:mobile": "wdio run wdio.conf.js --exclude safari",
     "test:android": "wdio run wdio.conf.js --spec test/specs/*.spec.js",
@@ -30,6 +31,7 @@
     "@vueuse/integrations": "^13.7.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.8",
+    "buefy": "^3.0.3",
     "bulma": "^1.0.2",
     "bulma-block-list": "^1.1.0",
     "bulma-calendar": "^7.1.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index 3d4eeb1a..6db534b5 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
index ba69e6fc..79daf121 100644
Binary files a/public/icons/icon-192x192.png and b/public/icons/icon-192x192.png differ
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
index 1dd9a02a..f35f1a03 100644
Binary files a/public/icons/icon-512x512.png and b/public/icons/icon-512x512.png differ
diff --git a/public/icons/icon-favicon-256x256.png b/public/icons/icon-favicon-256x256.png
new file mode 100644
index 00000000..346b4115
Binary files /dev/null and b/public/icons/icon-favicon-256x256.png differ
diff --git a/public/icons/icon-favicon-512x512.png b/public/icons/icon-favicon-512x512.png
new file mode 100644
index 00000000..f35f1a03
Binary files /dev/null and b/public/icons/icon-favicon-512x512.png differ
diff --git a/public/icons/pleno-icon-192x192.png b/public/icons/pleno-icon-192x192.png
new file mode 100644
index 00000000..ba69e6fc
Binary files /dev/null and b/public/icons/pleno-icon-192x192.png differ
diff --git a/public/icons/pleno-icon-512x512.png b/public/icons/pleno-icon-512x512.png
new file mode 100644
index 00000000..1dd9a02a
Binary files /dev/null and b/public/icons/pleno-icon-512x512.png differ
diff --git a/public/pleno-favicon.ico b/public/pleno-favicon.ico
new file mode 100644
index 00000000..3d4eeb1a
Binary files /dev/null and b/public/pleno-favicon.ico differ
diff --git a/public/sounds/favicon.ico b/public/sounds/favicon.ico
new file mode 100644
index 00000000..7f7b1c44
Binary files /dev/null and b/public/sounds/favicon.ico differ
diff --git a/qodana.yaml b/qodana.yaml
new file mode 100644
index 00000000..722ccd51
--- /dev/null
+++ b/qodana.yaml
@@ -0,0 +1,46 @@
+#-------------------------------------------------------------------------------#
+#               Qodana analysis is configured by qodana.yaml file               #
+#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
+#-------------------------------------------------------------------------------#
+
+#################################################################################
+#              WARNING: Do not store sensitive information in this file,        #
+#               as its contents will be included in the Qodana report.          #
+#################################################################################
+version: "1.0"
+
+#Specify inspection profile for code analysis
+profile:
+  name: qodana.starter
+
+#Enable inspections
+#include:
+#  - name: <SomeEnabledInspectionId>
+
+#Disable inspections
+#exclude:
+#  - name: <SomeDisabledInspectionId>
+#    paths:
+#      - <path/where/not/run/inspection>
+
+#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
+#bootstrap: sh ./prepare-qodana.sh
+
+#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
+#plugins:
+#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
+
+# Quality gate. Will fail the CI/CD pipeline if any condition is not met
+# severityThresholds - configures maximum thresholds for different problem severities
+# testCoverageThresholds - configures minimum code coverage on a whole project and newly added code
+# Code Coverage is available in Ultimate and Ultimate Plus plans
+#failureConditions:
+#  severityThresholds:
+#    any: 15
+#    critical: 5
+#  testCoverageThresholds:
+#    fresh: 70
+#    total: 50
+
+#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
+linter: jetbrains/qodana-js:2025.3
diff --git a/src/App.vue b/src/App.vue
index 9983b4ec..039fef21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 // Set the favicon to the /favicon.ico file
 import { useHead } from "@vueuse/head";
 import favicon from '@/assets/favicon.ico';
+import VersionCheck from "@/components/global/VersionCheck.vue";
 
 useHead({
   link: [
@@ -23,6 +24,7 @@ onMounted(() => {
   </header>
   <main>
     <DefaultPageWrapper>
+      <VersionCheck/>
       <router-view />
     </DefaultPageWrapper>
   </main>
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
index 3d4eeb1a..6db534b5 100644
Binary files a/src/assets/favicon.ico and b/src/assets/favicon.ico differ
diff --git a/src/assets/piktogrammer/10.png b/src/assets/piktogrammer/10.png
index a791ca8e..815381f8 100644
Binary files a/src/assets/piktogrammer/10.png and b/src/assets/piktogrammer/10.png differ
diff --git a/src/assets/piktogrammer/11.png b/src/assets/piktogrammer/11.png
new file mode 100644
index 00000000..815381f8
Binary files /dev/null and b/src/assets/piktogrammer/11.png differ
diff --git a/src/assets/piktogrammer/12.png b/src/assets/piktogrammer/12.png
index 02151b69..815381f8 100644
Binary files a/src/assets/piktogrammer/12.png and b/src/assets/piktogrammer/12.png differ
diff --git a/src/assets/piktogrammer/13.png b/src/assets/piktogrammer/13.png
index f413ecb8..815381f8 100644
Binary files a/src/assets/piktogrammer/13.png and b/src/assets/piktogrammer/13.png differ
diff --git a/src/assets/piktogrammer/14.png b/src/assets/piktogrammer/14.png
index f73fe3cb..815381f8 100644
Binary files a/src/assets/piktogrammer/14.png and b/src/assets/piktogrammer/14.png differ
diff --git a/src/assets/piktogrammer/15.png b/src/assets/piktogrammer/15.png
new file mode 100644
index 00000000..a791ca8e
Binary files /dev/null and b/src/assets/piktogrammer/15.png differ
diff --git a/src/assets/piktogrammer/17.png b/src/assets/piktogrammer/17.png
new file mode 100644
index 00000000..ea7d020a
Binary files /dev/null and b/src/assets/piktogrammer/17.png differ
diff --git a/src/assets/piktogrammer/19.png b/src/assets/piktogrammer/19.png
new file mode 100644
index 00000000..f413ecb8
Binary files /dev/null and b/src/assets/piktogrammer/19.png differ
diff --git a/src/assets/piktogrammer/20.png b/src/assets/piktogrammer/20.png
new file mode 100644
index 00000000..f73fe3cb
Binary files /dev/null and b/src/assets/piktogrammer/20.png differ
diff --git a/src/assets/piktogrammer/21.png b/src/assets/piktogrammer/21.png
new file mode 100644
index 00000000..a76e923b
Binary files /dev/null and b/src/assets/piktogrammer/21.png differ
diff --git a/src/assets/piktogrammer/23.png b/src/assets/piktogrammer/23.png
new file mode 100644
index 00000000..4efe66a0
Binary files /dev/null and b/src/assets/piktogrammer/23.png differ
diff --git a/src/assets/piktogrammer/24.png b/src/assets/piktogrammer/24.png
new file mode 100644
index 00000000..4efe66a0
Binary files /dev/null and b/src/assets/piktogrammer/24.png differ
diff --git a/src/assets/piktogrammer/25.png b/src/assets/piktogrammer/25.png
new file mode 100644
index 00000000..bda56b16
Binary files /dev/null and b/src/assets/piktogrammer/25.png differ
diff --git a/src/assets/piktogrammer/26.png b/src/assets/piktogrammer/26.png
new file mode 100644
index 00000000..5ed02d73
Binary files /dev/null and b/src/assets/piktogrammer/26.png differ
diff --git a/src/assets/piktogrammer/27.png b/src/assets/piktogrammer/27.png
new file mode 100644
index 00000000..2ee8574b
Binary files /dev/null and b/src/assets/piktogrammer/27.png differ
diff --git a/src/assets/piktogrammer/39.png b/src/assets/piktogrammer/39.png
new file mode 100644
index 00000000..57cd9d58
Binary files /dev/null and b/src/assets/piktogrammer/39.png differ
diff --git a/src/assets/piktogrammer/49.png b/src/assets/piktogrammer/49.png
new file mode 100644
index 00000000..815381f8
Binary files /dev/null and b/src/assets/piktogrammer/49.png differ
diff --git a/src/assets/piktogrammer/5.png b/src/assets/piktogrammer/5.png
new file mode 100644
index 00000000..31c7c5c3
Binary files /dev/null and b/src/assets/piktogrammer/5.png differ
diff --git a/src/assets/piktogrammer/6.png b/src/assets/piktogrammer/6.png
new file mode 100644
index 00000000..d4f57ded
Binary files /dev/null and b/src/assets/piktogrammer/6.png differ
diff --git a/src/assets/pleno-favicon.ico b/src/assets/pleno-favicon.ico
new file mode 100644
index 00000000..3d4eeb1a
Binary files /dev/null and b/src/assets/pleno-favicon.ico differ
diff --git a/src/components/displays/boxes/ProductBox.vue b/src/components/displays/boxes/ProductBox.vue
index e8708660..67a34a28 100644
--- a/src/components/displays/boxes/ProductBox.vue
+++ b/src/components/displays/boxes/ProductBox.vue
@@ -5,6 +5,7 @@ import { showPopper, popperBoxProductAddonHtml, removePopperIfOpen } from "@/com
 import Swal from "sweetalert2";
 import CustomerProductDiscountDisplay
   from "@/components/displays/department/pos/displays/CustomerProductDiscountDisplay.vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
 
 const expandIcon = ref(null);
 
@@ -29,6 +30,10 @@ const props = defineProps({
   customerDiscounts: Array,
   customerAttributes: Array,
   compact: Boolean,
+  showPrices: {
+    type: Boolean,
+    default: true
+  }
 });
 
 const isAddonSelected = (productId, addonId) => {
@@ -200,7 +205,12 @@ const orderByOrderPriority = (addons) => {
             <!-- Title -->
             <div class="p-2">
               <p class="title is-6 mb-0 text-automatic-shrink" style="font-size: small">{{ name }}</p>
-              <p class="subtitle is-6 mb-0 has-text-grey-light" style="font-size: smaller"><small>579 kr</small></p>
+              <template v-if="showPrices">
+                <p class="subtitle is-6 mb-0 has-text-grey-light" style="font-size: smaller"><small>{{ price }} kr</small></p>
+              </template>
+              <template v-else>
+                <p class="subtitle is-6 mb-0 has-text-grey-light" style="font-size: smaller"><br/></p>
+              </template>
             </div>
           </div>
           <!-- Price -->
diff --git a/src/components/displays/buttons/ActionSettingsWheelButton.vue b/src/components/displays/buttons/ActionSettingsWheelButton.vue
index b2b95f09..5d548464 100644
--- a/src/components/displays/buttons/ActionSettingsWheelButton.vue
+++ b/src/components/displays/buttons/ActionSettingsWheelButton.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import {defineProps, defineEmits, onMounted, computed} from 'vue';
 import { useSlots } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
@@ -7,6 +7,7 @@ import Swal from "sweetalert2";
 import { ref } from "vue";
 import CustomerModal from "@/components/displays/modals/CustomerModal.vue";
 import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
+import ShowErrorField from "@/components/global/ShowErrorField.vue";
 const emit = defineEmits(['deleted']);
 const emitDeleted = () => {
   emit('deleted');
@@ -36,9 +37,54 @@ const props = defineProps({
     type: String,
     default: null
   },
+  reg_2: {
+    type: String,
+    default: null
+  },
+  order_booking_id: {
+    type: Number,
+    default: null
+  },
+  customer_number: {
+    type: Number,
+    default: null
+  },
+  refreshFunction: {
+    type: Function,
+    default: () => {
+      console.warn("Refresh function is not defined");
+    }
+  },
+  department_id: {
+    type: Number,
+    default: null
+  },
+  attachments: {
+    type: Array,
+    default: () => []
+  },
+  displayActionsDirectly: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const customerModalVisible = ref(false);
+const userIdFromCustomerNumber = ref(null);
+const getUserId = () => {
+  if (!!props.customer_number) {
+    SessionUser.adminUser.customers.fromCustomerNumber.getUserId(props.customer_number).then((response) => {
+      userIdFromCustomerNumber.value = response.data.data.user_id;
+      console.warn(userIdFromCustomerNumber.value);
+    }).catch((error) => {
+      console.error(error);
+    });
+  } else if (!!props.user_id) {
+    userIdFromCustomerNumber.value = props.user_id;
+  } else {
+    userIdFromCustomerNumber.value = null;
+  }
+}
 
 const showSetCustomerPassword = (userId) => {
   Swal.fire({
@@ -85,163 +131,651 @@ const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
   window.open(`/superuser/invoices/${invoiceCollectionId}`, '_blank');
 };
 
-const redirectDepartmentOrderPage = async (orderId) => {
+const redirectDepartmentOrderPage = async (orderId, newTab = false) => {
   // Send the user to the order page (In a new tab)
   // Get the department id from the order
   await SessionUser.objects.orders.functions.get_department_id(props.order_id).then((response) => {
+    console.warn(response);
     // Get the department id from the response
-    // Send the user to the order page (In a new tab)
-    window.open(`/admin/${response}/modules/pos/orders/${orderId}`, '_blank');
+    SessionUser.functions.redirectTo.department(response, 'modules/pos/orders/' + orderId, !!newTab);
   }).catch((error) => {
     console.error(error);
   });
 };
+
+const hasUser = () => {
+  if (userIdFromCustomerNumber.value) {
+    return true;
+  }
+  let hasUser = false;
+  if (!!props.user_id) {
+    hasUser = true;
+    userIdFromCustomerNumber.value = props.user_id;
+  }
+  if (!!props.customer_number) {
+    hasUser = true;
+    getUserId();
+  }
+  return hasUser;
+}
+
+const attachmentsFromOrder = ref([]);
+const attachmentsFromOrderError = ref(null);
+onMounted(() => {
+  if (props.order_id) {
+    SessionUser.objects.orders.functions.fetchAttachments(props.order_id).then((response) => {
+      /**
+       * [
+       *     {
+       *         "id": 4396,
+       *         "object_type": "`orders`",
+       *         "object_id": 30242,
+       *         "content": {
+       *             "image": null,
+       *             "document": "pdf_6912ea1886f15.pdf",
+       *             "relation": null,
+       *             "other": "wash_certificate"
+       *         },
+       *         "created_at": "2025-11-11 08:47:36",
+       *         "updated_at": null,
+       *         "deleted_at": null
+       *     }
+       * ]
+       */
+      // Validate the response is an array
+      if (!Array.isArray(response)) {
+        response = [];
+      }
+      attachmentsFromOrder.value = response;
+    }).catch((error) => {
+      const parsedErrorMessage = SessionUser.functions.parseErrorMessage(error);
+      console.warn('Error fetching attachments from order:', error, parsedErrorMessage);
+      // Check if there's an error message in the response
+      attachmentsFromOrderError.value = `ERROR: ${parsedErrorMessage || 'Failed to fetch attachments'}`;
+    });
+  }
+});
+
+const onShowImpersonationQRCode = (src, directLink) => {
+  Swal.fire({
+    title: 'Scan QR-koden for at logge ind som bruger',
+    html: `<img src="${src}" alt="QR-kode" />`,
+    showCloseButton: true,
+    showConfirmButton: !!directLink,
+    showCancelButton: true,
+    focusConfirm: false,
+    confirmButtonText: 'Kopiér link',
+    cancelButtonText: 'Luk',
+    preConfirm: () => {
+      navigator.clipboard.writeText(directLink);
+      Swal.showValidationMessage('Link kopieret til udklipsholderen');
+    }
+  });
+}
+
+const onClickShowImpersonationQRCode = async (userId) => {
+  // Get the session token
+  const newToken = await SessionUser.superUser.intimidate.getImpersonationToken(userId);
+  // Create the impersonation link
+  const link = `${window.location.protocol}//${window.location.host}/login/qr?token=${newToken}`;
+  // Generate a QR code for the impersonation link
+  const response = await SessionUser.superUser.intimidate.showImpersonationQRCode(link);
+  // Show the QR code in a modal
+  onShowImpersonationQRCode(response.value, link);
+}
+
+const defaultActions = computed(() => {
+  return [
+    /**
+     * Example action
+    {
+      icon: 'fas fa-eye',
+      label: 'View Order',
+      clickAction: () => {
+        console.warn('View Order clicked');
+      },
+      showFunction: () => {
+        return true; // Logic to determine if action should be shown
+      },
+      disabled: false,
+      template: 'success' // Optional: Set the template to 'success' or 'danger'
+      isLabel: false // Optional: Set to true to render the label as a button
+    }
+     */
+    /** Bookings actions */
+    {
+      label: 'Booking',
+      isLabel: true,
+      showFunction: () => {
+        return !!props.order_booking_id;
+      }
+    },
+    {
+      icon: 'fas fa-check-circle',
+      label: 'Marker som gennemført',
+      template: 'success',
+      clickAction: () => {
+        return SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(props.order_booking_id, () => {
+          props.refreshFunction();
+        });
+      },
+      showFunction: () => {
+        return !!props.order_booking_id && SessionUser.canAccessAdmin() && !props.order_id;
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-external-link-alt',
+      label: 'Se booking i ny fane',
+      clickAction: () => {
+        return SessionUser.functions.redirectTo.department(props.department_id, 'modules/bookings/order/' + props.order_booking_id, true);
+      },
+      showFunction: () => {
+        return !!props.order_booking_id;
+      },
+    },
+    {
+      icon: 'fas fa-edit',
+      label: 'Ændr tilknytning',
+      clickAction: () => {
+        return SessionUser.objects.order_bookings.showEditObjectFieldForm(props.order_booking_id, 'order_id', props.order_id, () => {
+          props.refreshFunction();
+        }, {
+          filters: {
+            ...(props.customer_number ? {customer_id: props.customer_number} : {}),
+            ...(props.department_id ? {department_id: props.department_id} : {})
+          },
+          pagination: {
+            page: 1,
+            limit: 100
+          }
+        });
+      },
+      showFunction: () => {
+        return !!props.order_booking_id && SessionUser.canAccessAdmin();
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-trash-alt',
+      label: 'Slet booking',
+      clickAction: () => {
+        return SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(props.order_booking_id, () => {
+          props.refreshFunction();
+        });
+      },
+      showFunction: () => {
+        return !!props.order_booking_id && SessionUser.canAccessAdmin() && !props.order_id;
+      },
+      disabled: false,
+      template: 'danger'
+    },
+    /** Orders actions */
+    {
+      label: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
+      isLabel: true,
+      showFunction: () => {
+        return !!props.order_id;
+      }
+    },
+    {
+      icon: 'fas fa-external-link-alt',
+      label: 'Se ordre i ny fane',
+      clickAction: async () => {
+        return redirectDepartmentOrderPage(props.order_id, true);
+      },
+      showFunction: () => {
+        return !!props.order_id && (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser());
+      },
+    },
+    {
+      icon: 'fas fa-paperclip',
+      label: 'Vedhæft vaskecertifikat',
+      clickAction: () => {
+        return SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
+          props.refreshFunction();
+        });
+      },
+      showFunction: () => {
+        return !!props.order_id && (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser());
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-user-edit',
+      label: 'Skift kunde',
+      clickAction: () => {
+        return SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id);
+      },
+      showFunction: () => {
+        return !!props.order_id && SessionUser.canAccessSuperUser();
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-file-invoice-dollar',
+      label: 'Skift faktura samling',
+      clickAction: () => {
+        return SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id);
+      },
+      showFunction: () => {
+        return !!props.order_id && SessionUser.canAccessSuperUser();
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-download',
+      label: 'Download faktura',
+      clickAction: () => {
+        return SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id);
+      },
+      showFunction: () => {
+        return true;
+      },
+      disabled: false,
+    },
+    {
+      icon: 'fas fa-trash-alt',
+      label: 'Slet ordre',
+      clickAction: () => {
+        return SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
+          emitDeleted();
+        });
+      },
+      showFunction: () => {
+        return !!props.order_id && (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser());
+      },
+      disabled: false,
+      template: 'danger'
+    },
+    {
+      icon: 'fas fa-file-invoice-dollar',
+      label: 'Vis faktura samling i ny fane',
+      clickAction: () => {
+        return redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id);
+      },
+      showFunction: () => {
+        return !!props.invoice_collection_id && SessionUser.canAccessSuperUser();
+      },
+    },
+    /** Vehicle actions */
+    {
+      label: props.reg_1 && props.reg_2 ? `${SessionUser.objects.vehicles.meta.labels.multiple}` : `${SessionUser.objects.vehicles.meta.labels.single}`,
+      isLabel: true,
+      showFunction: () => {
+        return (!!props.reg_1 || !!props.reg_2) && SessionUser.canAccessSuperUser();
+      }
+    },
+    {
+      icon: 'fas fa-car',
+      label: `Se køretøj ${props.reg_1 ? props.reg_1 : '-'} i ny fane`,
+      clickAction: () => {
+        return SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true);
+      },
+      showFunction: () => {
+        return !!props.reg_1 && SessionUser.canAccessSuperUser();
+      },
+    },
+    {
+      icon: 'fas fa-car',
+      label: `Se køretøj ${props.reg_2 ? props.reg_2 : '-'} i ny fane`,
+      clickAction: () => {
+        return SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true);
+      },
+      showFunction: () => {
+        return !!props.reg_2 && SessionUser.canAccessSuperUser();
+      },
+    },
+    /** User actions */
+    {      label: SessionUser.objects.global.language.customer,
+      isLabel: true,
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser();
+      }
+    },
+    {
+      icon: 'fas fa-user-edit',
+      label: 'Se kunde i ny fane',
+      clickAction: () => {
+        return SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber.value, true);
+      },
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser() && userIdFromCustomerNumber.value;
+      },
+    },
+    {
+      icon: 'fas fa-user-shield',
+      label: 'Log ind som kunde',
+      clickAction: () => {
+        return SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber.value);
+      },
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser();
+      },
+    },
+    {
+      icon: 'fas fa-qrcode',
+      label: 'Vis QR-kode',
+      clickAction: () => {
+        return onClickShowImpersonationQRCode(userIdFromCustomerNumber.value);
+      },
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser();
+      }
+    },
+    {
+      icon: 'fas fa-key',
+      label: 'Skift kodeord',
+      clickAction: () => {
+        return showSetCustomerPassword(userIdFromCustomerNumber.value);
+      },
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser();
+      },
+    },
+    {
+      icon: 'fas fa-user',
+      label: 'Vis kunde',
+      clickAction: () => {
+        customerModalVisible.value = true;
+      },
+      showFunction: () => {
+        return hasUser() && SessionUser.canAccessSuperUser();
+      },
+    },
+  ];
+});
 </script>
 
 <template>
-  <div class="dropdown is-right is-hoverable">
-    <div class="dropdown-trigger">
-      <button class="button is-small is-dark" aria-haspopup="true" aria-controls="dropdown-menu">
-                  <span class="icon">
-                    <i :class="props.icon"></i>
-                  </span>
-        <span v-if="props.label.length > 0" class="ml-2">{{ props.label }}</span>
-      </button>
-    </div>
-    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-      <div class="dropdown-content">
-        <!-- Actions (If defined) -->
-        <template v-if="useSlots().actions">
-          <slot name="actions"></slot>
-          <!-- If there's a user_id, show the user actions -->
-          <template v-if="props.user_id">
-            <!-- Label -->
-            <ActionSettingsWheelItemLabel
-                :label="SessionUser.objects.global.language.customer"
+  <div>
+  <template v-if="displayActionsDirectly">
+    <!-- Error -->
+    <template v-if="attachmentsFromOrderError">
+      <div class="message is-danger">
+        <div class="message-body">
+          {{ attachmentsFromOrderError }}
+        </div>
+      </div>
+    </template>
+      <template v-for="(action, index) in [ ...defaultActions, ...(useSlots().actions ? [] : []) ]" :key="index">
+        <ActionSettingsWheelItem
+            v-if="(!action.showFunction || action.showFunction()) && (!action.isLabel || action.isLabel === false)"
+            :icon="action.icon"
+            :label="action.label"
+            :template="action.template"
+            :click-action="action.clickAction"
+            :show-function="action.showFunction"
+            :disabled="action.disabled"
+        />
+        <ActionSettingsWheelItemLabel
+            v-else-if="action.isLabel && action.isLabel === true && (!action.showFunction || action.showFunction())"
+            :label="action.label"
+            />
+      </template>
+      <!-- If there are attachments, show the attachments -->
+      <template v-if="attachmentsFromOrder.length > 0">
+        <ActionSettingsWheelItemLabel :label="'Vedhæftede filer'"/>
+        <ActionSettingsWheelItem
+            v-for="attachment in attachmentsFromOrder"
+            :key="attachment.id"
+            :icon="'fas fa-paperclip'"
+            :label="`Åbn vedhæftede fil #${attachment.id}`"
+            :click-action="() => SessionUser.objects.orders.functions.downloadAttachment(props.order_id, attachment.id, true)
+                      .catch((error) => {
+                        Swal.fire({
+                          title: 'Fejl',
+                          text: 'Der opstod en fejl under download af vedhæftede fil.',
+                          icon: 'error',
+                        });
+                      })"
+        />
+      </template>
+    </template>
+    <div class="dropdown is-right is-hoverable" v-else>
+      <div class="dropdown-trigger">
+        <button class="button is-small is-dark" aria-haspopup="true" aria-controls="dropdown-menu">
+                    <span class="icon">
+                      <i :class="props.icon"></i>
+                    </span>
+          <span v-if="props.label.length > 0" class="ml-2">{{ props.label }}</span>
+        </button>
+      </div>
+      <div class="dropdown-menu" id="dropdown-menu" role="menu">
+        <div class="dropdown-content">
+          <!-- Actions (If defined) -->
+          <template v-if="useSlots().actions">
+            <slot name="actions"></slot>
+            <!-- If there is an order_booking_id, show the order booking actions -->
+            <template v-if="props.order_booking_id">
+              <ActionSettingsWheelItemLabel :label="'Booking'"/>
+              <ActionSettingsWheelItem
+                  v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && !props.order_id"
+                  :icon="'fas fa-check-circle'"
+                  :label="'Marker som gennemført'"
+                  template="success"
+                  :click-action="() => SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(props.order_booking_id, () => {
+                    props.refreshFunction();
+                  })"
+              />
+              <ActionSettingsWheelItem
+                  :icon="'fas fa-external-link-alt'"
+                  :label="'Se booking i ny fane'"
+                  :click-action="() => SessionUser.functions.redirectTo.department(props.department_id, 'modules/bookings/order/' + props.order_booking_id, true)"
+              />
+              <ActionSettingsWheelItem
+                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                  :icon="'fas fa-edit'"
+                  :label="(!props.order_id) ? `Tilknyt ${SessionUser.objects.orders.meta.labels.single.toLowerCase()}` : `Ændr ${SessionUser.objects.orders.meta.labels.single.toLowerCase()}`"
+                  :click-action="() => SessionUser.objects.order_bookings.showEditObjectFieldForm(props.order_booking_id, 'order_id', props.order_id, () => {
+                    props.refreshFunction();
+                  }, {
+                    filters: {
+                      ...(customer_number ? {customer_id: props.customer_number} : {}),
+                      ...(props.department_id ? {department_id: props.department_id} : {})
+                    },
+                    pagination: {
+                      page: 1,
+                      limit: 100
+                    }
+               })"
+              />
+              <ActionSettingsWheelItem
+                  :icon="'fas fa-trash-alt'"
+                  :label="'Slet booking'"
+                  template="danger"
+                  v-show="!props.order_id"
+                  :click-action="() => SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(props.order_booking_id, () => {
+                    props.refreshFunction();
+                  })"
+              />
+            </template>
+            <!-- If there's an order_id, show the order actions -->
+            <template v-if="props.order_id">
+              <!-- Label -->
+              <action-settings-wheel-item-label
+                  :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
+              />
+              <!-- Go to the order page, in a new tab -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                  :label="`Se ${SessionUser.objects.orders.meta.labels.single.toLowerCase()} i ny fane`"
+                  icon="fas fa-external-link-alt"
+                  :click-action="async () => redirectDepartmentOrderPage(props.order_id, true)"
+                  :disabled="false"
+              />
+              <!-- Go to the user/order/:order_id page, in a new tab -->
+              <action-settings-wheel-item
+                  v-if="!SessionUser.canAccessAdmin() && !SessionUser.canAccessSuperUser()"
+                  :label="`Se ${SessionUser.objects.orders.meta.labels.single.toLowerCase()} i ny fane`"
+                  icon="fas fa-external-link-alt"
+                  :click-action="() => SessionUser.functions.redirectTo.user('/orders/' + props.order_id, true)"
+                  :disabled="false"
+                  />
+              <!-- Attach wash certificate -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                  label="Vedhæft vaskecertifikat"
+                  icon="fas fa-paperclip"
+                  :click-action="() => SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
+                    props.refreshFunction();
+                  })"
+                  :disabled="false"
+              />
+              <!-- Change the customer (of the order) -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessSuperUser()"
+                  label="Skift kunde"
+                  icon="fas fa-user-edit"
+                  :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
+                  :disabled="false"
+              />
+              <!-- Change the invoice collection (of the order) -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessSuperUser()"
+                  label="Skift faktura samling"
+                  icon="fas fa-file-invoice-dollar"
+                  :click-action="() => SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id)"
+                  :disabled="false"
+              />
+              <!-- Delete the order -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                  :label="`Slet ${SessionUser.objects.orders.meta.labels.single.toLowerCase()}`"
+                  template="danger"
+                  icon="fas fa-trash-alt"
+                  :click-action="() => SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
+                  emitDeleted();
+                })"
+                  :disabled="false"
+              />
+            </template>
+            <!-- If there is an invoice collection id, show the invoice actions -->
+            <template v-if="props.invoice_collection_id">
+              <!-- Label -->
+              <action-settings-wheel-item-label
+                :label="SessionUser.objects.collectedOrderInvoices.meta.title"
                 v-show="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Se bruger -->
-            <ActionSettingsWheelItem
-                label="Se kunde i ny fane"
-                icon="fas fa-user-edit"
-                :click-action="() => SessionUser.functions.redirectTo.superUser('/users/' + props.user_id, true)"
-                v-if="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Log ind som kunde -->
-            <ActionSettingsWheelItem
-                label="Log ind som kunde"
-                icon="fas fa-user-shield"
-                :click-action="() => SessionUser.superUser.intimidate.intimidateUser(props.user_id)"
-                v-if="SessionUser.canAccessSuperUser()"
-            />
+              />
+              <!-- Show the invoice collection, in a new tab -->
+              <action-settings-wheel-item
+                  v-if="SessionUser.canAccessSuperUser()"
+                  label="Vis faktura samling i ny fane"
+                  icon="fas fa-file-invoice-dollar"
+                  :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
+              />
+            </template>
+            <!-- If there's a user_id, show the user actions -->
+            <template v-if="hasUser()">
+              <!-- Label -->
+              <ActionSettingsWheelItemLabel
+                  :label="SessionUser.objects.global.language.customer"
+                  v-show="SessionUser.canAccessSuperUser()"
+              />
+              <!-- Se bruger -->
+              <ActionSettingsWheelItem
+                  label="Se kunde i ny fane"
+                  icon="fas fa-user-edit"
+                  :click-action="() => SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber, true)"
+                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+              />
+              <!-- Log ind som kunde -->
+              <ActionSettingsWheelItem
+                  label="Log ind som bruger"
+                  icon="fas fa-user-shield"
+                  :click-action="() => SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber)"
+                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+              />
+              <!-- Log ind som kunde (QR) -->
+              <ActionSettingsWheelItem
+                  @click="onClickShowImpersonationQRCode(userIdFromCustomerNumber)"
+                  icon="fas fa-user-shield"
+                  label="Log ind som bruger (QR-kode)"
+                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+              />
 
-            <!-- Set password -->
-            <ActionSettingsWheelItem
-                label="Skift kodeord"
-                icon="fas fa-key"
-                :click-action="() => showSetCustomerPassword(props.user_id)"
-                v-if="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Show customer modal -->
-            <ActionSettingsWheelItem
-                label="Vis kunde"
-                icon="fas fa-user"
-                :click-action="() => customerModalVisible = true"
-                v-if="SessionUser.canAccessSuperUser()"
-            />
-          </template>
-          <!-- If there's an order_id, show the order actions -->
-          <template v-if="props.order_id">
-            <!-- Label, only if the user is a superuser (Otherwise, the label is redundant) -->
-            <action-settings-wheel-item-label
-                :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
-                v-show="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Go to the order page, in a new tab -->
-            <action-settings-wheel-item
-                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                label="Se transaktion i ny fane"
-                icon="fas fa-external-link-alt"
-                :click-action="async () => redirectDepartmentOrderPage(props.order_id)"
-                :disabled="false"
-            />
-            <!-- Go to the user/order/:order_id page, in a new tab -->
-            <action-settings-wheel-item
-                v-if="!SessionUser.canAccessAdmin() && !SessionUser.canAccessSuperUser()"
-                label="Se transaktion i ny fane"
-                icon="fas fa-external-link-alt"
-                :click-action="() => SessionUser.functions.redirectTo.user('/orders/' + props.order_id, true)"
-                :disabled="false"
+              <!-- Set password -->
+              <ActionSettingsWheelItem
+                  label="Skift kodeord"
+                  icon="fas fa-key"
+                  :click-action="() => showSetCustomerPassword(userIdFromCustomerNumber)"
+                  v-if="SessionUser.canAccessSuperUser()"
+              />
+              <!-- Show customer modal -->
+              <ActionSettingsWheelItem
+                  label="Vis kunde"
+                  icon="fas fa-user"
+                  :click-action="() => customerModalVisible = true"
+                  v-if="SessionUser.canAccessSuperUser()"
+              />
+            </template>
+            <!-- If there is a reg_1, show the reg_1 actions -->
+            <template v-if="props.reg_1 || props.reg_2">
+              <!-- Label -->
+              <action-settings-wheel-item-label
+                  :label="props.reg_1 && props.reg_2 ? `${SessionUser.objects.vehicles.meta.labels.multiple}` : `${SessionUser.objects.vehicles.meta.labels.single}`"
+                  v-show="SessionUser.canAccessSuperUser()"
+              />
+              <!-- Show the vehicle, in a new tab -->
+              <action-settings-wheel-item
+                  :label="`Se ${SessionUser.objects.vehicles.meta.labels.single.toLowerCase()} ${props.reg_1} i ny fane`"
+                  icon="fas fa-car"
+                  v-if="props.reg_1 && SessionUser.canAccessSuperUser()"
+                  :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true)"
+              />
+              <action-settings-wheel-item
+                  :label="`Se ${SessionUser.objects.vehicles.meta.labels.single.toLowerCase()} ${props.reg_2} i ny fane`"
+                  icon="fas fa-car"
+                  v-if="props.reg_2 && SessionUser.canAccessSuperUser()"
+                  :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true)"
+              />
+              <!-- If there are any attachments, show the attachments actions -->
+              <template v-if="attachmentsFromOrder.length > 0">
+                <action-settings-wheel-item-label
+                    :label="'Vedhæftede filer'"
                 />
-            <!-- Delete the order -->
-            <action-settings-wheel-item
-              v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-              label="Slet transaktion"
-              icon="fas fa-trash-alt"
-              :click-action="() => SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
-                emitDeleted();
-              })"
-              :disabled="false"
-            />
-            <!-- Change the customer (of the order) -->
-            <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                label="Skift kunde"
-                icon="fas fa-user-edit"
-                :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
-                :disabled="false"
-            />
-            <!-- Change the invoice collection (of the order) -->
-            <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                label="Skift faktura samling"
-                icon="fas fa-file-invoice-dollar"
-                :click-action="() => SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id)"
-                :disabled="false"
-            />
+                <template v-for="(attachment, index) in attachmentsFromOrder" :key="index">
+                  <action-settings-wheel-item
+                      :label="`${attachment.content?.document || attachment.content?.other}`"
+                      icon="fas fa-paperclip"
+                      :click-action="() => SessionUser.objects.orders.functions.downloadAttachment(props.order_id, attachment.id, true)
+                      .catch((error) => {
+                        Swal.fire({
+                          title: 'Fejl',
+                          text: 'Der opstod en fejl under download af vedhæftede fil.',
+                          icon: 'error',
+                        });
+                      })"
+                  />
+                </template>
+              </template>
+            </template>
+            <!-- Collected order invoice actions -->
+            <template v-if="props.invoice_collection_id">
+              <ActionSettingsWheelItemLabel
+                  :label="SessionUser.objects.collectedOrderInvoices.meta.title"
+                  v-show="props.invoice_collection_id"
+              />
+              <!-- Download invoice -->
+              <ActionSettingsWheelItem
+                  label="Download faktura"
+                  icon="fas fa-download"
+                  :click-action="() => SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id)"
+              />
+            </template>
           </template>
-          <!-- If there is an invoice collection id, show the invoice actions -->
-          <template v-if="props.invoice_collection_id">
-            <!-- Label -->
-            <action-settings-wheel-item-label
-              :label="SessionUser.objects.collectedOrderInvoices.meta.title"
-              v-show="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Show the invoice collection, in a new tab -->
-            <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                label="Vis faktura samling i ny fane"
-                icon="fas fa-file-invoice-dollar"
-                :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
-            />
+          <!-- If no actions are defined, then show that no actions are defined -->
+          <template v-else>
+            <div class="dropdown-item">
+              <p class="has-text-centered">Ingen handlinger defineret</p>
+            </div>
           </template>
-          <!-- If there is a reg_1, show the reg_1 actions -->
-          <template v-if="props.reg_1">
-            <!-- Label -->
-            <action-settings-wheel-item-label
-                :label="SessionUser.objects.vehicles.meta.labels.single"
-                v-show="SessionUser.canAccessSuperUser()"
-            />
-            <!-- Show the vehicle, in a new tab -->
-            <action-settings-wheel-item
-                label="Vis køretøj i ny fane"
-                icon="fas fa-car"
-                v-if="SessionUser.canAccessSuperUser()"
-                :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true)"
-            />
-          </template>
-        </template>
-        <!-- If no actions are defined, then show that no actions are defined -->
-        <template v-else>
-          <div class="dropdown-item">
-            <p class="has-text-centered">Ingen handlinger defineret</p>
-          </div>
-        </template>
+        </div>
       </div>
     </div>
     <CustomerModal
         v-if="customerModalVisible"
-        :user_id="props.user_id"
+        :user_id="userIdFromCustomerNumber"
         @closeModal="customerModalVisible = false"
     />
   </div>
diff --git a/src/components/displays/buttons/DatePeriodSelector.vue b/src/components/displays/buttons/DatePeriodSelector.vue
index 9639b324..a2b1f174 100644
--- a/src/components/displays/buttons/DatePeriodSelector.vue
+++ b/src/components/displays/buttons/DatePeriodSelector.vue
@@ -2,6 +2,7 @@
 import { IS_DEV } from '@/main';
 import { ref, computed, defineProps, defineEmits, watch } from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
+import {BField, BSelect} from "buefy";
 
 const props = defineProps({
   selection: {
@@ -39,6 +40,7 @@ const props = defineProps({
       showMonthSelector?: boolean, // Whether to show the month select
       showMultipleMonthWarning?: boolean, // Whether to show a warning if the selection spans multiple months
       showYearSelector?: boolean, // Whether to show the year selector
+      showShortCuts?: boolean, // Whether to show the shortcuts
     },
     required: false,
     default: () => ({
@@ -87,6 +89,7 @@ const visibility = computed(() => {
     showYearSelector: true,
     showDailySelector: false,
     showWeeklySelector: false,
+    showShortCuts: true,
     // Override with props visibility settings
     ...props.visibility,
   };
@@ -315,14 +318,104 @@ const weeklyShortcuts: shortcut[] = [
     },
 ];
 const shortcuts = ref<shortcut[]>([
-    ...(visibility.value.showDailySelector ? dailyShortcuts : []),
-    ...(visibility.value.showWeeklySelector ? weeklyShortcuts : []),
+    ...((visibility.value.showDailySelector || visibility.value.showShortCuts) ? dailyShortcuts : []),
+    ...((visibility.value.showWeeklySelector || visibility.value.showShortCuts) ? weeklyShortcuts : []),
 ]);
 
 </script>
 
 <template>
-  <div class="level is-mobile is-align-items-center">
+  <!-- Mobile date selector -->
+  <div class="columns is-mobile is-multiline" v-show="SessionUser.functions.device.isMobile()">
+    <!-- Date from & Date to -->
+    <div class="column is-half">
+          <label class="label is-small" v-if="visibility.showStartDate">{{ SessionUser.objects.global.language.text.date_from }}</label>
+          <input
+            type="date"
+            class="input"
+            v-model="props.selection.startDate.toISOString().split('T')[0]"
+            @change="handleStartDateChange"
+            v-bind:disabled="props.isDisabled || props.isReadonly"
+            :class="{ 'is-danger': !isSelectionValid }"
+          />
+    </div>
+    <div class="column is-half">
+          <label class="label is-small" v-if="visibility.showEndDate">{{ SessionUser.objects.global.language.text.date_to }}</label>
+          <input
+            type="date"
+            class="input"
+            v-model="props.selection.endDate.toISOString().split('T')[0]"
+            @change="handleEndDateChange"
+            v-bind:disabled="props.isDisabled || props.isReadonly"
+            :class="{ 'is-danger': !isSelectionValid }"
+          />
+    </div>
+    <!-- Month selector -->
+    <div class="column is-half" v-if="visibility.showMonthSelector">
+      <div class="field has-addons is-centered">
+        <p class="control is-expanded">
+          <span class="select is-fullwidth">
+            <select
+              class="input"
+              v-model="currentMonthSelection"
+              @change="setMonth(currentMonthSelection)"
+              v-bind:disabled="props.isDisabled || props.isReadonly"
+            >
+              <!-- Default option: Custom -->
+              <option value="" disabled selected>Select Month</option>
+              <option v-for="month in months" :key="month.value" :value="month.value">
+                {{ SessionUser.functions.ucFirst(month.label) }}
+              </option>
+            </select>
+          </span>
+        </p>
+      </div>
+    </div>
+    <!-- Year selector -->
+    <div class="column is-half" v-if="visibility.showYearSelector">
+      <div class="field has-addons is-centered">
+        <p class="control is-expanded">
+          <span class="select is-fullwidth">
+            <select
+                class="input"
+                :value="startDate.getFullYear()"
+                @change="(e) => { const year = parseInt(e.target.value); if (!isNaN(year)) { const newStartDate = new Date(startDate); newStartDate.setFullYear(year); startDate = newStartDate; const newEndDate = new Date(endDate); newEndDate.setFullYear(year); endDate = newEndDate; isPendingEmit = true; if (props.autoEmitChange) { updateSelection(); } } }"
+                v-bind:disabled="props.isDisabled || props.isReadonly"
+            >
+              <!-- Generate a range of years from current year - 10 to current year + 10 -->
+              <option v-for="year in Array.from({ length: 21 }, (_, i) => new Date().getFullYear() - 10 + i)" :key="year" :value="year">
+                {{ year }}
+              </option>
+            </select>
+          </span>
+        </p>
+        <p class="control">
+          <a class="button is-static">
+            {{ SessionUser.objects.global.language.text.year }}
+          </a>
+        </p>
+      </div>
+    </div>
+    <!-- Shortcuts -->
+    <div class="column is-full">
+      <b-field label="Periode">
+      <b-select placeholder="Vælg periode"
+                :expandable="true"
+                :model-value="shortcuts.find(s => (s.getRange().startDate.toISOString().split('T')[0] === startDate.toISOString().split('T')[0]) && (s.getRange().endDate.toISOString().split('T')[0] === endDate.toISOString().split('T')[0]))?.label || null"
+                :expanded="true"
+                @update:modelValue="(value) => { const selectedShortcut = shortcuts.find(s => s.label === value); if (selectedShortcut) { const range = selectedShortcut.getRange(); startDate = range.startDate; endDate = range.endDate; isPendingEmit = true; if (props.autoEmitChange) { updateSelection(); } } }" v-bind:disabled="props.isDisabled || props.isReadonly">
+        <option
+            v-for="(option, index) in shortcuts"
+            :key="index"
+            :value="option.label"
+        >{{ option.label }}
+        </option>
+      </b-select>
+    </b-field>
+    </div>
+  </div>
+  <!-- Desktop date selector -->
+  <div class="level is-align-items-center" v-show="!SessionUser.functions.device.isMobile()">
     <div class="level-left">
       <!-- Start Date Input -->
       <div class="level-item" v-if="visibility.showStartDate">
@@ -350,7 +443,7 @@ const shortcuts = ref<shortcut[]>([
         />
       </div>
       <!-- Display a message if neither start nor end date is shown -->
-      <div class="level-item" v-if="!visibility.showStartDate && !visibility.showEndDate">
+      <div class="level-item" v-if="!visibility.showStartDate && !visibility.showEndDate && visibility.showToLabel">
         <span class="label">No date selection available</span>
       </div>
       <!-- Month and Year selectors -->
@@ -438,7 +531,7 @@ const shortcuts = ref<shortcut[]>([
       </div>
     </div>
   </div>
-  <div class="navbar is-white">
+  <div class="navbar is-white" v-show="!SessionUser.functions.device.isMobile()">
     <div class="navbar-menu">
       <!-- Date shortcuts -->
       <div class="navbar-start">
diff --git a/src/components/displays/buttons/EditableTableColumn.vue b/src/components/displays/buttons/EditableTableColumn.vue
index 88b8a7ec..f0f1c1e5 100644
--- a/src/components/displays/buttons/EditableTableColumn.vue
+++ b/src/components/displays/buttons/EditableTableColumn.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {defineProps, ref} from 'vue';
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {BTooltip} from "buefy";
 const props = defineProps({
   object: Object,
   loadList: Function,
@@ -8,6 +9,12 @@ const props = defineProps({
   column: String,
   parseFunction: Function,
   virtualColumn: Boolean,
+  hoverText: {
+    type: String,
+    default: () => {
+      return null;
+    }
+  },
   permissionCheckFunction: {
     type: Function,
     default: () => {
@@ -20,6 +27,23 @@ const props = defineProps({
     default: () => {
       return null; // Example: <td>
     }
+  },
+  // Theme can be 'divided' or 'simple'
+  theme: {
+    type: String,
+    validator(value, props) {
+      return ['divided', 'simple'].includes(value);
+    },
+    default: () => {
+      return 'simple';
+    }
+  },
+  // Hover HTML content
+  hoverHtml: {
+    type: Boolean,
+    default: () => {
+      return false;
+    }
   }
 });
 
@@ -52,19 +76,62 @@ const isLoading = ref(false);
 </script>
 
 <template>
-  <component :is="props.componentWrapper ? props.componentWrapper : 'td'">
-    <span v-if="!props.virtualColumn">{{ parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column] }}</span>
-    <span v-else>{{ parseFunction ? parseFunction(props.object) : props.object }}</span>
-    <span class="ml-2" v-if="props.permissionCheckFunction()">
-      <button class="button is-small is-transparent is-text" style="text-decoration-line: none;" @click="clickEdit" v-if="props.editFunction" :class="{'is-loading': isLoading}" :disabled="isLoading">
-        <span class="icon">
-          <i class="fas fa-edit"></i>
-        </span>
-      </button>
-    </span>
+  <component :is="props.componentWrapper ? props.componentWrapper : 'td'"
+             @click="clickEdit"
+             class="hover-illustration"
+             :class="{'is-clickable': props.permissionCheckFunction() && props.editFunction}">
+    <div>
+
+    <!-- Divided display ( value | edit button ) -->
+      <template v-if="props.theme === 'divided'">
+        <nav class="level is-mobile" style="min-width: -webkit-fill-available; width: -webkit-fill-available; overflow: visible; max-width: -webkit-fill-available;">
+          <div class="level-left" style="overflow: hidden; max-width: calc(100% - 2.5em); text-overflow: ellipsis; white-space: nowrap;">
+            <div class="level-item" :title="props.hoverText ? props.hoverText : ( !props.virtualColumn ? (parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column]) : (parseFunction ? parseFunction(props.object) : props.object) )">
+              <span class="" v-if="!props.virtualColumn">{{ parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column] }}</span>
+              <span class="" v-else>{{ parseFunction ? parseFunction(props.object) : props.object }}</span>
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+            <span class="ml-2 is-float-right" v-if="props.permissionCheckFunction()">
+              <button class="button is-small is-transparent is-text" style="text-decoration-line: none;" @click="clickEdit" v-if="props.editFunction" :class="{'is-loading': isLoading}" :disabled="isLoading">
+                <span class="icon">
+                  <i class="fas fa-edit"></i>
+                </span>
+              </button>
+            </span>
+            </div>
+          </div>
+        </nav>
+      </template>
+      <!-- Simple display ( value ) with edit button on hover -->
+      <template v-else>
+        <!-- Hover Edit icon -->
+        <b-tooltip
+                   type="is-light"
+                   position="is-bottom"
+                   :multilined="$slots.hoverHtml"
+                   square>
+          <!-- Value Display -->
+          <span class="" v-if="!props.virtualColumn">{{ parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column] }}</span>
+          <span class="" v-else>{{ parseFunction ? parseFunction(props.object) : props.object }}</span>
+          <template v-slot:content>
+            <slot name="hoverHtml">
+              <div v-html="props.hoverText" v-if="props.hoverText"></div>
+              <div v-else>
+                {{ parseFunction ? parseFunction(props.object[props.column]) : props.object[props.column]}}
+              </div>
+            </slot>
+          </template>
+      </b-tooltip>
+      </template>
+    </div>
   </component>
 </template>
 
 <style scoped>
-
+.hover-illustration:hover {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue b/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
index 533a758c..d44f7a1c 100644
--- a/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
+++ b/src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue
@@ -57,38 +57,42 @@ const modules = [
     },
     count: ref(0)
   },
-  {
-    id: 4,
-    name: "Notifikationer",
-    description: "Gå til notifikationer",
-    icon: "fas fa-bell",
-    onClick: () => {
-      // Get the departmentId from the URL
-      const departmentId = router.currentRoute.value.params.departmentId;
-      // Redirect to the notifications
-      router.push(`/admin/${departmentId}/modules/notifications`);
-    },
-    onClickCount: () => {
-      this.onClick();
-    },
-    count: ref(0)
-  },
-  {
-    id: 5,
-    name: "Tidsbookinger",
-    description: "Gå til tidsbookinger",
-    icon: "fas fa-clock",
-    onClick: () => {
-      // Get the departmentId from the URL
-      const departmentId = router.currentRoute.value.params.departmentId;
-      // Redirect to the time bookings
-      router.push(`/admin/${departmentId}/modules/time-bookings`);
-    },
-    onClickCount: () => {
-      this.onClick();
-    },
-    count: ref(0)
-  }
+  /**
+   * {
+   *     id: 4,
+   *     name: "Notifikationer",
+   *     description: "Gå til notifikationer",
+   *     icon: "fas fa-bell",
+   *     onClick: () => {
+   *       // Get the departmentId from the URL
+   *       const departmentId = router.currentRoute.value.params.departmentId;
+   *       // Redirect to the notifications
+   *       router.push(`/admin/${departmentId}/modules/notifications`);
+   *     },
+   *     onClickCount: () => {
+   *       this.onClick();
+   *     },
+   *     count: ref(0)
+   *   },
+   */
+  /**
+   * {
+   *     id: 5,
+   *     name: "Tidsbookinger",
+   *     description: "Gå til tidsbookinger",
+   *     icon: "fas fa-clock",
+   *     onClick: () => {
+   *       // Get the departmentId from the URL
+   *       const departmentId = router.currentRoute.value.params.departmentId;
+   *       // Redirect to the time bookings
+   *       router.push(`/admin/${departmentId}/modules/time-bookings`);
+   *     },
+   *     onClickCount: () => {
+   *       this.onClick();
+   *     },
+   *     count: ref(0)
+   *   }
+   */
 ];
 
 // Get the departmentId from the URL
diff --git a/src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue b/src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue
index d40daf78..d807d531 100644
--- a/src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue
+++ b/src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue
@@ -71,8 +71,8 @@ const hasUpdatePermission = () => {
           :permission-check-function="hasUpdatePermission"
       />
       <!-- Actions -->
-      <td class="is-float-right">
-      <ActionSettingsWheelButton>
+      <td>
+      <ActionSettingsWheelButton class="is-float-right">
         <template #actions>
           <RequiresPermission :permission="'department_notification_sms_delete'">
             <template #default>
@@ -99,7 +99,7 @@ const hasUpdatePermission = () => {
     </tbody>
     <tfoot>
     <tr>
-      <td colspan="12">{{SessionUser.objects.global.language.showing}} {{ objects.length }} {{SessionUser.objects.department_notification_sms.meta.labels.multiple}}</td>
+      <td colspan="6">{{SessionUser.objects.global.language.showing}} {{ objects.length }} {{SessionUser.objects.department_notification_sms.meta.labels.multiple}}</td>
     </tr>
     </tfoot>
   </table>
diff --git a/src/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue b/src/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue
index d4406a22..999673eb 100644
--- a/src/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue
+++ b/src/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue
@@ -40,10 +40,10 @@ const pendingBookings = ref([]);
 // Get the department booking list
 const loadPendingBookings = () => {
   SessionUser.request(
-      SessionUser.objects.bookings.meta.endpoint,
+      SessionUser.objects.order_bookings.meta.endpoint,
       'GET',
       {
-        filters: 'department:' + department_id.value + ',status:pending',
+        filters: 'department:' + department_id.value + ',order_id:is null',
         page: 1,
         limit: 100,
       }
@@ -72,12 +72,12 @@ const getVehiclePlateBooking = (vehiclePlate) => {
     return null;
   }
   // Find the booking for the given vehicle plate
-  return pendingBookings.value.find(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
+  return pendingBookings.value.find(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
 };
 
 const doesVehiclePlateHaveBooking = (vehiclePlate) => {
   // Check if the vehicle has a booking in the pending bookings list
-  return pendingBookings.value.some(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
+  return pendingBookings.value.some(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
 };
 
 
@@ -681,7 +681,7 @@ const isDropdownContentLoaded = (scan) => {
           <tr v-if="scansInfinityScroll !== null && scansInfinityScroll.length === 0">
             <td colspan="3">
               <div class="has-text-centered">
-                Ingen flere nummerplader
+                Ingen nummerplader blev fundet
               </div>
             </td>
           </tr>
@@ -695,6 +695,7 @@ const isDropdownContentLoaded = (scan) => {
                 <span class="icon">
                   <i class="fas fa-check"></i>
                 </span>
+                <span>&nbsp;</span>
                 <span>{{ SessionUser.objects.global.language.nothing_left_to_show }}</span>
               </div>
             </td>
@@ -702,12 +703,6 @@ const isDropdownContentLoaded = (scan) => {
           </tbody>
         </table>
       </div>
-      <!-- If there's no scans, and the infinity scroll is also empty or null -->
-      <div class="panel-block" v-if="list.length === 0 && getDepartment() !== '' && (scansInfinityScroll === null || scansInfinityScroll.length === 0)">
-        <p>
-          Ingen nummerplader blev fundet
-        </p>
-      </div>
       <!-- Reload button -->
       <div class="panel-block" v-if="list.length === 0 && getDepartment() !== '' && scansInfinityScroll === null">
         <button class="button is-dark is-fullwidth" @click="loadList">
diff --git a/src/components/displays/department/pos/displays/Piktogrammer.vue b/src/components/displays/department/pos/displays/Piktogrammer.vue
index 7327ce51..e10d2d01 100644
--- a/src/components/displays/department/pos/displays/Piktogrammer.vue
+++ b/src/components/displays/department/pos/displays/Piktogrammer.vue
@@ -5,23 +5,38 @@ import productImage02 from "/src/assets/piktogrammer/02.png";
 import productImage03 from "/src/assets/piktogrammer/03.png"; // Replaced by 3
 import productImage3 from "/src/assets/piktogrammer/3.png"; // Sættevognstræk
 import productImage04 from "/src/assets/piktogrammer/04.png";
-import productImage05 from "/src/assets/piktogrammer/05.png";
-import productImage06 from "/src/assets/piktogrammer/06.png";
+import productImage05 from "/src/assets/piktogrammer/05.png"; // Deprecated - use 5
+import productImage5 from "/src/assets/piktogrammer/5.png"; // Forvogn
+import productImage06 from "/src/assets/piktogrammer/06.png"; // Deprecated - use 6
+import productImage6 from "/src/assets/piktogrammer/6.png"; // Forvogn med hænger
 import productImage07 from "/src/assets/piktogrammer/07.png";
 import productImage08 from "/src/assets/piktogrammer/08.png";
 import productImage09 from "/src/assets/piktogrammer/09.png";
 import productImage10 from "/src/assets/piktogrammer/10.png";
+import productImage11 from "/src/assets/piktogrammer/11.png";
 import productImage12 from "/src/assets/piktogrammer/12.png";
 import productImage13 from "/src/assets/piktogrammer/13.png";
 import productImage14 from "/src/assets/piktogrammer/14.png";
+import productImage15 from "/src/assets/piktogrammer/15.png";
 import productImage16 from "/src/assets/piktogrammer/16.png"; // Autocamper / Campingvogn
-import productImage18 from "/src/assets/piktogrammer/18.png";
+import productImage17 from "/src/assets/piktogrammer/17.png"; // Bus
+import productImage18 from "/src/assets/piktogrammer/18.png"; // Entreprenør forvogn
+import productImage19 from "/src/assets/piktogrammer/19.png"; // Entreprenør forvogn med hænger
+import productImage20 from "/src/assets/piktogrammer/20.png"; // Entreprenør sættevogn
+import productImage21 from "/src/assets/piktogrammer/21.png"; // Undervognsskyld.
+import productImage23 from "/src/assets/piktogrammer/23.png"; // Spotfree
+import productImage24 from "/src/assets/piktogrammer/24.png"; // Spotfree
+import productImage25 from "/src/assets/piktogrammer/25.png"; // Fælg flex
+import productImage26 from "/src/assets/piktogrammer/26.png"; // Højglans
+import productImage27 from "/src/assets/piktogrammer/27.png"; // 10 Minutter
+import productImage39 from "/src/assets/piktogrammer/39.png"; // Trailer - Varevogn
 import productImage43 from "/src/assets/piktogrammer/43.png"; // Handling of materials
 import productImage44 from "/src/assets/piktogrammer/44.png"; // "Christmas Tree"
 import productImage45 from "/src/assets/piktogrammer/45.png"; // "Christmas Tree" - Sticker roll
 import productImage46 from "/src/assets/piktogrammer/46.png"; // Kødkroge, vask
 import productImage47 from "/src/assets/piktogrammer/47.png"; // Kødkroge med mærker, vask
 import productImage48 from "/src/assets/piktogrammer/48.png"; // E2
+import productImage49 from "/src/assets/piktogrammer/49.png"; // Interior wash forvogn hænger
 import productImage56 from "/src/assets/piktogrammer/56.png"; // Safety Seal
 // Get the picture of the product
 export const getPicture = (piktogram) => {
@@ -46,9 +61,11 @@ export const getPicture = (piktogram) => {
     case "04":
       return productImage04;
     case "05":
-      return productImage05;
+    case "5": // Forvogn
+      return productImage5;
     case "06":
-      return productImage06;
+    case "6": // Forvogn med hænger
+      return productImage6;
     case "07":
       return productImage07;
     case "08":
@@ -57,16 +74,40 @@ export const getPicture = (piktogram) => {
       return productImage09;
     case "10":
       return productImage10;
+    case "11":
+      return productImage11;
     case "12":
       return productImage12;
     case "13":
       return productImage13;
     case "14":
       return productImage14;
+    case "15":
+      return productImage15;
     case "16":
       return productImage16;
+    case "17":
+      return productImage17;
     case "18":
       return productImage18;
+    case "19":
+      return productImage19;
+    case "20":
+      return productImage20;
+    case "21":
+      return productImage21;
+    case "23":
+      return productImage23;
+    case "24":
+      return productImage24;
+    case "25":
+      return productImage25;
+    case "26":
+      return productImage26;
+    case "27":
+      return productImage27;
+    case "39":
+      return productImage39;
     case "43":
       return productImage43;
     case "44":
@@ -79,6 +120,8 @@ export const getPicture = (piktogram) => {
       return productImage47;
     case "48":
       return productImage48;
+    case "49":
+      return productImage49;
     case "56":
       return productImage56;
     default:
diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index 9e12ca36..f4d3bee7 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -32,6 +32,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  excludedOrderIds: {
+    type: Array, // Any order ids that should be excluded from the list, will also be excluded from calculations (e.g. hidden orders).
+    default: () => [],
+  }
 });
 import {computed, onMounted, ref, watch} from 'vue';
 import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
@@ -48,12 +52,19 @@ import InvoicingBillingPeriodInvoiceProgressBar
 import PosDepartmentStepMobileAttachment
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileAttachment.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+import ViewportResponsiveWrapper from "@/components/viewport/conditions/elements/ViewportResponsiveWrapper.vue";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 
 
-const redirectDepartmentOrderPage = (orderId, departmentId) => {
-  // Send the user to the order page (In a new tab)
-  // `/admin/${departmentId}/modules/pos/orders/${orderId}`
-  window.open(`/admin/${departmentId}/modules/pos/orders/${orderId}`, '_blank');
+const redirectDepartmentOrderPage = (orderId, departmentId, newTab = true) => {
+  // Check if the user has access to the department
+  if (!SessionUser.canAccessDepartment(departmentId)) {
+    window.open('/user/orders/' + orderId, newTab ? '_blank' : '_self');
+  } else {
+    // Send the user to the order page (In a new tab)
+    // `/admin/${departmentId}/modules/pos/orders/${orderId}`
+    window.open(`/admin/${departmentId}/modules/pos/orders/${orderId}`, newTab ? '_blank' : '_self');
+  }
 };
 
 const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
@@ -242,72 +253,83 @@ const onTableHeaderClick = (column) => {
 const tableHeaders = ref([
   {
     name: 'id',
-    title: 'Id',
+    title: SessionUser.objects.orders.columns.id.label,
     sortable: true,
   },
     ...(props.isCustomerView) ? [] : [{
     name: 'customer_id',
-    title: 'Kunde',
+    title: SessionUser.objects.orders.columns.customer_id.label,
     sortable: true,
   }],
     ...(props.isCustomerView) ? [] : [{
     name: 'cashier_id',
-    title: 'Kassør',
+    title: SessionUser.objects.orders.columns.cashier_id.label,
     sortable: true,
   }],
   {
     name: 'department_id',
-    title: 'Afdeling',
+    title: SessionUser.objects.orders.columns.department_id.label,
     sortable: true,
   },
   {
     name: 'reg_1',
-    title: 'Reg. 1',
-    sortable: true,
-  },
-  {
-    name: 'reg_2',
-    title: 'Reg. 2',
-    sortable: true,
-  },
-  {
-    name: 'reg_3',
-    title: 'Reg. 3',
+    title: SessionUser.functions.ucFirst(SessionUser.objects.vehicles.meta.labels.multiple),
     sortable: true,
   },
+  /**
+   * {
+   *     name: 'reg_1',
+   *     title: 'Reg. 1',
+   *     sortable: true,
+   *   },
+   *   {
+   *     name: 'reg_2',
+   *     title: 'Reg. 2',
+   *     sortable: true,
+   *   },
+   *   {
+   *     name: 'reg_3',
+   *     title: 'Reg. 3',
+   *     sortable: true,
+   *   },
+   */
   {
     name: 'reference',
-    title: 'Reference',
+    title: SessionUser.objects.orders.columns.reference.label,
     sortable: true,
   },
   {
     name: 'notes',
-    title: 'Noter',
+    title: SessionUser.objects.orders.columns.notes.label,
     sortable: true,
   },
   {
     name: 'po',
-    title: 'PO',
-    sortable: true,
+    title: SessionUser.objects.orders.columns.po.label,
+    visible: (order) => {
+      return (canSeePoField() || SessionUser.canAccessAdmin())
+    },
   },
   {
     name: 'created_at',
-    title: 'Dato',
+    title: SessionUser.objects.orders.columns.created_at.label,
     sortable: true,
   },
   {
     name: 'total_net_amount',
-    title: 'Total',
+    title: 'Beløb',
     sortable: false,
   },
-  {
-    name: 'completed_at',
-    title: 'Gennemført',
-    sortable: true,
-  },
+  /**
+   * {
+   *     name: 'completed_at',
+   *     title: 'Gennemført',
+   *     sortable: true,
+   *   },
+   */
   {
     name: 'actions',
-    title: 'Actions',
+    title: '',
     sortable: false,
   },
 ]);
@@ -553,6 +575,11 @@ const ordersSortedByInvoiceCollection = computed(() => {
   });
 });
 
+const redirectDepartmentBookingPage = (bookingId, departmentId, newTab = true) => {
+  // Send the user to the booking page (In a new tab)
+  window.open(`/admin/${departmentId}/modules/pos/bookings/${bookingId}`, newTab ? '_blank' : '_self');
+};
+
 const getVisibleOrdersSortedByInvoiceCollection = computed(() => {
   // Get the orders that are visible and sorted by invoice collection id
   return ordersSortedByInvoiceCollection.value.filter(order => isObjectVisible(order));
@@ -564,6 +591,10 @@ const getVisibleOrders = computed(() => {
 });
 
 const getOrdersByInvoiceCollection = (invoiceCollectionId) => {
+  // If the showOnlyWithIds prop is set, filter the orders by the ids in the array
+  if (props.showOnlyWithIds.length > 0) {
+    return props.orders.filter(order => order.invoice_collection_id === invoiceCollectionId && props.showOnlyWithIds.includes(order.id));
+  }
   // Get the orders by invoice collection id
   return props.orders.filter(order => order.invoice_collection_id === invoiceCollectionId);
 }
@@ -586,7 +617,7 @@ const loadInvoiceCollectionOrderCounts = () => {
     // Get the orders for the invoice collection
     SessionUser.objects.collectedOrderInvoices.get.single(invoiceCollectionId).then((response) => {
     // Get the orders from the response
-      const orders = response.orders || [];
+      const orders = response.orders.filter(order => props.excludedOrderIds.includes(order.id) === false);
       // Set the count for the invoice collection id
       invoiceCollectionOrderCounts.value[invoiceCollectionId] = orders.length;
       invoiceCollectionDetails.value[invoiceCollectionId] = response;
@@ -616,9 +647,14 @@ watch(() => props.orders, () => {
 }, { immediate: true });
 
 const isObjectVisible = (object) => {
+  if (!SessionUser.canAccessSuperUser() && isSystemOrder(object)) {
+    return false; // Hide system orders for non-superusers
+  }
   // Check if the object is visible based on the showOnlyWithIds prop
-  if (props.showOnlyWithIds.length === 0) {
+  if (props.showOnlyWithIds.length === 0 && !props.excludedOrderIds.includes(object.id)) {
     return true; // If no filter is applied, show all objects
+  } else if (props.excludedOrderIds.includes(object.id)) {
+    return false; // If the object is in the excluded list, hide it
   }
   // Check if the object id is in the showOnlyWithIds array
   return props.showOnlyWithIds.includes(object.id);
@@ -647,10 +683,47 @@ const isPendingHandheld = (order) => {
   return order.pending_handheld === true && order.completed_at === null;
 };
 
+const canSeePoField = () => {
+  return true;
+  //return (SessionUser.hasAttribute('usePONumbers') || SessionUser.hasPermission('department'))
+}
+
+/**
+ * Order actions modal
+ */
+const selectedOrderForActionsMenu = ref(null);
+const isOrderActionsModalOpen = computed(() => {
+  return selectedOrderForActionsMenu.value !== null;
+});
+const closeOrderActionsModal = () => {
+  selectedOrderForActionsMenu.value = null;
+}
+const openOrderActionsModal = (order) => {
+  selectedOrderForActionsMenu.value = order;
+};
+
+const canEditTransaction = (order) => {
+  return (SessionUser.canAccessAdmin() || SessionUser.canAccessDepartment(order.department_id));
+}
+
+/**
+ * Cashier name formatting
+ * This:
+ * - Writes "afdeling" if the cashiers name is the same as the department name.
+ * - Returns the first name, and first letter of the lastname of the cashier.
+ */
+const formatCashierName = (order) => {
+  if (getDepartmentName(order.department_id) === order.cashier_name) {
+    return SessionUser.functions.ucFirst(SessionUser.objects.departments.meta.labels.single);
+  }
+  return order.cashier_name;
+}
 </script>
 
 <template>
-  <table class="table is-fullwidth is-hoverable">
+  <ViewportResponsiveWrapper>
+    <template #desktop>
+      <table class="table is-fullwidth">
     <thead>
     <tr v-if="props.invoiceView && props.allowSelectMultiple">
       <td colspan="100%">
@@ -691,36 +764,38 @@ const isPendingHandheld = (order) => {
       <th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple"></th>
       <th class="is-narrow" v-if="props.invoiceView"></th>
       <template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
-        <th
-            v-if="tableHeaders.sortable"
-            :class="{
-                'is-clickable': tableHeaders.sortable,
-                'has-text-centered': tableHeaders.name === 'id'
-            }"
-            @click="onTableHeaderClick(tableHeaders.name)"
-        >
-          <span class="is-flex-wrap-nowrap">
-            <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
-            <span
-                v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
-                :class="{
-                    'fas fa-sort-up': isCurrentSortDirectionAscending(),
-                    'fas fa-sort-down': isCurrentSortDirectionDescending()
-                }"
-                class="icon is-small"
-            />
-          </span>
-        </th>
-        <th
-            v-else
-            :class="{
-                'has-text-centered': tableHeaders.name === 'id'
-            }"
-        >
-          <span class="is-flex-wrap-nowrap">
-            <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
-          </span>
-        </th>
+        <template v-if="tableHeaders.visible === undefined || tableHeaders.visible(null) === true">
+          <th
+              v-if="tableHeaders.sortable"
+              :class="{
+                  'is-clickable': tableHeaders.sortable,
+                  'has-text-centered': tableHeaders.name === 'id'
+              }"
+              @click="onTableHeaderClick(tableHeaders.name)"
+          >
+            <span class="is-flex-wrap-nowrap">
+              <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+              <span
+                  v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
+                  :class="{
+                      'fas fa-sort-up': isCurrentSortDirectionAscending(),
+                      'fas fa-sort-down': isCurrentSortDirectionDescending()
+                  }"
+                  class="icon is-small"
+              />
+            </span>
+          </th>
+          <th
+              v-else
+              :class="{
+                  'has-text-centered': tableHeaders.name === 'id'
+              }"
+          >
+            <span class="is-flex-wrap-nowrap">
+              <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+            </span>
+          </th>
+        </template>
       </template>
     </tr>
     </thead>
@@ -731,9 +806,9 @@ const isPendingHandheld = (order) => {
       <!-- If grouping by invoice collection is enabled, show the invoice collection id -->
       <template v-if="props.groupInvoiceCollection && doesOrderHaveInvoiceCollection(order) && isFirstOrderInCollection(order.invoice_collection_id, order)">
         <tr>
-          <td colspan="12">
+          <td colspan="13">
             <div class="has-text-weight-bold">
-              Faktura samling ID: {{ order.invoice_collection_id }}, E-conomic booked ID: {{ getInvoiceCollectionDetails(order.invoice_collection_id)?.economic_invoice_booked_id }}, Ekstern ID: <code>{{ getInvoiceCollectionDetails(order.invoice_collection_id)?.external_id }}</code>
+              Faktura samling ID: {{ order.invoice_collection_id }}
               <span class="has-text-grey">( {{ SessionUser.objects.global.language.showing }} {{ getOrdersByInvoiceCollection(order.invoice_collection_id).length }} {{ SessionUser.objects.global.language.showing_of_separator }} {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) }} {{ SessionUser.objects.orders.meta.labels.multiple.toLowerCase() }} )</span>
             </div>
           </td>
@@ -761,7 +836,7 @@ const isPendingHandheld = (order) => {
               <div class="message-body">
                 <span class="has-text-weight-bold">Bemærk:</span> Der er ordrer i denne faktura samling, som ikke er synlige pga. filtre.
                 <br>
-                <span class="has-text-weight-bold">Disse {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) - getOrdersByInvoiceCollection(order.invoice_collection_id).length }} er ikke vist, men vil blive faktureret alligevel.</span>
+                <span class="has-text-weight-bold">Disse {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) - getOrdersByInvoiceCollection(order.invoice_collection_id).length }} er ikke vist, men vil muligvis blive faktureret alligevel.</span>
               </div>
             </div>
           </td>
@@ -841,18 +916,21 @@ const isPendingHandheld = (order) => {
                       button_text: order.invoice_collection_id,
                       v_centered: true,
                     },
-                    // Completed status
-                    {
-                      text: SessionUser.objects.orders.columns.completed_at.label,
-                      action: () => {
-                        redirectDepartmentOrderPage(order.id, order.department_id);
-                      },
-                      ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                      button_classes: ['no-underline-text', 'is-text', ...(order.completed_at !== null ? [] : ['has-text-warning'])],
-                      button: true,
-                      button_text: (order.completed_at !== null ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no),
-                      v_centered: true,
-                    },
+                    /**
+                    * // Completed status
+                    *                     {
+                    *                       text: SessionUser.objects.orders.columns.completed_at.label,
+                    *                       action: () => {
+                    *                         redirectDepartmentOrderPage(order.id, order.department_id);
+                    *                       },
+                    *                       ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                    *                       button_classes: ['no-underline-text', 'is-text', ...(order.completed_at !== null ? [] : ['has-text-warning'])],
+                    *                       button: true,
+                    *                       button_text: (order.completed_at !== null ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no),
+                    *                       v_centered: true,
+                    *                     },
+                    */
+
                     // Handheld status
                     ...(isPendingHandheld(order) ? [{
                       text: SessionUser.objects.global.language.handheld_pending_order,
@@ -914,134 +992,79 @@ const isPendingHandheld = (order) => {
       </span>
         </td> -->
         <td v-if="!props.isCustomerView">
-          <template v-if="!isSystemOrder(order)">{{ order.cashier_id }}</template>
-          <template v-else class="has-text-grey-light">System</template>
+          <template v-if="!isSystemOrder(order)">{{ formatCashierName(order) }}</template>
+          <template v-else><span class="has-text-grey-light">System</span></template>
         </td>
         <td>{{ getDepartmentName(order.department_id) }}</td>
+        <!-- Vehicles -->
         <td>
-          <ColorIndicator
-            v-bind:label="{
-              text: order.reg_1,
-              classes: [],
-              max_length: 7,
-            }"
-            v-bind:visibility="{
-              icon: false,
-              dropdown: (order.reg_1.length > 7),
-            }"
-            v-bind:dropdown_content="{
-              title: null,
-              buttons_title: null,
-              content: [
-                  {
-                    text: order.reg_1,
-                    action: () => {},
-                  }
-              ],
-              buttons: [],
-            }"
-          />
-        </td>
-        <td>
-          <ColorIndicator
-              v-show="order.reg_2 !== ''"
-              v-bind:label="{
-                text: order.reg_2,
-                classes: [],
-                max_length: 7,
-              }"
-              v-bind:visibility="{
-                icon: false,
-                dropdown: (order.reg_2.length > 7),
-              }"
-              v-bind:dropdown_content="{
-                title: null,
-                buttons_title: null,
-                content: [
-                    {
-                      text: order.reg_2,
-                      action: () => {},
-                    }
-                ],
-                buttons: [],
-              }"
-          />
-        </td>
-        <td>
-          <ColorIndicator
-              v-show="order.reg_3 !== ''"
-              v-bind:label="{
-                text: order.reg_3,
-                classes: [],
-                max_length: 7,
-              }"
-              v-bind:visibility="{
-                icon: false,
-                dropdown: (order.reg_3.length > 7),
-              }"
-              v-bind:dropdown_content="{
-                title: null,
-                buttons_title: null,
-                content: [
-                    {
-                      text: order.reg_3,
-                      action: () => {},
-                    }
-                ],
-                buttons: [],
-              }"
-          />
+          <p>
+            <EditableTableColumn
+                :componentWrapper="'div'"
+                :object="order"
+                :loadList="loadList"
+                column="reg_1"
+                :parse-function="(value) => value || 'Ingen registreret'"
+                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                :permissionCheckFunction="(orderobj) => canEditTransaction(order)"
+            />
+          </p>
+          <p>
+            <EditableTableColumn
+                :componentWrapper="'div'"
+                :object="order"
+                :loadList="loadList"
+                column="reg_2"
+                :parse-function="(value) => value || '-'"
+                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
+            />
+          </p>
+          <p v-show="order.reg_3">
+            <EditableTableColumn
+                :componentWrapper="'div'"
+                :object="order"
+                :loadList="loadList"
+                column="reg_3"
+                :parse-function="(value) => value || '-'"
+                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
+            />
+          </p>
         </td>
         <EditableTableColumn
-            v-show="SessionUser.canAccessSuperUser()"
             :object="order"
             :loadList="loadList"
             column="reference"
-            :parse-function="(value) => order.reference"
+            :hover-text="order.reference"
+            :parse-function="(value) => SessionUser.functions.text.truncate(order.reference, 10)"
             :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
             :permission-check-function="() => true"
         />
-        <td>
-          <ColorIndicator
-              v-show="order.notes !== ''"
-              v-bind:label="{
-                text: order.notes,
-                classes: [],
-                max_length: 7,
-              }"
-              v-bind:visibility="{
-                icon: false,
-                dropdown: (order.notes.length > 7),
-              }"
-              v-bind:dropdown_content="{
-                title: null,
-                buttons_title: null,
-                content: [
-                    {
-                      text: order.notes,
-                      action: () => {},
-                    }
-                ],
-                buttons: [],
-              }"
+          <EditableTableColumn
+              :object="order"
+              :loadList="loadList"
+              column="notes"
+              :parse-function="(value) => SessionUser.functions.text.truncate(order.notes, 10)"
+              :hover-text="order.notes"
+              :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+              :permission-check-function="() => SessionUser.canAccessAdmin()"
           />
-        </td>
         <EditableTableColumn
-              v-show="(SessionUser.hasAttribute('usePONumbers') || SessionUser.hasPermission('department'))"
+              v-if="canSeePoField() || SessionUser.canAccessAdmin()"
               :object="order"
               :loadList="loadList"
               column="po"
-              :parse-function="(value) => order.po"
+              :hover-text="order.po"
+              :parse-function="(value) => SessionUser.functions.text.truncate(order.po, 10)"
               :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-              :permission-check-function="() => true"
+              :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
         />
-        <td v-show="!(SessionUser.hasAttribute('usePONumbers') || SessionUser.hasPermission('department'))">
-          <span>{{ order.po }}</span>
-        </td>
         <td>{{ order.created_at }}</td>
         <td>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</td>
-        <td>{{ order.completed_at }}</td>
+        <!--<td>{{ order.completed_at }}</td>-->
           <td class="is-narrow">
+            <div class="buttons">
             <!-- Dropdown -->
             <ActionSettingsWheelButton
             v-bind:user_id="order.user_id"
@@ -1071,7 +1094,7 @@ const isPendingHandheld = (order) => {
             </ActionSettingsWheelButton>
 
             <!-- Attachments -->
-            <ActionSettingsWheelButton v-show="(order.attachments.length > 0 && (SessionUser.hasPermission('download_order_attachments_own') || SessionUser.hasPermission('download_order_attachments')))" :icon="'fas fa-paperclip'" class="ml-1">
+            <ActionSettingsWheelButton v-show="(order.attachments.length > 0 && (SessionUser.hasPermission('download_order_attachments_own') || SessionUser.hasPermission('download_order_attachments')))" :icon="'fas fa-paperclip'">
               <template v-slot:actions>
                 <template v-for="attachment in order.attachments" :key="attachment.id">
                   <action-settings-wheel-item
@@ -1083,6 +1106,7 @@ const isPendingHandheld = (order) => {
                 </template>
               </template>
             </ActionSettingsWheelButton>
+            </div>
           </td>
       </tr>
       <!-- Dropdown content (if the invoice view is enabled,and the dropdown is active) -->
@@ -1104,7 +1128,440 @@ const isPendingHandheld = (order) => {
       <td colspan="100%">Viser {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</td>
     </tr>
     </tfoot>
-  </table>
+      </table>
+    </template>
+    <!-- Treat tablet the same as mobile to ensure visibility on larger phones/tablets -->
+    <template #tablet>
+      <div class="columns is-multiline is-mobile">
+        <!-- Bulk actions when invoice view allows selection -->
+        <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
+          <div class="buttons">
+            <button
+                class="button is-small"
+                @click="invoiceSelectedCollections()"
+            >
+              {{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}} ({{selectedInvoiceCollections.length}})
+            </button>
+            <button
+                class="button is-small"
+                @click="selectAllInvoiceCollections()"
+                :class="{
+                  'is-light': !isInvoiceCollectionSelectedAll(),
+                  'is-dark': isInvoiceCollectionSelectedAll()
+                }"
+            >
+              {{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+            </button>
+            <button
+                class="button is-small"
+                @click="toggleAutoExpandAll()"
+                :class="{
+                  'is-light': !isAutoExpandAll(),
+                  'is-dark': isAutoExpandAll()
+                }"
+            >
+              {{ isAutoExpandAll() ? SessionUser.objects.global.language.collapse : SessionUser.objects.global.language.expand }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Orders as cards -->
+        <template v-for="order in getVisibleOrders" :key="order.id">
+          <div class="column is-full">
+            <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :toggleable="true" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="false">
+              <template #header>
+                <div class="card-header-title is-flex is-justify-content-space-between is-align-items-center" style="width: 100%;">
+                  <div>
+                    <div>
+                      <small>
+                        <!-- ID and status icon -->
+                        <span class="icon mr-1" :class="getOrderInvoiceStatusBarColor(order)">
+                          <i :class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"></i>
+                        </span>
+                        #{{ order.id }}
+                      </small>
+                    </div>
+                    <div v-if="!props.isCustomerView">
+                      <small>{{ order.customer_name }}</small>
+                    </div>
+                  </div>
+                  <div class="is-pulled-right" style="width: fit-content">
+                    <div class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center">
+                      <div class="column is-narrow has-text-right mb-2">
+                        <span class="tag is-light is-small mr-1">
+                          <small>{{ getDepartmentName(order.department_id) }}</small>
+                        </span>
+                      </div>
+                      <div class="column is-12 has-text-right mb-2">
+                        <span class="buttons is-right mr-1">
+                          <button v-if="props.invoiceView && props.allowSelectMultiple" class="button is-light is-small" @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
+                                  :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }">
+                            {{ isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }}
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #default>
+                <div class="card-content">
+                  <div class="columns is-mobile is-multiline">
+                    <div class="column is-12">
+                      <small>{{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span><span v-if="order.reg_3">, {{ order.reg_3 }}</span></small>
+                    </div>
+                    <div class="column is-12">
+                      <strong><small>{{ order.created_at }}</small></strong>
+                    </div>
+                    <div class="column is-12">
+                      <small>{{ SessionUser.objects.orders.columns.total_net_amount.label || 'Total' }}: {{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</small>
+                    </div>
+                    <div class="column is-12" v-if="order.completed_at">
+                      <small>{{ SessionUser.objects.orders.columns.completed_at.label }}: {{ order.completed_at }}</small>
+                    </div>
+                    <div class="column is-12" v-if="isPendingHandheld(order)">
+                      <small class="has-text-warning">{{ SessionUser.objects.global.language.handheld_pending_order }} • {{ SessionUser.objects.global.language.confirmation_needed }}</small>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #content>
+                <div>
+                  <p v-show="!!order.po"><strong>PO:</strong> {{ order.po || '-' }}</p>
+                  <p v-show="!!order.reference"><strong>{{ SessionUser.objects.orders.columns.reference?.label || 'Reference' }}:</strong> {{ order.reference || '-' }}</p>
+                  <p v-show="!!order.notes"><strong>{{ SessionUser.objects.orders.columns.notes?.label || 'Noter' }}:</strong> {{ order.notes || '-' }}</p>
+                  <hr/>
+                  <!-- Actions and attachments -->
+                  <div class="buttons is-right">
+                    <ActionSettingsWheelButton
+                      v-bind:user_id="order.user_id"
+                      v-bind:order_id="order.id"
+                      v-bind:invoice_collection_id="order.invoice_collection_id"
+                      v-bind:reg_1="order.reg_1"
+                      @deleted="loadList()"
+                      :displayActionsDirectly="true"
+                    >
+                      <template #actions></template>
+                    </ActionSettingsWheelButton>
+                    <ActionSettingsWheelButton v-show="(order.attachments.length > 0 && (SessionUser.hasPermission('download_order_attachments_own') || SessionUser.hasPermission('download_order_attachments')))" :icon="'fas fa-paperclip'" :displayActionsDirectly="true">
+                      <template #actions>
+                        <template v-for="attachment in order.attachments" :key="attachment.id">
+                          <action-settings-wheel-item
+                              :label="attachment.content.document"
+                              icon="fas fa-paperclip"
+                              :click-action="() => downloadAttachment(attachment.id, order.id)"
+                              :disabled="false"
+                          />
+                        </template>
+                      </template>
+                    </ActionSettingsWheelButton>
+                  </div>
+                  <!-- Order line items -->
+                  <div class="content" v-if="props.invoiceView && isAutoExpandAll()">
+                    <OrderContentTable :order-id="order.id" />
+                  </div>
+                </div>
+              </template>
+            </WhiteBoxCard>
+          </div>
+        </template>
+        <!-- Footer count -->
+        <div class="column is-full">
+          <div class="has-text-centered">
+            <small>Viser {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</small>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #mobile>
+      <div class="columns is-multiline is-mobile">
+        <!-- Bulk actions when invoice view allows selection -->
+        <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
+          <div class="buttons">
+            <button
+                class="button is-small"
+                @click="invoiceSelectedCollections()"
+            >
+              {{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}} ({{selectedInvoiceCollections.length}})
+            </button>
+            <button
+                class="button is-small"
+                @click="selectAllInvoiceCollections()"
+                :class="{
+                  'is-light': !isInvoiceCollectionSelectedAll(),
+                  'is-dark': isInvoiceCollectionSelectedAll()
+                }"
+            >
+              {{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+            </button>
+            <button
+                class="button is-small"
+                @click="toggleAutoExpandAll()"
+                :class="{
+                  'is-light': !isAutoExpandAll(),
+                  'is-dark': isAutoExpandAll()
+                }"
+            >
+              {{ isAutoExpandAll() ? SessionUser.objects.global.language.collapse : SessionUser.objects.global.language.expand }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Orders as cards -->
+        <template v-for="order in getVisibleOrders" :key="order.id">
+          <div class="column is-full">
+            <WhiteBoxCard :forceStateFooter="true" :forceState="false" :defaultOpen="false" :toggleable="true" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="false">
+              <template #header>
+                <div class="card-header-title is-flex is-justify-content-space-between is-align-items-center" style="width: 100%;">
+                  <div>
+                    <div>
+                      <small>
+                        <!-- ID and status icon -->
+                        <span class="icon mr-1" :class="getOrderInvoiceStatusBarColor(order)">
+                          <i :class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"></i>
+                        </span>
+                        {{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span><span v-if="order.reg_3">, {{ order.reg_3 }}</span> <span class="has-text-grey-light">#{{ order.id }}</span></small>
+                    </div>
+                    <div v-if="!props.isCustomerView">
+                      <small>{{ order.customer_name }}</small>
+                    </div>
+                  </div>
+                  <div class="is-pulled-right" style="width: fit-content">
+                    <div class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center">
+                      <div class="column is-narrow has-text-right mb-2">
+                        <span class="tag is-light is-small mr-1">
+                          <small>{{ getDepartmentName(order.department_id) }}</small>
+                        </span>
+                      </div>
+                      <div class="column is-12 has-text-right mb-2">
+                        <span class="buttons is-right mr-1">
+                          <button v-if="props.invoiceView && props.allowSelectMultiple" class="button is-light is-small" @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
+                                  :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }">
+                            {{ isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }}
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #default>
+                <div class="card-content">
+                  <div class="columns is-mobile is-multiline">
+                    <div class="column is-12">
+                      <template v-if="!!order.reference">
+                        <div class="columns is-mobile is-gapless is-align-items-center mb-1">
+                          <div class="column is-narrow mr-1">
+                            <label class="label is-small">{{ SessionUser.objects.orders.columns.reference?.label || 'Reference' }}:</label>
+                          </div>
+                          <div class="column is-flex-grow-1">
+                            <small>
+                              <editable-table-column
+                                  :componentWrapper="'div'"
+                                  :object="order"
+                                  :loadList="loadList"
+                                  column="reference"
+                                  :hover-text="order.reference"
+                                  :parse-function="(value) => SessionUser.functions.text.truncate(order.reference, 20)"
+                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                  :permission-check-function="() => true"
+                              />
+                            </small>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-if="!!order.notes">
+                        <div class="columns is-mobile is-gapless is-align-items-center mb-1">
+                          <div class="column is-narrow mr-1">
+                            <label class="label is-small" :class="{ 'has-text-grey': !order.notes }">{{ SessionUser.objects.orders.columns.notes?.label || 'Noter' }}:</label>
+                          </div>
+                          <div class="column is-flex-grow-1">
+                            <small>
+                              <editable-table-column
+                                  :componentWrapper="'div'"
+                                  :object="order"
+                                  :loadList="loadList"
+                                  column="notes"
+                                  :hover-text="order.notes"
+                                  :parse-function="(value) => SessionUser.functions.text.truncate(order.notes, 20)"
+                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                  :permission-check-function="() => SessionUser.canAccessAdmin()"
+                              />
+                            </small>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-if="!!order.po">
+                        <div class="columns is-mobile is-gapless is-align-items-center mb-1">
+                          <div class="column is-narrow mr-1">
+                            <label class="label is-small" :class="{ 'has-text-grey': !order.po }">PO:</label>
+                          </div>
+                          <div class="column is-flex-grow-1">
+                            <small>
+                              <editable-table-column
+                                  :componentWrapper="'div'"
+                                  :object="order"
+                                  :loadList="loadList"
+                                  column="po"
+                                  :hover-text="order.po"
+                                  :parse-function="(value) => SessionUser.functions.text.truncate(order.po, 20)"
+                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                  :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
+                              />
+                            </small>
+                          </div>
+                        </div>
+                      </template>
+                      <!-- Order summary -->
+                      <hr v-if="!!order.reference || !!order.notes || !!order.po"/>
+                      <order-content-table :order-id="order.id" :summaryMode="true" :display-price="SessionUser.canAccessAdmin()" />
+                    </div>
+                    <div class="column is-12 has-text-centered">
+                      <hr/>
+                      <!-- Total net amount -->
+                      <strong>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</strong>
+                      <br/>
+                      <!-- Cashier • Time ago -->
+                      <small class="has-text-grey">{{ order.cashier_name }} • {{ SessionUser.functions.date.timeAgo(order.created_at) }}</small>
+                      <!-- Reg 1 • Reg 2 • Reg 3 -->
+                      <br/>
+                      <div class="has-text-grey">
+                        <div class="columns is-mobile is-gapless is-justify-content-center is-align-items-center">
+                          <div class="column is-narrow">
+                            <template v-if="!!order.reg_1">
+                              <div class="columns is-mobile is-gapless is-align-items-center">
+                                <div class="column is-narrow mr-1">
+                                  <label class="label is-small">Reg 1:</label>
+                                </div>
+                                <div class="column is-flex-grow-1">
+                                  <small>
+                                    <editable-table-column
+                                        :componentWrapper="'div'"
+                                        :object="order"
+                                        :loadList="loadList"
+                                        column="reg_1"
+                                        :hover-text="order.reg_1"
+                                        :parse-function="(value) => SessionUser.functions.text.truncate(order.reg_1, 20)"
+                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                        :permission-check-function="() => true"
+                                    />
+                                  </small>
+                                </div>
+                              </div>
+                            </template>
+                          </div>
+                          <template v-if="order.reg_2 || order.reg_3">
+                            <div class="column">
+                              <div class="columns is-mobile is-gapless is-align-items-center">
+                                <div class="column">
+                                  <label class="label is-small has-text-grey">•</label>
+                                </div>
+                              </div>
+                            </div>
+                          </template>
+                          <div class="column is-narrow" v-if="order.reg_2">
+                            <template v-if="!!order.reg_2">
+                              <div class="columns is-mobile is-gapless is-align-items-center">
+                                <div class="column is-narrow mr-1">
+                                  <label class="label is-small">Reg 2:</label>
+                                </div>
+                                <div class="column is-flex-grow-1">
+                                  <small>
+                                    <editable-table-column
+                                        :componentWrapper="'div'"
+                                        :object="order"
+                                        :loadList="loadList"
+                                        column="reg_2"
+                                        :hover-text="order.reg_2"
+                                        :parse-function="(value) => SessionUser.functions.text.truncate(order.reg_2, 20)"
+                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                        :permission-check-function="() => true"
+                                    />
+                                  </small>
+                                </div>
+                              </div>
+                            </template>
+                          </div>
+                          <template v-if="order.reg_2 && order.reg_3">
+                            <div class="column">
+                              <div class="columns is-mobile is-gapless is-align-items-center">
+                                <div class="column">
+                                  <label class="label is-small has-text-grey">•</label>
+                                </div>
+                              </div>
+                            </div>
+                          </template>
+                          <div class="column is-narrow" v-if="order.reg_3">
+                            <template v-if="!!order.reg_3">
+                              <div class="columns is-mobile is-gapless is-align-items-center">
+                                <div class="column is-narrow mr-1">
+                                  <label class="label is-small">Reg 3:</label>
+                                </div>
+                                <div class="column is-flex-grow-1">
+                                  <small>
+                                    <editable-table-column
+                                        :componentWrapper="'div'"
+                                        :object="order"
+                                        :loadList="loadList"
+                                        column="reg_3"
+                                        :hover-text="order.reg_3"
+                                        :parse-function="(value) => SessionUser.functions.text.truncate(order.reg_3, 20)"
+                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                        :permission-check-function="() => true"
+                                    />
+                                  </small>
+                                </div>
+                              </div>
+                            </template>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #content>
+              </template>
+              <template #footer>
+                <!-- Delete
+                <a class="card-footer-item" @click="SessionUser.objects.orders.functions.showDeleteConfirmationModal(order, loadList)">
+                  {{ SessionUser.objects.global.language.delete }}
+                </a>-->
+                <a class="card-footer-item" @click="openOrderActionsModal(order)">
+                  <span class="icon mr-1">
+                    <i class="fas fa-cog"></i>
+                  </span>
+                </a>
+                <!-- Go to booking (if any) -->
+                <a
+                    class="card-footer-item"
+                    v-if="order.booking_id"
+                    @click="redirectDepartmentBookingPage(order.booking_id, order.department_id, false)"
+                >
+                  <span class="icon mr-1">
+                    <i class="fas fa-calendar-alt"></i>
+                  </span>
+                  <span>{{ SessionUser.objects.order_bookings.meta.labels.single }}</span>
+                </a>
+                <!-- Go to order page -->
+                <a class="card-footer-item" @click="redirectDepartmentOrderPage(order.id, order.department_id, false)">
+                  <span class="icon mr-1">
+                    <i class="fas fa-arrow-right"></i>
+                  </span>
+                </a>
+              </template>
+            </WhiteBoxCard>
+          </div>
+        </template>
+        <!-- Footer count -->
+        <div class="column is-full">
+          <div class="has-text-centered">
+            <small>Viser {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</small>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ViewportResponsiveWrapper>
   <InvoiceMultipleCollectionsModal
       v-if="isInvoiceMultipleCollectionsModalOpen"
       v-bind:in-progress="invoiceCollectionQueueInProgress"
@@ -1123,6 +1580,35 @@ const isPendingHandheld = (order) => {
       v-bind:queued="invoiceCollectionQueue.length"
       @dismissed="isInvoiceMultipleCollectionsModalOpen = true"
     />
+  <!-- Order actions menu modal -->
+  <div class="modal" :class="{ 'is-active': isOrderActionsModalOpen }" v-if="selectedOrderForActionsMenu">
+    <div class="modal-background" @click="closeOrderActionsModal"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ SessionUser.objects.global.language.actions }}</p>
+        <button class="delete" aria-label="close" @click="closeOrderActionsModal"></button>
+      </header>
+      <section class="modal-card-body">
+        <ActionSettingsWheelButton
+          v-bind:user_id="selectedOrderForActionsMenu.user_id"
+          v-bind:order_id="selectedOrderForActionsMenu.id"
+          v-bind:invoice_collection_id="selectedOrderForActionsMenu.invoice_collection_id"
+          v-bind:reg_1="selectedOrderForActionsMenu.reg_1"
+          v-bind:reg_2="selectedOrderForActionsMenu.reg_2"
+          v-bind:reg_3="selectedOrderForActionsMenu.reg_3"
+          v-bind:order_booking_id="selectedOrderForActionsMenu.booking_id"
+          v-bind:department_id="selectedOrderForActionsMenu.department_id"
+          @deleted="loadList()"
+          :displayActionsDirectly="true"
+        >
+          <template #actions></template>
+        </ActionSettingsWheelButton>
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-light is-link is-fullwidth" @click="closeOrderActionsModal">{{ SessionUser.objects.global.language.close }}</button>
+      </footer>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep2.vue b/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
index 8de225af..74a9b087 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
@@ -39,7 +39,7 @@ const right_tabs = [
     <div class="columns">
       <!-- Choose products -->
       <div class="column is-8-desktop pl-0 pr-3">
-        <SelectProductsFormPOS class="mt-3" category="null" />
+        <SelectProductsFormPOS class="mt-3" category="null" :isCustomerBooking="false"/>
         <PosNotes :notes="notes" class="mt-3" :isAddFormVisible="false" :isOldNotesVisible="true"/>
       </div>
       <!-- Current order items -->
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
index 2c3c80e6..77ed9f0b 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
@@ -31,7 +31,10 @@ import PosDepartmentStepMobileAttachments
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileAttachments.vue";
 import PosDepartmentStep1MobileTransactionHistory
   from "@/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue";
-import {attachments} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import {
+  attachments,
+  popups
+} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
 // Debug mode flag
 const debug_mode = ref(false);
 // Debug array to store request results
@@ -169,6 +172,7 @@ const onAutomaticSelection = (object: PosSearchResult | null) => {
     reference: object?.reference || null,
     last_order_id: object?.lastOrderId || null,
     wash_subscription: object?.washSubscription,
+    booking_id: object?.bookingId || null,
   } as PosVehicle;
   switch (vehicles.activeVehicleIndex.value) {
     case 1:
@@ -269,7 +273,7 @@ onUnmounted(() => {
         </div>
         <!-- Take picture button (When attachment view is active) -->
         <div class="is-flex is-justify-content-center">
-          <PosDepartmentStepMobileButtonNextStep :isDark="true" v-if="views.attachmentView.value" style="width: 100%;" class="mb-2" :customDisabled="false" :customAction="() => { attachments.takePicture(); }">
+          <PosDepartmentStepMobileButtonNextStep :isWhite="false" v-if="views.attachmentView.value" style="width: 100%;" class="mb-2" :customDisabled="false" :customAction="() => { attachments.takePicture(); }" :buttonClasses="['has-background-primary-dark', 'has-text-black']">
             <span class="is-float-left has-text-white">{{ SessionUser.objects.global.language.take_picture }}</span>
             <span class="is-float-right has-text-white">
               <!-- Picture icon -->
@@ -281,9 +285,9 @@ onUnmounted(() => {
         </div>
         <div class="is-flex is-justify-content-center">
           <!-- Next step button (If not in attachment view) -->
-          <PosDepartmentStepMobileButtonNextStep style="width: 100%;" v-if="!views.attachmentView.value"/>
+          <PosDepartmentStepMobileButtonNextStep style="width: 100%;" v-if="!views.attachmentView.value" :buttonClasses="['has-background-primary', 'has-text-black']" :isWhite="false"/>
           <!-- Next step button (If in attachment view) -->
-          <PosDepartmentStepMobileButtonNextStep style="width: 100%;" v-if="views.attachmentView.value" :customDisabled="false" :customAction="() => { views.attachmentView.value = false; }">
+          <PosDepartmentStepMobileButtonNextStep style="width: 100%;" v-if="views.attachmentView.value" :customDisabled="false" :customAction="() => { views.attachmentView.value = false; }" :buttonClasses="['has-background-primary', 'has-text-black']" :isWhite="false">
             <span class="is-float-left has-text-dark">{{ SessionUser.objects.global.language.close }}</span>
             <span class="is-float-right has-text-dark">
               <!-- x icon -->
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
index 02bc8c67..261cd6db 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { setTransparency, setBackgroundColor, backgroundColors } from "@/components/viewport/page/headers/ViewportHeaderSettings.vue";
-import { onMounted, ref, watch } from "vue";
+import {onMounted, onUnmounted, ref, watch} from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import PosDepartmentStepMobile2Product
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue";
@@ -31,6 +31,7 @@ import PosDepartmentStepMobile2AdditionalItems
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue";
 import PosDepartmentStepMobile2Customer
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Customer.vue";
+import { pendingBookings, getVehiclePlateBooking } from "@/components/shop/POSDepartmentProcess.vue";
 
 
 onMounted(() => {
@@ -58,6 +59,11 @@ onMounted(() => {
   fetchLastOrder(1);
   fetchLastOrder(2);
   fetchLastOrder(3);
+
+  // Watch for scroll events to handle long press detection
+  window.addEventListener('scroll', onScroll, true);
+  // Try to auto-apply pending booking when Step 2 opens
+  applyPendingBookingFromSelection();
 });
 
 const applyPotentialCustomerNumberChange = (oldId, newId) => {
@@ -74,6 +80,128 @@ watch(customer_id, (newId, oldId) => {
 
 const lastFetchedPrimaryItemProduct = ref<PosProduct | null>(null); // This is used to make sure all the addons are fetched when the last order is selected.
 
+// Keep track so we only apply a booking once (idempotent)
+const lastAppliedBookingId = ref<number | null>(null);
+
+const getSelectedPendingBooking = () => {
+  // Prefer explicit booking id if present
+  const bookingId = metadata.getBookingId?.() ?? metadata.bookingId?.value ?? null;
+  let booking = null as any;
+  if (bookingId) {
+    booking = pendingBookings.value?.find?.((b: any) => b?.id === bookingId) || null;
+    if (booking) return booking;
+  }
+  // Fallback: try match current primary vehicle registration
+  const reg = vehicles?.vehicle_1?.value?.reg || null;
+  if (reg) {
+    try {
+      booking = getVehiclePlateBooking(reg);
+    } catch (e) {
+      booking = null;
+    }
+  }
+  return booking || null;
+}
+
+const fetchProductById = async (id: number): Promise<PosProduct> => {
+  // Fetch product with final price for current department/customer. Fallback to a minimal shape.
+  try {
+    // Note: metadata.getCustomerId exists in flow; fallback to global customer_id if missing
+    const custId = (metadata.getCustomerId && metadata.getCustomerId()) || (customer_id?.value ? parseInt(customer_id.value as any) : null);
+    const product = await SessionUser.objects.products.get.single(id, {
+      department_id: department_id.value,
+      customer_id: custId,
+      category_id: null,
+      final_price: true
+    });
+    return product as PosProduct;
+  } catch (e) {
+    console.error('Failed to fetch product', id, e);
+    // Minimal fallback; name/price will be set by caller when available
+    return { id, name: 'Produkt', price: 0, subscription_allowed: false } as PosProduct;
+  }
+}
+
+const applyPendingBookingFromSelection = async () => {
+  const booking: any = getSelectedPendingBooking();
+  if (!booking) return;
+  if (lastAppliedBookingId.value === booking.id) return; // avoid duplicate application
+
+  try {
+    // Update metadata booking id if not set
+    if (!metadata.getBookingId || !metadata.getBookingId()) {
+      metadata.setBookingId && metadata.setBookingId(booking.id);
+    }
+
+    // Set PO number on the order if provided by the booking
+    if (booking.po && typeof booking.po === 'string' && booking.po.trim() !== '') {
+      try {
+        await SessionUser.objects.orders.set.po(order_id.value, booking.po);
+        console.warn('Applied PO from booking:', booking.po);
+      } catch (e) {
+        console.error('Failed to set PO on order from booking', e);
+      }
+    }
+
+    // Map booking items to primary + addons
+    const items: any[] = Array.isArray(booking.items) ? booking.items : [];
+    if (!items.length) {
+      lastAppliedBookingId.value = booking.id;
+      return;
+    }
+
+    // Primary product is the first item
+    const primaryRaw = items[0];
+    const primaryId = parseInt(primaryRaw?.id);
+    if (!primaryId || isNaN(primaryId)) {
+      lastAppliedBookingId.value = booking.id;
+      return;
+    }
+    const primaryProduct = await fetchProductById(primaryId);
+    // Prefer booking price if provided, otherwise keep fetched price
+    if (typeof primaryRaw.price === 'number') primaryProduct.price = primaryRaw.price;
+    primaryProduct.name = primaryRaw?.name || primaryProduct.name;
+    primaryProduct.quantity = 1; // Primary item quantity is handled as 1 in order creation
+    // Apply as primary item
+    transactionItems.setPrimaryItem(primaryProduct as any);
+
+    // Remaining items become addons
+    const addonRawList = items.slice(1);
+    const addonProducts = await Promise.all(addonRawList.map(async (raw: any) => {
+      const id = parseInt(raw?.id);
+      if (!id || isNaN(id)) return null;
+      const p = await fetchProductById(id);
+      if (typeof raw.price === 'number') p.price = raw.price;
+      p.name = raw?.name || p.name;
+      p.quantity = raw?.quantity || 1;
+      return p;
+    }));
+    const preparedAddons = addonProducts
+        .filter(p => !!p)
+        .map(p => transactionItems.convertProductToAddon(p as any, { quantity: (p as any)?.quantity || 1 }));
+
+    if (!transactionItems.primaryItem.value) {
+      // Safety: if primary was cleared/changed while awaiting fetches, set again
+      transactionItems.setPrimaryItem(primaryProduct as any);
+    }
+    // Attach addons to primary
+    if (transactionItems.primaryItem.value) {
+      // Keep any existing addons that may have been set previously only if they are different.
+      transactionItems.primaryItem.value.addons = preparedAddons as any;
+      primaryProduct.addons = preparedAddons as any;
+    }
+
+    lastAppliedBookingId.value = booking.id;
+    //console.warn('Applied pending booking to cart (primary + addons):', booking.id, primaryProduct, preparedAddons);
+    //console.warn('Current transaction items after applying booking:', transactionItems.primaryItem.value);
+    lastFetchedPrimaryItemProduct.value = primaryProduct; // Update last fetched primary item
+    // Hide the vehicle selection as booking has been applied
+    vehicleSelection.value = false;
+  } catch (e) {
+    console.error('Failed to apply pending booking to Step 2', e);
+  }
+}
+
 const fetchPrimaryItemProduct = () => {
   if (!vehicles.vehicle_1.value.type && !transactionItems.primaryItem.value) {
     vehicleSelection.value = true; // Force the user to select a product.
@@ -158,6 +286,7 @@ const layout = {
 const primaryProduct = ref(null);
 const pointerDownTime = ref<Date>(null);
 const pointerUpTime = ref<Date>(null);
+const pointerDownScrollPosition = ref(0); // Track the scroll position when the pointer is pressed down (To prevent triggering when scrolling with touch)
 const pointerDown = () => {
   // Record the time when the pointer is pressed down
   const instanceTime = new Date();
@@ -184,6 +313,19 @@ const pointerUp = () => {
   pointerUpTime.value = new Date();
 };
 
+const onScroll = (event: Event) => {
+  // If the user scrolls while the pointer is down, cancel the long press detection
+  if (pointerDownTime.value) {
+    const target = event.target as HTMLElement;
+    const currentScrollPosition = target.scrollTop;
+    // If the scroll position has changed significantly, cancel the long press
+    if (Math.abs(currentScrollPosition - pointerDownScrollPosition.value) > 10) {
+      pointerDownTime.value = null;
+      pointerUpTime.value = null;
+    }
+  }
+}
+
 const onBeforeComplete = () => {
   // This function is called before the step is completed
   console.log('On before complete called');
@@ -195,56 +337,6 @@ const onBeforeComplete = () => {
     }
     // If the transaction items contain a wash certificate, create a booking for it
     const hasWashCertificate = transactionItems.containsWashCertificate();
-    let bookingPromise = Promise.resolve(true);
-    if (hasWashCertificate && !metadata.getBookingId()) {
-      // Create a booking for the wash
-      //SessionUser.objects.forms.functions.submit(
-      bookingPromise = <Promise<any>>SessionUser.objects.forms.functions.submit(
-          {
-            /**
-             * {
-             *     "id": "BOOK_WASH",
-             *     "BOOK_WASH_field_department_id": 2,
-             *     "BOOK_WASH_field_wash_type": [
-             *         3
-             *     ],
-             *     "BOOK_WASH_field_customer_number": 12345678,
-             *     "BOOK_WASH_field_contact_email": "example@truckwash.dk",
-             *     "BOOK_WASH_field_reference": "example",
-             *     "BOOK_WASH_field_registration_number_tractor": "example123",
-             *     "BOOK_WASH_field_registration_number_trailer": "example456",
-             *     "BOOK_WASH_field_wants_wash_certificate": true,
-             *     "BOOK_WASH_field_wants_wash_certificate_email": "example@truckwash.dk",
-             *     "BOOK_WASH_field_date": "2025-09-23",
-             *     "BOOK_WASH_field_wants_pickup": false,
-             *     "BOOK_WASH_field_notes": "Dette er et exempel."
-             * }
-             */
-            id: 'BOOK_WASH',
-            BOOK_WASH_field_department_id: department_id.value,
-            BOOK_WASH_field_wash_type: [3],
-            BOOK_WASH_field_customer_number: customer_id.value,
-            BOOK_WASH_field_contact_email: getCustomerEmail() || '',
-            BOOK_WASH_field_reference: reference.value || '',
-            BOOK_WASH_field_registration_number_tractor: vehicles.vehicle_1.value?.reg || '',
-            BOOK_WASH_field_registration_number_trailer: vehicles.vehicle_2.value?.reg || 'INGEN',
-            BOOK_WASH_field_wants_wash_certificate: true,
-            BOOK_WASH_field_wants_wash_certificate_email: getCustomerEmail() || '',
-            BOOK_WASH_field_date: new Date().toISOString().split('T')[0], // Set the date to today
-            BOOK_WASH_field_wants_pickup: false,
-            BOOK_WASH_field_notes: notes.value || '',
-          }
-      ).then(response => {
-        console.warn('Booking created for wash certificate:', response.data.data);
-        // Attach the booking ID to the order metadata
-        metadata.setBookingId(response.data.data.id);
-        SessionUser.objects.orders.set.booking_id(order_id, response.data.data.id);
-        resolve(true);
-      }).catch(error => {
-        console.error('Error creating booking for wash certificate:', error);
-        reject(new Error('Error creating booking for wash certificate'));
-      });
-    }
     // Add the order items to the transaction
     SessionUser.objects.global.add.object(
         '/order/items',
@@ -296,7 +388,7 @@ const onBeforeComplete = () => {
       // Combine addon and additional item promises
       addonPromises.push(...additionalPromises);
       // IF the booking is being created, wait for it to finish first
-      return bookingPromise.then(() => Promise.all(addonPromises));
+      return Promise.all(addonPromises);
     }).then(() => {
       // After successfully adding the order item, resolve the promise
       resolve(true);
@@ -307,6 +399,14 @@ const onBeforeComplete = () => {
   });
 }
 
+// Re-try applying booking whenever booking id or vehicle reg changes
+watch(() => metadata.bookingId?.value, () => {
+  applyPendingBookingFromSelection();
+});
+watch(() => vehicles?.vehicle_1?.value?.reg, () => {
+  applyPendingBookingFromSelection();
+});
+
 // Watch for changes in the primary item and update the vehicle selection if necessary
 // Utility: map source addons and carry over quantities from previous addons by product.id
 const mapAddonsWithQuantity = (sourceAddons = [], previousAddons = []) =>
@@ -399,6 +499,8 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
   }
 });
 
+
+
 </script>
 
 <template>
@@ -406,10 +508,12 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
     <PosDepartmentStep2MobileVehicleSelection @close="vehicleSelection = false"/>
     <!-- Buttons -->
     <PosDepartmentStepMobileFixedBottomControl>
+      <!-- Buttons -->
       <!-- Next button -->
-      <PosDepartmentStepMobileButtonNextStep :isDark="true" :customAction="() => { vehicleSelection = false; fetchPrimaryItemProduct(); }">
-        <span class="is-float-left has-text-white">{{ SessionUser.objects.global.language.next }}</span>
-        <span class="is-float-right has-text-white">
+      <PosDepartmentStepMobileButtonNextStep :isWhite="false" :customAction="() => { vehicleSelection = false; fetchPrimaryItemProduct(); }" :buttonClasses="['has-background-primary', 'has-text-black']" v-show="vehicles.vehicle_1.value.type">
+        <span class="is-float-left " v-if="false">{{ SessionUser.objects.global.language.next }}</span>
+        <span class="is-float-left">{{ primaryItem ? primaryItem.name : SessionUser.objects.global.language.next }}</span>
+        <span class="is-float-right ">
             <!-- Arrow right icon -->
             <i class="fas fa-arrow-right"></i>
           </span>
@@ -422,7 +526,8 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
   <template v-else>
     <div class="is-flex is-flex-direction-column is-justify-content-space-between is-gap-2">
       <!-- Customer selection -->
-      <PosDepartmentStepMobile2Customer subtitle="" :label="customer_name"/>
+      <h3 class="is-size-5 has-text-weight-bold">{{ customer_name }}</h3>
+      <PosDepartmentStepMobile2Customer subtitle="" :label="customer_name" v-show="false"/>
       <!-- Registration numbers -->
       <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
       <!-- Product -->
@@ -441,7 +546,7 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
           @click="lastOrders.select(1)"
           :classes="layout.classes" :label="'ordered on...'" :subtitle="'Subtitle'" :lastOrder="lastOrders.get(1)"/>
       <!-- Addons -->
-      <PosDepartmentStepMobile2Addons :addons="transactionItems.primaryItem.value?.addons || []" :label="'Add-ons'"/>
+      <PosDepartmentStepMobile2Addons :addons="transactionItems.primaryItem.value?.addons || []" :label="'Add-ons'" :compact="false"/>
       <!-- Notes -->
       <ControlField>
         <ControlFieldInputLabel label="Notes" :classes="layout.classes" :optional="true"/>
@@ -457,9 +562,9 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
       <!-- Buttons -->
       <PosDepartmentStepMobileFixedBottomControl>
         <!-- Complete button -->
-        <PosDepartmentStepMobileButtonNextStep :isDark="true" :onBeforeStep="() => onBeforeComplete()">
-          <span class="is-float-left has-text-white">Gennemfør</span>
-          <span class="is-float-right has-text-white">{{ SessionUser.functions.currency.toLocal(transactionItems.getTransactionTotal())}}</span>
+        <PosDepartmentStepMobileButtonNextStep :isDark="false" :onBeforeStep="() => onBeforeComplete()" :buttonClasses="['has-background-primary', 'has-text-white']">
+          <span class="is-float-left">Afslut</span>
+          <span class="is-float-right">{{ SessionUser.functions.currency.toLocal(transactionItems.getTransactionTotal())}}</span>
         </PosDepartmentStepMobileButtonNextStep>
         <div>
           <PosDepartmentStepMobileButtonClearAll/>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue
index fbe69027..0f8d24a4 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useGeolocation } from "@vueuse/core";
-import { watch } from "vue";
+import { watch, defineEmits } from "vue";
 import { locations } from "../objects/PosDepartmentStepMobileFlow.vue";
+const emits = defineEmits<{
+  (e: 'location-updated', coords: { latitude: number | null; longitude: number | null }): void;
+}>();
 const { coords, locatedAt, error, resume, pause } = useGeolocation({
   enableHighAccuracy: true,
   maximumAge: 30000,
@@ -18,6 +21,7 @@ const onUpdate = (newCoords: { latitude: number | null; longitude: number | null
       timestamp: new Date(),
       errorMessage: error.value ? error.value.message : null,
     })
+    emits('location-updated', newCoords);
   }
 };
 watch(coords, (newCoords) => {
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumberInputField.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumberInputField.vue
index f6dd1382..f13f8d2a 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumberInputField.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumberInputField.vue
@@ -12,16 +12,18 @@ const props = defineProps({
     default: ''
   }
 });
-const emit = defineEmits(['update:modelValue', 'update:hasFocus']);
+const emit = defineEmits(['update:modelValue', 'update:hasFocus', 'onInput']);
 const modelValue = ref(props.modelValue);
 const hasFocus = ref(false);
 watch(() => props.modelValue, (newValue) => {
-  modelValue.value = newValue;
+  modelValue.value = newValue.toUpperCase();
 });
 watch(modelValue, (newValue) => {
+  modelValue.value = newValue.toUpperCase();
   emit('update:modelValue', newValue);
 });
 watch(hasFocus, (newValue) => {
+  modelValue.value = modelValue.value.toUpperCase();
   emit('update:hasFocus', newValue);
 });
 
@@ -41,6 +43,10 @@ watch(hasFocus, (newValue) => {
   }
 });
 
+const onInput = (value: string) => {
+  emit('onInput', value);
+}
+
 </script>
 
 <template>
@@ -55,6 +61,8 @@ watch(hasFocus, (newValue) => {
               :class="{ 'is-searched': hasFocus }"
               type="text"
               v-model="modelValue"
+              @input="onInput($event.target.value.toUpperCase())"
+              autocomplete="off"
               v-on:focusin="hasFocus = true"
               v-on:focusout="hasFocus = false"
             />
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue
index c49988c1..addf2783 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue
@@ -20,6 +20,10 @@ const props = defineProps({
   compact: {
     type: Boolean,
     default: false
+  },
+  showPrices: {
+    type: Boolean,
+    default: true
   }
 });
 const emit = defineEmits(["update:addons"]);
@@ -42,6 +46,63 @@ const getLabel = (addon: Addon) => {
   //return `${addon.name} / ${SessionUser.functions.currency.toLocal(addon.price)}`;
 }
 
+/**
+ * When double-clicking on the product, it will add 1 to the quantity
+ */
+const doubleClickTimeout = 500; // milliseconds
+const doubleClickTimers = ref<{ [key: string]: number | null }>({});
+
+/**
+ * Function to add a product to the add-ons list
+ * @param addon
+ */
+const onAddProduct = (addon: Addon) => {
+  // Check if the product was just added
+  if (doubleClickTimers.value[addon.id]) {
+    // Double-click detected, clear the timeout
+    clearTimeout(doubleClickTimers.value[addon.id]);
+    doubleClickTimers.value[addon.id] = null;
+    // Check if the product can have more quantity
+    if (addon.quantity >= addon.max && addon.max !== -1) {
+      // If the product max is reached, it will not be added.
+      return;
+    }
+    addon.quantity = addon.quantity + 1;
+    emit('update:addons', [...props.addons])
+    // Set the timeout again to allow for the next double-click
+    doubleClickTimers.value[addon.id] = window.setTimeout(() => {
+      doubleClickTimers.value[addon.id] = null;
+    }, doubleClickTimeout);
+    return;
+  }
+  // Single-click detected, add the product to the list
+  // If the product is already has a quantity, set it to 0
+  if (addon.quantity > 0) {
+    addon.quantity = 0;
+    emit('update:addons', [...props.addons])
+    return;
+  }
+  addon.quantity = (addon.min > 0 ? addon.min : 1);
+  // Set a timeout to handle double-clicks.
+  // If the product max is reached, it will not be added.
+  if (addon.quantity >= addon.max && addon.max !== -1) {
+    // If the product max is reached, it will not be added.
+    emit('update:addons', [...props.addons])
+    return;
+  }
+  doubleClickTimers.value[addon.id] = window.setTimeout(() => {
+    doubleClickTimers.value[addon.id] = null;
+  }, doubleClickTimeout);
+  emit('update:addons', [...props.addons])
+}
+
+const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
+  return addons.sort((a, b) => {
+    const priorityA = a.product.order_priority || 0;
+    const priorityB = b.product.order_priority || 0;
+    return priorityA - priorityB;
+  });
+}
 
 </script>
 
@@ -49,13 +110,14 @@ const getLabel = (addon: Addon) => {
   <template v-if="addons.length > 0"> <!-- If there are add-ons available -->
     <p class="custom-label">{{ props.label }}</p>
     <div>
-    <template v-for="addon in props.addons" :key="addon.id">
+    <template v-for="addon in sortAddonsByProductOrderPriority(props.addons)" :key="addon.id">
       <PosDepartmentStepMobile2CategoryProduct
           :compact="props.compact"
           :price="addon.price"
           :label="getLabel(addon)"
           :piktogram="addon.product.piktogram"
-          @addProduct="addon.quantity = (addon.min > 0 ? addon.min : 1); emit('update:addons', [...props.addons])"
+          :showPrices="props.showPrices"
+          @addProduct="onAddProduct(addon)"
           :customButton="addon.quantity > 0">
         <span class="custom-select-quantity-container">
             <ControlSelectAmount
@@ -180,7 +242,7 @@ const getLabel = (addon: Addon) => {
 }
 .custom-label {
   /* Add-ons */
-
+  padding-bottom: 24px;
   width: 60px;
   height: 16px;
 
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Categories.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Categories.vue
index 0a041b73..5f48836f 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Categories.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Categories.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import GenericTag from "@/components/viewport/page/templates/generic/graphics/GenericTag.vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
-import {onMounted} from "vue";
+import {onMounted, defineProps} from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 // Function to fetch categories based on the department ID
+const props = defineProps({
+  // Optional list of category IDs to restrict the displayed categories to
+  restrictCategories: {
+    type: Array as () => number[],
+    required: false,
+    default: () => [],
+  },
+});
 // This function will be called when the component is mounted
 const fetchCategories = async (departmentId: number) => {
   await SessionUser.objects.department_categories.get.single(departmentId)
@@ -16,7 +24,11 @@ const fetchCategories = async (departmentId: number) => {
         //  name: "Suggested",
         // });
         // Add the categories to the pos.categories object
-        response.forEach((result: {category: {id: number, name: string}}) => {
+        SessionUser.objects.department_categories.functions.orderCategories(response).forEach((result: {category: {id: number, name: string}}) => {
+          // If restrictCategories prop is set, only add categories that are in the list
+          if (props.restrictCategories.length > 0 && !props.restrictCategories.includes(result.category.id)) {
+            return;
+          }
           pos.categories.add({
             id: result.category.id,
             name: result.category.name,
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue
index 812b7259..226d1fa9 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue
@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
     required: false
+  },
+  showPrices: {
+    type: Boolean,
+    default: true,
   }
 });
 
@@ -61,25 +65,28 @@ const imageStyleCompact = {
 </script>
 
 <template>
-  <div style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;">
-    <div class="columns is-vcentered is-mobile">
-      <div class="column is-narrow">
+  <div style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;" class="mb-1">
+    <div class="columns is-vcentered is-mobile" :class="props.customButton ? 'has-quantity' : ''">
+      <div class="column is-narrow" @click="onClick" style="cursor: pointer;">
         <img :src="getPicture(props.piktogram)" :alt="props.label" class="product-image"
              :style="props.compact ? imageStyleCompact : imageSize"
              style="border-radius: 8px; object-fit: contain;" />
       </div>
-      <div class="column">
+      <div class="column" @click="onClick" style="cursor: pointer;">
         <template v-if="!props.compact">
           <h1 class="title is-6">{{ props.label }}</h1>
-          <h2 class="subtitle is-6">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
+          <h2 class="subtitle is-6" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
+          <h2 class="subtitle is-6" v-else>&nbsp;</h2>
         </template>
         <template v-else>
           <h1 class="title is-6" style="font-size: small">{{ props.label }}</h1>
-          <h2 class="subtitle is-6" style="font-size: smaller">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
+          <h2 class="subtitle is-6" style="font-size: smaller" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
+          <h2 class="subtitle is-6" style="font-size: smaller" v-else>&nbsp;</h2>
         </template>
       </div>
       <div class="column is-narrow">
-        <button class="custom-button-product" @click="onClick" v-if="!props.customButton" :style="props.compact ? imageStyleCompact : imageSize">
+        <slot name="right"/>
+        <button class="custom-button-product" @click="onClick" v-if="!props.customButton" :style="props.compact ? imageStyleCompact : imageSize" v-show="false">
                 <span class="custom-icon">
                   <Plus width="100%" height="100%" />
                 </span>
@@ -135,4 +142,14 @@ const imageStyleCompact = {
   padding: 0px;
   gap: 0px;
 }
+.has-quantity {
+  border-radius: 10px;
+  background-color: #5173d4;
+}
+.has-quantity .column .title {
+  color: #FFFFFF;
+}
+.has-quantity .column .subtitle {
+  color: rgba(255, 255, 255, 0.6);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
index 09d65d13..6fabb8a3 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
@@ -15,23 +15,23 @@ const props = defineProps({
 
 <template>
   <!-- Box -->
-  <div class="box">
+  <div class="box" style="border: 3px solid rgb(0,45,255);">
     <!-- Product image -->
     <div class="has-text-centered">
       <img :src="getPicture(props?.product?.piktogram || props?.product?.id || '')" :alt="props?.product?.name || 'N/A'" class="product-image">
     </div>
     <!-- Product id -->
-    <div class="tag mb-2">
+    <div class="tag mb-2" v-show="false">
       <span>No. {{ props?.product?.piktogram || props?.product?.id }}</span>
     </div>
     <!-- Product name and price -->
     <div class="columns is-mobile is-vcentered">
       <!-- Product name -->
-      <div class="column is-6">
+      <div class="column is-narrow">
         <p class="title is-5">{{ props?.product?.name || '' }}</p>
       </div>
       <!-- Product price -->
-      <div class="column is-6 has-text-right">
+      <div class="column has-text-right" v-show="false">
         <p class="title is-5 is-grey">{{ SessionUser.functions.currency.toLocal(props?.product?.price || 0) }}</p>
       </div>
     </div>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Products.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Products.vue
index 25c9b95f..dee3a3da 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Products.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Products.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {watch, defineEmits, defineProps, ref} from "vue";
+import {watch, defineEmits, defineProps, ref, defineSlots} from "vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import PosDepartmentStepMobile2CategoryProduct
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
@@ -10,6 +10,7 @@ import { department_id, customer_id } from "@/components/shop/POSDepartmentProce
 import PosDepartmentStepMobile2Addons
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
 import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
+import { orderProducts } from "@/components/shop/Products.vue";
 
 const emits = defineEmits(["addProduct"]);
 const props = defineProps({
@@ -26,6 +27,7 @@ const props = defineProps({
     default: false,
   },
 });
+const slots = defineSlots();
 
 // Function to fetch categories based on the department ID
 // This function will be called when the component is mounted
@@ -34,7 +36,7 @@ const fetchProducts = async (category: PosCategory, departmentId: number) => {
       .then((response) => {
         console.log("Products fetched for category:", category.name, response);
         pos.productList.clear();
-        response.forEach((result: PosProduct) => {
+        orderProducts(response).forEach((result: PosProduct) => {
           pos.productList.add(result);
         });
         // TODO: Update prices of products based on customer pricing rules
@@ -110,7 +112,11 @@ watch(() => props.addons, (newAddons) => {
             :price="product.price"
             :label="product.name"
             :piktogram="product.piktogram"
-          />
+          >
+          <template #right>
+            <slot name="right" :product="product"/>
+          </template>
+        </PosDepartmentStepMobile2CategoryProduct>
       </template>
     </template>
     <template v-else>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2RegistrationNumbers.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2RegistrationNumbers.vue
index a0c6b665..3d2bd059 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2RegistrationNumbers.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2RegistrationNumbers.vue
@@ -53,7 +53,7 @@ const parseVehicleStatus = (status: any) => {
     <div :class="layout.columnClasses">
       <PosDepartmentStepMobile1RegistrationNumber2 :class="layout.classes" :hideLabel="true" @click="onClick('reg_2', reg_2)" />
     </div>
-    <div :class="layout.columnClasses">
+    <div :class="layout.columnClasses" v-show="!!pos.vehicles.vehicle_3.value">
       <PosDepartmentStepMobile1RegistrationNumber3 :class="layout.classes" :hideLabel="true" @click="onClick('reg_3', reg_3)" />
     </div>
   </div>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
index 38d9862a..5e39769f 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
@@ -8,6 +8,7 @@ import ContinueArrow from "@/components/viewport/elements/icons/ContinueArrow.vu
 import { vehicles, metadata, getCustomerId, popups, resetPos, attachments, transactionHistory } from "../objects/PosDepartmentStepMobileFlow.vue";
 import Swal from "sweetalert2";
 import LongPressListener from "@/components/viewport/elements/wrappers/LongPressListener.vue";
+import {views} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
 const selectCustomerString = `${SessionUser.objects.global.language.select} ${SessionUser.objects.global.language.customer.toLowerCase()}`;
 
 const props = defineProps({
@@ -40,13 +41,20 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  // Button classes
+  buttonClasses: {
+    type: Array as () => string[],
+    default: () => [],
+  },
 });
 
 const updateReference = () => {
+  if (!!order_id.value && order_id.value > 0)
   SessionUser.objects.orders.set.reference(order_id.value, reference.value);
 }
 
 const updateNotes = () => {
+  if (!!order_id.value && order_id.value > 0)
   SessionUser.objects.orders.set.notes(order_id.value, order_notes.value);
 }
 
@@ -136,6 +144,8 @@ const step1 = () => {
   reg_1.value = vehicles.vehicle_1.value?.reg || "";
   reg_2.value = vehicles.vehicle_2.value?.reg || "";
   reg_3.value = vehicles.vehicle_3.value?.reg || "";
+  // Reset the vehicle selection
+  views.vehicleSelection.value = false;
   // Merge references and notes
   mergeReferences();
   mergeNotes();
@@ -226,9 +236,15 @@ const step2 = () => {
     // If there is a booking ID, complete the booking
     SessionUser.objects.orders.set.booking_id(order_id.value, metadata.getBookingId());
     // Check if the booking has been completed
-    SessionUser.objects.bookings.functions.isBookingCompleted(metadata.getBookingId()).then((isBookingCompleted: boolean) => {
+    SessionUser.objects.order_bookings.get.single(metadata.getBookingId()).then((booking: any) => {
+      const isBookingCompleted = booking?.order_id && booking.order_id > 0;
       if (!isBookingCompleted) {
-        popups.select('complete_booking', {});
+        // Set the order bookings id to the metadata
+        if (metadata.getBookingId() && metadata.getBookingId() > 0) {
+          SessionUser.objects.order_bookings.set.order_id(metadata.getBookingId(), order_id.value).then(() => {
+            popups.select('complete_booking', {});
+          });
+        }
         // Listen for the booking to be completed
         awaitBookingCompletion(() => {
           completeOrder();
@@ -425,11 +441,20 @@ const defaultLongPressBehavior = () => {
   popups.select('select_customer');
 }
 
+/**
+ * Colors:
+ * Primary:
+ * :buttonClasses="['has-background-primary', 'has-text-black']"
+ * Secondary:
+ * :buttonClasses="['has-background-primary-dark', 'has-text-black']"
+ */
+
 </script>
 
 <template>
   <LongPressListener @long-press="onLongPress">
-    <GenericButton @click="onClick" :class="{'white': props.isWhite, 'has-background-black': props.isDark, 'is-loading': metadata.getLoadingState()}"
+    <GenericButton @click="onClick" :class="{'white': props.isWhite, 'has-background-black': props.isDark, 'is-loading': metadata.getLoadingState(), ...(props.buttonClasses.reduce((acc, curr) => ({ ...acc, [curr]: true }), {}))}"
+                   class="is-size-6-mobile is-size-5-tablet is-size-4-desktop"
                    :disabled="!isRequirementsForClickMet()" v-show="isVisible">
       <!-- Default content if no slot is provided -->
       <template v-if="!$slots.default">
@@ -457,5 +482,42 @@ const defaultLongPressBehavior = () => {
 </template>
 
 <style scoped>
-
+.has-text-black >:not(.icon) {
+  color: black !important;
+}
+/* Loading state */
+.is-loading {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.is-loading > *:not(.icon) {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out;
+}
+/* Loading animation for the button */
+.is-loading::after {
+  transition: opacity 0.6s ease-in-out;
+  content: "";
+  position: absolute;
+  top: auto;
+  left: 50%;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  margin-left: -0.5em;
+  /* Set the color to the original text color */
+  border: 0.2em solid white;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  display: inline-block;
+  vertical-align: top;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  pointer-events: none;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupAddCustomer.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupAddCustomer.vue
new file mode 100644
index 00000000..d6593758
--- /dev/null
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupAddCustomer.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { computed, defineEmits, watch, ref } from "vue";
+import { PosSearchResult } from "../objects/PosSearchResult.vue";
+import CustomerSearchField from "@/components/search/economic/customerSearchField.vue";
+import { searchCustomerResults, isSearching } from "@/components/search/economic/customerSearch.vue";
+import ControlFieldInputSearchResults
+  from "@/components/viewport/elements/controls/fields/search/ControlFieldInputSearchResults.vue";
+import { searchAndSelectCustomer } from "@/components/shop/POSDepartmentProcess.vue";
+import { metadata, vehicles } from "../objects/PosDepartmentStepMobileFlow.vue";
+import VehicleCustomerSuggestionsPos from "@/components/forms/department/pos/input/vehicleCustomerSuggestionsPos.vue";
+import {
+  actionButtons,
+  popups
+} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+/**
+ * Variables
+ */
+const searchQuery = ref("");
+const searchResult = ref(/**{
+    "vat": 41004355,
+    "status": "Normal",
+    "name": "Truckwash ApS",
+    "address": "Letland Alle 2",
+    "zipcode": 2630,
+    "city": "Taastrup",
+    "protected": true,
+    "phone": "21754690",
+    "website": null,
+    "email": "mikkel@truckwash.dk",
+    "fax": null,
+    "startdate": "2019-12-11",
+    "enddate": null,
+    "employees": 14,
+    "industrycode": 953190,
+    "industrydesc": "Reparation og vedligeholdelse af motorkøretøjer i.a.n.",
+    "companytype": "APS",
+    "companydesc": "Anpartsselskab",
+    "owners": [
+  "DELOITTE STATSAUTORISERET REVISIONSPARTNERSELSKAB",
+  "MBL Revision I/S",
+  "WASH GROUP A/S"
+]
+}*/null);
+const lastSearchResult = ref(null); // This is used to change the autofilled fields, when the search result changes
+const searching = ref(false);
+const error = ref(popups.get().props.error); // Used to display an error message if the customer creation fails
+const search = (query: string) => {
+  return SessionUser.request("/cvr/search", "GET", {
+    query: query,
+  }).then((response) => {
+    console.warn(response, 'response');
+    searchResult.value = response.data.data;
+  }).catch((error) => {
+    console.error(error);
+    searchResult.value = null;
+  }).finally(() => {
+    searching.value = false;
+    changeAutofilledFields();
+  });
+};
+/**
+ * Form fields
+ */
+const cvr = ref("");
+const companyPhone = ref("");
+const invoiceEmail = ref("");
+const contactEmail = ref("");
+const contactPhone = ref("");
+/**
+ * Autofill fields, when search result changes
+ * If the operator has changed the values in the fields, we want to keep them, so we can autofill them again when the search result changes
+ */
+const changeAutofilledFields = () => {
+  if (lastSearchResult.value !== null) {
+    cvr.value = "";
+    if (lastSearchResult.value.phone === companyPhone.value) {
+      companyPhone.value = "";
+    }
+    if (lastSearchResult.value.phone === contactPhone.value) {
+      contactPhone.value = "";
+    }
+    if (lastSearchResult.value.email === contactEmail.value) {
+      contactEmail.value = "";
+    }
+    if (lastSearchResult.value.email === invoiceEmail.value) {
+      invoiceEmail.value = "";
+    }
+  }
+  // Fill the fields with the new search result
+  if (searchResult.value !== null) {
+    if (cvr.value === "") {
+      cvr.value = searchResult.value.vat.toString();
+    }
+    if (companyPhone.value === "") {
+      companyPhone.value = searchResult.value.phone;
+    }
+    if (contactPhone.value === "") {
+      contactPhone.value = searchResult.value.phone;
+    }
+    if (contactEmail.value === "") {
+      contactEmail.value = searchResult.value.email;
+    }
+    if (invoiceEmail.value === "") {
+      invoiceEmail.value = searchResult.value.email;
+    }
+  }
+  lastSearchResult.value = searchResult.value;
+}
+
+/**
+ * Watch the validity of the fields and emit an event to the parent component
+ * If the fields are valid, we can enable the "Add Customer" button
+ */
+watch([cvr, companyPhone, invoiceEmail, contactEmail, contactPhone], (newValues) => {
+  // Remove the "Add Customer" button if it exists
+  const index = popups.get().actionButtons.findIndex((button) => button.label === "Tilføj kunde");
+  if (index !== -1) {
+    popups.get().actionButtons.splice(index, 1);
+  }
+  // Add the "Add Customer" button if all fields are filled
+  const requiredFields = [cvr, companyPhone, contactPhone];
+  if (searchResult.value !== null &&
+      searchResult.value.name !== "Ikke fundet" &&
+      requiredFields.every((field) => field.value !== "")) {
+    popups.get().actionButtons.push({
+      label: "Tilføj kunde",
+      onClick: () => {
+        popups.get().actionButtons = []; // Remove all action buttons to prevent multiple clicks
+        try {
+          SessionUser.request("/auth/register/cvr", "POST", {
+            cvr: cvr.value,
+            companyPhone: parseInt(companyPhone.value),
+            invoiceEmail: invoiceEmail.value,
+            contactEmail: contactEmail.value,
+            contactPhone: parseInt(contactPhone.value),
+            searchResult: searchResult.value,
+          }).then((response) => {
+            console.warn(response, 'response register cvr');
+            searchAndSelectCustomer(companyPhone.value);
+            metadata.setCustomerId(parseInt(companyPhone.value));
+            emit('close');
+          }).catch((error) => {
+            console.error(error);
+            const errorResponse = SessionUser.functions.parseErrorMessage(error);
+            if (errorResponse !== null) {
+              popups.get().props.error = `Der opstod en fejl under oprettelsen af kunden: ${errorResponse}`;
+              // Reset the buttons
+              popups.get().actionButtons = popups.get().actionButtons = [{...actionButtons.default.value.cancel}];
+              return;
+            }
+            popups.get().props.error = "Der opstod en fejl under oprettelsen af kunden. Prøv igen.";
+          });
+        } catch (error) {
+          console.error(error);
+          popups.get().props.error = "Der opstod en fejl under oprettelsen af kunden. Prøv igen.";
+        }
+      },
+      color: "primary",
+    });
+  }
+})
+
+</script>
+
+<template>
+  <div style="overflow-y: auto; overflow-x: hidden; height: 100%; padding-bottom: 10px;">
+    <div class="mx-3">
+      <div class="field">
+        <label class="label"><small>CVR</small></label>
+        <div class="control has-icons-right" :class="{'is-loading': searching}">
+          <input
+              v-model="searchQuery"
+              @input="searching = true; search(searchQuery);"
+              class="input is-searched"
+              :class="{'is-danger': searchResult === null, 'is-success': searchResult !== null && searchResult.name !== 'Ikke fundet'}"
+              type="text"
+              placeholder="Søg CVR nummer..."
+          />
+          <span class="icon is-right" :class="{'has-text-danger': (searchResult === null || searchResult.name === 'Ikke fundet') && !searching, 'has-text-success': (searchResult !== null && searchResult.name !== 'Ikke fundet') && !searching}">
+            <i class="fas fa-check" v-if="(searchResult !== null && searchResult.name !== 'Ikke fundet') && !searching"></i>
+            <i class="fas fa-exclamation-triangle" v-else-if="(searchResult === null || searchResult.name === 'Ikke fundet') && !searching"></i>
+            <i class="fas fa-search" v-else-if="!searching"></i>
+          </span>
+        </div>
+        <p class="help" v-if="searchResult !== null && searchResult.name !== 'Ikke fundet'">{{ searchResult.name }}</p>
+      </div>
+      <!-- Company phone -->
+      <div class="field">
+        <label class="label"><small>Firma telefon</small></label>
+        <div class="control">
+          <input v-model="companyPhone" class="input" type="text" placeholder="Firma telefon" :disabled="searchResult === null" :class="{'is-danger': searchResult !== null && companyPhone === ''}"/>
+        </div>
+      </div>
+      <!-- Invoice email -->
+      <div class="field">
+        <label class="label"><small>Faktura email</small></label>
+        <div class="control">
+          <input v-model="invoiceEmail" class="input" type="text" placeholder="Faktura email" :disabled="searchResult === null"/>
+        </div>
+      </div>
+      <!-- Contact email -->
+      <div class="field">
+        <label class="label"><small>Kontakt email</small></label>
+        <div class="control">
+          <input v-model="contactEmail" class="input" type="text" placeholder="Kontakt email" :disabled="searchResult === null"/>
+        </div>
+      </div>
+      <!-- Contact phone -->
+      <div class="field">
+        <label class="label"><small>Kontakt telefon</small></label>
+        <div class="control">
+          <input v-model="contactPhone" class="input" type="text" placeholder="Kontakt telefon" :disabled="searchResult === null" :class="{'is-danger': searchResult !== null && contactPhone === ''}"/>
+        </div>
+      </div>
+      <!-- Error message -->
+      <div class="notification is-danger" v-if="popups.get().props.error !== null">
+        {{ popups.get().props.error}}
+      </div>
+    </div>
+      <!-- Search results -->
+      <!--{{ searchResult }}-->
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupCompleteBooking.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupCompleteBooking.vue
index 6a2423eb..f216a045 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupCompleteBooking.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupCompleteBooking.vue
@@ -2,6 +2,7 @@
 import { computed, defineEmits, watch, ref } from "vue";
 import { metadata } from "../objects/PosDepartmentStepMobileFlow.vue";
 import FormDisplay from "@/components/displays/FormDisplay.vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
 const emit = defineEmits<{
   (e: 'close'): void;
 }>();
@@ -11,18 +12,43 @@ const onSuccessfulCertificateSubmission = (response: any) => {
   console.log("Certificate generated successfully:", response);
   emit('close');
 }
+
+const safetySealNumber = ref("");
 </script>
 
 <template>
   <div>
     <!-- Booking completion form -->
-    <FormDisplay
+    <!-- Safety seal certificate field -->
+    <div class="field">
+      <label class="label">Safety Seal</label>
+      <div class="control">
+        <input
+          type="text"
+          class="input is-searched"
+          placeholder="Indtast safety seal nummer"
+          v-model="safetySealNumber"
+        />
+      </div>
+    </div>
+    <!-- Generate certificate button -->
+    <div class="buttons is-centered mb-4">
+      <button class="button is-light" @click="emit('close')">
+        Intet vaskecertifikat
+      </button>
+      <button
+          class="button is-primary"
+          @click="SessionUser.objects.order_bookings.functions.complete(metadata.getBookingId(), safetySealNumber, onSuccessfulCertificateSubmission)">
+        Generer vaskecertifikat
+      </button>
+    </div>
+    <!--<FormDisplay
         :form_identifier="'GENERATE_BOOKING_WASH_CERTIFICATE'"
         v-bind:validator_options="{validateBookingId: {default: metadata.getBookingId(), locked: true, visible: false}}"
         :onSuccessfulSubmission="onSuccessfulCertificateSubmission"
         :showSuccessSubmitAlert="false"
         :showResetButton="false"
-    />
+    />-->
   </div>
 </template>
 
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosAddon.vue b/src/components/displays/department/pos/steps/mobile/objects/PosAddon.vue
index fcfe9196..7b1642a1 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosAddon.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosAddon.vue
@@ -13,6 +13,8 @@ export type Addon = {
   product?: PosProduct; // The product details for the add-on
 };
 
+export type PosAddon = Addon;
+
 export default defineComponent({
   name: "PosAddon",
 });
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
index 0960b3d3..6dd2d22d 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
@@ -157,6 +157,16 @@ const defaultActionButtons = ref<{ [key: string]: PosActionButton }>({
     },
     color: 'primary'
   },
+  addCustomer: {
+    label: 'Tilføj kunde',
+    description: 'Tilføj en ny kunde til systemet',
+    onClick: () => {
+      console.warn('Add Customer button clicked');
+      // Open the add customer popup
+      popups.select('add_customer', { props: { error: null, canCreate: true } });
+    },
+    color: 'primary',
+  },
   editReference: {
     label: 'Redigér reference',
     description: 'Redigér reference for denne transaktion',
@@ -229,7 +239,7 @@ const addDefaultPopups = () => {
     message: 'Bekræft venligst valget af kunde til denne transaktion',
     component: 'select_customer',
     style: {height: '50vh'},
-    actionButtons: [{...defaultActionButtons.value.cancel}],
+    actionButtons: [{...defaultActionButtons.value.cancel}, {...defaultActionButtons.value.addCustomer, label: 'Ny kunde'}],
   });
   // Completed
   addPopup({
@@ -315,6 +325,18 @@ const addDefaultPopups = () => {
     ],
     props: {base64String: null, filename: null}
   });
+  // Add customer
+  addPopup({
+    id: 'add_customer',
+    title: 'Tilføj kunde',
+    message: 'Indtast venligst oplysninger for den nye kunde',
+    component: 'add_customer',
+    style: {maxHeight: '60vh'},
+    actionButtons: [
+      {...defaultActionButtons.value.cancel}
+    ],
+    props: {cvr: null, contactEmail: null, contactPhone: null, companyPhone: null, invoiceEmail: null, searchResult: null, canCreate: false, error: null}
+  });
 }
 // Function to check if a popup is defined in the list
 const isPopupDefined = (id: string): boolean => {
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue b/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
index 05a52374..2a32d3c0 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
@@ -20,8 +20,10 @@ import PosDepartmentStepMobilePopupCustomerNotes
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupCustomerNotes.vue";
 import PosDepartmentStepMobilePopupImage
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupImage.vue";
+import PosDepartmentStepMobilePopupAddCustomer
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupAddCustomer.vue";
 
-export type PopupComponentKey = 'select_customer' | 'completed_transaction' | 'complete_booking' | 'error' | 'add_product_note' | 'select_vehicle' | 'change_reference' | 'customer_notes' | 'image_viewer';
+export type PopupComponentKey = 'select_customer' | 'completed_transaction' | 'complete_booking' | 'error' | 'add_product_note' | 'select_vehicle' | 'change_reference' | 'customer_notes' | 'image_viewer' | 'add_customer';
 
 export const PopupComponents = {
   select_customer: PosDepartmentStepMobilePopupSelectCustomer,
@@ -33,6 +35,7 @@ export const PopupComponents = {
   change_reference: PosDepartmentStepMobilePopupSetReference,
   customer_notes: PosDepartmentStepMobilePopupCustomerNotes,
   image_viewer: PosDepartmentStepMobilePopupImage,
+  add_customer: PosDepartmentStepMobilePopupAddCustomer
 } as const;
 
 export const popupComponentKeyToComponent = (key: PopupComponentKey) => PopupComponents[key];
@@ -64,6 +67,7 @@ export default defineComponent({
     PosDepartmentStepMobilePopupSetReference,
     PosDepartmentStepMobilePopupCustomerNotes,
     PosDepartmentStepMobilePopupImage,
+    PosDepartmentStepMobilePopupAddCustomer
   },
   props: {
     popup: {
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
index 8565c163..b7dd2a0c 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
@@ -10,6 +10,10 @@ import VerifiedCustomer from "@/components/viewport/elements/icons/VerifiedCusto
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import { PosVehicle } from "@/components/displays/department/pos/steps/mobile/objects/PosVehicle.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
+import PosDepartmentStepMobileFixedBottomControl
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+import PosDepartmentStepMobileButtonNextStep
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
 // Define the close event to emit when the component is closed
 const emit = defineEmits(["close"]);
 // Define the props
@@ -49,7 +53,7 @@ const registrationNumber3 = ref("");
 const label3 = ref("Reg 3");
 
 // Function to set a value if it is not null
-function setIfNotNull(variable: string, value: { registrationNumber: string, customerStatus: any, customerId?: number } | null) {
+function setIfNotNull(variable: string, value: { registrationNumber: string, customerStatus: any, customerId?: number, lastOrderId?: number } | null) {
   //console.warn("setIfNotNull", variable, value);
   if (value !== null) {
     switch (variable) {
@@ -61,6 +65,7 @@ function setIfNotNull(variable: string, value: { registrationNumber: string, cus
               reg: value.registrationNumber,
               status: value.customerStatus,
               customer_id: value.customerId,
+              last_order_id: value.lastOrderId,
             }
         )
         registrationNumber1.value = value.registrationNumber;
@@ -131,6 +136,7 @@ onMounted(() => {
   // If the reg_3 is not empty, set the expanded state to true
   expanded.value = reg_3.value !== "" || props.forceShowApplicable;
 });
+
 </script>
 
 <template>
@@ -141,6 +147,7 @@ onMounted(() => {
           v-model:modelValue="reg_1"
           v-model:label="label1"
           @focusout="setValueUserInput(1, reg_1)"
+          @onInput="reg_1 = $event"
       >
        <template #searchResults>
           <RegistrationNumberSearchResult @select="setIfNotNull('reg_1', $event)" :searchQuery="reg_1" :automaticallySelect="true"/>
@@ -183,11 +190,17 @@ onMounted(() => {
         <span class="m-2"><BarcodeScanner/></span>
         <span class="custom-label-button">{{ SessionUser.objects.global.language.or_scan_plates}}</span>
       </button>
-      <!-- Add vehicle button -->
-      <GenericButton class="p-5" @click="$emit('close')">
-        {{ SessionUser.objects.global.language.close}}
-      </GenericButton>
     </template>
+    <!-- Buttons -->
+    <PosDepartmentStepMobileFixedBottomControl v-if="props.showButtons">
+      <!-- Close button -->
+      <PosDepartmentStepMobileButtonNextStep :isWhite="false" :customAction="() => emit('close')" :customDisabled="false" :buttonClasses="['has-background-primary', 'has-text-black']">
+        <span class="is-float-left">{{ SessionUser.objects.global.language.close }}</span>
+        <span class="is-float-right">
+            <i class="fa-solid fa-xmark"></i>
+          </span>
+      </PosDepartmentStepMobileButtonNextStep>
+    </PosDepartmentStepMobileFixedBottomControl>
   </div>
 </template>
 
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
index b2260eb5..8ad8363f 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
@@ -102,9 +102,12 @@ const getTransactionError = (transaction: PosOrder) => {
 }
 
 const liveTransactions = ref(null)
+const isLoading = ref(true);
 
 const syncListTransactionHistory = async () => {
   let dateToday = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
+  isLoading.value = true;
+  // Fetch the list of orders created today for the current department
   SessionUser.objects.orders.get.list({filters: {
     'created_at-date_from': dateToday,
     'created_at-date_to': dateToday,
@@ -118,6 +121,10 @@ const syncListTransactionHistory = async () => {
     for (let i = 0; i < liveTransactions.value.length; i++) {
       pos.transactionHistory.add(liveTransactions.value[i]);
     }
+  }).catch((error) => {
+    console.error('Error syncing list of transactions:', error);
+  }).finally(() => {;
+    isLoading.value = false;
   });
 };
 
@@ -207,24 +214,17 @@ const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: b
       </div>
       <!-- Buttons -->
       <PosDepartmentStepMobileFixedBottomControl>
-        <!-- Clear button -->
-        <PosDepartmentStepMobileButtonNextStep class="mb-2" :isDark="true" :customAction="() => pos.transactionHistory.clear()" :customDisabled="false" v-if="pos.transactionHistory.get().length > 0" v-show="false">
-          <span class="is-float-left has-text-white">{{ SessionUser.objects.global.language.clear }}</span>
-          <span class="is-float-right has-text-white">
-            <i class="fa-solid fa-trash"></i>
-          </span>
-        </PosDepartmentStepMobileButtonNextStep>
         <!-- Refresh button -->
-        <PosDepartmentStepMobileButtonNextStep class="mb-2" :isDark="true" :customAction="() => syncListTransactionHistory()" :customDisabled="false">
+        <PosDepartmentStepMobileButtonNextStep class="mb-2" :isWhite="false" :customAction="() => syncListTransactionHistory()" :customDisabled="false" :buttonClasses="['has-background-primary-dark', 'has-text-black', ...isLoading ? ['is-loading'] : []]">
           <span class="is-float-left has-text-white">{{ SessionUser.objects.global.language.reload }}</span>
-          <span class="is-float-right has-text-white">
+          <span class="is-float-right has-text-white is-loading">
             <i class="fa-solid fa-arrows-rotate"></i>
           </span>
         </PosDepartmentStepMobileButtonNextStep>
         <!-- Close button -->
-        <PosDepartmentStepMobileButtonNextStep :isDark="true" :customAction="() => emit('close')" :customDisabled="false">
-          <span class="is-float-left has-text-white">{{ SessionUser.objects.global.language.close }}</span>
-          <span class="is-float-right has-text-white">
+        <PosDepartmentStepMobileButtonNextStep :isWhite="false" :customAction="() => emit('close')" :customDisabled="false" :buttonClasses="['has-background-primary', 'has-text-black']">
+          <span class="is-float-left">{{ SessionUser.objects.global.language.close }}</span>
+          <span class="is-float-right">
             <i class="fa-solid fa-xmark"></i>
           </span>
         </PosDepartmentStepMobileButtonNextStep>
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue
index e1832067..3d55842b 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {defineEmits, defineProps} from "vue";
+import {computed, defineEmits, defineProps, ref} from "vue";
 import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import GenericLabelSearch from "@/components/viewport/page/templates/generic/graphics/GenericLabelSearch.vue";
@@ -37,10 +37,16 @@ const props = defineProps({
     type: Object as () => Addon[],
     required: false,
   },
+  minimumCloseDelay: { // Minimum delay before allowing the component to be closed, in milliseconds
+    type: Number,
+    required: false,
+    default: 750
+  }
 });
 
 // Function to handle adding a product
 const onAddProduct = (product: any) => {
+  if (!canClose()) return;
   // If a custom onAddProduct function is provided, use it
   if (props.onAddProduct) {
     product.quantity = product.quantity || 1; // Ensure quantity is set
@@ -60,6 +66,9 @@ const onSearchClick = () => {
   }
   console.log("Search clicked");
 };
+const openedAt = ref(Date.now());
+const earliestCloseTime = computed(() => openedAt.value + props.minimumCloseDelay);
+const canClose = () => Date.now() >= earliestCloseTime.value;
 </script>
 
 <template>
@@ -73,7 +82,14 @@ const onSearchClick = () => {
     <!-- Product Recommendations -->
     <!--<PosDepartmentStepMobile2ProductRecommendations/>-->
     <!-- Products -->
-    <PosDepartmentStepMobile2Products @addProduct="onAddProduct" :asAddons="props.asAddons" :addons="props.addons"/>
+    <PosDepartmentStepMobile2Products @addProduct="onAddProduct" :asAddons="props.asAddons" :addons="props.addons">
+      <template v-slot:right>
+        <!-- Right arrow -->
+        <span class="icon is-small">
+          <i class="fas fa-chevron-right"></i>
+        </span>
+      </template>
+    </PosDepartmentStepMobile2Products>
     <!-- Next button
     <GenericButton class="p-5" @click="emit('close')">
       Next
diff --git a/src/components/displays/pagination/PaginationDisplay.vue b/src/components/displays/pagination/PaginationDisplay.vue
index fe5167d0..06890d08 100644
--- a/src/components/displays/pagination/PaginationDisplay.vue
+++ b/src/components/displays/pagination/PaginationDisplay.vue
@@ -1,5 +1,5 @@
 <script setup>
-defineProps(['metaItemsPerPage', 'loadFunction', 'isLoading', 'setMetaItemsPerPage'])
+defineProps(['metaItemsPerPage', 'loadFunction', 'isLoading', 'setMetaItemsPerPage', 'allowSmallScreen'])
 import { ref } from 'vue'
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 
@@ -21,10 +21,10 @@ window.addEventListener('resize', () => {
   <div class="py-2">
     <div class="columns is-vcentered is-multiline is-mobile">
       <!-- Change the number of items per page -->
-      <div class="column is-narrow my-3" :class="{ 'is-hidden': isSmall }">
-        <label class="label">Antal per side</label>
+      <div class="column is-narrow" :class="{ 'is-hidden': isSmall && !allowSmallScreen, 'my-3': !isSmall }">
+        <label class="label is-small">Per side</label>
         <div class="control">
-          <div class="select">
+          <div class="select" :class="{ 'is-small': isSmall }">
             <select v-model="selectedPerPage" @change="setMetaItemsPerPage(selectedPerPage); selectedPerPage.valueOf = selectedPerPage">
               <!-- If the selected number of items per page is not in the list, add it to the list -->
               <option v-if="!perPageOptions.includes(selectedPerPage)" :value="selectedPerPage" :class="{ 'is-skeleton': isLoading }" selected>{{ selectedPerPage }}</option>
diff --git a/src/components/displays/pagination/PaginationDisplayFilters.vue b/src/components/displays/pagination/PaginationDisplayFilters.vue
new file mode 100644
index 00000000..677d48da
--- /dev/null
+++ b/src/components/displays/pagination/PaginationDisplayFilters.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import {setFilter, getFilter} from "@/components/pagination/paginatedList.vue";
+import {computed, defineProps, onMounted, ref} from 'vue';
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import {BAutocomplete} from "buefy";
+
+/**
+ * Props:
+ * - departmentColumn: string (default: "department_id")
+ */
+const props = defineProps({
+  departmentColumn: {
+    type: String||undefined,
+    default: undefined,
+    required: false
+  },
+  productColumn: {
+    type: String||undefined,
+    default: undefined,
+    required: false
+  },
+  columnLabels: {
+    type: Object||undefined,
+    default: undefined,
+    required: false
+    // Example: { department: 'Department', product: 'Product Type' }
+  }
+})
+
+/**
+ * General functions (Filters)
+ */
+const getOptionsForSelect = (options: {label: string, value: string | number | undefined | null}[], searchQuery: string | undefined): {label: string, value: string | number | undefined | null}[] => {
+  if (!searchQuery) return options;
+  const query = searchQuery.toLowerCase();
+  let filteredOptions = options;
+  // Sort the options so that those starting with the query appear first
+  filteredOptions = filteredOptions.sort((a, b) => {
+    const aStartsWith = a.label.toLowerCase().startsWith(query) ? -1 : 1;
+    const bStartsWith = b.label.toLowerCase().startsWith(query) ? -1 : 1;
+    return aStartsWith - bStartsWith;
+  });
+  // Then filter the options based on the query
+  filteredOptions = filteredOptions.filter(option => option.label.toLowerCase().includes(query));
+  return filteredOptions;
+}
+
+type FilterType = {
+  label: string;
+  value: string | number | string[] | number[] | undefined | null;
+  columnName?: string;
+  type?: 'select' | 'input' | 'date' | 'checkbox';
+  options?: {label: string, value: string | number | undefined | null}[];
+  disabled?: boolean;
+  placeholder?: string;
+  icon?: string;
+  searchable?: boolean;
+  searchQuery?: string;
+  multiple?: boolean;
+  loading?: boolean;
+  loadFunction?: () => Promise<void>;
+  onInput?: (value: string | number | string[] | number[]) => void;
+  onChange?: (value: string | number | string[] | number[]) => void;
+};
+
+const setFilterValue = (filterName: string, value: string | number | string[] | number[]) => {
+  setFilter(filterName, value);
+}
+
+const getFilterValue = (filterName: string): string | number | string[] | number[] | undefined | null => {
+  return getFilter(filterName);
+}
+
+const departmentFilter = ref<FilterType>({
+  label: SessionUser.functions.ucFirst(SessionUser.objects.departments.meta.labels.single),
+  columnName: props.departmentColumn || 'department_id',
+  type: 'select',
+  multiple: false,
+  loading: false,
+  searchable: true,
+  placeholder: SessionUser.objects.global.language.search,
+  value: props.departmentColumn ? getFilterValue(props.departmentColumn) : undefined,
+  loadFunction: async () => {
+    // Load options dynamically if needed
+    if (departmentFilter.value.loading) return;
+    departmentFilter.value.loading = true;
+    try {
+      // Simulate async loading of options
+      const departments = await SessionUser.objects.departments.get.all();
+      departmentFilter.value.options = [
+        { label: SessionUser.objects.global.language.all, value: '*' },
+        ...departments.map((dept: any) => ({
+          label: dept.name,
+          value: dept.id
+        }))
+      ];
+    } catch (error) {
+      console.error('Error loading departments:', error);
+    } finally {
+      departmentFilter.value.loading = false;
+    }
+  },
+  options: [
+    { label: SessionUser.objects.global.language.all, value: '*' },
+    // Additional options can be loaded dynamically
+  ],
+  onChange: (value: string | number | string[] | number[]) => {
+    setFilterValue(props.departmentColumn || 'department_id', value);
+    departmentFilter.value.searchQuery = value.toString();
+    departmentFilter.value.value = value;
+  },
+  onInput: (value: string | number | string[] | number[]) => {
+    departmentFilter.value.searchQuery = value.toString();
+  },
+});
+
+const productFilter = ref<FilterType>({
+  label: SessionUser.functions.ucFirst(SessionUser.objects.products.meta.labels.single),
+  columnName: props.productColumn || 'product',
+  type: 'select',
+  multiple: false,
+  loading: false,
+  searchable: true,
+  placeholder: SessionUser.objects.global.language.search,
+  value: props.productColumn ? getFilterValue(props.productColumn) : undefined,
+  loadFunction: async () => {
+    // Load options dynamically if needed
+    if (productFilter.value.loading) return;
+    productFilter.value.loading = true;
+    try {
+      // Simulate async loading of options
+      const productTypes = await SessionUser.objects.vehicles.columns.type.options();
+      productFilter.value.options = [
+        { label: SessionUser.objects.global.language.all, value: '*' },
+        ...productTypes.map((type: any) => ({
+          label: type.name,
+          value: type.id
+        }))
+      ];
+    } catch (error) {
+      console.error('Error loading product types:', error);
+    } finally {
+      productFilter.value.loading = false;
+    }
+  },
+  options: [
+    { label: SessionUser.objects.global.language.all, value: '*' },
+    // Additional options can be loaded dynamically
+  ],
+  onChange: (value: string | number | string[] | number[]) => {
+    setFilterValue(props.productColumn || 'product', value);
+    productFilter.value.searchQuery = value.toString();
+    productFilter.value.value = value;
+  },
+  onInput: (value: string | number | string[] | number[]) => {
+    productFilter.value.searchQuery = value.toString();
+  },
+});
+
+const filters = computed<FilterType[]>(() => {
+  const filterList: FilterType[] = [];
+  if (props.departmentColumn) {
+    filterList.push(departmentFilter.value);
+  }
+  if (props.productColumn) {
+    filterList.push(productFilter.value);
+  }
+  // Additional filters can be added here
+  return filterList;
+});
+
+/**
+ * Auto load options for filters
+ */
+const loadFilters = async () => {
+  for (const filter of filters.value) {
+    // Load options dynamically if needed
+    if (filter.loadFunction) {
+      await filter.loadFunction();
+    }
+  }
+}
+
+const isFilterSet = (filter: FilterType): boolean => {
+  if (filter.multiple) {
+    return Array.isArray(filter.value) && filter.value.length > 0;
+  } else {
+    return filter.value !== undefined && filter.value !== null && filter.value !== '*';
+  }
+}
+
+onMounted(() => {
+  loadFilters();
+});
+
+const renderFilterName = (filter: FilterType) => {
+  return props?.columnLabels?.[filter.columnName] || filter.label
+}
+
+</script>
+
+<template>
+  <template
+    v-for="filter in filters"
+    :key="filter.label"
+  >
+    <!-- Select -->
+    <template v-if="filter.type === 'select'">
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <!-- Label -->
+          <label class="label is-small">
+            {{ renderFilterName(filter) }}
+            <span class="is-float-right">
+              <!-- Reset "button" -->
+              <template v-if="isFilterSet(filter)">
+                <span @click="filter.onChange ? filter.onChange(filter.multiple ? [] : '*') : null" class="is-clickable">
+                  <span class="mr-1">
+                    {{ SessionUser.objects.global.language.reset }}
+                  </span>
+                  <span class="icon is-small">
+                    <i class="fas fa-times-circle"></i>
+                  </span>
+                </span>
+              </template>
+            </span>
+          </label>
+          <div class="control">
+            <!-- Single select -->
+            <div class="select" v-if="!filter.multiple">
+              <!-- Searchable (autocomplete) -->
+              <BAutocomplete
+                v-if="filter.searchable"
+                :loading="filter.loading"
+                :placeholder="filter.placeholder || ''"
+                :open-on-focus="true"
+                :icon="filter.icon || ''"
+                :data="getOptionsForSelect(filter.options || [], filter.searchQuery).map(option => option.label) || []"
+                :model-value="filter.options?.find(option => option.value === filter.value)?.label || ''"
+                @input="(value) => {
+                  const selectedOption = filter.options?.find(option => option.label === value);
+                  if (selectedOption) {
+                    filter.onChange ? filter.onChange(selectedOption.value) : null;
+                  }
+                  console.warn('Search input: ', value.target.value);
+                  filter.onInput ? filter.onInput(value.target.value) : null;
+                }"
+                @select="(value) => {
+                  const selectedOption = filter.options?.find(option => option.label === value);
+                  if (selectedOption) {
+                    filter.onChange ? filter.onChange(selectedOption.value) : null;
+                  }
+                }"
+              />
+              <!-- Regular select -->
+              <select
+                v-else
+                :value="filter.value"
+                @change="(event) => {
+                  const selectedValue = event.target.value;
+                  filter.onChange ? filter.onChange(selectedValue) : null;
+                }"
+              >
+                <option
+                  v-for="option in filter.options"
+                  :key="option.value"
+                  :value="option.value"
+                >{{ option.label }}</option>
+              </select>
+            </div>
+            <!-- Multiple select goes here when relevant... -->
+          </div>
+        </div>
+      </div>
+    </template>
+    <!-- Date Picker -->
+    <!-- ... Other filter types can be added here ... -->
+  </template>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue b/src/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue
new file mode 100644
index 00000000..edf57d18
--- /dev/null
+++ b/src/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {search, metaSearch, isLoading, loadList} from "@/components/pagination/paginatedList.vue";
+import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
+</script>
+
+<template>
+  <!-- Top row: Reload, Search -->
+  <div class="columns is-vcentered is-multiline">
+    <div class="column">
+      <input
+          class="input"
+          type="text"
+          placeholder="Søg..."
+          v-model="metaSearch"
+          @input="search($event.target.value)"
+      />
+    </div>
+    <div class="column is-narrow">
+      <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">{{SessionUser.objects.global.language.reload}}</LoadButtonWhileAwait>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/pagination/TableLabeledPagination.vue b/src/components/displays/pagination/TableLabeledPagination.vue
new file mode 100644
index 00000000..b3012081
--- /dev/null
+++ b/src/components/displays/pagination/TableLabeledPagination.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { defineProps, ref } from 'vue';
+import {
+  isLoading,
+  loadList,
+  metaCurrentPage,
+  metaItemsPerPage,
+  metaTotalItems,
+  setMetaItemsPerPage,
+  setPage,
+} from "@/components/pagination/paginatedList.vue";
+import PaginationDisplayGeneralSearchReload
+  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+});
+const isSmall = ref(window.innerWidth < 1024);
+</script>
+
+<template>
+  <div>
+    <!-- Label -->
+    <h2 class="title is-4 mb-4">{{ label }}</h2>
+    <!-- Search & reload -->
+    <PaginationDisplayGeneralSearchReload/>
+    <!-- Filters -->
+    <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+      <template #paginationColumns>
+        <slot name="paginationDisplayFiltersElement"></slot>
+        <slot name="leftPaginationColumns"></slot>
+        <div class="column is-auto-fill my-3" v-if="!isSmall"/>
+        <div class="columns is-multiline">
+          <div class="column is-12 p-1 m-0"></div>
+          <slot name="rightPaginationColumns"></slot>
+        </div>
+      </template>
+    </PaginationDisplay>
+    <!-- Table -->
+    <section>
+      <slot name="default"></slot>
+    </section>
+    <!-- Pagination -->
+    <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue b/src/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue
index f0be9519..8edd247f 100644
--- a/src/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue
+++ b/src/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue
@@ -44,6 +44,9 @@ import PaginationNavigation from "@/components/displays/pagination/PaginationNav
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
+import PaginationDisplayGeneralSearchReload
+  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
 const router = useRouter();
 setEndpoint("/orders", false);
 // If the customer filter is set, filter the orders by the customer number
@@ -65,7 +68,7 @@ if (router.currentRoute.value.params.departmentId) {
   setOrder("created_at", "desc");
   setFilter("department_id", router.currentRoute.value.params.departmentId, false);
 } else {
-  setOrder("created_at", "desc");
+  setOrder("created_at", "desc", false);
 }
 
 // If the onlyFromInvoiceCollection prop is set, filter the orders by the invoice collection id
@@ -81,12 +84,12 @@ if (props.autoLoad) {
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input" type="text" :placeholder="'Søg i ' + SessionUser.objects.orders.meta.labels.multiple.toLowerCase()" v-if="!hideSearchField"/>
+  <PaginationDisplayGeneralSearchReload/>
   <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
     <template #paginationColumns>
       <!-- Sort by created_at -->
       <div class="column is-narrow my-3">
-        <label class="label">Order direction</label>
+        <label class="label is-small">Order direction</label>
         <div class="control">
           <div class="select">
             <select @change="setOrder('created_at', $event.target.value); loadList();">
@@ -96,11 +99,11 @@ if (props.autoLoad) {
           </div>
         </div>
       </div>
+      <PaginationDisplayFilters />
     </template>
   </PaginationDisplay>
   <OrdersTable :orders="list" />
   <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">{{SessionUser.objects.global.language.reload}}</LoadButtonWhileAwait>
 </template>
 
 <style scoped>
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
index 5b183acb..8aebf075 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
@@ -1,5 +1,7 @@
 <script setup>
 
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+
 const props = defineProps({
   onlyFromInvoiceCollection: {
     type: Number,
@@ -60,6 +62,10 @@ const props = defineProps({
   queryParameters : {
     type: Object,
     default: () => ({})
+  },
+  excludedOrderIds: {
+    type: Array, // Used to exclude specific order ids from the list, this will also ignore warnings about hidden orders
+    default: () => []
   }
 })
 import {defineProps, ref} from "vue";
@@ -91,6 +97,9 @@ import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue"
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
+import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
+import {now} from "@vueuse/core";
 
 const router = useRouter();
 setHideSearchField(props.hideSearch);
@@ -260,15 +269,19 @@ const doesEndpointMatch = (matcher) => {
 
 <template>
   <template v-if="doesEndpointMatch('/orders')">
-    <input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
-    <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" v-show="props.hideFilter === false">
-      <template #paginationColumns>
+    <TableLabeledPagination :label="SessionUser.objects.orders.meta.labels.multiple">
+      <template #paginationDisplayFiltersElement>
+        <PaginationDisplayFilters
+            :departmentColumn="'department_id'"
+        />
+      </template>
+      <template #leftPaginationColumns>
         <!-- Sort by created_at -->
-        <div class="column is-narrow my-3">
-          <label class="label">Order direction</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Order direction</label>
           <div class="control">
             <div class="select">
-              <select @change="setOrder('created_at', $event.target.value, true);">
+              <select @change="setOrder('created_at', $event.target.value); loadList();">
                 <option value="asc">Ascending (Oldest first)</option>
                 <option value="desc" selected>Descending (Newest first)</option>
               </select>
@@ -276,8 +289,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Invoice status -->
-        <div class="column is-narrow my-3">
-          <label class="label">Bogføringsstatus</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Bogføringsstatus</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('booked_invoice_id', $event.target.value, true);">
@@ -289,8 +302,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Error status -->
-        <div class="column is-narrow my-3">
-          <label class="label">Fejlstatus</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Fejlstatus</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('error_message', $event.target.value, true);">
@@ -302,8 +315,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Payment processor -->
-        <div class="column is-narrow my-3">
-          <label class="label">Betalingsprocessor</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Betalingsprocessor</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('processor', $event.target.value, true);">
@@ -317,8 +330,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Marked as complete ("Gennemført") -->
-        <div class="column is-narrow my-3">
-          <label class="label">Gennemført</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Gennemført</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('completed_at', $event.target.value, true);">
@@ -330,8 +343,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Multiple selection, customer has attribute -->
-        <div class="column is-narrow my-3">
-          <label class="label">Faktura valg</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Faktura valg</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
@@ -343,8 +356,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Multiple selection, customer has special arrangement -->
-        <div class="column is-narrow my-3">
-          <label class="label">Specialaftale</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Specialaftale</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
@@ -356,8 +369,8 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Multiple selection, customer has washing subscription -->
-        <div class="column is-narrow my-3">
-          <label class="label">Vaskeabonnement</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Vaskeabonnement</label>
           <div class="control">
             <div class="select">
               <select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
@@ -369,7 +382,7 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div>
         <!-- Multiple selection, customer has washing subscription -FIX
-        <div class="column is-narrow my-3">
+        <div class="column is-narrow">
           <label class="label">Only tank cleaning</label>s
           <div class="control">
             <div class="select">
@@ -382,115 +395,47 @@ const doesEndpointMatch = (matcher) => {
           </div>
         </div> -->
         <!-- Date from -->
-        <div class="column is-narrow my-3">
-          <label class="label">Fra dato</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Fra dato</label>
           <div class="control">
             <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
           </div>
         </div>
         <!-- Date to -->
-        <div class="column is-narrow my-3">
-          <label class="label">Til dato</label>
+        <div class="column is-narrow">
+          <label class="label is-small">Til dato</label>
           <div class="control">
             <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
           </div>
         </div>
-        <!-- Time shortcuts -->
-        <!-- Last month -->
-        <div class="column is-narrow my-3">
-          <label class="label">&nbsp</label>
-          <div class="control">
-            <button
-                class="button"
-                v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
-                @click="setFilterTime.last_month()"
-            >
-              <span class="icon">
-                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
-              </span>
-              <span>{{SessionUser.objects.global.language.time.last_month}}</span>
-              <span class="icon">
-              </span>
-            </button>
-          </div>
-        </div>
-        <!-- This month -->
-        <div class="column is-narrow my-3">
-          <label class="label">&nbsp</label>
-          <div class="control">
-            <button
-                class="button"
-                v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
-                @click="setFilterTime.this_month()"
-            >
-              <span class="icon">
-                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
-              </span>
-              <span>{{SessionUser.objects.global.language.time.this_month}}</span>
-              <span class="icon">
-              </span>
-            </button>
-          </div>
-        </div>
-        <!-- Today -->
-        <div class="column is-narrow my-3">
-          <label class="label">&nbsp</label>
-          <div class="control">
-            <button
-                class="button"
-                v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
-                @click="setFilterTime.today()"
-            >
-              <span class="icon">
-                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
-              </span>
-              <span>{{SessionUser.objects.global.language.time.today}}</span>
-              <span class="icon">
-              </span>
-            </button>
-          </div>
-        </div>
-        <!-- Yesterday -->
-        <div class="column is-narrow my-3">
-          <label class="label">&nbsp</label>
-          <div class="control">
-            <button
-                class="button"
-                v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
-                @click="setFilterTime.yesterday()"
-            >
-              <span class="icon">
-                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
-              </span>
-              <span>{{SessionUser.objects.global.language.time.yesterday}}</span>
-              <span class="icon">
-              </span>
-            </button>
-          </div>
-        </div>
-        <!-- All -->
-        <div class="column is-narrow my-3">
-          <label class="label">&nbsp</label>
-          <div class="control">
-            <button
-                class="button"
-                v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
-                @click="setFilterTime.all()"
-            >
-              <span class="icon">
-                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
-              </span>
-              <span>{{SessionUser.objects.global.language.time.all}}</span>
-              <span class="icon">
-              </span>
-            </button>
-          </div>
+      </template>
+      <template #rightPaginationColumns>
+        <div class="column is-12">
+        <!-- Shortcuts for date filters -->
+        <DatePeriodSelector :on-selection-change="(newSelectionStartDate, newSelectionToDate) => {
+                             const formattedStartDate = newSelectionStartDate.toISOString().split('T')[0];
+                             const formattedEndDate = newSelectionToDate.toISOString().split('T')[0];
+                             date_from = formattedStartDate;
+                             date_to = formattedEndDate;
+                             setFilter('created_at-date_from', formattedStartDate, true);
+                             setFilter('created_at-date_to', formattedEndDate, true);
+                             loadList();
+                            }"
+                            :visibility="{ showDailySelector: false, showWeeklySelector: false, showMultipleMonthWarning: false, showUpdateButton: false, showMonthSelector: false, showStartDate: false, showEndDate: false, showSelectionValidity: false, showYearSelector: false, showToLabel: false }"
+                            v-bind:selection="{ startDate: date_from ? new Date(date_from) : new Date(now()), endDate: date_to ? new Date(date_to) : new Date(now()) }"/>
         </div>
       </template>
-    </PaginationDisplay>
-    <OrdersTable :orders="list" :invoiceView="props.invoiceView" :allowSelectMultiple="true" v-bind:groupInvoiceCollection="props.groupInvoiceCollection" v-bind:showOnlyWithIds="props.showOnlyWithIds" v-bind:autoExpandAll="props.autoExpandAll"/>
-    <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" v-show="!props.hidePagination" />
-    <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
+      <template #default>
+        <OrdersTable :orders="list"
+                     :invoiceView="props.invoiceView"
+                     :allowSelectMultiple="true"
+                     v-bind:groupInvoiceCollection="props.groupInvoiceCollection"
+                     v-bind:showOnlyWithIds="props.showOnlyWithIds"
+                     v-bind:autoExpandAll="props.autoExpandAll"
+                     v-bind:excludedOrderIds="props.excludedOrderIds"
+        />
+      </template>
+    </TableLabeledPagination>
   </template>
 </template>
 
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/UsersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/UsersPagination.vue
index 809b6904..257fca8e 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/UsersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/UsersPagination.vue
@@ -48,7 +48,7 @@ if (props.autoLoad) {
     <template #paginationColumns>
       <!-- Sort by created_at -->
       <div class="column is-narrow my-3">
-        <label class="label">Rækkefølge</label>
+        <label class="label is-small">Rækkefølge</label>
         <div class="control">
           <div class="select">
             <select @change="setOrder('created_at', $event.target.value); loadList();">
diff --git a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
index d0e30fd2..31bb7fbb 100644
--- a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
@@ -90,7 +90,14 @@ window.addEventListener('resize', () => {
   isSmall.value = window.innerWidth < 1024;
 });
 
-
+const showNewOrderBookingsPortal = () => {
+  const departmentId = SessionUser.functions.getDepartmentIdFromUrl();
+  if (!departmentId) {
+    SessionUser.functions.redirectTo.user('/bookings', true);
+    return;
+  }
+  SessionUser.functions.redirectTo.department(SessionUser.functions.getDepartmentIdFromUrl(), 'modules/bookings', true);
+};
 </script>
 
 <template>
@@ -169,6 +176,9 @@ window.addEventListener('resize', () => {
       </div>
     </template>
   </PaginationDisplay>
+  <div class="notification is-warning is-light mb-3 is-clickable" @click="showNewOrderBookingsPortal()">
+    <strong>Bemærk:</strong> Du befinder dig på den gamle bookingportal, vi er i gang med at flytte historisk data til den nye. Du finder den nye booking portal <u>her</u>.
+  </div>
   <BookingsTable :objects="list" :meta="meta" class="mb-4" />
   <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" class="mt-3" />
   <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Opdater</LoadButtonWhileAwait>
diff --git a/src/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue b/src/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue
index d2607d03..d68fe769 100644
--- a/src/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {
-  isLoaded,
   isLoading,
   list,
   loadList,
@@ -9,27 +8,17 @@ import {
   metaTotalItems,
   setEndpoint,
   setMetaItemsPerPage,
-  setFilter,
-  getFilter,
   setPage,
-  search,
-  metaSearch,
   setOrder,
   meta
 } from "@/components/pagination/paginatedList.vue";
-import { useRouter } from "vue-router";
 import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
-
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
-import BookingsTable from "@/components/displays/user/bookings/bookingsTable.vue";
-import {departments} from "@/components/pagination/departmentTabs.vue";
-import {ref, watch} from "vue";
-import { Colors } from "@/ThemeConfig.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import InvoiceCollectionsTable from "@/components/displays/user/invoicecollections/InvoiceCollectionsTable.vue";
+import PaginationDisplayGeneralSearchReload
+  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 
-const router = useRouter();
 
 setEndpoint("/user/invoices", true);
 setOrder("created_at", "desc");
@@ -38,13 +27,11 @@ loadList();
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input mt-2" type="text" placeholder="Søg efter faktura" v-model="metaSearch" />
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-    <template #paginationColumns></template>
-  </PaginationDisplay>
-  <InvoiceCollectionsTable :objects="list" :meta="meta" class="mb-4" />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" class="mt-3" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Opdater</LoadButtonWhileAwait>
+  <TableLabeledPagination label="Oversigt over fakturaer">
+    <template #default>
+      <InvoiceCollectionsTable :objects="list" :meta="meta" />
+    </template>
+  </TableLabeledPagination>
 </template>
 
 <style scoped>
diff --git a/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
new file mode 100644
index 00000000..d75260fe
--- /dev/null
+++ b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
@@ -0,0 +1,207 @@
+<script setup>
+import {
+  list,
+  loadList,
+  setEndpoint,
+  setFilter,
+} from "@/components/pagination/paginatedList.vue";
+import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import { useRouter } from "vue-router";
+import { defineProps, onMounted, ref} from "vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue";
+import { departments, getDepartments } from "@/components/pagination/departmentTabs.vue";
+import { Colors } from "@/ThemeConfig.vue";
+
+/**
+ * Router
+ */
+const router = useRouter();
+/**
+ * Props
+ */
+const props = defineProps({
+  filters: {
+    type: Object,
+    default: () => ({}),
+    required: false
+  },
+})
+const orderIdFilter = ref('*');
+const onOrderIdFilterChange = (event) => {
+  const val = event.target.value;
+  orderIdFilter.value = val;
+  // Apply filter: '*' clears, 'is null' shows without order, 'not null' shows with order
+  setFilter('order_id', val);
+};
+
+// Department filter
+const departmentFilter = ref('*');
+const onDepartmentFilterChange = (event) => {
+  const val = event.target.value;
+  departmentFilter.value = val;
+  setFilter('department', val);
+};
+
+// Only today filter
+const onlyTodayFilter = ref('*');
+const onOnlyTodayFilterChange = (event, autoLoadList = true) => {
+  const val = event.target.value;
+  onlyTodayFilter.value = val;
+  if (val === '*') {
+    setFilter('datetime', val, false); // Clear filter
+    setFilter('datetime-date_from', null, false);
+    setFilter('datetime-date_to', null, false);
+  } else {
+    const startOfDay = new Date().setHours(0, 0, 0, 0);
+    const endOfDay = new Date().setHours(23, 59, 59, 999);
+    setFilter('datetime', null, false);
+    setFilter('datetime-date_from', new Date(startOfDay).toISOString(), false);
+    setFilter('datetime-date_to', new Date(endOfDay).toISOString(), false);
+  }
+  if (autoLoadList) {
+    loadList();
+  }
+};
+
+// Version selector + helpers
+const versionSelector = ref('new');
+const resetVersionToNew = () => {
+  versionSelector.value = 'new';
+};
+const showLegacyOrderBookingsPortal = () => {
+  const departmentId = SessionUser.functions.getDepartmentIdFromUrl();
+  if (!departmentId) {
+    SessionUser.functions.redirectTo.user('/bookings-legacy', true);
+    return;
+  }
+  SessionUser.functions.redirectTo.department(SessionUser.functions.getDepartmentIdFromUrl(), 'modules/bookings-legacy', true);
+};
+
+// Filters
+onMounted(() => {
+  setEndpoint(SessionUser.objects.order_bookings.meta.endpoint, false);
+  for (const [key, value] of Object.entries(props.filters)) {
+    let setFilterKey = true;
+    // Also set the filter controls if applicable
+    if (key === 'order_id') {
+      orderIdFilter.value = value;
+    } else if (key === 'department') {
+      departmentFilter.value = value;
+    } else if (key === 'only_today' && value === true) {
+      setFilterKey = false; // Since the only_today filter is handled separately
+      onOnlyTodayFilterChange({ target: { value: new Date().toISOString().split('T')[0] } }, false);
+    }
+    if (setFilterKey) {
+      setFilter(key, value, false);
+    }
+  }
+  loadList();
+  // Load departments for filter options
+  getDepartments().catch(() => {});
+});
+
+</script>
+
+<template>
+  <div>
+  <TableLabeledPagination label="Oversigt over bookinger">
+    <template #paginationDisplayFiltersElement>
+      <!-- Status filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">Status</label>
+          <div class="control">
+            <div class="select">
+              <select :value="orderIdFilter" @change="onOrderIdFilterChange">
+                <option value="*">Alle</option>
+                <option value="is null">Ikke udført</option>
+                <option value="not null">Udført</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Department filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">Afdeling</label>
+          <div class="control">
+            <div class="select">
+              <select :value="departmentFilter" @change="onDepartmentFilterChange">
+                <option value="*">Alle</option>
+                <option v-for="department in departments" :key="department.id" :value="department.id">{{ department.name }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Version selector -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">Version</label>
+          <div class="control">
+            <div class="select">
+              <select @change="showLegacyOrderBookingsPortal(); resetVersionToNew()" v-model="versionSelector">
+                <option value="new">Ny</option>
+                <option value="legacy">Gammel</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Only today filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">Kun i dag</label>
+          <div class="control">
+            <div class="select">
+              <select :value="onlyTodayFilter" @change="onOnlyTodayFilterChange">
+                <option value="*">Alle</option>
+                <option :value="new Date().toISOString().split('T')[0]">Ja</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #leftPaginationColumns>
+    </template>
+    <template #rightPaginationColumns>
+      <!-- Toggles and actions depending on route -->
+      <!-- User: Only today switch + New booking button -->
+      <div class="column is-narrow" v-if="router.currentRoute.value.path.startsWith('/user')">
+        <label class="label is-small">Vis kun dagens bookinger</label>
+        <div class="field">
+          <input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { onOnlyTodayFilterChange({ target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } }) }" :class="{ 'is-link': onlyTodayFilter !== '*' }" :checked="onlyTodayFilter !== '*'" />
+          <label for="today"></label>
+        </div>
+      </div>
+      <div class="column is-narrow is-float-right" v-if="router.currentRoute.value.path.startsWith('/user')">
+        <label class="label is-small">&nbsp;</label>
+        <button
+            class="button is-link"
+            @click="SessionUser.functions.redirectTo.external('/user/bookings/new', true)"
+        >
+          Ny booking
+        </button>
+      </div>
+      <!-- Admin: pending + only today combined switch -->
+      <div class="column is-narrow" v-if="router.currentRoute.value.path.startsWith('/admin')">
+        <label class="label is-small">Vis kun dagens afventende</label>
+        <div class="field">
+          <input id="today-pending" type="checkbox" class="switch is-rounded" @change="(event) => { onOnlyTodayFilterChange({ target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } }, false); onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } }); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
+          <label for="today-pending"></label>
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <OrderBookingsTable :objects="list" />
+    </template>
+  </TableLabeledPagination>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/pagination/models/UserDashboard/OrdersPagination.vue b/src/components/displays/pagination/models/UserDashboard/OrdersPagination.vue
index 56f5f6c8..4cbbe8ae 100644
--- a/src/components/displays/pagination/models/UserDashboard/OrdersPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/OrdersPagination.vue
@@ -8,7 +8,9 @@ import {
   metaItemsPerPage,
   metaTotalItems,
   setEndpoint,
+  metaSearch,
   setMetaItemsPerPage,
+  setOrder,
   setPage,
   search,
   setFilter
@@ -21,6 +23,10 @@ import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue
 import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
 import InvoicesTable from "@/components/displays/user/invoices/invoicesTable.vue";
 import {defineProps} from "vue";
+import PaginationDisplayGeneralSearchReload
+  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 const props = defineProps({
   onlyFromInvoiceCollection: {
     type: Number,
@@ -40,6 +46,8 @@ if (props.onlyFromInvoiceCollection > 0) {
   setFilter("invoice_collection_id", props.onlyFromInvoiceCollection, false);
 }
 
+setOrder("id", "desc", false);
+
 if (props.autoLoad) {
   loadList();
 }
@@ -47,16 +55,20 @@ if (props.autoLoad) {
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input mt-2" type="text" placeholder="Søg efter vask" v-model="metaSearch" />
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" />
-  <!-- <invoicesTable :objects="list" /> -->
-  <orders-table
-      v-bind:orders="list"
-      v-bind:is-customer-view="true"
-      v-bind:invoiceView="props.allowDropdownToShowOrderContent"
-  />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
+  <TableLabeledPagination label="Historiske vaske">
+    <template #paginationDisplayFiltersElement>
+      <PaginationDisplayFilters
+          :departmentColumn="'department_id'"
+      />
+    </template>
+    <template #default>
+      <orders-table
+          v-bind:orders="list"
+          v-bind:is-customer-view="true"
+          v-bind:invoiceView="props.allowDropdownToShowOrderContent"
+      />
+    </template>
+  </TableLabeledPagination>
 </template>
 
 <style scoped>
diff --git a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
index cebfdff2..634ded2c 100644
--- a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
@@ -1,26 +1,22 @@
 <script setup>
 import {
-  isLoaded,
-  isLoading,
   list,
   loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
   setEndpoint,
-  setMetaItemsPerPage,
-  setPage,
   setFilter,
-  getFilter,
 } from "@/components/pagination/paginatedList.vue";
-// Create a new pagination component for the vehicles, to allow multiple pagination components on the same page
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
-
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import { useRouter } from "vue-router";
 import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
-import {defineProps, ref} from "vue";
+import {defineProps} from "vue";
+import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
+import {Colors} from "@/ThemeConfig.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+
+/**
+ * Router
+ */
+const router = useRouter();
 
 const props = defineProps({
   customer_id: {
@@ -42,11 +38,31 @@ loadList();
 </script>
 
 <template>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-  </PaginationDisplay>
-  <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="!isLoaded()" :loadFunction="loadList" icon="fas fa-sync-alt">Opdater</LoadButtonWhileAwait>
+  <div>
+  <TableLabeledPagination label="Oversigt over registrerede køretøjer">
+    <template #paginationDisplayFiltersElement>
+      <PaginationDisplayFilters
+          :productColumn="'type'"
+          :columnLabels="{ type: SessionUser.objects.vehicles.columns.type.label }"
+      />
+    </template>
+    <template #rightPaginationColumns>
+      <!-- Create a new vehicle, if the route is /user -->
+      <div class="column is-narrow is-float-right"
+           v-if="router.currentRoute.value.path.startsWith('/user')">
+        <label class="label is-small">&nbsp;</label>
+        <button
+            class="button is-link"
+            @click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.customer_id, () => loadList())" style="text-decoration-line: none;" :style="{ 'color': Colors.buttons.textColor, 'background-color': Colors.buttons.backgroundColor }">
+          Tilføj køretøj
+        </button>
+      </div>
+    </template>
+    <template #default>
+      <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
+    </template>
+  </TableLabeledPagination>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/displays/steps/ScrollableSteps.vue b/src/components/displays/steps/ScrollableSteps.vue
new file mode 100644
index 00000000..082ecf8b
--- /dev/null
+++ b/src/components/displays/steps/ScrollableSteps.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, computed, watch, defineProps } from "vue";
+/**
+ * Props
+ */
+const props = defineProps({
+  // The maximum height of the steps container
+  maxHeight: {
+    type: String,
+    default: '300px',
+  },
+});
+/**
+ * Variables
+ */
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <div>
+      <slot name="header">
+        <!-- Default header content can go here if needed -->
+      </slot>
+    </div>
+    <!-- Steps container with scrollable content -->
+    <div :style="{ maxHeight: maxHeight, overflowY: 'auto' }">
+      <slot name="steps">
+        <!-- Default steps content can go here if needed -->
+      </slot>
+    </div>
+    <!-- Footer -->
+    <div>
+      <slot name="footer">
+        <!-- Default footer content can go here if needed -->
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/superuser/tables/OrderContentTable.vue b/src/components/displays/superuser/tables/OrderContentTable.vue
index dff6cb9f..e4c529ee 100644
--- a/src/components/displays/superuser/tables/OrderContentTable.vue
+++ b/src/components/displays/superuser/tables/OrderContentTable.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  summaryMode: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const order_item_default = {
@@ -100,7 +104,7 @@ watch(() => props.orderId, (newValue, oldValue) => {
 
 <template>
   <div>
-    <table class="table is-fullwidth">
+    <table class="table is-fullwidth" v-if="!props.summaryMode">
       <thead>
         <tr>
           <th>{{ucFirst(SessionUser.objects.products.meta.labels.single)}}</th>
@@ -153,6 +157,34 @@ watch(() => props.orderId, (newValue, oldValue) => {
       </template>
       </tbody>
     </table>
+    <!-- Summary Mode -->
+    <div v-else>
+      <!-- Loader -->
+      <template v-if="orderItems.length === 0">
+        <span class="is-flex is-justify-content-center is-align-items-center" style="height: 100px;">
+          <span class="loader is-loading is-align-self-center"></span>
+        </span>
+      </template>
+      <!-- Order Items -->
+      <template v-else>
+        <div v-for="item in orderItems" :key="item.id" class="mb-2">
+          <!-- If the item is a primary item, show it -->
+          <template v-if="!isOrderItemAddon(item)">
+            <div>
+              <strong>{{ item.product.name }}</strong> x {{ item.quantity }}
+              <span v-if="props.displayPrice"> - {{ SessionUser.functions.currency.toLocal(item.price) }}</span>
+            </div>
+            <!-- Show the add-on items -->
+            <div v-for="addon_item in getItemAddons(item)" :key="addon_item.id" class="ml-4">
+              <small>
+                  + {{ addon_item.product.name }} x {{ addon_item.quantity }}
+                <span v-if="props.displayPrice"> - {{ SessionUser.functions.currency.toLocal(addon_item.price) }}</span>
+              </small>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/displays/superuser/tables/departmentLanesTable.vue b/src/components/displays/superuser/tables/departmentLanesTable.vue
index 71a03051..fecb6c48 100644
--- a/src/components/displays/superuser/tables/departmentLanesTable.vue
+++ b/src/components/displays/superuser/tables/departmentLanesTable.vue
@@ -2,12 +2,9 @@
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 
 defineProps(['objects']);
-import { ref } from 'vue';
 import { loadList } from "@/components/pagination/paginatedList.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-import { showEditDepartmentForm } from "@/components/forms/superUser/editDepartmentForm.vue";
 
-import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
 
@@ -18,7 +15,7 @@ const redirect = (path) => {
 </script>
 
 <template>
-    <table class="table is-fullwidth">
+    <table class="table is-fullwidth is-bordered">
       <thead>
       <tr>
         <th>{{ SessionUser.objects.department_lanes.columns.id.label }}</th>
@@ -26,6 +23,7 @@ const redirect = (path) => {
         <th>{{ SessionUser.objects.department_lanes.columns.name.label }}</th>
         <th>{{ SessionUser.objects.department_lanes.columns.relay_in_id.label }}</th>
         <th>{{ SessionUser.objects.department_lanes.columns.relay_out_id.label }}</th>
+        <th>{{ SessionUser.objects.department_lanes.columns.relay_machine_id.label }}</th>
         <th class="has-text-right">Handlinger</th>
       </tr>
       </thead>
@@ -57,6 +55,12 @@ const redirect = (path) => {
             column="relay_out_id"
             :edit-function="SessionUser.objects.department_lanes.showEditObjectFieldForm"
         />
+        <EditableTableColumn
+            :object="object"
+            :loadList="loadList"
+            column="relay_machine_id"
+            :edit-function="SessionUser.objects.department_lanes.showEditObjectFieldForm"
+        />
         <!-- Actions -->
         <td class="has-text-right">
           <ActionSettingsWheelButton>
diff --git a/src/components/displays/superuser/tables/productsTable.vue b/src/components/displays/superuser/tables/productsTable.vue
index e4d82308..cecf1ac8 100644
--- a/src/components/displays/superuser/tables/productsTable.vue
+++ b/src/components/displays/superuser/tables/productsTable.vue
@@ -95,7 +95,7 @@ const getDisplayProductAddons = (product) => {
 </script>
 
 <template>
-  <table class="table is-fullwidth is-hoverable is-striped">
+  <table class="table is-fullwidth is-hoverable is-striped" style="table-layout: fixed;">
     <thead>
     <tr>
       <th>{{ SessionUser.objects.products.columns.order_priority.label }}</th>
diff --git a/src/components/displays/superuser/tables/usersTable.vue b/src/components/displays/superuser/tables/usersTable.vue
index 37539b1e..d8f21238 100644
--- a/src/components/displays/superuser/tables/usersTable.vue
+++ b/src/components/displays/superuser/tables/usersTable.vue
@@ -20,33 +20,7 @@ const redirect = (path) => {
   window.location = path;
 }
 
-const onShowImpersonationQRCode = (src, directLink) => {
-  Swal.fire({
-    title: 'Scan QR-koden for at logge ind som bruger',
-    html: `<img src="${src}" alt="QR-kode" />`,
-    showCloseButton: true,
-    showConfirmButton: !!directLink,
-    showCancelButton: true,
-    focusConfirm: false,
-    confirmButtonText: 'Kopiér link',
-    cancelButtonText: 'Luk',
-    preConfirm: () => {
-      navigator.clipboard.writeText(directLink);
-      Swal.showValidationMessage('Link kopieret til udklipsholderen');
-    }
-  });
-}
 
-const onClickShowImpersonationQRCode = async (userId) => {
-  // Get the session token
-  const newToken = await SessionUser.superUser.intimidate.getImpersonationToken(userId);
-  // Create the impersonation link
-  const link = `${window.location.protocol}//${window.location.host}/login/qr?token=${newToken}`;
-  // Generate a QR code for the impersonation link
-  const response = await SessionUser.superUser.intimidate.showImpersonationQRCode(link);
-  // Show the QR code in a modal
-  onShowImpersonationQRCode(response.value, link);
-}
 
 </script>
 
@@ -69,6 +43,8 @@ const onClickShowImpersonationQRCode = async (userId) => {
           <div class="buttons is-float-right">
             <!-- Settings wheel -->
             <ActionSettingsWheelButton
+                :customer_number="user.customer_number"
+                :user_id="user.id"
             >
               <template #actions>
                 <ActionSettingsWheelItem
@@ -76,18 +52,6 @@ const onClickShowImpersonationQRCode = async (userId) => {
                     icon="fas fa-user-edit"
                     label="Rediger"
                 />
-                <ActionSettingsWheelItem
-                    @click="SessionUser.superUser.intimidate.intimidateUser(user.id)"
-                    icon="fas fa-user-shield"
-                    label="Log ind som bruger"
-                    :disabled="user.group_id === 1"
-                />
-                <ActionSettingsWheelItem
-                    @click="onClickShowImpersonationQRCode(user.id)"
-                    icon="fas fa-user-shield"
-                    label="Log ind som bruger (QR-kode)"
-                    :disabled="user.group_id === 1 && !SessionUser.superUser.intimidate.canImpersonateAdmin"
-                />
               </template>
             </ActionSettingsWheelButton>
           </div>
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/displays/user/bookings/bookingsTable.vue b/src/components/displays/user/bookings/bookingsTable.vue
index 7cddcde8..9f06bafe 100644
--- a/src/components/displays/user/bookings/bookingsTable.vue
+++ b/src/components/displays/user/bookings/bookingsTable.vue
@@ -328,7 +328,7 @@ const canUserEditObject = (object) => {
 
 <template>
   <div>
-  <table class="table is-hoverable is-narrow" :class="isSmall ? 'is-hidden' : ''">
+  <table class="table is-hoverable is-narrow is-fullwidth" :class="isSmall ? 'is-hidden' : ''" style="table-layout: fixed;">
     <thead>
     <tr>
       <th>ID</th>
@@ -349,7 +349,7 @@ const canUserEditObject = (object) => {
     <tbody>
     <tr v-for="object in parseAndSortBookings(objects)" :key="object.id">
       <template v-if="object.isLabel">
-        <td colspan="14" class="has-text-left">
+        <td colspan="13" class="has-text-left">
           <span class="has-text-grey">
             <i class="fas fa-calendar-day"></i>
           </span>
@@ -369,7 +369,6 @@ const canUserEditObject = (object) => {
       <td>{{ object.date }}</td>
       <td>{{ object.regNrTraekker }}</td>
       <td>{{ object.regNrTrailer }}</td>
-      <td>
           <!-- Reference number -->
           <EditableTableColumn
               :object="object"
@@ -379,7 +378,6 @@ const canUserEditObject = (object) => {
               :edit-function="SessionUser.objects.bookings.showEditObjectFieldForm"
               :permission-check-function="() => canUserEditObject(object)"
           />
-      </td>
       <td>{{ object.notes }}</td>
       <td>{{ object.pickup_bool == 1 ? "Ja" : "Nej" }}</td>
       <td>{{ object.created_at }}</td>
@@ -440,7 +438,7 @@ const canUserEditObject = (object) => {
     </tbody>
     <tfoot>
     <tr>
-      <td colspan="14">Viser {{ objects.length }} bookinger {{ isSmall ? '' : 'i alt' }}</td>
+      <td colspan="13">Viser {{ objects.length }} bookinger {{ isSmall ? '' : 'i alt' }}</td>
     </tr>
     </tfoot>
   </table>
diff --git a/src/components/displays/user/invoicecollections/InvoiceCollectionsTable.vue b/src/components/displays/user/invoicecollections/InvoiceCollectionsTable.vue
index 116ddd0c..15a7bba5 100644
--- a/src/components/displays/user/invoicecollections/InvoiceCollectionsTable.vue
+++ b/src/components/displays/user/invoicecollections/InvoiceCollectionsTable.vue
@@ -13,6 +13,7 @@ import { ref } from 'vue';
 import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 
 const su_object = SessionUser.objects.collectedOrderInvoices;
 
@@ -114,7 +115,8 @@ const dropdown_content = (object) => {
         <th>{{su_object.columns.id.label}}</th>
         <th>{{su_object.columns.created_at.label}}</th>
         <th>{{su_object.columns.po_number.label}}</th>
-        <th>{{SessionUser.objects.global.language.total}}</th>
+        <th>{{SessionUser.objects.global.language.total_price_amount}}</th>
+        <th><!-- Actions --></th>
       </tr>
       </thead>
       <tbody>
@@ -136,6 +138,13 @@ const dropdown_content = (object) => {
               :permission-check-function="() => canUserEditObject(object)"
           />
           <td>{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
+          <td>
+            <ActionSettingsWheelButton
+              :invoice_collection_id="object.id"
+            >
+              <template #actions></template>
+            </ActionSettingsWheelButton>
+          </td>
         </tr>
       </template>
       </tbody>
diff --git a/src/components/displays/user/vehicles/vehiclesTable.vue b/src/components/displays/user/vehicles/vehiclesTable.vue
index 8f053df0..fed4b1be 100644
--- a/src/components/displays/user/vehicles/vehiclesTable.vue
+++ b/src/components/displays/user/vehicles/vehiclesTable.vue
@@ -1,6 +1,11 @@
 <script setup>
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-
+import {ref} from 'vue';
+import { departments, getDepartments} from "@/components/pagination/departmentTabs.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { loadList } from "@/components/pagination/paginatedList.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 const props = defineProps({
   vehicles: {
     type: Array,
@@ -27,12 +32,6 @@ const props = defineProps({
     default: null
   }
 });
-import { ref, defineEmits } from 'vue';
-import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { loadList } from "@/components/pagination/paginatedList.vue";
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 
 
 const reload = () => {
@@ -140,7 +139,7 @@ const isVehicleAddonApplied = (addon) => {
       <th>{{ SessionUser.objects.vehicles.columns.wash_subscription.label }}</th>
       <th v-if="!props.compact">{{ SessionUser.objects.product_options.meta.title }}</th>
       <th v-if="!props.compact">{{ SessionUser.objects.vehicles.columns.reference.label }}</th>
-      <th v-if="!props.compact">{{ SessionUser.objects.global.language.actions }}</th>
+      <th v-if="!props.compact"></th>
     </tr>
     </thead>
     <tbody>
@@ -254,31 +253,10 @@ const isVehicleAddonApplied = (addon) => {
         </ActionSettingsWheelButton>
       </td>
     </tr>
-    <!-- Add vehicle button -->
-    <tr>
-      <td colspan="10">
-        <div class="buttons">
-          <!-- Add own vehicle button (If the add_other_customer_id is not set) -->
-          <button
-              v-if="props.show_add_vehicle && !props.add_other_customer_id"
-              class="button is-small is-text"
-              @click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.show_add_vehicle, () => reload())" style="text-decoration-line: none">
-            Tilføj køretøj
-          </button>
-          <!-- Add other vehicle button -->
-          <button
-              v-if="props.add_other_customer_id"
-              class="button is-small is-text"
-              @click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.add_other_customer_id, () => reload())" style="text-decoration-line: none">
-            Tilføj køretøj til kunde
-          </button>
-        </div>
-      </td>
-    </tr>
     </tbody>
     <tfoot>
     <tr>
-      <td colspan="10">Showing {{ vehicles.length }} vehicles</td>
+      <td colspan="10">{{SessionUser.objects.global.language.showing}} {{ props.vehicles.length }} {{SessionUser.objects.vehicles.meta.labels.multiple}}</td>
     </tr>
     </tfoot>
   </table>
diff --git a/src/components/forms/auth/LoginForm.vue b/src/components/forms/auth/LoginForm.vue
index 4c474152..9d7c0b3d 100644
--- a/src/components/forms/auth/LoginForm.vue
+++ b/src/components/forms/auth/LoginForm.vue
@@ -67,13 +67,13 @@ SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
 <template>
   <form @submit.prevent="doNothing">
     <div class="field">
-      <label class="label">Customer Number</label>
+      <label class="label">{{ SessionUser.functions.ucFirst(SessionUser.objects.global.language.customer_number) }}</label>
       <div class="control">
         <input class="input" type="text" v-model="customer_number" />
       </div>
     </div>
     <div class="field">
-      <label class="label">Password</label>
+      <label class="label">{{ SessionUser.functions.ucFirst(SessionUser.objects.global.language.password) }}</label>
       <div class="control">
         <input class="input" type="password" v-model="password" />
       </div>
@@ -93,13 +93,13 @@ SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
     <div class="field">
       <div class="control">
         <div class="buttons">
-          <LoadButtonWhileAwait :loadFunction="login" class="button is-dark is-fullwidth" id="login-button">Login</LoadButtonWhileAwait>
+          <LoadButtonWhileAwait :loadFunction="login" class="button is-dark is-fullwidth" id="login-button">{{ SessionUser.functions.ucFirst(SessionUser.objects.global.language.login) }}</LoadButtonWhileAwait>
           <LoadButtonWhileAwait :loadFunction="() => router.push('/login/qr')" class="button is-dark is-outlined is-fullwidth is-hidden-desktop" id="qr-login-button">
             <!-- QR code icon -->
             <span class="icon">
               <i class="fas fa-qrcode"></i>
             </span>
-            <span>Login with QR code</span>
+            <span>{{ SessionUser.functions.ucFirst(SessionUser.objects.global.language.login_with_qr_code) }}</span>
           </LoadButtonWhileAwait>
         </div>
       </div>
diff --git a/src/components/forms/department/pos/SelectProductsFormPOS.vue b/src/components/forms/department/pos/SelectProductsFormPOS.vue
index 9fc9cd0d..14879d0b 100644
--- a/src/components/forms/department/pos/SelectProductsFormPOS.vue
+++ b/src/components/forms/department/pos/SelectProductsFormPOS.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch, defineProps, defineEmits} from 'vue';
+import {onMounted, ref, watch, defineProps, defineEmits, nextTick, computed} from 'vue';
 import {
   getOrderId,
   getProductsCategory,
@@ -24,6 +24,7 @@ import ConfigurationCategory from "@/components/displays/superuser/configuration
 import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 import ProductBox from "@/components/displays/boxes/ProductBox.vue";
 import { getPicture } from "@/components/displays/department/pos/displays/Piktogrammer.vue";
+import { products_category } from "@/components/shop/POSDepartmentProcess.vue";
 const emits = defineEmits(['onAddToCartProduct', 'onAddProduct', 'onSelectProduct']);
 const props = defineProps({
   isCustomerBooking: {
@@ -50,27 +51,103 @@ const props = defineProps({
     type: Boolean,
     default: false,
     required: false
+  },
+  attemptAutoSelectId: {
+    type: Number,
+    default: null,
+    required: false
+  },
+  // New props for grid-before-select and auto-scroll behavior (desktop)
+  gridBeforeSelect: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  selectedId: {
+    type: [String, Number],
+    default: null,
+    required: false
+  },
+  autoScrollOnSelect: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  filterProductsVisibleOnCustomerBooking: {
+    type: Boolean,
+    default: true,
+    required: false
+  },
+  customer_number: {
+    type: Number,
+    default: null,
+    required: false
+  },
+  showPrices: {
+    type: Boolean,
+    default: true,
+    required: false
   }
 })
 // Define the products
 const products = ref([]);
 onMounted(() => {
-  console.warn('Mounted SelectProductsFormPOS');
   // If the category is not defined, get all products
   if (getProductsCategory() === null) {
-    getProducts(department_id.value).then((response) => {
+    getProducts(department_id.value, !!props.isCustomerBooking, props.customer_number).then((response) => {
       products.value = response.data.data;
       console.log(products.value);
     });
   } else {
     // Get the products by category
-    getProductCategory(getProductsCategory(), department_id.value).then((response) => {
+    getProductCategory(getProductsCategory(), department_id.value, !!props.isCustomerBooking, props.customer_number).then((response) => {
       products.value = response.data.data;
+      // Wait a bit to ensure the DOM has settled
+      setTimeout(() => {
+
+        // Check if the attempt auto select id is set
+        if (props.attemptAutoSelectId !== null) {
+          // Check if the product is in the products
+          if (products.value.find((product) => product.id === props.attemptAutoSelectId) !== undefined) {
+            // Set the selected id
+            selectedProductId.value = props.attemptAutoSelectId;
+            emits('onSelectProduct', products.value.find((product) => product.id === props.attemptAutoSelectId));
+          }
+        }
+      }, 200);
       console.log(products.value);
     });
   }
 });
 
+// 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, !!props.isCustomerBooking, props.customer_number).then((response) => {
+      products.value = response.data.data;
+    });
+  } else {
+    getProductCategory(getProductsCategory(), newDeptId, !!props.isCustomerBooking, props.customer_number).then((response) => {
+      products.value = response.data.data;
+    });
+  }
+});
+
+watch(() => getProductsCategory(), (newCategory) => {
+  if (newCategory === null) {
+    getProducts(department_id.value, !!props.isCustomerBooking, props.customer_number).then((response) => {
+      products.value = response.data.data;
+    });
+  } else {
+    getProductCategory(newCategory, department_id.value, !!props.isCustomerBooking, props.customer_number).then((response) => {
+      products.value = response.data.data;
+    });
+  }
+});
+
 
 
 
@@ -129,9 +206,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
@@ -139,10 +217,16 @@ const loadCategories = async () => {
       departmentId
   ).then((response) => {
     for (let i = 0; i < response.length; i++) {
-      categories.value.push({
-        name: response[i].category.name,
-        identifier: response[i].category.id
-      });
+      // Check if the id is already in the categories by id,
+      // This is needed to prevent duplicate categories for higher privilege users
+      if (categories.value.find((category) => category.identifier === response[i].category.id) !== undefined) {
+        // The id is already included in the list. Do nothing.
+      } else {
+        categories.value.push({
+          name: response[i].category.name,
+          identifier: response[i].category.id
+        });
+      }
     }
   });
 };
@@ -358,19 +442,113 @@ const hideRecommendedProducts = () => {
   isShowingRecommended.value = false;
 };
 
-const selectedProduct = ref(null);
+const selectedProductId = ref(null);
 
-const isProductSelected = (productId) => {
-  return selectedProduct.valueOf() === parseInt(productId);
+// Effective selected id prefers external prop when provided
+const effectiveSelectedId = computed(() => (props.selectedId !== null && props.selectedId !== undefined) ? props.selectedId : selectedProductId.value);
+
+// Determine layout mode: if gridBeforeSelect is true and nothing is selected, use grid (not compact);
+// once a product is selected, switch to compact (horizontal scroll) automatically
+const isCompactMode = computed(() => {
+  if (props.gridBeforeSelect) {
+    return !!effectiveSelectedId.value; // compact (scroll) after selection
+  }
+  return !!props.compact;
+});
+
+const isGridLayout = computed(() => props.gridBeforeSelect && !effectiveSelectedId.value);
+
+// Card visual compactness: in gridBeforeSelect we still want the compact look
+const useCompactCard = computed(() => {
+  return props.gridBeforeSelect ? true : isCompactMode.value;
+});
+
+// Refs for auto-scroll to selected item
+const scrollWrapRef = ref(null);
+const itemRefs = new Map();
+const setItemRef = (el, id) => {
+  // Normalize possible component refs to their root DOM elements
+  const node = el && (el.$el || el);
+  if (node) {
+    itemRefs.set(id, node);
+  } else {
+    itemRefs.delete(id);
+  }
 };
 
-const selectProduct = (product) => {
-  if (selectedProduct.valueOf() === parseInt(product.id)) {
-    selectedProduct.value = null;
-  } else {
-    emits('onSelectProduct', product);
-    selectedProduct.value = parseInt(product.id);
+const scrollSelectedIntoCenter = async (isRetry = false) => {
+  if (!props.autoScrollOnSelect) return;
+  const sel = effectiveSelectedId.value;
+  if (!sel) return;
+  // Ensure DOM/classes/layout have settled after mode switch
+  await nextTick();
+  await nextTick();
+  // Wait one frame to ensure CSS class toggles (horizontal vs vertical) have applied
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  const container = scrollWrapRef.value;
+  const el = itemRefs.get(sel);
+  if (container && el) {
+    try {
+      // If container has no width yet, retry shortly
+      if (!container.clientWidth) {
+        setTimeout(() => scrollSelectedIntoCenter(isRetry), 50);
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const currentLeft = container.scrollLeft || 0;
+      const itemCenterX = currentLeft + (elRect.left - containerRect.left) + (elRect.width / 2);
+      let targetLeft = Math.round(itemCenterX - (container.clientWidth / 2));
+      const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+      if (targetLeft < 0) targetLeft = 0;
+      if (targetLeft > maxScrollLeft) targetLeft = maxScrollLeft;
+      container.scrollTo({ left: targetLeft, behavior: 'smooth' });
+      // One-off delayed re-center to account for late image/font reflows
+      if (!isRetry) {
+        setTimeout(() => scrollSelectedIntoCenter(true), 300);
+      }
+      return;
+    } catch (e) {
+      // fall through to fallback below
+    }
   }
+  // Fallback to native element-based scroll if container metrics aren't ready
+  if (el && typeof el.scrollIntoView === 'function') {
+    try {
+      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    } catch (e2) {
+      el.scrollIntoView(true);
+    }
+  }
+};
+
+// Watch for changes to the customer number
+watch(() => props.customer_number, (newCustomerNumber) => {
+  console.warn('Customer number changed in SelectProductsFormPOS:', newCustomerNumber);
+  // Refetch products for the current category scope
+  if (getProductsCategory() === null) {
+    getProducts(department_id.value, !!props.isCustomerBooking, newCustomerNumber).then((response) => {
+      products.value = response.data.data;
+    });
+  } else {
+    getProductCategory(getProductsCategory(), department_id.value, !!props.isCustomerBooking, newCustomerNumber).then((response) => {
+      products.value = response.data.data;
+    });
+  }
+});
+
+// When switching from grid to scroll, or when selection changes in scroll mode, ensure visibility
+watch([isGridLayout, effectiveSelectedId], (newVals) => {
+  const [gridNow] = newVals;
+  // If we just entered scroll mode or changed selection while in scroll mode
+  if (!gridNow) {
+    scrollSelectedIntoCenter();
+  }
+});
+
+const selectProduct = (product) => {
+  emits('onSelectProduct', product);
+  selectedProductId.value = product.id;
 };
 
 const getAddonPrice = (productId, addonId) => {
@@ -418,7 +596,7 @@ const subtractProductAddon = (productId, addonId) => {
 const unselectProduct = () => {
   // Wait for the selection from the click to be done
   setTimeout(() => {
-    selectedProduct.value = null;
+    selectedProductId.value = null;
   }, 100);
 };
 
@@ -444,8 +622,10 @@ onMounted(() => {
 });
 
 const orderByOrderPriority = (productsList) => {
-  // If the subkey is set, sort the products by the subkey
-    return productsList.sort((a, b) => a.order_priority - b.order_priority);
+  // Normalize to an array to avoid runtime errors when source is null/undefined
+  const list = Array.isArray(productsList) ? productsList : [];
+  // If the subkey is set, sort the products by the subkey without mutating the original array
+  return [...list].sort((a, b) => (a?.order_priority ?? 0) - (b?.order_priority ?? 0));
 };
 
 const filterProductsVisibleOnCustomerBooking = (productsList) => {
@@ -467,13 +647,16 @@ const filterProductsIsWash = (productsList) => {
 }
 
 const filterProductAddonsVisibleOnCustomerBooking = (productsList) => {
+  if (!props.isCustomerBooking) {
+    return productsList;
+  }
+  // Return a new array of products with filtered addons to avoid mutating reactive sources during render
   return productsList.map((product) => {
-    if (props.isCustomerBooking) {
-      product.addons = product.addons.filter((addon) => {
-        return addon.product.display_in_booking_form;
-      });
-    }
-    return product;
+    const filteredAddons = (product.addons || []).filter((addon) => addon.product && addon.product.display_in_booking_form);
+    return {
+      ...product,
+      addons: filteredAddons
+    };
   });
 }
 
@@ -493,18 +676,37 @@ const orderByOrderPriorityCategories = (productsList) => {
 }
 
 
+const hasAutoSelectedCategory = ref(false);
 watch(() => categories.value, (newCategories) => {
-  // If the automaticallySelectCategory prop is set, select the category
-  if (props.automaticallySelectCategory !== null) {
-    if (newCategories.find((category) => parseInt(category.identifier) === props.automaticallySelectCategory) !== undefined) {
-      setProductsCategory(props.automaticallySelectCategory);
-      getProductCategory(props.automaticallySelectCategory, department_id.valueOf())
-          .then((response) => {
-            products.value = response.data.data;
-          });
+  // If the automaticallySelectCategory prop is set, select the category once per mount
+  if (props.automaticallySelectCategory !== null && !hasAutoSelectedCategory.value) {
+    const targetId = Number(props.automaticallySelectCategory);
+    if (newCategories.find((category) => Number(category.identifier) === targetId) !== undefined) {
+      if (getProductsCategory() !== targetId) {
+        setProductsCategory(targetId);
+      }
+      hasAutoSelectedCategory.value = true;
+      getProductCategory(targetId, department_id.value, true, props.customer_number)
+        .then((response) => {
+          products.value = response.data.data;
+        });
     }
   }
-}, { immediate: true });
+});
+
+// Guarded category selection to avoid redundant reactive churn
+const onSelectCategory = (rawId) => {
+  hideRecommendedProducts();
+  // Handle 'null' from mobile <select>
+  const targetId = rawId === 'null' || rawId === null ? null : Number(rawId);
+  if (getProductsCategory() !== targetId) {
+    setProductsCategory(targetId);
+  }
+  getProductCategory(targetId, department_id.value, !!props.isCustomerBooking, props.customer_number)
+    .then((response) => {
+      products.value = response.data.data;
+    });
+};
 </script>
 
 <template>
@@ -524,12 +726,7 @@ watch(() => categories.value, (newCategories) => {
                       'is-active': category.identifier === getProductsCategory() && !isShowingRecommended
                     }">
                   <a
-                      @click="hideRecommendedProducts();
-                      setProductsCategory(category.identifier);
-                      getProductCategory(category.identifier, department_id.valueOf())
-                      .then((response) => {
-                        products = response.data.data;
-                      });"
+                      @click="onSelectCategory(category.identifier)"
                       :style="{ 'border-bottom-color': category.identifier === getProductsCategory() ? '#3273dc' : '#fff' }"
                       style="
                         border-bottom-width: 0.6rem;
@@ -548,12 +745,8 @@ watch(() => categories.value, (newCategories) => {
           <template #default>
             <div class="select is-fullwidth mb-2">
               <select
-                  @change="hideRecommendedProducts();
-                  setProductsCategory($event.target.value);
-                  getProductCategory($event.target.value, department_id.valueOf())
-                  .then((response) => {
-                    products = response.data.data;
-                  });"
+                  @change="onSelectCategory($event.target.value)"
+                  :value="getProductsCategory() ?? 'null' "
               >
                 <option v-for="category in categories" :key="category.identifier" :value="category.identifier ?? 'null'">
                   {{ category.name }}
@@ -564,8 +757,8 @@ watch(() => categories.value, (newCategories) => {
         </WhiteBox>
       </div>
     </div>
-      <div class="tw-scroll-minimal" :class="{ 'tw-scroll-vertical': !props.compact, 'tw-scroll-horizontal': props.compact }">
-      <div class="columns is-mobile" :class="{ 'is-multiline': !props.compact }">
+      <div class="tw-scroll-minimal" :class="{ 'tw-scroll-vertical': !isCompactMode, 'tw-scroll-horizontal': isCompactMode }" ref="scrollWrapRef">
+      <div class="columns is-mobile" :class="{ 'is-multiline': isGridLayout || !isCustomerBooking }">
         <!-- Recommended products -->
         <div class="column is-12" v-if="isShowingRecommended">
           <!-- Same as last time -->
@@ -624,7 +817,7 @@ watch(() => categories.value, (newCategories) => {
                   <div class="card-content">
                     <p class="title is-6">
                       <span>{{ products.find(product => product.id === product_id).name }}</span>
-                      <span class="is-float-right">{{ products.find(product => product.id === product_id).price - (products.find(product => product.id === product_id).price * (getUserProductDiscount(products.find(product => product.id === product_id)) / 100)).toFixed(0) }} Kr.</span>
+                      <span class="is-float-right" v-if="props.showPrices">{{ products.find(product => product.id === product_id).price - (products.find(product => product.id === product_id).price * (getUserProductDiscount(products.find(product => product.id === product_id)) / 100)).toFixed(0) }} Kr.</span>
                     </p>
                     <p class="subtitle is-6 has-text-grey">{{ products.find(product => product.id === product_id).description }}</p>
                     <div class="content">
@@ -668,13 +861,15 @@ watch(() => categories.value, (newCategories) => {
         </div>
         <!-- New product display -->
         <template v-for="product in filterProductAddonsVisibleOnCustomerBooking(filterProductsIsWash(filterProductsVisibleOnCustomerBooking(orderByOrderPriority(products))))" :key="product.id" v-if="!isShowingRecommended">
-          <div class="column" :class="{ 'is-3': props.compact, 'is-6': !props.compact }">
+          <div class="column" :class="{ 'is-3-desktop': useCompactCard, 'is-6-desktop': !useCompactCard, 'is-12-mobile': !useCompactCard, 'is-10-mobile': useCompactCard }">
             <WhiteBox
                 class="p-0 pos-product-box"
-                :class="{ 'is-selected': selectedProduct === product.id, 'is-compact': props.compact }"
+                :class="{ 'is-selected': effectiveSelectedId === product.id, 'is-compact': useCompactCard }"
+                :ref="el => setItemRef(el, product.id)"
             >
               <ProductBox
-                  :compact="!!props.compact"
+                  :showPrices="props.showPrices"
+                  :compact="useCompactCard"
                   :product="product"
                   :id="product.id"
                   :name="product.name"
@@ -682,13 +877,13 @@ watch(() => categories.value, (newCategories) => {
                   :price="product.price"
                   :image="getPicture(product.piktogram)"
                   :addons="props.isAddonsVisible ? product.addons : []"
-                  :isSelected="selectedProduct === product.id"
+                  :isSelected="effectiveSelectedId === product.id"
                   :selectedAddons="productAddons"
                   :toggleProductAddon="toggleProductAddon"
                   :getProductAddonQuantity="getProductAddonQuantity"
                   :addProductAddon="addProductAddon"
                   :subtractProductAddon="subtractProductAddon"
-                  @click="!isProductSelected(product.id) ? selectProduct(product) : void 0"
+                  @click="selectProduct(product);"
                   @addToCart="addProductWithAddonsToOrder(product.id);"
                   :unselect="unselectProduct"
                   :setProductAddonNote="setProductAddonNote"
@@ -799,4 +994,19 @@ watch(() => categories.value, (newCategories) => {
 .tw-scroll-vertical::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* Enforce single-row horizontal layout and ensure horizontal overflow exists */
+.tw-scroll-horizontal > .columns {
+  flex-wrap: nowrap; /* prevent wrapping so we get a single horizontal row */
+}
+.tw-scroll-horizontal .column {
+  flex: 0 0 auto; /* items keep intrinsic/column width and overflow horizontally */
+}
+/* Optional: nicer feel when manually scrolling */
+.tw-scroll-horizontal {
+  scroll-snap-type: x proximity;
+}
+.tw-scroll-horizontal .pos-product-box {
+  scroll-snap-align: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/global/ShowErrorField.vue b/src/components/global/ShowErrorField.vue
index 57076b9a..90dc706d 100644
--- a/src/components/global/ShowErrorField.vue
+++ b/src/components/global/ShowErrorField.vue
@@ -12,14 +12,18 @@ const props = defineProps({
     type: [String, Function, Object],
     default: null,
     required: false
+  },
+  template: {
+    type: String,
+    default: 'is-warning',
   }
 });
 </script>
 
 <template>
   <template v-if="message">
-    <div class="notification is-warning">
-      <button class="delete"
+    <div class="notification" :class="template">
+      <button class="delete" v-show="false"
               @click="clearErrors()"
       ></button>
       {{ typeof message === 'function' ? message() : message }}
diff --git a/src/components/global/UserNavigation.vue b/src/components/global/UserNavigation.vue
index 2afe02f9..5d92d078 100644
--- a/src/components/global/UserNavigation.vue
+++ b/src/components/global/UserNavigation.vue
@@ -1,5 +1,4 @@
 <script setup>
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import logo from "@/assets/branding/truckwash-banner-white-compressed.png";
 import { showAuthSignOutForm } from "@/components/forms/auth/authSignOutForm.vue";
 import { useRouter } from "vue-router";
diff --git a/src/components/global/VersionCheck.vue b/src/components/global/VersionCheck.vue
new file mode 100644
index 00000000..8865aaf0
--- /dev/null
+++ b/src/components/global/VersionCheck.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
+import Swal from "sweetalert2";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
+const VITE_IS_DEV = import.meta.env.DEV || false;
+
+
+/**
+ * Variables
+ */
+const localVersion = VITE_COMMIT_HASH;
+const localStorageLastCheckKey = "lastVersionCheck";
+const versionCheckUrl = "/worker/version";
+const versionCheckDelay = 1000 * 60 * 5; // 5 minutes
+const latestVersion = ref<string | null>(null);
+const lastVersionCheck = ref(localStorage.getItem(localStorageLastCheckKey) ? parseInt(localStorage.getItem(localStorageLastCheckKey) || "0") : 0);
+/**
+ * Computed
+ */
+const currentVersion = computed(() => localVersion || "unknown");
+const isUpdateAvailable = computed(() => {
+  return latestVersion.value !== null && latestVersion.value !== currentVersion.value;
+});
+const shouldCheckForUpdate = computed(() => {
+  // In dev mode, do not check for updates
+  if (VITE_IS_DEV) {
+    return false;
+  }
+  // If never checked before, should check
+  if (lastVersionCheck.value === 0) {
+    return true;
+  }
+  // If enough time has passed since last check, should check
+  const now = Date.now();
+  return (now - lastVersionCheck.value) > versionCheckDelay;
+});
+/**
+ * Methods
+ */
+const showUpdateAvailableNotification = () => {
+  Swal.fire({
+    title: 'Opdatering tilgængelig',
+    text: `En ny version (${latestVersion.value}) er tilgængelig! Du bruger i øjeblikket version ${currentVersion.value}. Opdater venligst siden for at få den nyeste version.`,
+    icon: 'info',
+    confirmButtonText: 'Opdater nu',
+  }).then((result) => {
+    if (result.isConfirmed) {
+      window.location.reload();
+    }
+  });
+}
+const checkForUpdate = async () => {
+  const response = await SessionUser.request(
+      versionCheckUrl,
+      'GET',
+  );
+  // Verify response
+  if (!response || !response.data || !response.data.data || !response.data.data.version) {
+    console.error("Invalid version check response:", response);
+    return;
+  }
+  // Update last check time
+  lastVersionCheck.value = Date.now();
+  localStorage.setItem(localStorageLastCheckKey, lastVersionCheck.value.toString());
+  // Update latest version
+  latestVersion.value = response.data.data.version;
+  // Notify user if update is available
+  if (isUpdateAvailable.value) {
+    showUpdateAvailableNotification();
+  }
+  return response;
+}
+/**
+ * Lifecycle Hooks
+ */
+onMounted(() => {
+  if (shouldCheckForUpdate.value) {
+    checkForUpdate();
+  }
+  window.addEventListener('focus', () => {
+    if (shouldCheckForUpdate.value) {
+      checkForUpdate();
+    }
+  });
+  window.setInterval(() => {
+    if (shouldCheckForUpdate.value) {
+      checkForUpdate();
+    }
+  }, versionCheckDelay);
+});
+</script>
+
+<template>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/models/navigation/NavigationItem.vue b/src/components/models/navigation/NavigationItem.vue
index aec97662..b9542114 100644
--- a/src/components/models/navigation/NavigationItem.vue
+++ b/src/components/models/navigation/NavigationItem.vue
@@ -21,6 +21,8 @@ export type NavigationItemProps = {
   permissions?: string[];
   // Children can be used for nested navigation items
   children?: NavigationItemProps[] | [];
+  classes?: string[]; // Optional CSS classes for the navigation item
+  hidden?: boolean; // Optional property to hide the navigation item
 };
 
 type NavigationItemType = typeof props;
@@ -61,7 +63,13 @@ const props = {
     type: Array as PropType<NavigationItemProps[]>,
     required: false,
     default: () => []
-  }
+  },
+  // Optional CSS classes for the navigation item
+  classes: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => []
+  },
 };
 
 
@@ -89,13 +97,13 @@ export default defineComponent({
 
 <template>
   <router-link v-if="to" v-bind:to="to">
-    <div class="navbar-item">
+    <div class="navbar-item" :class="classes">
       <i v-if="icon" :class="icon"></i>
       <span>{{ label }}</span>
     </div>
   </router-link>
   <!-- If 'to' is not provided, we can assume it's a category or a non-link item -->
-  <div v-else class="navbar-item">
+  <div v-else class="navbar-item" :class="classes">
     <i v-if="icon" :class="icon"></i>
     <span>{{ label }}</span>
   </div>
diff --git a/src/components/models/navigation/items/NavigationMenuItems.vue b/src/components/models/navigation/items/NavigationMenuItems.vue
index a83cb915..bcbc1bb6 100644
--- a/src/components/models/navigation/items/NavigationMenuItems.vue
+++ b/src/components/models/navigation/items/NavigationMenuItems.vue
@@ -43,18 +43,18 @@ export function useNavigationItems() {
     return itemsGuest;
   });
 
-  const parsedItems = computed(() => {
+  const parsedItems = () => {
     if (SessionUser) {
       if (SessionUser.canAccessUser() && isUser.value) {
-        return parsedItemsUser;
+        return parsedItemsUser();
       } else if (SessionUser.canAccessAdmin() && isAdmin.value) {
-        return parsedItemsAdmin;
+        return parsedItemsAdmin();
       } else if (SessionUser.canAccessSuperUser()) {
-        return parsedItemsSuperUser;
+        return parsedItemsSuperUser();
       }
     }
-    return parsedItemsGuest;
-  });
+    return parsedItemsGuest();
+  };
 
   // Keep exposing global parsed items as-is
   return {
diff --git a/src/components/models/navigation/items/NavigationMenuItemsAdmin.vue b/src/components/models/navigation/items/NavigationMenuItemsAdmin.vue
index 95613814..81fb779f 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsAdmin.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsAdmin.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
-import { defineComponent, ref, computed} from 'vue';
+import {defineComponent, ref, computed, watch} from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
-const department_id = ref(window.location.pathname.split('/')[2] || 'default');
+import { getDepartmentName } from "@/components/session/token/SessionUser/Objects/economicDepartments.vue";
+const department_id = computed(() => {return SessionUser.functions.getDepartmentIdFromUrl()});
 const department_booking_count = ref(0); // Placeholder for actual booking count logic
 const fetchDepartmentBookingCount = () => {
   // Check if the department_id is a valid number
@@ -22,6 +23,10 @@ const fetchDepartmentBookingCount = () => {
     });
 }
 
+const isDepartmentSet = computed(() => {
+  return department_id.value !== 'default' && parseInt(department_id.value) > 0;
+});
+
 // Fetch the booking count every 5 seconds
 setInterval(fetchDepartmentBookingCount, 5000);
 
@@ -31,10 +36,25 @@ const items = computed<NavigationItemProps[]>(() => [
     to: `/admin`,
     permissions: ['admin'],
   },
+  // Select available department options
+  {
+    label: 'Vælg afdeling',
+    to: `/admin/departments`,
+    type: 'category',
+    hidden: isDepartmentSet.value,
+    permissions: ['admin', 'list_departments'],
+    children: SessionUser.functions.getAccessibleDepartments().map((department: any) => ({
+      label: getDepartmentName(department),
+      to: `/admin/${department}`,
+      type: 'department',
+      permissions: ['admin', 'view_department'],
+    })),
+  },
   // Kassesystem
   {
     label: 'Kassesystem',
     type: 'category',
+    hidden: !isDepartmentSet.value,
     permissions: ['admin', 'add_order'],
     children: [
       {
@@ -52,6 +72,7 @@ const items = computed<NavigationItemProps[]>(() => [
     ],
   },
   // Tidsbookinger
+    /**
   {
     label: 'Tidsbookinger',
     type: 'category',
@@ -82,13 +103,14 @@ const items = computed<NavigationItemProps[]>(() => [
         permissions: ['admin', 'department_timebookings_types_get'],
       },
     ],
-  },
+  }, */
   // Bookinger
   {
     label: 'Bookinger',
     to: `/admin/${department_id.value}/modules/bookings`,
     type: 'department',
     permissions: ['admin', 'list_bookings'],
+    hidden: !isDepartmentSet.value,
     badge: {
       // Example badge, replace with actual logic if needed
       type: 'info',
@@ -102,6 +124,7 @@ const items = computed<NavigationItemProps[]>(() => [
     to: `/admin/${department_id.value}/modules/daily-report`,
     type: 'department',
     permissions: ['admin', 'list_department_daily_reports'],
+    hidden: !isDepartmentSet.value,
   },
   // Notifikationer
   {
@@ -109,14 +132,16 @@ const items = computed<NavigationItemProps[]>(() => [
     to: `/admin/${department_id.value}/modules/notifications`,
     type: 'department',
     permissions: ['admin', 'department_notification_sms_get'],
+    hidden: !isDepartmentSet.value,
   },
   // Intranet
+    /**
   {
     label: 'Intranet',
     to: `/admin/${department_id.value}/modules/intranet`,
     type: 'department',
     permissions: ['admin', 'list_intranet_posts'],
-  }
+  }*/
 ]);
 const isDepartment = computed(() => department_id.value !== 'default' && parseInt(department_id.value) > 0);
 
diff --git a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
index 62b2241b..2b592679 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
@@ -19,45 +19,73 @@ const addChildrenIfApplicable = (item: NavigationItemProps) => {
   if (item.type === 'link' && item.permissions) {
     // Check if the user has at least one of the required permissions
     for (const perm of item.permissions) {
-      if (hasPermission(perm)) {
-        return [item];
+      if (!hasPermission(perm)) {
+        return [];
       }
     }
-    return []; // User lacks required permissions
+    return [item]; // User lacks required permissions
   }
 }
 
 const items = computed<NavigationItemProps[]>(() => [
+  /**
+   * {
+   *     label: getNameIfSignedIn('Hjem'),
+   *     type: 'category',
+   *     children: [
+   *         ...addChildrenIfApplicable({
+   *           label: 'Kunde side',
+   *           to: `/user`,
+   *           type: 'link',
+   *           permissions: ['user'],
+   *         }) || [],
+   *         ...addChildrenIfApplicable({
+   *           label: 'Afdelings side',
+   *           to: `/admin`,
+   *           type: 'link',
+   *           permissions: ['admin'],
+   *         }) || [],
+   *       ...addChildrenIfApplicable({
+   *           label: 'Backoffice',
+   *           to: `/superuser`,
+   *           type: 'link',
+   *           permissions: ['superuser'],
+   *         }) || [],
+   *       ...addChildrenIfApplicable({
+   *         label: 'Indstillinger',
+   *         to: `/user/profile`,
+   *         type: 'link',
+   *         permissions: ['user'],
+   *       }) || [],
+   *       ...addChildrenIfApplicable({
+   *         label: 'Tilbage til egen konto →',
+   *         to: `/auth/return`,
+   *         type: 'link',
+   *         permissions: ['has_superuser_token'],
+   *       }) || [],
+   *       ...addChildrenIfApplicable({
+   *           label: 'Log ud →',
+   *           to: `/logout`,
+   *           type: 'link',
+   *           permissions: ['user'],
+   *         }) || []
+   *     ]
+   *   }
+   */
   {
-    label: getNameIfSignedIn('Hjem'),
-    type: 'category',
-    children: [
-        ...addChildrenIfApplicable({
-          label: 'Kunde side',
-          to: `/user`,
-          type: 'link',
-          permissions: ['user'],
-        }) || [],
-        ...addChildrenIfApplicable({
-          label: 'Afdelings side',
-          to: `/admin`,
-          type: 'link',
-          permissions: ['admin'],
-        }) || [],
-      ...addChildrenIfApplicable({
-          label: 'Backoffice',
-          to: `/superuser`,
-          type: 'link',
-          permissions: ['superuser'],
-        }) || [],
-      ...addChildrenIfApplicable({
-          label: 'Sign out →',
-          to: `/logout`,
-          type: 'link',
-          permissions: ['user'],
-        }) || []
-    ]
-  }
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.settings),
+    to: `/user/profile`,
+    type: 'link',
+    permissions: ['user'],
+    hidden: !window.location.pathname.startsWith('/user')
+  },
+  {
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.logout),
+    to: `/logout`,
+    type: 'link',
+    permissions: ['user'],
+    hidden: !SessionUser.authenticated.value
+  },
 ]);
 
 const parsedItems = () => {
diff --git a/src/components/models/navigation/items/NavigationMenuItemsGuest.vue b/src/components/models/navigation/items/NavigationMenuItemsGuest.vue
index 1544a010..9d621553 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsGuest.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsGuest.vue
@@ -1,24 +1,29 @@
 <script lang="ts">
 import { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
 import {computed, defineComponent, ref} from 'vue';
+import SessionUser from "@/components/session/token/SessionUser.vue";
 
 
 
 const items = computed<NavigationItemProps[]>(() => [
   {
-    label: 'Log ind',
-    to: '/login',
-  },
-  {
-    label: 'Log ind (med QR-kode)',
-    to: '/login/qr',
-  },
-  {
-    label: 'Opret bruger',
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.register),
     to: '/register',
   },
   {
-    label: 'Book Vask',
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.login),
+    to: '/login',
+    hidden: SessionUser.authenticated.value,
+    children: [
+      {
+        label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.login_with_qr_code),
+        to: '/login/qr',
+        hidden: !SessionUser.functions.device.isMobile(),
+      },
+    ]
+  },
+  {
+    label: 'Book vask',
     to: '/guest/book/wash',
   }
 ]);
diff --git a/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue b/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
index ac18c8c8..b087a88d 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
-import {computed, defineComponent, ref} from 'vue';
+import {computed, defineComponent} from 'vue';
 import SessionUser from "@/components/session/token/SessionUser.vue";
 
 const firstToUpperCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -48,10 +48,11 @@ const items = computed<NavigationItemProps[]>(() => [
       { label: firstToUpperCase(SessionUser.superUser.modules.licenseplaterecognizer.meta.labels.multiple), to: '/superuser/configuration/licenseplaterecognizer'},
       { label: firstToUpperCase(SessionUser.superUser.modules.virkdata.meta.labels.multiple), to: '/superuser/configuration/virkdata'},
       { label: firstToUpperCase(SessionUser.superUser.modules.shelly.meta.labels.multiple), to: '/superuser/configuration/shelly'},
+      { label: firstToUpperCase(SessionUser.superUser.modules.selfserve.meta.labels.multiple), to: '/superuser/configuration/selfserve'},
   ]},
   // Other
   { label: 'Other', type: 'category', children: [
-      { label: 'Statistics', to: '/superuser/statistics' },
+      //{ label: 'Statistics', to: '/superuser/statistics' },
       { label: firstToUpperCase(SessionUser.objects.vehicles.meta.labels.multiple), to: '/superuser/vehicles' },
   ]},
 ]);
diff --git a/src/components/models/navigation/items/NavigationMenuItemsUser.vue b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
index 66b008d5..9bf9a32b 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsUser.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
@@ -1,57 +1,87 @@
 <script lang="ts">
 import { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
 import {computed, defineComponent, ref} from 'vue';
+import SessionUser from "@/components/session/token/SessionUser.vue";
 
 const items = computed<NavigationItemProps[]>(() => [
+  /**
+   * {
+   *     label: 'Kunde side',
+   *     type: 'category',
+   *     permissions: ['user'],
+   *     children: [
+   *       {
+   *         label: 'Mine vaske',
+   *         to: `/user/orders`,
+   *         type: 'link',
+   *         permissions: ['user'],
+   *       },
+   *       {
+   *         label: 'Mine køretøjer',
+   *         to: `/user/vehicles`,
+   *         type: 'link',
+   *         permissions: ['user'],
+   *       },
+   *       {
+   *         label: 'Mine bookinger',
+   *         to: `/user/bookings`,
+   *         type: 'link',
+   *         permissions: ['user'],
+   *       },
+   *       {
+   *         label: 'Mine fakturaer',
+   *         to: `/user/invoices`,
+   *         type: 'link',
+   *         permissions: ['user', 'user_invoices'],
+   *       },
+   *       {
+   *         label: 'Mine materialer',
+   *         to: `/user/materials`,
+   *         type: 'link',
+   *         permissions: ['user', 'user_materials'],
+   *       },
+   *     ],
+   *   },
+   */
   {
-    label: 'Hjem',
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.homepage),
     to: `/user`,
+    type: 'link',
     permissions: ['user'],
   },
   {
-    label: 'Kunde side',
-    type: 'category',
+    label: SessionUser.functions.ucFirst(SessionUser.objects.vehicles.meta.labels.multiple),
+    to: `/user/vehicles`,
+    type: 'link',
     permissions: ['user'],
-    children: [
-      {
-        label: 'Mine vaske',
-        to: `/user/orders`,
-        type: 'link',
-        permissions: ['user'],
-      },
-      {
-        label: 'Mine køretøjer',
-        to: `/user/vehicles`,
-        type: 'link',
-        permissions: ['user'],
-      },
-      {
-        label: 'Mine bookinger',
-        to: `/user/bookings`,
-        type: 'link',
-        permissions: ['user'],
-      },
-      {
-        label: 'Mine fakturaer',
-        to: `/user/invoices`,
-        type: 'link',
-        permissions: ['user', 'user_invoices'],
-      },
-      {
-        label: 'Mine materialer',
-        to: `/user/materials`,
-        type: 'link',
-        permissions: ['user', 'user_materials'],
-      },
-    ],
   },
   {
-    label: 'Book Vask',
-    to: '/user/bookings/new',
-    type: 'button',
-    permissions: ['user', 'user_bookings'],
-    color: 'primary',
-  }
+    label: SessionUser.functions.ucFirst(SessionUser.objects.bookings.meta.labels.multiple),
+    to: `/user/bookings`,
+    type: 'link',
+    permissions: ['user'],
+  },
+  {
+    label: SessionUser.functions.ucFirst(SessionUser.objects.global.language.wash_multiple),
+    to: `/user/orders`,
+    type: 'link',
+    permissions: ['user'],
+  },
+  {
+    label: SessionUser.functions.ucFirst(SessionUser.objects.collectedOrderInvoices.meta.labels.multiple),
+    to: `/user/invoices`,
+    type: 'link',
+    permissions: ['user', 'user_invoices'],
+  },
+  /**
+   * {
+   *     label: 'Book Vask',
+   *     to: '/user/bookings/new',
+   *     type: 'button',
+   *     permissions: ['user', 'user_bookings'],
+   *     color: 'primary',
+   *   }
+   */
 ]);
 
 const parsedItems = () => {
diff --git a/src/components/models/pos/step1/RegistrationNumberSearchResult.vue b/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
index 986ae72b..88b7ddbe 100644
--- a/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
+++ b/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
@@ -11,6 +11,7 @@ import { vehicles_matching, searchVehicle, register_new_search, is_latest_search
 import { setCustomerId, pos } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
 import {PosSearchResult} from "@/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue";
 import Swal from "sweetalert2";
+import SessionUser from "@/components/session/token/SessionUser.vue";
 defineComponent({
   name: "RegistrationNumberSearchResult"
 });
@@ -72,6 +73,9 @@ const applyBookingAutomatically = (booking: any) => {
     console.warn("Booking already applied, ignoring.");
     return;
   }
+  if (!booking?.id) {
+    console.warn("No booking found to apply.");
+  }
   pos.metadata.setBookingId(booking.id); // Set the booking ID to prevent multiple prompts, this is reset if the user cancels.
   // If the input registration numbers manually is displayed, hide it.
   pos.views.manualInput.value = false;
@@ -88,25 +92,25 @@ const applyBookingAutomatically = (booking: any) => {
       //console.warn("User confirmed to apply booking:", booking);
       // Apply the booking
       pos.metadata.setBookingId(booking.id);
-      pos.metadata.setNotes(booking.notes || `Booking ID: ${booking.id}`);
-      pos.metadata.setReference(booking.reference_number || null);
+      pos.metadata.setNotes(booking.note || `Booking ID: ${booking.id}`);
+      pos.metadata.setReference(booking.reference || null);
       // Set the registration numbers
-      reg_1.value = booking.regNrTraekker;
-      reg_2.value = booking.regNrTrailer || null;
+      reg_1.value = booking.reg_1;
+      reg_2.value = booking.reg_2 || null;
       // Select the vehicles
       pos.vehicles.select(1, {
-        reg: booking.regNrTraekker,
+        reg: booking.reg_1,
         type: 0, // TODO: Determine type from booking if possible
-        customer_id: booking.customer_id,
+        customer_id: booking.customer_number,
         status: 'booked',
         barred: false,
         booking_id: booking.id,
       });
-      if (booking.regNrTrailer) {
+      if (booking.reg_2) {
         pos.vehicles.select(2, {
-          reg: booking.regNrTrailer,
+          reg: booking.reg_2,
           type: 0, //TODO: Determine type from booking if possible
-          customer_id: booking.customer_id,
+          customer_id: booking.customer_number,
           status: 'booked',
           barred: false,
           booking_id: booking.id,
@@ -129,9 +133,14 @@ const applyBookingAutomatically = (booking: any) => {
 const onSelect = (result: PosSearchResult) => {
   //console.warn("onSelect:", result);
   // Check if the vehicle has a booking
-  if (doesVehiclePlateHaveBooking(result.registrationNumber)) {
+  if (result?.bookingId && result.bookingId > 0) {
     //console.warn("Vehicle has a booking:", getVehiclePlateBooking(result.registrationNumber));
-    applyBookingAutomatically(getVehiclePlateBooking(result.registrationNumber));
+    SessionUser.objects.order_bookings.get.single(result.bookingId).then((booking) => {
+      // Apply the booking automatically
+      applyBookingAutomatically(booking);
+    }).catch((error) => {
+      console.error("Error fetching booking:", error);
+    });
   }
   // Search and select the customer based on the registration number
   if (props.modifyCustomerOnChange) {
@@ -207,6 +216,9 @@ watch(isSearching, (newValue) => {
 watch(() => props.searchQuery, (newValue) => {
   if (newValue) {
     performSearch(newValue);
+    if (props.automaticallySelect) {
+      automaticallySelect();
+    }
   }
 });
 
@@ -232,6 +244,7 @@ watch(() => vehicles_matching.value, (newValue) => {
         reference: vehicle?.reference || null,
         lastOrderId: vehicle?.last_order_id || null,
         washSubscription: vehicle?.wash_subscription || null,
+        bookingId: vehicle?.booking_id || null,
       } as PosSearchResult;
     });
     //console.warn('Transformed PosSearchResult:', result);
@@ -244,24 +257,26 @@ watch(() => vehicles_matching.value, (newValue) => {
 });
 
 const automaticallySelect = () => {
-  if (props.automaticallySelect && props.searchQuery !== '' && vehicles_matching.value.length > 0) {
+  const withoutDuplicates = preventDuplicates(searchResults.value);
+  if (props.automaticallySelect && props.searchQuery !== '' && withoutDuplicates.length > 0) {
     //console.warn("Automatically selecting vehicle for reg:", props.searchQuery, "from vehicles_matching:", vehicles_matching.value);
     // Check if the vehicle is found in the results.
     // If the vehicle is found.
-    if (vehicles_matching.value.find(v => v.reg === props.searchQuery)) {
-      const match = vehicles_matching.value.find(v => v.reg === props.searchQuery);
-      //console.warn("Automatically selecting vehicle:", match);
+    if (withoutDuplicates.find(v => v.registrationNumber.toUpperCase() === props.searchQuery.toUpperCase())) {
+      const match = withoutDuplicates.find(v => v.registrationNumber.toUpperCase() === props.searchQuery.toUpperCase());
+      console.warn("Automatically selecting vehicle:", match);
       // Emit the selected vehicle object
       onSelect({
-        registrationNumber: props.searchQuery,
-        customerName: match?.customer_name || "Unknown Customer",
-        customerId: match?.customer_id || 0,
-        customerStatus: determineCustomerStatus(match),
+        registrationNumber: props.searchQuery.toUpperCase(),
+        customerName: match?.customerName || "Unknown Customer",
+        customerId: match?.customerId || 0,
+        customerStatus: match ? match.customerStatus : determineCustomerStatus({reg: props.searchQuery} as any),
         type: match?.type || null,
         barred: match?.barred,
         reference: match?.reference || null,
-        lastOrderId: match?.last_order_id || null,
-        washSubscription: match?.wash_subscription,
+        lastOrderId: match?.lastOrderId || null,
+        washSubscription: match?.washSubscription,
+        bookingId: match?.bookingId || null,
       });
     } else {
       console.warn("No exact match found for automatic selection.");
@@ -272,19 +287,19 @@ const automaticallySelect = () => {
 const determineCustomerStatus = (vehicle: any): VehicleStatusKey => {
   //console.warn('Determine customer status for vehicle:', vehicle);
   // Determine the customer status based on the vehicle object
-  if (doesVehiclePlateHaveBooking(vehicle.reg)) {
+  if (vehicle?.booking_id) {
     //console.warn('Vehicle has a booking:', getVehiclePlateBooking(vehicle.reg));
     return 'booked';
   } else if (vehicle?.status === 'known') {
     //console.warn('Vehicle is known:', vehicle);
     return 'known'
-  } else if (!vehicle.customer_id && !vehicle.customer_name) {
+  } else if (vehicle?.status === 'unknown') {
     //console.warn('Vehicle is unknown:', vehicle);
     return 'unknown';
-  } else if (vehicle.barred) {
+  } else if (vehicle?.status === 'card' || vehicle?.barred === true) {
     //console.warn('Vehicle is barred:', vehicle);
     return 'card';
-  } else if (vehicle.status === 'verified') {
+  } else if (vehicle?.status === 'verified') {
     //console.warn('Vehicle is verified:', vehicle);
     return 'verified';
   } else {
@@ -296,7 +311,7 @@ const determineCustomerStatus = (vehicle: any): VehicleStatusKey => {
 const importPendingBookings = () => {
   // Import pending bookings and update the search results
   pendingBookings.value.forEach(booking => {
-    const vehicle = vehicles_matching.value.find(v => v.reg === booking.vehicle_plate);
+    const vehicle = vehicles_matching.value.find(v => v.reg.toUpperCase() === booking.reg_1.toUpperCase() || v.reg.toUpperCase() === booking.reg_2?.toUpperCase());
     if (vehicle) {
       vehicle.customer_name = booking.customer_name;
       //vehicle.customer_id = booking.customer_id;
@@ -312,6 +327,25 @@ onMounted(() => {
     performSearch(props.searchQuery);
   }
 });
+
+const preventDuplicates = (results: PosSearchResult[]) => {
+  // The same registration number should not appear multiple times in the results
+  const seen = new Set();
+  const uniqueResults: PosSearchResult[] = [];
+  for (const result of results) {
+    const strippedReg = stripSpaces(result.registrationNumber).toUpperCase();
+    if (!seen.has(strippedReg)) {
+      //console.warn("Adding unique result:", result);
+      seen.add(strippedReg);
+      uniqueResults.push(result);
+    }
+  }
+  //console.warn("Unique results after preventing duplicates:", uniqueResults);
+  return uniqueResults;
+}
+const stripSpaces = (str: string) => {
+  return str.replace(/\s+/g, '');
+};
 </script>
 <template>
   <!-- Debugging information
@@ -319,7 +353,7 @@ onMounted(() => {
   {{ vehicles_matching.length }} vehicles matching
   {{ pendingBookings.length }} pending bookings
   -->
-  <div v-for="result in searchResults" :key="result.customerId" style="border-bottom: 1px solid #EAEAEA" @click="onSelect(result)" class="is-clickable" v-if="!props.isHidden">
+  <div v-for="result in preventDuplicates(searchResults)" :key="result.registrationNumber" style="border-bottom: 1px solid #EAEAEA" @click="onSelect(result)" class="is-clickable" v-if="!props.isHidden">
     <div class="columns is-mobile pb-0">
       <div class="column is-align-content-center pl-4">
         <p>
diff --git a/src/components/page/wrappers/AuthPageWrapper.vue b/src/components/page/wrappers/AuthPageWrapper.vue
index ff155797..94451a6e 100644
--- a/src/components/page/wrappers/AuthPageWrapper.vue
+++ b/src/components/page/wrappers/AuthPageWrapper.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="mt-6">
+  <div>
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/pagination/departmentTabs.vue b/src/components/pagination/departmentTabs.vue
index 678f5ce5..11238b6b 100644
--- a/src/components/pagination/departmentTabs.vue
+++ b/src/components/pagination/departmentTabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import { authenticatedRequest, unauthenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { ref } from "vue";
 
 // Define the departments
@@ -40,4 +40,14 @@ export const getDepartmentName = (id) => {
 export const getDepartmentDescription = (id) => {
   return departments.value.find(department => department.id === id).description;
 };
+
+export const getDepartmentsGuest = async (queryParams = {}) => {
+  isLoading.value = true;
+  const queryString = new URLSearchParams(queryParams).toString();
+  const request = await unauthenticatedRequest('/guest/departments' + (queryString ? `?${queryString}` : ''),'get');
+  departments.value = request.data.data;
+  isLoading.value = false;
+  console.log(departments.value);
+  return departments.value;
+};
 </script>
\ No newline at end of file
diff --git a/src/components/pagination/paginatedList.vue b/src/components/pagination/paginatedList.vue
index 68ccf578..c5a2c790 100644
--- a/src/components/pagination/paginatedList.vue
+++ b/src/components/pagination/paginatedList.vue
@@ -243,7 +243,6 @@ export const isLatestSearch = (search) => {
 export const loadList = () => {
   loadSwitch(true);
   // clear the list
-  list.value = [];
   paginatedGetRequest();
 };
 
diff --git a/src/components/session/authenticatedRequest.vue b/src/components/session/authenticatedRequest.vue
index c0252332..67e4144d 100644
--- a/src/components/session/authenticatedRequest.vue
+++ b/src/components/session/authenticatedRequest.vue
@@ -6,7 +6,7 @@ import {API_URL} from "@/main.js";
 export const authenticatedRequest = (url, method, data, catchCallable = null, thenCallable = null) => {
   const token = localStorage.getItem('token');
   if (!token) {
-    throw new Error('No token was found, unable to make authenticated request');
+    //throw new Error('No token was found, unable to make authenticated request');
   }
   // If the request is a GET request, add the data to the params instead
   return axios({
@@ -14,7 +14,9 @@ export const authenticatedRequest = (url, method, data, catchCallable = null, th
     url: API_URL + url,
     ...(method === 'GET' ? { params: data } : { data }),
     headers: {
-      Authorization: `Bearer ${token}`
+      ...(token) && (token.length > 0) ? {
+        Authorization: `Bearer ${token}`
+      } : {}
     }
   }).catch((error) => {
     console.error(error);
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index c086a508..735bdef4 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -1,6 +1,6 @@
 <script>
 import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import {parseError} from "@/components/request/HandleGlobalError.vue";
 import {SuperUserObject} from "@/components/session/token/superUserObject.vue";
 import {AdminUserObject} from "@/components/session/token/AdminUserObject.vue";
@@ -37,6 +37,7 @@ import {DepartmentVariables} from "@/components/session/token/SessionUser/Object
 import {XLVaskVehicleTypes} from "@/components/session/token/SessionUser/Objects/XLVaskVehicleTypes.vue";
 import {OpenAI} from "@/components/session/token/superUser/modules/openAI/OpenAI.vue";
 import {DepartmentLanes} from "@/components/session/token/SessionUser/Objects/DepartmentLanes.vue";
+import {OrderBookings} from "@/components/session/token/SessionUser/Objects/OrderBookings.vue";
 import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import Swal from "sweetalert2";
 import router from "@/router.js";
@@ -91,8 +92,11 @@ export const getSessionData = async () => {
         SessionUser.user.customer_number.value = response.data.data.customer_number;
         SessionUser.user.group_id.value = response.data.data.group_id;
         SessionUser.user.email.value = response.data.data.email;
-        SessionUser.user.phone.phone.value = response.data.data.phone.phone;
+        SessionUser.user.phone.number.value = response.data.data.phone.number;
         SessionUser.user.phone.country_code.value = response.data.data.phone.country_code;
+        SessionUser.user.notifications.wash_certificate_email.value = response.data.data.notifications.wash_certificate_email;
+        SessionUser.user.notifications.email_notifications_enabled.value = response.data.data.notifications.email_notifications_enabled;
+        SessionUser.user.notifications.sms_notifications_enabled.value = response.data.data.notifications.sms_notifications_enabled;
         SessionUser.user.created_at.value = response.data.data.created_at;
         SessionUser.user.updated_at.value = response.data.data.updated_at;
         SessionUser.user.display_name.value = response.data.data.display_name;
@@ -174,17 +178,76 @@ export const SessionUser = {
     group_id: ref(null),
     email: ref(null),
     phone: {
-      phone: ref(null),
+      number: ref(null),
       country_code: ref(null),
     },
     created_at: ref(null),
     updated_at: ref(null),
     cached_at: ref(null),
+    notifications: {
+      wash_certificate_email: ref(null),
+      email_notifications_enabled: ref(null),
+      sms_notifications_enabled: ref(null),
+      setEmailNotificationsEnabled: (enabled) => {
+        return SessionUser.request("/account/notifications", "PUT", {
+          email_notifications_enabled: enabled,
+        }).then(() => {
+          SessionUser.user.notifications.email_notifications_enabled.value = enabled;
+        }).catch((error) => {
+          parseError(error, 'user_notifications');
+          console.error(error);
+        });
+      },
+      setSmsNotificationsEnabled: (enabled) => {
+        return SessionUser.request("/account/notifications", "PUT", {
+          sms_notifications_enabled: enabled,
+        }).then(() => {
+          SessionUser.user.notifications.sms_notifications_enabled.value = enabled;
+        }).catch((error) => {
+          parseError(error, 'user_notifications');
+          console.error(error);
+        });
+      },
+      setWashCertificateEmail: (email) => {
+        return SessionUser.request("/account/notifications", "PUT", {
+          wash_certificate_email: email,
+        }).then(() => {
+          SessionUser.user.notifications.wash_certificate_email.value = email;
+        }).catch((error) => {
+          parseError(error, 'user_notifications');
+          console.error(error);
+        });
+      }
+    }
   },
   /** The user's permissions */
   permissions: ref([]),
+  availableVirtualPermissions: [
+      'has_superuser_token',
+  ],
+  virtualPermissions: computed(() => {
+    /** These permissions are NOT set by default for superusers, this should ONLY be used for superusers */
+    let virtualPermissions = [];
+    // Super user token
+    // Check if the user has a superuser token in the local storage
+    if (localStorage.getItem("superuser_token") !== null) {
+      // Validate the superuser token
+      if (localStorage.getItem("superuser_token") !== SessionUser.token.value) {
+        virtualPermissions.push('has_superuser_token');
+      }
+    }
+    return virtualPermissions;
+  }),
+  permissions_computed: computed(() => {
+    return [...SessionUser.permissions.value];
+  }),
   hasPermission: (permission) => {
     //console.log('Checking permission: ' + permission + ' - ' + hasPermission);
+    // Check if the permission is virtual
+    if (SessionUser.availableVirtualPermissions.values().toArray().includes(permission)) {
+      console.warn('Virtual permission detected: ' + permission);
+      return SessionUser.virtualPermissions.value.values().toArray().includes(permission);
+    }
     return (SessionUser.permissions.value.includes(permission) || SessionUser.permissions.value.includes('superuser'));
   },
   /** Can access shortcuts */
@@ -241,6 +304,7 @@ export const SessionUser = {
     xlvask_vehicle_types: XLVaskVehicleTypes,
     openai: OpenAI,
     department_lanes: DepartmentLanes,
+    order_bookings: OrderBookings,
     global: ObjectsGlobal,
   },
   /** The user's token and authentication status */
@@ -272,6 +336,9 @@ export const SessionUser = {
   hasEconomicData: () => {
     return SessionUser.economicData.customerNumber.value !== null;
   },
+  getCustomerNumber: () => {
+    return SessionUser.user.customer_number.value;
+  },
   /** Is the object fully initiated */
   initiated: ref(false),
   isInitiated: () => {
@@ -315,8 +382,11 @@ export const SessionUser = {
     SessionUser.user.display_name.value = null;
     SessionUser.user.group_id.value = null;
     SessionUser.user.email.value = null;
-    SessionUser.user.phone.phone.value = null;
+    SessionUser.user.phone.number.value = null;
     SessionUser.user.phone.country_code.value = null;
+    SessionUser.user.notifications.wash_certificate_email.value = null;
+    SessionUser.user.notifications.email_notifications_enabled.value = null;
+    SessionUser.user.notifications.sms_notifications_enabled.value = null;
     SessionUser.user.created_at.value = null;
     SessionUser.user.updated_at.value = null;
     SessionUser.user.cached_at.value = null;
@@ -346,6 +416,53 @@ export const SessionUser = {
     reCAPTCHA: reCAPTCHA,
     },
   functions: {
+    /** Contact functions */
+    contact: {
+      onClickCallPhoneNumber: () => {
+        // Call the phone number
+        window.location.href = "tel:+4543717886";
+      }
+    },
+    /** Device type checks */
+    device: {
+      dimensions: {
+        // Using breakpoints in accordance with Bulma CSS framework
+        // https://bulma.io/documentation/start/responsiveness/#breakpoints
+        mobileMaxWidth: 768,
+        tabletMinWidth: 769,
+        tabletMaxWidth: 1023,
+        desktopMinWidth: 1024,
+        desktopMaxWidth: 1215,
+        widescreenMinWidth: 1216,
+        widescreenMaxWidth: 1407,
+        fullhdMinWidth: 1408,
+        // Custom additions
+        fullhdMaxWidth: 1919,
+        ultrawideMinWidth: 1920,
+        ultrawideMaxWidth: 3840,
+      },
+      isMobile: () => {
+        return windowInnerWidth.value < SessionUser.functions.device.dimensions.tabletMinWidth;
+        //return /Mobi|Android/i.test(navigator.userAgent);
+      },
+      isDesktop: () => {
+        return windowInnerWidth.value >= SessionUser.functions.device.dimensions.desktopMinWidth;
+        //return !/Mobi|Android/i.test(navigator.userAgent);
+      },
+      isTablet: () => {
+        return windowInnerWidth.value >= SessionUser.functions.device.dimensions.tabletMinWidth && windowInnerWidth.value <= SessionUser.functions.device.dimensions.tabletMaxWidth;
+        //return /Tablet|iPad/i.test(navigator.userAgent);
+      },
+      isWidescreen: () => {
+        return windowInnerWidth.value >= SessionUser.functions.device.dimensions.widescreenMinWidth && windowInnerWidth.value <= SessionUser.functions.device.dimensions.widescreenMaxWidth;
+      },
+      isFullHD: () => {
+        return windowInnerWidth.value >= SessionUser.functions.device.dimensions.fullhdMinWidth;
+      },
+      isUltraWideScreen: () => {
+        return windowInnerWidth.value >= SessionUser.functions.device.dimensions.ultrawideMinWidth;
+      },
+    },
     /** Check if the user has a token */
     hasToken: () => {
       return SessionUser.token.value !== null;
@@ -419,6 +536,11 @@ export const SessionUser = {
         return new Intl.NumberFormat('da-DK', {style: 'currency', currency: 'DKK'}).format(value);
       },
     },
+    text: {
+      truncate: (text, length = 25) => {
+        return text.length > length ? text.substring(0, length) + '...' : text;
+      }
+    },
     date: {
       // Format to 2023-01-01 12:00:00
       format: (date) => {
@@ -448,6 +570,51 @@ export const SessionUser = {
         const weekday = created_at_val.getDay();
         return weekday === 0 ? 7 : weekday;
       },
+      timeAgo: (date) => {
+        // Returns e.g. "5 minutter siden"
+        const now = new Date();
+        const past = new Date(date);
+        const secondsAgo = Math.floor((now - past) / 1000);
+        const intervals = {
+          year: 31536000,
+          month: 2592000,
+          week: 604800,
+          day: 86400,
+          hour: 3600,
+          minute: 60,
+          second: 1
+        };
+        for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+          const interval = Math.floor(secondsAgo / secondsInUnit);
+          if (interval >= 1) {
+            // If the unit is singular or plural in danish
+            if (interval === 1) {
+              const unitSingularMap = {
+                year: 'år',
+                month: 'måned',
+                week: 'uge',
+                day: 'dag',
+                hour: 'time',
+                minute: 'minut',
+                second: 'sekund'
+              };
+              return interval + ' ' + unitSingularMap[unit] + ' siden';
+            } else {
+              const unitPluralMap = {
+                year: 'år',
+                month: 'måneder',
+                week: 'uger',
+                day: 'dage',
+                hour: 'timer',
+                minute: 'minutter',
+                second: 'sekunder'
+              };
+              return interval + ' ' + unitPluralMap[unit] + ' siden';
+            }
+          }
+        }
+        return 'lige nu';
+      },
       weekdayNumbers: {
         monday: 1,
         tuesday: 2,
@@ -499,11 +666,11 @@ export const SessionUser = {
        * @param new_tab Open the url in a new tab
        */
       department: (department, path = null, new_tab = false) => {
-        if (new_tab) {
-          window.open('/admin/' + department + (path !== null ? '/' + path : ''), '_blank');
-          return;
+        if (!!new_tab) {
+          SessionUser.functions.redirectTo.external('/admin/' + department + (path !== null ? '/' + path : ''), true);
+        } else {
+          window.location.href = '/admin/' + department + (path !== null ? '/' + path : '');
         }
-        window.location.href = '/admin/' + department + (path !== null ? '/' + path : '');
       },
       /**
        * Redirect to a superuser page
@@ -522,8 +689,13 @@ export const SessionUser = {
        * Redirect to a user page
        * @note This will redirect the user to '/user(/:path)'
        * @param path The path to redirect to (Optional)
+       * @param new_tab Open the url in a new tab
        */
-      user: (path = null) => {
+      user: (path = null, new_tab = false) => {
+        if (new_tab) {
+          window.open('/user' + (path !== null ? path : ''), '_blank');
+          return;
+        }
         window.location.href = '/user' + (path !== null ? path : '');
       },
       /**
@@ -571,6 +743,13 @@ export const SessionUser = {
     // Check if this is the latest version of the PWA
   }
 };
+
+const windowInnerWidth = ref(window.innerWidth);
+const updateWindowInnerWidth = () => {
+  windowInnerWidth.value = window.innerWidth;
+};
+window.addEventListener('resize', updateWindowInnerWidth);
+
 export default SessionUser;
 
 </script>
\ No newline at end of file
diff --git a/src/components/session/token/SessionUser/EditFieldForm.vue b/src/components/session/token/SessionUser/EditFieldForm.vue
index 8249268b..e1f3b034 100644
--- a/src/components/session/token/SessionUser/EditFieldForm.vue
+++ b/src/components/session/token/SessionUser/EditFieldForm.vue
@@ -67,11 +67,12 @@ export const EditFieldForm = {
         // Set the value
         EditFieldForm.value.value = document.getElementById('editField').value;
         // Edit the field
-        EditFieldForm.editFormField(endpoint, objectId, field, EditFieldForm.value.value);
-        // If a function after is defined, run it
-        if (functionAfter !== null && functionAfter !== undefined) {
-          functionAfter();
-        }
+        EditFieldForm.editFormField(endpoint, objectId, field, EditFieldForm.value.value).finally(() => {
+          // If a function after is defined, run it
+          if (functionAfter !== null && functionAfter !== undefined) {
+            functionAfter();
+          }
+        });
       }
     });
   }
diff --git a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
index c9efb9b0..9252ca3e 100644
--- a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
+++ b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
@@ -254,6 +254,24 @@ export const CollectedOrderInvoices = {
     }
   },
   functions: {
+    download: async (id) => {
+      // Send the request
+      return authenticatedRequest('/invoices/pdf', 'GET', {
+        id: parseInt(id)
+      }).then((response) => {
+        //console.warn(response);
+        // Create a blob from the response
+        window.open(response.data.data.url, '_blank');
+        return response;
+      }).catch((error) => {
+        Swal.fire({
+          title: 'Der skete en fejl under hentning af PDF',
+          text: SessionUser.functions.parseErrorMessage(error),
+          icon: 'error'
+        });
+        throw error;
+      });
+    },
     split_invoice: async (id) => {
       // Send the request
       return authenticatedRequest('/collected-invoices/split', 'POST', {
diff --git a/src/components/session/token/SessionUser/Objects/DepartmentCategories.vue b/src/components/session/token/SessionUser/Objects/DepartmentCategories.vue
index 9e8fe1bd..b91e07fa 100644
--- a/src/components/session/token/SessionUser/Objects/DepartmentCategories.vue
+++ b/src/components/session/token/SessionUser/Objects/DepartmentCategories.vue
@@ -100,6 +100,42 @@ import {ref} from "vue";
         showDeleteObjectForm: (id, onAfterSubmit = null) => {
           return ObjectsGlobal.showDeleteObjectForm(DepartmentCategories, id, onAfterSubmit);
         },
+        orderCategories: (categories) => {
+          /**
+           * Rules:
+           * 1. Exterior wash (category id 6) is always first
+           * 2. Interior wash (category id 2) is always second
+           * 3. All other categories are ordered by amound of products in the category
+           */
+          let orderedObjects = [];
+          let exteriorWash = null;
+          let interiorWash = null;
+          let otherCategories = [];
+          for (let i = 0; i < categories.length; i++) {
+            if (categories[i].category.id === 6) {
+              exteriorWash = categories[i];
+            } else if (categories[i].category.id === 2) {
+              interiorWash = categories[i];
+            } else {
+              otherCategories.push(categories[i]);
+            }
+          }
+          // Sort other categories by amount of products
+          otherCategories.sort((a, b) => {
+            return b.category.meta.products.length - a.category.meta.products.length;
+          });
+          // Add exterior wash first
+          if (exteriorWash) {
+            orderedObjects.push(exteriorWash);
+          }
+          // Add interior wash second
+          if (interiorWash) {
+            orderedObjects.push(interiorWash);
+          }
+          // Add other categories in the order they were received
+          orderedObjects = orderedObjects.concat(otherCategories);
+          return orderedObjects;
+        }
       },
       /**
        * Show the create object form
diff --git a/src/components/session/token/SessionUser/Objects/DepartmentLanes.vue b/src/components/session/token/SessionUser/Objects/DepartmentLanes.vue
index bc96d820..c01aa9d1 100644
--- a/src/components/session/token/SessionUser/Objects/DepartmentLanes.vue
+++ b/src/components/session/token/SessionUser/Objects/DepartmentLanes.vue
@@ -1,10 +1,7 @@
 <script>
-import Swal from "sweetalert2";
-import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { getDepartmentName } from "@/components/session/token/SessionUser/Objects/Departments.vue";
-import {ref} from "vue";
 
 
 
@@ -66,8 +63,16 @@ import {ref} from "vue";
             required: false
           }
         },
+        relay_machine_id: {
+          label: "Maskine relæ ID",
+          type: "string",
+          sortable: true,
+          creation: {
+            required: false
+          }
+        },
       },
-      add: async (department, name, relay_in_id = null, relay_out_id = null) => {
+      add: async (department, name, relay_in_id = null, relay_out_id = null, relay_machine_id = null) => {
         return ObjectsGlobal.add.object(
             DepartmentLanes.meta.endpoint,
             {
@@ -75,6 +80,7 @@ import {ref} from "vue";
               name: name,
               relay_in_id: relay_in_id,
               relay_out_id: relay_out_id,
+              relay_machine_id: relay_machine_id
             }
         );
       },
@@ -111,6 +117,14 @@ import {ref} from "vue";
               relay_out_id
           )
         },
+        relay_machine_id: async (id, relay_machine_id) => {
+          return ObjectsGlobal.set.column(
+              DepartmentLanes.meta.endpoint,
+              id,
+              "relay_machine_id",
+              relay_machine_id
+          )
+        },
       },
       get: {
         all: async () => {
diff --git a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
index 2bd4c5e6..445e2fde 100644
--- a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
+++ b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
@@ -1,8 +1,6 @@
 <script>
 import Swal from "sweetalert2";
 import {authenticatedRequest, unauthenticatedRequest} from "@/components/session/authenticatedRequest.vue";
-import {end} from "@popperjs/core";
-import SessionUser from "@/components/session/token/SessionUser.vue";
 
 /**
  * The Global Objects object, which contains global functions for objects.
@@ -22,8 +20,20 @@ export const ObjectsGlobal = {
         return `Rediger ${object.columns[column].label.toLowerCase()}`;
       },
       compare: "Sammenlign",
+      generate_wash_certificate: "Generer vaskecertifikat",
+      download_wash_certificate: "Download vaskecertifikat",
+      login: "Log ind",
+      register: "Opret bruger",
+      total_price_amount: 'Beløb',
+      change_customer: "Skift kunde",
+      settings: "Indstillinger",
+      view_order: "Se transaktion",
       collection: "Samling",
       generated: "Genereret",
+      login_with_qr_code: "Log ind (med QR kode)",
+      logout: "Log ud",
+      wash_multiple: "Vaske",
+      homepage: "Forside",
       error_loading_transaction: "Hentning mislykkedes",
       requires_action: "Kræver handling",
       unknown_error: "Ukendt fejl",
@@ -168,7 +178,7 @@ export const ObjectsGlobal = {
       remove: 'Fjern',
       showing: 'Viser',
       add: 'Tilføj',
-      reload: 'Genindlæs',
+      reload: 'Opdater',
       time: {
         at_hour: 'Kl.',
         today: 'I dag',
@@ -274,11 +284,32 @@ export const ObjectsGlobal = {
         "PUT",
         {
           id: id,
-          [column]: value
-        }
+          [column]: value,
+          },
+          (error) => {
+            ObjectsGlobal.errorHandler.handleError(error);
+          }
       );
     }
   },
+  errorHandler: {
+    /**
+     * Handle an error
+     * @param {object} error The error object
+     */
+    handleError: (error) => {
+      console.error(error);
+      let message = ObjectsGlobal.language.unknown_error;
+      if (error.response && error.response.data && error.response.data.data.message) {
+        message = error.response.data.data.message;
+      }
+      Swal.fire({
+        icon: 'error',
+        title: ObjectsGlobal.language.error,
+        text: message,
+      });
+    }
+  },
   add: {
     /**
      * Add an object
@@ -356,7 +387,7 @@ export const ObjectsGlobal = {
         });
       }
     },
-    list: async (endpoint, optionsObject = {filters: {}, pagination: {page: 1, limit: 100}}) => {
+    list: async (endpoint, optionsObject = {filters: {}, pagination: {page: 1, limit: 100, order: 'id:DESC'}}) => {
       return await authenticatedRequest(
           endpoint,
           "GET",
@@ -366,6 +397,7 @@ export const ObjectsGlobal = {
             page: optionsObject.pagination.page,
             limit: optionsObject.pagination.limit,
             search: optionsObject.search || '',
+            order: optionsObject.pagination.order || 'id:DESC',
           }).then((response) => {
             return response.data.data;
           }).catch((error) => {
@@ -534,7 +566,10 @@ export const ObjectsGlobal = {
     // Return the form
     return html;
   },
-  async generateEditObjectFieldForm(object, column, value) {
+  async generateEditObjectFieldForm(object, column, value, options = { filters: {
+      //customer_id: 12345679,
+      //department_id: 2
+    }, pagination: { limit: 10, page: 1 } }) {
     let html = '';
     function ifNullDefault(value, defaultValue) {
       return value === null ? defaultValue : value;
@@ -569,6 +604,14 @@ export const ObjectsGlobal = {
           </div>
         </div>`;
         break;
+      case 'datetime':
+        html += `<div class="field">
+          <label class="label has-text-black">${object.columns[column].label}</label>
+          <div class="control">
+            <input class="input has-background-light has-text-black" type="datetime-local" id="${column}" value="${value}">
+          </div>
+        </div>`;
+        break;
       case 'select':
         html += `<div class="field">
             <label class="label has-text-black">${object.columns[column].label}</label>
@@ -576,13 +619,13 @@ export const ObjectsGlobal = {
             <!-- Select -->
             <div class="select is-fullwidth">
               <select id="${column}" class="has-background-light has-text-black">`;
-        await object.columns[column].options().then((response) => {
+        await object.columns[column].options(options).then((response) => {
           console.log(response);
           // How long are the list of options
           for (let i = 0; i < response.length; i++) {
             var tmp = response[i];
             console.log(tmp);
-            html += `<option value="${tmp.id}">${tmp.name}</option>`;
+            html += `<option value="${tmp.id}">${tmp.name ? tmp.name : tmp.id}</option>`;
           }
         });
         html += `</select>
@@ -592,8 +635,8 @@ export const ObjectsGlobal = {
     }
     return html;
   },
-  showEditObjectFieldForm: async (object, id, column, value, onAfterSubmit = null) => {
-    let html = await ObjectsGlobal.generateEditObjectFieldForm(object, column, value);
+  showEditObjectFieldForm: async (object, id, column, value, onAfterSubmit = null, options = {}) => {
+    let html = await ObjectsGlobal.generateEditObjectFieldForm(object, column, value, options);
     return Swal.fire({
       title: ObjectsGlobal.language.field(object, column),
       html: html,
@@ -729,6 +772,20 @@ export const ObjectsGlobal = {
         });
       }
     })
+  },
+  performAction: async (endpoint, id, action, data = {}, onAfterSubmit = null) => {
+    return authenticatedRequest(
+      `${endpoint}/${action}`,
+      "POST",
+      {
+        id: parseInt(id),
+        ...data
+      }
+    ).then(() => {
+      if (onAfterSubmit !== null) {
+        onAfterSubmit();
+      }
+    });
   }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/session/token/SessionUser/Objects/OrderBookings.vue b/src/components/session/token/SessionUser/Objects/OrderBookings.vue
new file mode 100644
index 00000000..0587577d
--- /dev/null
+++ b/src/components/session/token/SessionUser/Objects/OrderBookings.vue
@@ -0,0 +1,407 @@
+<script>
+import Swal from "sweetalert2";
+import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+
+/**
+ * The OrderBookings object
+ */
+export const OrderBookings = {
+  meta: {
+    title: "Bookinger",
+    icon: "fas fa-list",
+    description: "Oversigt over order bookinger",
+    endpoint: "/order-bookings",
+    labels: {
+      single: "booking",
+      multiple: "bookinger",
+      fields: {
+        names: {
+          customer_number: {
+            label: "E-conomic kundenummer",
+          },
+        },
+      },
+    },
+  },
+  columns: {
+    id: {
+      label: "ID",
+      type: "number",
+      sortable: true,
+      creation: {
+        required: false
+      }
+    },
+    customer_number: {
+      label: "Kundenummer",
+      type: "number",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    department: {
+      label: "Afdeling",
+      type: "select",
+      sortable: true,
+      creation: {
+        required: true
+      },
+      options: async () => {
+        return SessionUser.objects.department_notification_sms.columns.department.options()
+      }
+    },
+    reg_1: {
+      label: "Reg. 1",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    reg_2: {
+      label: "Reg. 2",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    reg_3: {
+      label: "Reg. 3",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    datetime: {
+      label: "Dato",
+      type: "datetime",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    note: {
+      label: "Notat",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    reference: {
+      label: "Reference",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    po: {
+      label: "PO Nummer",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    pickup: {
+      label: "Hentning",
+      type: "boolean",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    items: {
+      label: "Varer",
+      type: "array",
+      sortable: false,
+      creation: {
+        required: false
+      },
+    },
+    order_id: {
+      label: "Order",
+      type: "select",
+      sortable: true,
+      creation: {
+        required: false
+      },
+      options: async (options = { filters: {
+          //customer_id: 12345679,
+          //department_id: 2
+        }, pagination: { limit: 10, page: 1, order: 'id:DESC' } }) => {
+        return SessionUser.objects.orders.get.list(options).then((orders) => {
+          return [
+              { id: null, name: "Ingen" },
+              ...orders.map((order) => {
+                return {
+                  ...order,
+                  name: `#${order.id} - ${getDepartmentName(order.department_id)} - ${order.created_at}`
+                };
+              })
+          ];
+        });
+      }
+    },
+    /**
+     *     status: {
+     *       label: "Status",
+     *       type: "select",
+     *       sortable: true,
+     *       creation: {
+     *         required: false
+     *       },
+     *       options: async () => {
+     *         return [
+     *           { id: 'pending', name: "Afventer" },
+     *           { id: 'cancelled', name: "Annulleret" },
+     *           { id: 'completed', name: "Færdig" },
+     *         ];
+     *       }
+     *     },
+     */
+    created_at: {
+      label: "Oprettet",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    deleted_at: {
+      label: "Slettet",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+  },
+  add: async (customer_number, department, reg_1, reg_2 = null, reg_3 = null, datetime, note = null, reference = null, po = null, pickup = false, items = []) => {
+    return ObjectsGlobal.add.object(
+        OrderBookings.meta.endpoint,
+        {
+          customer_number: parseInt(customer_number),
+          department: parseInt(department),
+          reg_1,
+          reg_2,
+          reg_3,
+          datetime,
+          note,
+          reference,
+          po,
+          pickup,
+          items,
+        },
+        {authenticated: SessionUser.functions.hasToken()}
+    );
+  },
+  set: {
+    customer_number: async (id, customer_number) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "customer_number",
+          parseInt(customer_number)
+      )
+    },
+    department: async (id, department) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "department",
+          parseInt(department)
+      )
+    },
+    reg_1: async (id, reg_1) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "reg_1",
+          reg_1
+      )
+    },
+    reg_2: async (id, reg_2) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "reg_2",
+          reg_2
+      )
+    },
+    reg_3: async (id, reg_3) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "reg_3",
+          reg_3
+      )
+    },
+    datetime: async (id, datetime) => {
+      // Input format: 2025-11-05T13:00
+      // Output format: 2025-11-05 13:00:00
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "datetime",
+          datetime.replace("T", " ") + ":00"
+      )
+    },
+    note: async (id, note) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "note",
+          note
+      )
+    },
+    reference: async (id, reference) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "reference",
+          reference
+      )
+    },
+    po: async (id, po) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "po",
+          po
+      )
+    },
+    pickup: async (id, pickup) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "pickup",
+          pickup === true || pickup === 1 || pickup === "1" || pickup === "true"
+      )
+    },
+    items: async (id, items) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "items",
+          items
+      )
+    },
+    order_id: async (id, order_id) => {
+      return ObjectsGlobal.set.column(
+          OrderBookings.meta.endpoint,
+          id,
+          "order_id",
+          order_id ? parseInt(order_id) : null
+      )
+    },
+  },
+  get: {
+    single: async (identifier) => {
+      return ObjectsGlobal.get.object(OrderBookings.meta.endpoint, identifier, {authenticated: SessionUser.functions.hasToken()});
+    },
+    all: async (queryParams = {}) => {
+      return ObjectsGlobal.get.objects(OrderBookings.meta.endpoint, queryParams, {authenticated: SessionUser.functions.hasToken()});
+    },
+    list: async (optionsObject = {filters: {}, pagination: {page: 1, limit: 100}, search: ''}) => {
+      return ObjectsGlobal.get.list(OrderBookings.meta.endpoint, optionsObject);
+    },
+  },
+  delete: {
+    single: async (id) => {
+      return ObjectsGlobal.delete.object(
+          OrderBookings.meta.endpoint,
+          id,
+          { authenticated: SessionUser.functions.hasToken() }
+      );
+    }
+  },
+  functions: {
+    showDeleteConfirmationModal: async (id, onAfterDelete = null) => {
+      return ObjectsGlobal.showDeleteConfirmationModal(
+          OrderBookings,
+          id,
+          onAfterDelete
+      );
+    },
+    complete: async (id, safetySeal = null, onAfterComplete = null) => {
+      return ObjectsGlobal.performAction(
+          OrderBookings.meta.endpoint,
+          id,
+          "complete",
+          { safety_seal: parseInt(safetySeal) },
+          onAfterComplete
+      );
+    },
+    showCompleteConfirmationModal: async (id, onAfterComplete = null) => {
+      // Show a confirmation modal with input for safety seal
+      Swal.fire({
+        title: `Mark order booking #${id} as completed`,
+        text: "Are you sure you want to mark this order booking as completed? Please enter the safety seal number to confirm.",
+        input: 'text',
+        inputLabel: 'Safety Seal Number',
+        inputPlaceholder: 'Enter safety seal number',
+        showCancelButton: true,
+        showDenyButton: true, // Used when no safety seal is available
+        denyButtonText: 'No Safety Seal',
+        confirmButtonText: 'Complete',
+        inputValidator: (value) => {
+          if (!value) {
+            return 'You need to write something!';
+          }
+        },
+        preDeny(value) {
+          console.warn('No safety seal provided, proceeding without it.');
+          Swal.showLoading();
+          return OrderBookings.functions.complete(id, null, onAfterComplete).then(() => {
+            Swal.close();
+          });
+        },
+        preConfirm: (safetySeal) => {
+          if (!safetySeal) {
+            Swal.showValidationMessage('Safety seal number is required');
+          }
+          return safetySeal;
+        },
+      }).then((result) => {
+        if (result.isConfirmed) {
+          return OrderBookings.functions.complete(id, result.value, onAfterComplete);
+        }
+      });
+    }
+  },
+  /**
+   * Show the create object form
+   * @param onAfterSubmit
+   * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+   */
+  showCreateObjectForm: (onAfterSubmit = null) => {
+    return ObjectsGlobal.showCreateObjectForm(OrderBookings, onAfterSubmit);
+  },
+  /**
+   * Show the edit object field form
+   * @param id
+   * @param column
+   * @param value
+   * @param onAfterSubmit
+   * @param options
+   * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+   */
+  showEditObjectFieldForm: (id, column, value, onAfterSubmit = null, options = { filters: {}, pagination: { limit: 10, page: 1 } }) => {
+    return ObjectsGlobal.showEditObjectFieldForm(
+        OrderBookings,
+        id,
+        column,
+        value,
+        onAfterSubmit,
+        options
+    );
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/session/token/SessionUser/Objects/Orders.vue b/src/components/session/token/SessionUser/Objects/Orders.vue
index 10c70435..f2e1ef19 100644
--- a/src/components/session/token/SessionUser/Objects/Orders.vue
+++ b/src/components/session/token/SessionUser/Objects/Orders.vue
@@ -43,7 +43,7 @@ const showCustomerSearchModal = (onSuccessFunction = null) => {
     html: div, // Include the Vue component’s container
     showCancelButton: true,
     showConfirmButton: false,
-    heightAuto: true,
+    heightAuto: false,
     didDestroy: () => {
       // Clean up the Vue app when the modal is closed
       app.unmount()
@@ -221,7 +221,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
         description: "Oversigt over vaskelog",
         endpoint: "/orders",
         labels: {
-          single: "Vaskelog",
+          single: "Transaktion",
           multiple: "Vaskelog",
           entries: "Vaske",
         }
@@ -236,7 +236,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         customer_id: {
-          label: "E-conomic kunde ID",
+          label: "Kunde",
           type: "number",
           sortable: true,
           creation: {
@@ -244,7 +244,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         cashier_id: {
-          label: "Kasserer ID",
+          label: "Kasserer",
           type: "number",
           sortable: true,
           creation: {
@@ -252,7 +252,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         department_id: {
-          label: "Afdeling ID",
+          label: "Afdeling",
           type: "number",
           sortable: true,
           creation: {
@@ -300,7 +300,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         invoice_collection_id: {
-          label: "Faktura samling ID",
+          label: "Faktura",
           type: "number",
           sortable: true,
           creation: {
@@ -308,7 +308,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         booking_id: {
-          label: "Booking ID",
+          label: "Booking",
           type: "number",
           sortable: true,
           creation: {
@@ -340,7 +340,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
           }
         },
         created_at: {
-          label: "Oprettet",
+          label: "Dato",
           type: "date",
           sortable: true,
           creation: {
@@ -504,7 +504,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
         multiple: async (ids) => {
           return ObjectsGlobal.get.objectsByIds('/order', ids);
         },
-        list: async (optionsObject = {filters: {}, pagination: {page: 1, limit: 100}}) => {
+        list: async (optionsObject = {filters: {}, pagination: {page: 1, limit: 100, order: 'id:DESC'}}) => {
           return ObjectsGlobal.get.list(Orders.meta.endpoint, optionsObject);
         },
       },
@@ -605,6 +605,7 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
             return response.data.data;
           }).catch((error) => {
             console.error(error);
+            throw error;
           });
         },
         /**
@@ -651,8 +652,9 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
          * Generate a link, to download an attachment from the order
          * @param id (order id)
          * @param attachment_id (attachment id)
+         * @param autoOpen
          */
-        downloadAttachment: async (id, attachment_id) => {
+        downloadAttachment: async (id, attachment_id, autoOpen = false) => {
           return SessionUser.request(
               Orders.meta.endpoint + "/attachments/download",
               "GET",
@@ -661,10 +663,57 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
                 attachment_id: attachment_id
               }
           ).then((response) => {
+            const downloadLink = response.data.data.download_link;
+            if (autoOpen) {
+              // Open the download link in a new tab
+              window.open(downloadLink, '_blank');
+            }
             return response.data.data.download_link;
           }).catch((error) => {
             console.error(error);
           });
+        },
+        showAttachWashCertificateForm(order_id, onAfterSubmit = null) {
+          Swal.fire({
+            title: 'Generér vaskecertifikat',
+            text: 'Indtast safety seal, hvis relevant:',
+            input: 'text',
+            inputLabel: 'Safety Seal',
+            showCancelButton: true,
+            confirmButtonText: 'Generér',
+            cancelButtonText: 'Annuller',
+            preConfirm: (safety_seal) => {
+              return SessionUser.request(
+                  '/order/wash-certificate',
+                  'POST',
+                  {
+                    id: parseInt(order_id),
+                    safety_seal: safety_seal
+                  }
+              ).then((response) => {
+                return response.data.data;
+              }).catch((error) => {
+                console.error(error);
+                Swal.showValidationMessage(
+                    `Fejl ved generering af vaskecertifikat: ${error}`
+                );
+              });
+            },
+            heightAuto: false,
+          }).then((result) => {
+            if (result.isConfirmed) {
+              Swal.fire({
+                title: 'Vaskecertifikat genereret',
+                text: 'Vaskecertifikatet er blevet genereret og vedhæftet ordren.',
+                icon: 'success',
+                timer: 2000,
+              });
+              // Call the onAfterSubmit function if provided
+              if (onAfterSubmit) {
+                onAfterSubmit(result.value);
+              }
+            }
+          });
         }
       },
       /**
diff --git a/src/components/session/token/SessionUser/Objects/Vehicles.vue b/src/components/session/token/SessionUser/Objects/Vehicles.vue
index 5d82bd8a..f85e163d 100644
--- a/src/components/session/token/SessionUser/Objects/Vehicles.vue
+++ b/src/components/session/token/SessionUser/Objects/Vehicles.vue
@@ -34,14 +34,24 @@ export const Vehicles = {
       creation: {
         required: true,
       },
-      options: async (only_that_allows_subscription = true, options = {isWash: null, addDefaultOption: true, restrictToCategory4: null, includeProductRaw: false}) => {
+      options: async (only_that_allows_subscription = true, options = {isWash: true, addDefaultOption: true, restrictToCategory4: null, includeProductRaw: false}) => {
         // Get all the products, that has 'subscription_allowed' set to true
         let products = await SessionUser.objects.products.get.all();
-        // If the options are set, filter the products based on the product flags
-        if (options.isWash !== null) {
-          products = products.filter((product) => product.is_wash === options.isWash);
+        let opt = {
+          isWash: null,
+          addDefaultOption: true,
+          restrictToCategory4: null,
+          includeProductRaw: false,
+          allowsSubscription: true,
+          ...(options ? options : {}),
+          ...(only_that_allows_subscription ? {allowsSubscription: true} : {}),
         }
-        if (options.addDefaultOption !== false) {
+        console.warn("Getting products with options", opt);
+        // If the options are set, filter the products based on the product flags
+        if (opt.isWash !== null) {
+          products = products.filter((product) => product.is_wash === opt.isWash);
+        }
+        if (opt.addDefaultOption !== false) {
           // Add a default option (0, unknown)
           products.unshift({
             id: 0,
@@ -49,16 +59,16 @@ export const Vehicles = {
           });
         }
         // Filter the products based on the subscription_allowed flag and category
-        if (only_that_allows_subscription) {
-          products = products.filter((product) => product.subscription_allowed === true || product.id === 0);
+        if (opt.allowsSubscription !== null) {
+          products = products.filter((product) => product.subscription_allowed === opt.allowsSubscription);
         }
-        if (options.restrictToCategory4 === null || options.restrictToCategory4 === true) {
+        if (opt.restrictToCategory4 === true) {
           products = products.filter((product) => product.category === 4 || product.id === 0); // Only allow category 4 (car) and defaultValue
         }
-        // Map the products to the options
+        // Map the products to the opt
         return products.map((product) => {
           return {
-            ...options.includeProductRaw ? { product: product } : {},
+            ...opt.includeProductRaw ? { product: product } : {},
             id: parseInt(product.id),
             name: product.name,
             addons: product.addons,
@@ -92,7 +102,7 @@ export const Vehicles = {
       }
     },
     reference: {
-      label: "Reference / Intern nummer",
+      label: "Reference",
       type: "string",
       sortable: true,
       creation: {
diff --git a/src/components/session/token/superUser/modules/selfserve/Config.vue b/src/components/session/token/superUser/modules/selfserve/Config.vue
new file mode 100644
index 00000000..7209ad40
--- /dev/null
+++ b/src/components/session/token/superUser/modules/selfserve/Config.vue
@@ -0,0 +1,47 @@
+<script>
+import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
+
+/**
+ * The Self Serve -> Config object
+ */
+export const Config = {
+    get: async ( variable ) => {
+      return authenticatedRequest(
+          "/selfserve/config?variable=" + variable,
+          "GET")
+    },
+    get_all: async () => {
+      return authenticatedRequest(
+          "/selfserve/config",
+          "GET")
+    },
+    set: async ( variable, value ) => {
+      return authenticatedRequest(
+          "/selfserve/config",
+          "POST",
+          {
+            variable: variable,
+            value: value
+          })
+    },
+    keys: {
+      minute_product: {
+        get: async () => {
+          return Config.get("minute_product");
+        },
+        set: async (value) => {
+          return Config.set("minute_product", value);
+        },
+      },
+    },
+    enabled: {
+      get: async () => {
+        return Config.get("enabled");
+      },
+      set: async (enabled) => {
+        return Config.set("enabled", enabled);
+      },
+  },
+};
+
+</script>
\ No newline at end of file
diff --git a/src/components/session/token/superUser/modules/selfserve/SelfServe.vue b/src/components/session/token/superUser/modules/selfserve/SelfServe.vue
new file mode 100644
index 00000000..74da18d4
--- /dev/null
+++ b/src/components/session/token/superUser/modules/selfserve/SelfServe.vue
@@ -0,0 +1,23 @@
+<script>
+import { Config } from "@/components/session/token/superUser/modules/selfserve/Config.vue";
+
+/**
+ * The Self Serve object
+ */
+export const SelfServe = {
+  meta: {
+    title: "SelfServe",
+    icon: "fas fa-car",
+    description: "SelfServe, som bruges til at hente valutakurser",
+    endpoint: "/modules/selfserve",
+    config_endpoint: "/configuration/selfserve",
+    labels: {
+      single: "selfserve",
+      multiple: "selfserve"
+    }
+  },
+  config: Config,
+  functions: {}
+};
+
+</script>
\ No newline at end of file
diff --git a/src/components/session/token/superUserObject.vue b/src/components/session/token/superUserObject.vue
index 9ea105d1..7a725e03 100644
--- a/src/components/session/token/superUserObject.vue
+++ b/src/components/session/token/superUserObject.vue
@@ -19,6 +19,7 @@ import { OpenAI } from "@/components/session/token/superUser/modules/openAI/Open
 import { LicensePlateRecognizer } from "@/components/session/token/superUser/modules/licensePlateRecognizer/LicensePlateRecognizer.vue";
 import { VirkData} from "@/components/session/token/superUser/modules/virkdata/VirkData.vue";
 import { Shelly } from "@/components/session/token/superUser/modules/shelly/Shelly.vue";
+import { SelfServe } from "@/components/session/token/superUser/modules/selfserve/SelfServe.vue";
 import { useQRCode } from '@vueuse/integrations/useQRCode';
 
 
@@ -46,6 +47,7 @@ export const SuperUserObject = {
     licenseplaterecognizer: LicensePlateRecognizer,
     virkdata: VirkData,
     shelly: Shelly,
+    selfserve: SelfServe,
   },
   /** Intimidate a user */
   intimidate: {
diff --git a/src/components/shop/POSDepartmentProcess.vue b/src/components/shop/POSDepartmentProcess.vue
index 87506ed4..39939988 100644
--- a/src/components/shop/POSDepartmentProcess.vue
+++ b/src/components/shop/POSDepartmentProcess.vue
@@ -205,7 +205,6 @@ export const getOrderDetails = async () => {
 
 export const getOrderReg1 = async (orderId) => {
   const order = await getOrderDetails(orderId);
-  console.log(order);
   if (!order) {
     return '';
   }
@@ -298,7 +297,6 @@ export const getScans = (forceClearCache = false) => {
   // Get the scans from the API
   getScansDepartmentPagination(department_id.value, scans_page.value, scans_limit.value).then((response) => {
     scans.value = response.data.data;
-    console.log(scans.value);
   }).catch((error) => {
     console.error(error);
   });
@@ -939,10 +937,10 @@ export const is_latest_search = (search_id) => {
 // Get the department booking list
 export const loadPendingBookings = () => {
   SessionUser.request(
-      SessionUser.objects.bookings.meta.endpoint,
+      SessionUser.objects.order_bookings.meta.endpoint,
       'GET',
       {
-        filters: 'department:' + department_id.value + ',status:pending',
+        filters: 'department:' + department_id.value + ',order_id:null',
         page: 1,
         limit: 100,
       }
@@ -956,7 +954,7 @@ export const loadPendingBookings = () => {
 
 export const doesVehiclePlateHaveBooking = (vehiclePlate) => {
   // Check if the vehicle has a booking in the pending bookings list
-  return pendingBookings.value.some(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
+  return pendingBookings.value.some(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
 };
 
 export const getVehiclePlateBooking = (vehiclePlate) => {
@@ -965,7 +963,7 @@ export const getVehiclePlateBooking = (vehiclePlate) => {
     return null;
   }
   // Find the booking for the given vehicle plate
-  return pendingBookings.value.find(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
+  return pendingBookings.value.find(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
 };
 
 const get_unregistered_vehicle_object = (reg) => {
@@ -1069,6 +1067,7 @@ export const searchVehicle = async ( inputValue, search_id ) => {
       'GET',
       {
         search: inputValue,
+        ...(department_id.value ? {department: department_id.value} : {}),
         page: 1,
         limit: 10,
       }
@@ -1135,14 +1134,13 @@ export const downloadAttachment = (attachmentId, orderId = null) => {
   if (!attachmentId) {
     return false;
   }
-  if (!orderId) {
-    let orderId = order_id.value;
-  }
-  return SessionUser.objects.orders.functions.downloadAttachment(orderId, attachmentId).then((response) => {
+  return SessionUser.objects.orders.functions.downloadAttachment(orderId ? orderId : order_id.value, attachmentId).then((response) => {
     // Create a link element
     const link = document.createElement('a');
     link.href = response;
     link.download = response.filename;
+    link.style.display = 'none';
+    link.target = '_blank';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
diff --git a/src/components/shop/Products.vue b/src/components/shop/Products.vue
index 6a22fe97..4e80f1a5 100644
--- a/src/components/shop/Products.vue
+++ b/src/components/shop/Products.vue
@@ -3,32 +3,48 @@ import { ref } from 'vue'
 import axios from 'axios'
 import {API_URL} from "@/main.js";
 
-export const getProducts = (departmentId = null) => {
+export const getProducts = (departmentId = null, final_price = true, customer_number = null) => {
   const token = localStorage.getItem('token');
   if (!token) {
     return null;
   }
-  return axios.get(API_URL + '/products' + (departmentId ? '?department_id=' + departmentId : ''), {
+  const query = new URLSearchParams();
+  if (departmentId) {
+    query.append('department_id', departmentId);
+  }
+  if (final_price) {
+    query.append('final_price', 'true');
+  }
+  if (customer_number) {
+    query.append('customer_id', customer_number);
+  }
+  return axios.get(API_URL + '/products' + (query.toString() ? '?' + query.toString() : ''), {
     headers: {
       Authorization: `Bearer ${token}`
     }
   });
 };
 
-export const getProductCategory = (category, departmentId = null) => {
+export const orderProducts = (products) => {
+  // Order products by order_priority
+  products.sort((a, b) => a.order_priority - b.order_priority);
+  return products;
+}
+
+export const getProductCategory = (category, departmentId = null, final_price = true, customer_number = null) => {
   const token = localStorage.getItem('token');
   if (!token) {
     return null;
   }
   // If the category is null, return all products
   if (!category || category === 'null') {
-    return axios.get(API_URL + '/products' + (departmentId ? '?department_id=' + departmentId : ''), {
+    return axios.get(API_URL + '/products' + (departmentId ? '?department_id=' + departmentId : '') + (final_price ? '&final_price=true' : '') + (customer_number ? '&customer_id=' + customer_number : ''), {
       headers: {
         Authorization: `Bearer ${token}`
       }
     });
   }
-  return axios.get(API_URL + '/products?category=' + category + (departmentId ? '&department_id=' + departmentId : ''), {
+  return axios.get(API_URL + '/products?category=' + category + (departmentId ? '&department_id=' + departmentId : '') + (final_price ? '&final_price=true' : '') + (customer_number ? '&customer_id=' + customer_number : ''), {
     headers: {
       Authorization: `Bearer ${token}`
     }
diff --git a/src/components/viewport/Viewport.vue b/src/components/viewport/Viewport.vue
index ff7c1e8b..adbbeabe 100644
--- a/src/components/viewport/Viewport.vue
+++ b/src/components/viewport/Viewport.vue
@@ -3,20 +3,118 @@
 import ViewportHeader from "@/components/viewport/page/headers/ViewportHeader.vue";
 import ViewportContent from "@/components/viewport/page/content/ViewportContent.vue";
 import { backgroundColor } from "./page/headers/ViewportHeaderSettings.vue";
+import DesktopNavigationBuefy from "@/components/viewport/page/headers/DesktopNavigationBuefy.vue";
+import { ref, onMounted, computed } from "vue";
+import SessionUser from "@/components/session/token/SessionUser.vue";
 import ViewportFooter from "@/components/viewport/page/footers/ViewportFooter.vue";
+import {useRouter} from "vue-router";
+import { showFooterInContent } from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
+const router = useRouter();
+
 console.log("Viewport component loaded");
+
+const headerHeight = ref(60); // Default header height in pixels
+const headerElement = ref<HTMLElement | null>(null);
+const footerHeight = ref(0); // Default footer height in pixels
+const footerElement = ref<HTMLElement | null>(null);
+
+const updateHeaderHeight = () => {
+  if (headerElement.value) {
+    headerHeight.value = headerElement.value.offsetHeight;
+    console.log("Header height updated:", headerHeight.value);
+  }
+};
+
+const independentScrollMaxHeight = computed(() => {
+  return `calc(100vh - ${headerHeight.value + footerHeight.value}px)`;
+});
+
+onMounted(() => {
+  updateHeaderHeight();
+  window.addEventListener('resize', updateHeaderHeight);
+});
+
+const isFooterInContent = computed(() => {
+  if (!showFooterInContent.value) {
+    return false;
+  }
+  const path = router.currentRoute.value.path;
+  // Show footer only on specific paths
+  return path.startsWith("/user") && SessionUser.functions.device.isMobile();
+});
 </script>
 
 <template>
-  <div class="viewport" :style="{ backgroundColor: backgroundColor }">
-    <ViewportHeader/>
-    <ViewportContent>
-      <slot/>
-    </ViewportContent>
+  <div class="viewport no-scrollbar-visible" :style="{ backgroundColor: backgroundColor }" style="overflow: hidden;">
+    <div ref="headerElement">
+      <ViewportHeader />
+    </div>
+    <!-- Spacer (To avoid content being hidden behind the fixed header) -->
+    <div :style="{ height: headerHeight + 'px' }" class="is-hidden-mobile"></div>
+    <div class="fixed-grid has-12-cols">
+    <!-- Navigation and content wrapper -->
+      <div class="grid">
+        <div class="cell is-col-span-2-desktop is-hidden-mobile is-col-span-3-tablet" :class="{'is-col-span-1-widescreen': SessionUser.functions.device.isUltraWideScreen()}">
+          <div class="independent-scroll slick-scroll-layout" :style="{ maxHeight: independentScrollMaxHeight, minHeight: independentScrollMaxHeight }">
+            <DesktopNavigationBuefy />
+          </div>
+        </div>
+          <div class="cell is-col-span-10-desktop is-col-span-12-mobile is-col-span-9-tablet" :class="{'is-col-span-11-widescreen': SessionUser.functions.device.isUltraWideScreen()}">
+          <div class="independent-scroll slick-scroll-layout" :style="{ maxHeight: independentScrollMaxHeight }">
+            <ViewportContent>
+              <slot />
+              <div class="has-text-centered" v-show="isFooterInContent">
+              <a class="is-align-content-center" href="/">
+                <!-- All rights reserved footer logo -->
+                <img src="@/assets/branding/truckwash-banner-white-compressed.png"
+                     alt="Truckwash Logo"
+                     class="transform-color-black mt-2 mb-0"
+                     style="max-height: 28px;"
+                >
+                <p class="is-size-7 has-text-grey-light mb-2 mt-0">© Truckwash ApS. All rights reserved.</p>
+              </a>
+              </div>
+            </ViewportContent>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div ref="footerElement" v-if="SessionUser.functions.device.isMobile()">
+      <ViewportFooter/>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.no-scrollbar-visible::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+.no-scrollbar-visible {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.independent-scroll {
+  overflow: auto;
+  max-height: calc(100vh - 60px); /* Automatically adjusted by script */
+}
+.slick-scroll-layout {
+  padding-right: 10px; /* Adjust based on scrollbar width */
+}
+.slick-scroll-layout::-webkit-scrollbar {
+  width: 8px;
+}
+.slick-scroll-layout::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.slick-scroll-layout::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+.slick-scroll-layout::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
 .viewport {
   /** Fixed viewport styles */
   position: fixed;
@@ -33,4 +131,17 @@ console.log("Viewport component loaded");
   display: flex;
   flex-direction: column;
 }
+.size-to-fit {
+  overflow: auto;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  min-width: 0;
+  max-width: calc(100vw - 250px); /* Adjust based on navigation width */
+}
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/viewport/conditions/ViewPortFooterOptions.vue b/src/components/viewport/conditions/ViewPortFooterOptions.vue
new file mode 100644
index 00000000..cc63824a
--- /dev/null
+++ b/src/components/viewport/conditions/ViewPortFooterOptions.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { ref, defineComponent } from "vue";
+/**
+ * Variables
+ */
+const showFooterInContent = ref(true);
+/**
+ * Methods
+ */
+const setShowFooterInContent = (value: boolean) => {
+  showFooterInContent.value = value;
+};
+/**
+ * Exports
+ */
+export default defineComponent({
+  name: "ViewPortFooterOptions",
+});
+export { showFooterInContent, setShowFooterInContent };
+</script>
\ No newline at end of file
diff --git a/src/components/viewport/page/footers/DefaultFooter.vue b/src/components/viewport/page/footers/DefaultFooter.vue
index 1225987c..6a33ab7a 100644
--- a/src/components/viewport/page/footers/DefaultFooter.vue
+++ b/src/components/viewport/page/footers/DefaultFooter.vue
@@ -1,8 +1,7 @@
-<script setup lang="ts">
+<script setup>
 </script>
 
 <template>
-
 </template>
 
 <style scoped>
diff --git a/src/components/viewport/page/footers/MobileFooter.vue b/src/components/viewport/page/footers/MobileFooter.vue
new file mode 100644
index 00000000..4f8bb6d8
--- /dev/null
+++ b/src/components/viewport/page/footers/MobileFooter.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {BButton, BField, BIcon} from "buefy";
+import {computed, ref} from "vue";
+import { useRouter } from "vue-router";
+import { IS_DEV } from '@/main';
+
+const router = useRouter();
+
+const show = computed(() => {
+  const path = router.currentRoute.value.path;
+  // Show footer only on specific paths
+  return path.startsWith("/user");
+});
+
+/**
+ * Page navigation footer for mobile devices
+ */
+const pages = {
+  home: {
+    to: "/user",
+    label: "Hjem",
+    icon: "home",
+    disabled: false
+  },
+  wash: {
+    to: "/user/wash/start",
+    label: "Selv vask",
+    icon: "tint",
+    disabled: !IS_DEV,
+  },
+  bookings: {
+    to: "/user/bookings",
+    label: "Book vask",
+    icon: "calendar-alt",
+    disabled: false
+  },
+}
+</script>
+
+<template>
+  <div class="fixed-bottom-footer" v-show="show">
+    <section>
+      <b-field>
+        <div class="columns is-mobile is-vcentered is-variable is-gapless is-centered">
+          <template v-for="(page, key) in pages" :key="key">
+            <div class="column has-text-centered">
+              <b-button
+                  class="no-border-radius"
+                :type="$route.path.endsWith(page.to) ? 'is-info is-outlined is-light p-1' : 'p-1 is-light is-outlined'"
+                size="is-normal"
+                @click="$router.push(page.to)"
+                iconPack="fas"
+                expanded
+                  :disabled="page.disabled"
+              >
+                <span>
+                  <span><b-icon pack="fas" :icon="page.icon"></b-icon></span>
+                  <span><br/></span>
+                  <span>{{ page.label }}</span>
+                </span>
+              </b-button>
+            </div>
+          </template>
+        </div>
+      </b-field>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.no-border-radius {
+  border-radius: 0 !important;
+  border-width: 0 !important;
+}
+.fixed-bottom-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0;
+  border-top: 3px solid #34495e;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background-color: #2c3e50;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/viewport/page/footers/ViewportFooter.vue b/src/components/viewport/page/footers/ViewportFooter.vue
index 5f50d603..d2eb63c4 100644
--- a/src/components/viewport/page/footers/ViewportFooter.vue
+++ b/src/components/viewport/page/footers/ViewportFooter.vue
@@ -1,33 +1,21 @@
 <script setup lang="ts">
 import ViewportResponsiveWrapper from "@/components/viewport/conditions/elements/ViewportResponsiveWrapper.vue";
-import MobileContent from "@/components/viewport/page/content/MobileContent.vue";
-import TabletContent from "@/components/viewport/page/content/TabletContent.vue";
-import DesktopContent from "@/components/viewport/page/content/DesktopContent.vue";
-import DefaultContent from "@/components/viewport/page/content/DefaultContent.vue";
+import DefaultFooter from "@/components/viewport/page/footers/DefaultFooter.vue";
+import MobileFooter from "@/components/viewport/page/footers/MobileFooter.vue";
 </script>
 
 <template>
   <ViewportResponsiveWrapper>
     <!-- Slot for different viewport sizes -->
-    <template #mobile> <!-- Mobile content slot -->
-      <MobileContent>
-        <slot />
-      </MobileContent>
+    <template #mobile> <!-- Mobile footer slot -->
+      <MobileFooter/>
     </template>
-    <template #tablet> <!-- Tablet content slot -->
-      <TabletContent>
-        <slot />
-      </TabletContent>
+    <template #tablet> <!-- Tablet footer slot -->
+      <!-- None -->
     </template>
-    <template #desktop> <!-- Desktop content slot -->
-      <DesktopContent>
-        <slot />
-      </DesktopContent>
+    <template v-slot:desktop> <!-- Desktop footer slot -->
     </template>
-    <template #default> <!-- Default content slot, used when no specific viewport matches -->
-      <DefaultContent>
-        <slot />
-      </DefaultContent>
+    <template v-slot:default> <!-- Default footer slot, used when no specific viewport matches -->
     </template>
   </ViewportResponsiveWrapper>
 </template>
diff --git a/src/components/viewport/page/headers/DesktopHeader.vue b/src/components/viewport/page/headers/DesktopHeader.vue
index f64c4b9a..f74b5826 100644
--- a/src/components/viewport/page/headers/DesktopHeader.vue
+++ b/src/components/viewport/page/headers/DesktopHeader.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { toggleExpanded, isOpen, getDepartmentSelectionVisibility } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
-import DesktopNavigation from "@/components/viewport/page/headers/DesktopNavigation.vue";
 import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/NavigationMenuDepartment.vue";
 import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/NavigationMenuGlobalSearch.vue";
+import { IS_DEV } from '@/main';
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
 </script>
 
 <template>
@@ -13,12 +16,14 @@ import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/
       <a class="navbar-item is-align-content-center" href="/">
         <img src="@/assets/branding/truckwash-banner-white-compressed.png"
              alt="Truckwash Logo"
-             class="transform-color-black"><!-- width="112" height="28">-->
+             :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"
+             >
       </a>
+
     </div>
     <div class="navbar-start" style="width: 100%; max-width: 300px;">
       <!-- Global search -->
-      <div class="navbar-item" style="width: 100%;">
+      <div class="navbar-item" style="width: 100%;" v-show="false">
         <NavigationMenuGlobalSearch style="width: 100%;"/>
       </div>
       <!-- Department selection -->
@@ -26,27 +31,55 @@ import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/
         <NavigationMenuDepartment/>
       </div>
     </div>
-    <!-- Burger menu collapsed (from mobile navigation)
-    <template v-if="!isOpen">
-      <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="false" @click="toggleExpanded">
-        Don't ask why, but this is the only way to get the burger icon to work properly
-        <span class="navbar-burger-bar"></span>
-        <span class="navbar-burger-bar"></span>
-        <span class="navbar-burger-bar "></span> Invisible span to create the center line of the burger icon
-      </span>
-    </template>
-    Burger menu expanded
-    <template v-if="isOpen">
-      <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="true" @click="toggleExpanded">
-        <span class="navbar-burger-bar"></span>
-      </span>
-    </template>
-    <div id="navMenuMobile" class="navbar-menu">
-    </div>
-    -->
     <div class="navbar-end">
-      <!-- Navigation Menu -->
-      <DesktopNavigation/>
+      <!-- User account name and avatar (Desktop) -->
+      <div class="navbar-item mr-1">
+        <div class="buttons">
+          <!-- Back-Office button -->
+          <router-link class="button is-white" to="/superuser" v-if="SessionUser.canAccessSuperUser() && !route.path.includes('/superuser')">
+            <span class="icon">
+              <i class="fas fa-tools" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span>Backoffice</span>
+          </router-link>
+          <!-- Department button -->
+          <router-link class="button is-white" to="/admin" v-if="SessionUser.canAccessAdmin() && !route.path.includes('/admin')">
+            <span class="icon">
+              <i class="fas fa-building" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span>Afdelinger</span>
+          </router-link>
+          <!-- Return to own account if impersonating -->
+          <template v-if="SessionUser.hasSuperUserToken()">
+            <router-link class="button is-white" to="/auth/return">
+              <span class="icon">
+                <i class="fas fa-undo-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span>Tilbage til egen konto</span>
+            </router-link>
+          </template>
+          <router-link class="button is-white" to="/user/profile" v-if="SessionUser.authenticated.value">
+            <span class="icon">
+              <i class="fas fa-user-circle" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ SessionUser.authenticated.value ? SessionUser.getName() : ''}}</span>
+          </router-link>
+          <template v-else>
+            <router-link class="button is-white" to="/register">
+              <span class="icon">
+                <i class="fas fa-user-plus" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">Opret bruger</span>
+            </router-link>
+            <router-link class="button is-white" to="/login">
+              <span class="icon">
+                <i class="fas fa-sign-in-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">Log ind</span>
+            </router-link>
+          </template>
+        </div>
+      </div>
     </div>
   </nav>
   <!-- Spacer (To avoid content being hidden behind the fixed navbar) -->
@@ -85,6 +118,14 @@ import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/
 .transform-color-black {
   filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
 }
+.transform-color-red {
+  /* Invert colors and apply a red tint */
+  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
+}
+.transform-color-warning {
+  /* Invert colors and apply a yellow tint */
+  filter: invert(79%) sepia(37%) saturate(7473%) hue-rotate(200deg) brightness(103%) contrast(101%);
+}
 .navbar-burger {
   display: flex;
   flex-direction: column;
diff --git a/src/components/viewport/page/headers/DesktopNavigation.vue b/src/components/viewport/page/headers/DesktopNavigation.vue
index 1433a3d7..e4798bac 100644
--- a/src/components/viewport/page/headers/DesktopNavigation.vue
+++ b/src/components/viewport/page/headers/DesktopNavigation.vue
@@ -1,29 +1,11 @@
 <script setup lang="ts">
-import { toggleExpanded, isOpen } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import NavigationMenuItems from "@/components/viewport/page/headers/menu/NavigationMenuItems.vue";
-import SessionUser from "@/components/session/token/SessionUser.vue";
-import NavigationMenuUpdates from "@/components/viewport/page/headers/menu/NavigationMenuUpdates.vue";
-import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/NavigationMenuGlobalSearch.vue";
-const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || 'No build date';
-const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
-const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION || 'No app version';
-const VITE_IS_DEV = import.meta.env.DEV || false;
 const url = ref(window.location.href);
 </script>
 
 <template>
-  <NavigationMenuItems :isNavbarItem="true" :url="url"/>
-  <!-- Menu content (From mobile)
-  <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
-    <div>Version: {{ VITE_APP_VERSION }}</div>
-    <div>Commit: {{ VITE_COMMIT_HASH }}</div>
-    <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
-    <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
-  </div>
-  Check for updates button
-  <NavigationMenuUpdates/>
-  -->
+  <NavigationMenuItems :isNavbarItem="true" :url="url" />
 </template>
 
 <style scoped>
diff --git a/src/components/viewport/page/headers/DesktopNavigationBuefy.vue b/src/components/viewport/page/headers/DesktopNavigationBuefy.vue
new file mode 100644
index 00000000..4e7d3ef6
--- /dev/null
+++ b/src/components/viewport/page/headers/DesktopNavigationBuefy.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { toggleExpanded, isOpen } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
+import { ref, computed } from 'vue';
+import logo from "@/assets/branding/truckwash-banner-white-compressed.png";
+import { useNavigationItems } from "@/components/models/navigation/items/NavigationMenuItems.vue";
+import {useRoute, useRouter} from "vue-router";
+const { parsedItems, parsedItemsGlobal } = useNavigationItems();
+const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || 'No build date';
+const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
+const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION || 'No app version';
+const VITE_IS_DEV = import.meta.env.DEV || false;
+const router = useRouter();
+const route = useRoute();
+const url = ref(window.location.href);
+
+/**
+ * [ { "label": "Overblik", "to": "/admin", "permissions": [ "admin" ] }, { "label": "Kassesystem", "type": "category", "permissions": [ "admin", "add_order" ], "children": [ { "label": "Opret transaktion", "to": "/admin/2/modules/pos", "type": "department", "permissions": [ "admin", "add_order" ] }, { "label": "Vaskelog", "to": "/admin/2/modules/pos/orders", "type": "department", "permissions": [ "admin", "list_orders" ] } ] }, { "label": "Bookinger", "to": "/admin/2/modules/bookings", "type": "department", "permissions": [ "admin", "list_bookings" ], "badge": { "type": "info", "text": "0", "condition": false } }, { "label": "Dagsopgørelse", "to": "/admin/2/modules/daily-report", "type": "department", "permissions": [ "admin", "list_department_daily_reports" ] }, { "label": "Notifikationer", "to": "/admin/2/modules/notifications", "type": "department", "permissions": [ "admin", "department_notification_sms_get" ] } ]
+ */
+
+const isMatchingRoute = (item: any) => {
+  // Get the current active route
+  const currentRoute = route.path;
+  // Check if the item's route can be matched with the current route (E.g. /admin/2/modules/pos matches /admin/2/modules/pos/orders)
+  return item.to === currentRoute;
+}
+
+const menuList = ref<HTMLElement>();
+
+const menuListPixelWidth = computed(() => {
+  if (menuList.value) {
+    return menuList.value.offsetWidth;
+  }
+  return 200; // Default width
+});
+
+const visibleChildren = (item: any) => {
+  if (!item.children || item.children.length === 0) return 0;
+  return item.children.filter((child: any) => !child.hidden).length;
+}
+</script>
+
+<template>
+  <div class="section pl-3 pr-1 pt-0">
+    <b-menu ref="menuList">
+      <b-menu-list label="">
+        <template
+            v-for="(item, index) in [...parsedItems(), ...parsedItemsGlobal()]"
+            :key="index">
+          <b-menu-item
+              :expanded="item.children && item.children.length > 0"
+              v-show="!item?.hidden"
+              :to="item.to ? item.to : ''"
+              :tag="item.to ? 'router-link' : 'router-link'"
+              :modelValue="isMatchingRoute(item)"
+              icon-pack="fas"
+              :icon="item.icon || ''"
+              :class="item.classes ? item.classes.join(' ') : ''"
+          >
+            <template #label="props">
+              {{ item.label }}
+              <b-icon
+                  class="is-pulled-right"
+                  pack="fas"
+                  :icon="'chevron-right'"
+              ></b-icon>
+            </template>
+            <template v-slot:default v-if="item.children && item.children.length > 0 && visibleChildren(item) > 0">
+              <template v-for="(child, cIndex) in item.children" :key="cIndex">
+              <b-menu-item
+                  v-show="!child?.hidden"
+                  :label="child.label"
+                  :to="child.to"
+                  :tag="child.to ? 'router-link' : 'router-link'"
+                  :modelValue="isMatchingRoute(child)"
+                  icon-pack="fas"
+                  :icon="child.icon || ''"
+                  :class="child.classes ? child.classes.join(' ') : ''"
+              ></b-menu-item>
+              </template>
+            </template>
+          </b-menu-item>
+        </template>
+      </b-menu-list>
+      <div class="is-fullwidth has-text-centered" style="height: 10px;">
+        <hr/>
+        <img :src="logo" alt="Company Logo" width="100%" height="28" class="transform-black px-6 pt-4 pb-6"/>
+      </div>
+    </b-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+  BDropdown,
+  BDropdownItem,
+  BIcon,
+  BMenu,
+  BMenuList,
+  BMenuItem,
+} from "buefy";
+
+export default defineComponent({
+  components: {
+    BDropdown,
+    BDropdownItem,
+    BIcon,
+    BMenu,
+    BMenuList,
+    BMenuItem,
+  },
+  data() {
+    return {
+      isActive: true,
+    };
+  },
+});
+</script>
+<style scoped>
+.transform-black {
+  filter: invert(1) grayscale(1) brightness(0);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/viewport/page/headers/MobileHeader.vue b/src/components/viewport/page/headers/MobileHeader.vue
index 2452b13c..97ee9d8e 100644
--- a/src/components/viewport/page/headers/MobileHeader.vue
+++ b/src/components/viewport/page/headers/MobileHeader.vue
@@ -2,42 +2,97 @@
 import { toggleExpanded, isOpen, isTransparent, getSubtitle } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
 import MobileNavigation from "@/components/viewport/page/headers/MobileNavigation.vue";
 import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/NavigationMenuDepartment.vue";
+import { IS_DEV } from '@/main';
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import {useRoute} from "vue-router";
+import {computed} from "vue";
+const route = useRoute();
+const showProfile = computed(() => {
+  const path = route.path;
+  return path.startsWith("/user");
+});
+
+
 </script>
 
 <template>
   <!-- Company Logo | Spacer | Burger Menu -->
   <!-- The burger menu is used to toggle the mobile navigation menu -->
   <nav class="navbar is-link is-mobile is-fixed-top mobile-header-section" role="navigation" aria-label="main navigation" :class="{'is-blurred': isTransparent}">
-    <div class="navbar-brand">
+    <div class="navbar-item" v-if="showProfile">
+      <!-- Profile -->
+      <router-link class="button is-white py-0" to="/user/profile" v-if="SessionUser.authenticated.value">
+              <span class="icon is-large">
+                <i class="fas fa-user-circle fa-2x"
+                   :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+      </router-link>
+    </div>
+    <div class="navbar-brand" v-if="!showProfile">
       <a class="navbar-item is-align-content-center" href="/">
         <img src="@/assets/branding/truckwash-banner-white-compressed.png"
              alt="Truckwash Logo"
              :class="isTransparent ? 'transform-color-white' : 'transform-color-black'"
         ><!-- width="112" height="28">-->
+        <!--<span class="is-flex is-position-absolute has-text-link-light mt-5 ml-5" v-show="!isTransparent">Truckwash</span>-->
         <span class="is-position-absolute has-text-black mt-5 ml-5" v-show="getSubtitle()">{{ getSubtitle() }}</span>
       </a>
     </div>
     <!-- Department selection -->
-    <div class="navbar-item">
+    <div class="navbar-item" v-show="!showProfile && route.path.includes('/admin')">
       <NavigationMenuDepartment/>
     </div>
-    <!-- Burger menu collapsed -->
-    <template v-if="!isOpen">
-      <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="false" @click="toggleExpanded">
-        <!-- Don't ask why, but this is the only way to get the burger icon to work properly -->
-        <span class="navbar-burger-bar"></span>
-        <span class="navbar-burger-bar"></span>
-        <span class="navbar-burger-bar "></span><!-- Invisible span to create the center line of the burger icon -->
-      </span>
-    </template>
-    <!-- Burger menu expanded -->
-    <template v-if="isOpen">
-      <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="true" @click="toggleExpanded">
-        <span class="navbar-burger-bar"></span>
-      </span>
-    </template>
-    <div id="navMenuMobile" class="navbar-menu">
+    <div class="navbar-end" style="margin-left: auto;" v-show="!SessionUser.canAccessAdmin()">
+      <!-- Phone number -->
+      <div class="navbar-item" v-if="showProfile">
+        <button class="button is-transparent is-white py-0" @click="SessionUser.functions.contact.onClickCallPhoneNumber()">
+          <!-- Circle with phone icon -->
+          <span class="icon is-large">
+            <i class="fas fa-phone-flip fa-2x"
+               :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+          </span>
+        </button>
+      </div>
     </div>
+    <div class="navbar-item" v-if="showProfile">
+      <div class="buttons">
+        <!-- Department button -->
+        <router-link class="button is-white" to="/admin" v-if="SessionUser.canAccessAdmin() && !route.path.includes('/admin')" :class="{'pr-0': SessionUser.hasSuperUserToken()}">
+              <span class="icon">
+                <i class="fas fa-building" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+          <span>Afdelinger</span>
+        </router-link>
+        <!-- Return to own account if impersonating -->
+        <template v-if="SessionUser.hasSuperUserToken()">
+          <router-link class="button is-white" to="/auth/return" :class="{'pl-1': SessionUser.canAccessAdmin() && !route.path.includes('/admin')}">
+                <span class="icon">
+                  <i class="fas fa-undo-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+                </span>
+            <span>Egen konto</span>
+          </router-link>
+        </template>
+      </div>
+    </div>
+    <!-- Burger menu collapsed -->
+    <template v-if="!showProfile || SessionUser.canAccessAdmin()">
+      <template v-if="!isOpen">
+        <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="false" @click="toggleExpanded">
+          <!-- Don't ask why, but this is the only way to get the burger icon to work properly -->
+          <span class="navbar-burger-bar"></span>
+          <span class="navbar-burger-bar"></span>
+          <span class="navbar-burger-bar "></span><!-- Invisible span to create the center line of the burger icon -->
+        </span>
+      </template>
+      <!-- Burger menu expanded -->
+      <template v-if="isOpen">
+        <span class="navbar-burger burger mobile-navbar-burger" data-target="navMenuMobile" aria-label="menu" aria-expanded="true" @click="toggleExpanded">
+          <span class="navbar-burger-bar"></span>
+        </span>
+      </template>
+      <div id="navMenuMobile" class="navbar-menu">
+      </div>
+    </template>
   </nav>
   <!-- Spacer (To avoid content being hidden behind the fixed navbar) -->
   <div class="navbar-spacer"></div>
@@ -119,4 +174,11 @@ import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/Na
   /* Set border opacity to 0.5 */
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 }
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
+.transform-color-red {
+  /* Invert colors and apply a red tint */
+  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/viewport/page/headers/MobileNavigation.vue b/src/components/viewport/page/headers/MobileNavigation.vue
index 5d1d87ea..7a962ca2 100644
--- a/src/components/viewport/page/headers/MobileNavigation.vue
+++ b/src/components/viewport/page/headers/MobileNavigation.vue
@@ -2,6 +2,7 @@
 import { toggleExpanded, isOpen } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
 import NavigationMenuItems from "@/components/viewport/page/headers/menu/NavigationMenuItems.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
+import DesktopNavigationBuefy from "@/components/viewport/page/headers/DesktopNavigationBuefy.vue";
 const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || 'No build date';
 const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
 const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION || 'No app version';
@@ -24,7 +25,7 @@ const VITE_IS_DEV = import.meta.env.DEV || false;
   <!-- Right side menu -->
   <div class="mobile-menu-open" v-if="isOpen">
     <!-- Spacer -->
-    <div class="mobile-menu-spacer"></div>
+    <div class="mobile-menu-spacer" v-show="false"></div>
     <!-- "MENU" | Close button -->
     <div class="section" style="width: 100%; background-color: white;">
       <nav class="level is-mobile" style="width: inherit; color: white;">
@@ -58,13 +59,18 @@ const VITE_IS_DEV = import.meta.env.DEV || false;
         </div>
       </nav>
       <!-- Menu content -->
-      <NavigationMenuItems />
-      <!-- Bottom version info -->
-      <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
-        <div>Version: {{ VITE_APP_VERSION }}</div>
-        <div>Commit: {{ VITE_COMMIT_HASH }}</div>
-        <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
-        <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
+      <div style="margin-top: 24px; max-height: calc(100vh - 160px); overflow-y: auto;">
+        <DesktopNavigationBuefy/>
+        <div class="last-child-without-bottom-border" v-show="false">
+          <NavigationMenuItems />
+        </div>
+        <!-- Bottom version info -->
+        <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
+          <div>Version: {{ VITE_APP_VERSION }}</div>
+          <div>Commit: {{ VITE_COMMIT_HASH }}</div>
+          <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
+          <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
+        </div>
       </div>
     </div>
 
@@ -72,11 +78,14 @@ const VITE_IS_DEV = import.meta.env.DEV || false;
 </template>
 
 <style scoped>
+.last-child-without-bottom-border:last-child {
+  border-bottom-color: transparent;
+}
 .mobile-menu-open {
   position: fixed;
   top: 0;
   right: 0;
-  height: 100%;
+  height: 100vh;
   background-color: white;
   display: flex;
   z-index: 1000;
diff --git a/src/components/viewport/page/headers/TabletHeader.vue b/src/components/viewport/page/headers/TabletHeader.vue
new file mode 100644
index 00000000..4fee1ae7
--- /dev/null
+++ b/src/components/viewport/page/headers/TabletHeader.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { toggleExpanded, isOpen, getDepartmentSelectionVisibility } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
+import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/NavigationMenuDepartment.vue";
+import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/NavigationMenuGlobalSearch.vue";
+import { IS_DEV } from '@/main';
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+</script>
+
+<template>
+  <!-- Company Logo | Spacer | Burger Menu -->
+  <!-- The burger menu is used to toggle the mobile navigation menu -->
+  <nav class="navbar is-white is-mobile is-fixed-top mobile-header-section" role="navigation" aria-label="main navigation" style="z-index: 1000;">
+    <div class="navbar-brand">
+      <a class="navbar-item is-align-content-center" href="/">
+        <img src="@/assets/branding/truckwash-banner-white-compressed.png"
+             alt="Truckwash Logo"
+             :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"
+             >
+      </a>
+
+    </div>
+    <div class="navbar-start">
+      <!-- Global search -->
+      <div class="navbar-item" style="width: 100%;" v-show="false">
+        <NavigationMenuGlobalSearch style="width: 100%;"/>
+      </div>
+      <!-- Department selection -->
+      <div class="navbar-item" v-show="getDepartmentSelectionVisibility()">
+        <NavigationMenuDepartment/>
+      </div>
+    </div>
+    <!-- Spacer to push user account to the right -->
+    <div class="navbar-item" style="flex-grow: 1;"></div>
+    <div class="navbar-end">
+      <!-- User account name and avatar (Desktop) -->
+      <div class="navbar-item mr-1">
+        <div class="buttons">
+          <!-- Back-Office button -->
+          <router-link class="button is-white" to="/superuser" v-if="SessionUser.canAccessSuperUser() && !route.path.includes('/superuser')">
+            <span class="icon">
+              <i class="fas fa-tools" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span>Backoffice</span>
+          </router-link>
+          <!-- Department button -->
+          <router-link class="button is-white" to="/admin" v-if="SessionUser.canAccessAdmin() && !route.path.includes('/admin')">
+            <span class="icon">
+              <i class="fas fa-building" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span>Afdelinger</span>
+          </router-link>
+          <!-- Return to own account if impersonating -->
+          <template v-if="SessionUser.hasSuperUserToken()">
+            <router-link class="button is-white" to="/auth/return">
+              <span class="icon">
+                <i class="fas fa-undo-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span>Tilbage til egen konto</span>
+            </router-link>
+          </template>
+          <router-link class="button is-white" to="/user/profile" v-if="SessionUser.authenticated.value">
+            <span class="icon">
+              <i class="fas fa-user-circle" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+            </span>
+            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ SessionUser.authenticated.value ? SessionUser.getName() : ''}}</span>
+          </router-link>
+          <template v-else>
+            <router-link class="button is-white" to="/register">
+              <span class="icon">
+                <i class="fas fa-user-plus" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">Opret bruger</span>
+            </router-link>
+            <router-link class="button is-white" to="/login">
+              <span class="icon">
+                <i class="fas fa-sign-in-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+              <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">Log ind</span>
+            </router-link>
+          </template>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <!-- Spacer (To avoid content being hidden behind the fixed navbar) -->
+  <div class="navbar-spacer"></div>
+</template>
+
+<style scoped>
+.navbar-brand {
+  margin-left: 1rem;
+}
+.mobile-header-section {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
+.mobile-navbar-burger {
+  border: 2px solid #f1f1f1;
+  background-color: #f1f1f1;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 1rem;
+}
+.navbar-spacer {
+  height: 80px; /* Same height as the navbar */
+  min-width: 100%;
+  min-height: 80px; /* Ensures the spacer is always at least as tall as the navbar */
+  background-color: transparent; /* Transparent to avoid visual interference */
+  position: relative; /* Allows for proper stacking context */
+}
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
+.transform-color-red {
+  /* Invert colors and apply a red tint */
+  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
+}
+.transform-color-warning {
+  /* Invert colors and apply a yellow tint */
+  filter: invert(79%) sepia(37%) saturate(7473%) hue-rotate(200deg) brightness(103%) contrast(101%);
+}
+.navbar-burger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: #f1f1f1; /* Make the burger button background transparent */
+}
+.navbar-burger-bar {
+  background-color: #000; /* Color of the burger lines */
+  margin-top: 4px; /* Space between the lines */
+  width: 20px; /* Width of the burger lines */
+  height: 2px; /* Height of the burger lines */
+  transition: background-color 0.3s ease; /* Smooth transition for color changes */
+}
+.navbar-burger-bar:nth-child(2) {
+  /* This is the center line of the burger icon */
+  width: 16px; /* Make the center line shorter */
+  background-color: transparent; /* Make it invisible */
+}
+</style>
\ No newline at end of file
diff --git a/src/components/viewport/page/headers/ViewportHeader.vue b/src/components/viewport/page/headers/ViewportHeader.vue
index 2117ded6..bab6f618 100644
--- a/src/components/viewport/page/headers/ViewportHeader.vue
+++ b/src/components/viewport/page/headers/ViewportHeader.vue
@@ -1,8 +1,9 @@
-<script setup lang="ts">
+<script setup>
 import ViewportResponsiveWrapper from "@/components/viewport/conditions/elements/ViewportResponsiveWrapper.vue";
 import MobileHeader from "@/components/viewport/page/headers/MobileHeader.vue";
 import DesktopHeader from "@/components/viewport/page/headers/DesktopHeader.vue";
 import { isHidden } from "./ViewportHeaderSettings.vue";
+import TabletHeader from "@/components/viewport/page/headers/TabletHeader.vue";
 </script>
 
 <template>
@@ -13,6 +14,9 @@ import { isHidden } from "./ViewportHeaderSettings.vue";
     <template #desktop>
       <DesktopHeader />
     </template>
+    <template #tablet>
+      <TabletHeader />
+    </template>
   </ViewportResponsiveWrapper>
 </template>
 
diff --git a/src/components/viewport/page/headers/menu/NavigationMenuDepartment.vue b/src/components/viewport/page/headers/menu/NavigationMenuDepartment.vue
index 421b65de..8d989914 100644
--- a/src/components/viewport/page/headers/menu/NavigationMenuDepartment.vue
+++ b/src/components/viewport/page/headers/menu/NavigationMenuDepartment.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
 import { departments, getDepartments } from '@/components/pagination/departmentTabs.vue';
 import { locations } from '@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue';
 import type { PosDepartment as department } from '@/components/displays/department/pos/steps/mobile/objects/PosDepartment.vue';
-
+import { isSmall } from '@/components/displays/pagination/PaginationDisplayIsSmall.vue';
+import {BButton, BDropdownItem, BField, BIcon, BSelect, BTooltip} from "buefy";
 
 const options = computed(() => {
   // Filter out departments the user does not have access to
@@ -65,19 +66,66 @@ const getDepartmentLabel = (departmentId: number): string => {
   const department = options.value.find((dept) => dept.value === departmentId);
   return department ? department.label : '';
 };
+
 </script>
 
 <template>
-  <div class="field is-grouped is-grouped-multiline" v-show="options.length > 0">
-    <div class="control">
-      <div class="select is-fullwidth is-rounded">
-        <select @change="onSelect" :value="SessionUser.functions.getDepartmentIdFromUrl()">
-          <option value="" disabled selected>{{ selectADepartmentString }}</option>
-          <option v-for="option in options" :key="option.value" :value="option.value">
-            <!--{{ getDepartmentLabelWithDistance(option.value) }}-->
-            {{ getDepartmentLabel(option.value) }}
-          </option>
-        </select>
+  <div>
+    <!-- Department selection (Mobile)-->
+    <div class="field is-grouped is-grouped-multiline" v-show="options.length > 0" v-if="isSmall">
+      <!-- Mobile view -->
+      <div class="control">
+        <b-tooltip position="is-bottom" multilined type="is-info">
+          <b-button icon-left="building"
+                    icon-pack="fas"
+                    size="is-small"
+                    :label="getDepartmentLabel(SessionUser.functions.getDepartmentIdFromUrl()) || selectADepartmentString"
+                    class="is-fullwidth is-rounded"/>
+          <template v-slot:content>
+            <!-- Pick a department tooltip content -->
+            <!-- Scrollable list of departments -->
+            <div style="max-height: 300px; overflow-y: auto;">
+            <template v-for="(option, index) in options" :key="index">
+              <div class="p-3 is-clickable"
+                   @click="() => { onSelect({ target: { value: option.value } } as unknown as Event); }"
+                   :class="{ 'mb-2': index < options.length - 1, 'pb-2': index === options.length - 1}"
+                   :style="{ borderBottom: index < options.length - 1 ? '1px solid #e6e6e6' : '' }">
+                <nav class="level is-mobile is-fullwidth">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <b-icon icon="building" size="is-small" pack="fas"/>
+                      <span class="ml-2" @click="SessionUser.functions.selectDepartment(option.value)">
+                        {{ option.label }}
+                      </span>
+                    </div>
+                  </div>
+                  <div class="level-right">
+                    <div class="level-item">
+                      <b-icon v-if="SessionUser.functions.getDepartmentIdFromUrl() === option.value" icon="check" size="is-small" pack="fas" />
+                      <b-icon v-else icon="circle" size="is-small" pack="fas" />
+                    </div>
+                  </div>
+                </nav>
+              </div>
+            </template>
+            </div>
+          </template>
+        </b-tooltip>
+      </div>
+    </div>
+    <!-- Department selection dropdown (Desktop)-->
+    <div class="field is-grouped is-grouped-multiline" v-show="options.length > 0" v-if="!isSmall">
+      <!-- Desktop view -->
+      <div class="control">
+        <div class="select is-fullwidth is-rounded">
+          <select @change="onSelect" :value="SessionUser.functions.getDepartmentIdFromUrl()">
+            <option value="" disabled selected>{{ selectADepartmentString }}</option>
+            <option v-for="option in options" :key="option.value" :value="option.value">
+              <!--{{ getDepartmentLabelWithDistance(option.value) }}-->
+              {{ getDepartmentLabel(option.value) }}
+            </option>
+          </select>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/viewport/page/headers/menu/NavigationMenuItem.vue b/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
index 8981c9ca..2d5c6393 100644
--- a/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
+++ b/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
@@ -38,7 +38,8 @@ const redirect = async (to: string) => {
     await router.push(to);
   } catch (err) {
     console.warn('Navigation error:', err);
-    toast.error('Navigation failed. Please try again.');
+    // Check if the user is authenticated
+    toast.error('Navigation failed. Please try again. Are you logged in?');
   }
 };
 // Permissions and visibility logic
@@ -250,5 +251,9 @@ updateDefaultDepartmentId();
   flex-grow: 0;
   margin-bottom: 12px;
 }
+.custom-container:last-child {
+  margin-bottom: 0px;
+  border-bottom: none;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/components/viewport/page/headers/menu/NavigationMenuItems.vue b/src/components/viewport/page/headers/menu/NavigationMenuItems.vue
index 6a44ccb0..8e82f79a 100644
--- a/src/components/viewport/page/headers/menu/NavigationMenuItems.vue
+++ b/src/components/viewport/page/headers/menu/NavigationMenuItems.vue
@@ -25,7 +25,7 @@ function isActive(item: any): boolean {
 
 const items = computed(() => {
   return [
-    ...parsedItems.value(),   // Local items based on current route + permissions
+    ...parsedItems(),   // Local items based on current route + permissions
     ...parsedItemsGlobal()    // Global items
   ];
 });
diff --git a/src/main.js b/src/main.js
index 0847018e..3ebf3b55 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,8 @@ import { createHead } from "@vueuse/head";
 import { createApp } from 'vue'
 import Router from "@/router";
 import App from "@/App.vue";
+import Buefy from 'buefy'
+import 'buefy/dist/css/buefy.css'
 
 export const IS_DEV = import.meta.env.VITE_IS_DEV; // Set to false in production
 
@@ -33,6 +35,7 @@ createApp(App)
 	.use(createHead())
 	.use(store)
 	.use(ToastPlugin)
+    .use(Buefy)
 	.provide('Colors', Colors)
 	.provide('IS_DEV', IS_DEV)
 	.provide('API_URL', API_URL)
diff --git a/src/router.js b/src/router.js
index 8ee181d4..ce2e41c2 100644
--- a/src/router.js
+++ b/src/router.js
@@ -35,7 +35,7 @@ import DepartmentPos from "@/views/dashboards/departmentDashboard/modules/Pos/De
 import DepartmentPosOrders from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrders.vue";
 import DepartmentPosOrder from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue";
 import DepartmentPosSyncDuplicates from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSyncDuplicates.vue";
-import DepartmentIntranet from "@/views/dashboards/departmentDashboard/modules/intranet/DepartmentIntranet.vue";
+//import DepartmentIntranet from "@/views/dashboards/departmentDashboard/modules/intranet/DepartmentIntranet.vue";
 
 /**
  * Dashboard: User
@@ -79,7 +79,7 @@ import DepartmentDailyReport
 	from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
 import SuperUserDashboardProduct from "@/views/dashboards/superUserDashboard/products/SuperUserDashboardProduct.vue";
 import UserOther from "@/views/dashboards/superUserDashboard/user/UserOther.vue";
-import MyBookingsNew from "@/views/dashboards/userDashboard/bookings/MyBookingsNew.vue";
+//import MyBookingsNew from "@/views/dashboards/userDashboard/bookings/MyBookingsNew.vue";
 import DepartmentCompleteBooking
 	from "@/views/dashboards/departmentDashboard/modules/bookings/DepartmentCompleteBooking.vue";
 import GuestHome from "@/views/guest/GuestHome.vue";
@@ -116,13 +116,22 @@ import XLVaskUsageLogsPage from "@/views/dashboards/superUserDashboard/xlvask/pa
 import DepartmentPosSync from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue";
 import PWADownload from "@/views/guest/pwa/PWADownload.vue";
 import Logout from "@/views/auth/Logout.vue";
-import ReaderReliabilityTest from "@/views/dashboards/departmentDashboard/modules/debug/ReaderReliabilityTest.vue";
+//import ReaderReliabilityTest from "@/views/dashboards/departmentDashboard/modules/debug/ReaderReliabilityTest.vue";
 import ConfigurationOcrSpace from "@/views/dashboards/superUserDashboard/configuration/ConfigurationOcrSpace.vue";
 import ConfigurationOpenAI from "@/views/dashboards/superUserDashboard/configuration/ConfigurationOpenAI.vue";
 import ConfigurationLicensePlateRecognizer from "@/views/dashboards/superUserDashboard/configuration/ConfigurationLicensePlateRecognizer.vue";
 import ConfigurationVirkData from "@/views/dashboards/superUserDashboard/configuration/ConfigurationVirkData.vue";
 import ConfigurationShelly from "@/views/dashboards/superUserDashboard/configuration/ConfigurationShelly.vue";
 import MyBookingsBook from "@/views/dashboards/userDashboard/bookings/MyBookingsBook.vue";
+import ReturnToOwnAccount from "@/views/auth/ReturnToOwnAccount.vue";
+import DepartmentDashboardOrderBooking
+    from "@/views/dashboards/departmentDashboard/modules/order-bookings/DepartmentDashboardOrderBooking.vue";
+import DepartmentBookingsLegacy
+    from "@/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookingsLegacy.vue";
+import MyBookingsLegacy from "@/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue";
+import ConfigurationSelfServe from "@/views/dashboards/superUserDashboard/configuration/ConfigurationSelfServe.vue";
+import MyWash from "@/views/dashboards/userDashboard/wash/MyWash.vue";
+import MyWashStart from "@/views/dashboards/userDashboard/wash/MyWashStart.vue";
 
 /**
  * Meta data for routes
@@ -181,10 +190,16 @@ export const router = createRouter({
 			component: MyBookings,
 			meta: { middleware: authMiddleware }
 		},
+        {
+            name: 'mybookingslegacy',
+            path: '/user/bookings-legacy',
+            component: MyBookingsLegacy,
+            meta: { middleware: authMiddleware }
+        },
 		{
 			name: 'mybookingsnew',
 			path: '/user/bookings/new',
-			component: MyBookingsNew,
+			component: MyBookingsBook,
 			meta: { middleware: authMiddleware }
 		},
         {
@@ -217,6 +232,18 @@ export const router = createRouter({
 			component: MyMaterials,
 			meta: { middleware: authMiddleware }
 		},
+		{
+			name: 'mywash',
+			path: '/user/wash',
+			component: MyWash,
+			meta: { middleware: authMiddleware }
+		},
+		{
+			name: 'mywashstart',
+			path: '/user/wash/start',
+			component: MyWashStart,
+			meta: { middleware: authMiddleware }
+		},
 		{
 			name: 'login',
 			path: '/login',
@@ -242,6 +269,11 @@ export const router = createRouter({
 			component: Register,
 			meta: { middleware: guestMiddleware }
 		},
+        {
+            name: 'returntoownaccount',
+            path: '/auth/return',
+            component: ReturnToOwnAccount,
+        },
 		{
 			name: 'adminlogin',
 			path: '/admin/login',
@@ -266,12 +298,13 @@ export const router = createRouter({
 			component: DepartmentPos,
 			meta: { middleware: adminMiddleware, departmentSelection: true }
 		},
+        /**
 		{
 			name: 'departmentintranet',
 			path: '/admin/:departmentId/modules/intranet',
 			component: DepartmentIntranet,
 			meta: { middleware: adminMiddleware, departmentSelection: true }
-		},
+		},*/
 		{
 			name: 'departmentnotifications',
 			path: '/admin/:departmentId/modules/notifications',
@@ -309,12 +342,24 @@ export const router = createRouter({
 			component: DepartmentBookings,
 			meta: { middleware: adminMiddleware, departmentSelection: true }
 		},
+        {
+            name: 'bookingslegacy',
+            path: '/admin/:departmentId/modules/bookings-legacy',
+            component: DepartmentBookingsLegacy,
+            meta: { middleware: adminMiddleware, departmentSelection: true }
+        },
 		{
 			name: 'bookingsbooking',
 			path: '/admin/:departmentId/modules/bookings/:bookingId',
 			component: DepartmentCompleteBooking,
 			meta: { middleware: adminMiddleware, departmentSelection: true }
 		},
+        {
+            name: 'orderbookingsbooking',
+            path: '/admin/:departmentId/modules/bookings/order/:bookingId',
+            component: DepartmentDashboardOrderBooking,
+            meta: { middleware: adminMiddleware, departmentSelection: true }
+        },
 		{
 			name: 'dailyreport',
 			path: '/admin/:departmentId/modules/daily-report',
@@ -603,12 +648,18 @@ export const router = createRouter({
             component: ConfigurationVirkData,
             meta: { middleware: superUserMiddleware }
         },
-        {
-            name: 'configurationShelly',
-            path: '/superuser/configuration/shelly',
-            component: ConfigurationShelly,
-            meta: { middleware: superUserMiddleware }
-        },
+		{
+			name: 'configurationShelly',
+			path: '/superuser/configuration/shelly',
+			component: ConfigurationShelly,
+			meta: { middleware: superUserMiddleware }
+		},
+		{
+			name: 'configurationSelfServe',
+			path: '/superuser/configuration/selfserve',
+			component: ConfigurationSelfServe,
+			meta: { middleware: superUserMiddleware }
+		},
 		{
 			name: 'customers',
 			path: '/superuser/customers',
diff --git a/src/views/auth/LoginQR.vue b/src/views/auth/LoginQR.vue
index 6fb67d06..8d816b98 100644
--- a/src/views/auth/LoginQR.vue
+++ b/src/views/auth/LoginQR.vue
@@ -260,7 +260,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="is-hidden-mobile">
+    <p>Denne side er kun tilgængelig på mobile enheder. Brug venligst din telefon eller tablet til at scanne QR koden.</p>
+  </div>
+  <div class="is-hidden-desktop">
     <PageLoader v-show="isProcessingQRCode" />
     <div class="background-fixed">
       <qrcode-stream
diff --git a/src/views/auth/ReturnToOwnAccount.vue b/src/views/auth/ReturnToOwnAccount.vue
new file mode 100644
index 00000000..c5f85945
--- /dev/null
+++ b/src/views/auth/ReturnToOwnAccount.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import PageLoader from "@/components/global/PageLoader.vue";
+
+const isProcessing = ref(false);
+const hasToken = computed(() => localStorage.getItem("superuser_token") !== null);
+
+const applyToken = (token: string) => {
+  isProcessing.value = true; // Start processing
+  localStorage.setItem("token", token);
+  localStorage.removeItem("superuser_token");
+  window.location.href = "/";
+}
+
+const applyTokenIfPresent = () => {
+  // Get the current URL
+  const token = localStorage.getItem("superuser_token");
+  if (token) {
+    // If a token is present, store it in localStorage
+    console.warn("Token found in localstorage:", token);
+    applyToken(token); // Apply the token (store and redirect)
+  } else {
+    console.warn("No token found in localstorage");
+    // Redirct to the default page
+    window.location.href = "/";
+  }
+}
+
+/** Mounting and Unmounting Logic **/
+
+onMounted(() => {
+  applyTokenIfPresent();
+});
+
+onUnmounted(() => {
+});
+</script>
+
+<template>
+  <div>
+    <PageLoader v-show="isProcessing" />
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/SuperUserDashboard.vue b/src/views/dashboards/SuperUserDashboard.vue
index 696a09bf..18d52fcc 100644
--- a/src/views/dashboards/SuperUserDashboard.vue
+++ b/src/views/dashboards/SuperUserDashboard.vue
@@ -13,6 +13,10 @@ import UserNavigation from "@/components/global/UserNavigation.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { showCreateUserDiscountForm } from "@/components/forms/superUser/createUserDiscountForm.vue";
+
+const showCreateOrderBookingForm = () => {
+  SessionUser.objects.order_bookings.showCreateObjectForm();
+}
 </script>
 
 <template>
@@ -29,6 +33,7 @@ import { showCreateUserDiscountForm } from "@/components/forms/superUser/createU
       <button class="button" @click="showCreateProductForm">Create product</button>
       <button class="button" @click="getOrders">Get orders</button>
       <button class="button" @click="showCreateOrderForm">Create order</button>
+      <button class="button" @click="showCreateOrderBookingForm">Create order booking</button>
       <button class="button" @click="showCreateNumberPlateScanForm">Create number plate scan</button>
       <button class="button" @click="showCreateUserDiscountForm">Create user discount</button>
       <button class="button" @click="SessionUser.superUser.cron.runCron()">Run cron</button>
diff --git a/src/views/dashboards/UserDashboard.vue b/src/views/dashboards/UserDashboard.vue
index 6f187550..c5ee62da 100644
--- a/src/views/dashboards/UserDashboard.vue
+++ b/src/views/dashboards/UserDashboard.vue
@@ -1,15 +1,260 @@
-<script setup>
+<script setup lang="ts">
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import {ref, onMounted, nextTick, computed, onUnmounted} from "vue";
+import { IS_DEV } from '@/main';
+/**
+ * Make sure the height of the cards are equal
+ */
+const cardMinHeight = ref(0); // Pixel height
+const setEqualHeights = () => {
+  nextTick(() => {
+    if (SessionUser.functions.device.isMobile()) {
+      return;
+    }
+    const cardContents = document.querySelectorAll('.identical-height-spacer');
+    let maxHeight = 0;
+    cardContents.forEach((element) => {
+      const elementHeight = element.clientHeight;
+      if (elementHeight > maxHeight) {
+        maxHeight = elementHeight;
+      }
+    });
+    cardMinHeight.value = maxHeight;
+  });
+};
+const handleResize = () => {
+  setEqualHeights();
+};
+onMounted(() => {
+  setEqualHeights();
+  window.addEventListener('resize', handleResize);
+});
+const cleanup = () => {
+  window.removeEventListener('resize', handleResize);
+};
+onUnmounted(() => {
+  cleanup();
+});
 
-import UserNavigation from "@/components/global/UserNavigation.vue";
-import Home from "@/views/dashboards/userDashboard/Home.vue";
+const isTablet = computed(() => {
+  return SessionUser.functions.device.isTablet();
+});
+
+const windowInnerWidth = ref(window.innerWidth);
+const updateWindowInnerWidth = () => {
+  windowInnerWidth.value = window.innerWidth;
+  // Trigger any layout updates if necessary
+  classes.value; // Access to trigger recomputation
+};
+window.addEventListener('resize', updateWindowInnerWidth);
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWindowInnerWidth);
+});
+
+type ClassesType = {
+  column?: string[];
+  title?: string[];
+  button?: string[];
+};
+
+const classes = computed(() => {
+  if (computed(() => SessionUser.functions.device.isMobile()).value) {
+    return {
+      column: ['is-12-mobile', 'is-half-tablet', 'is-half-desktop'],
+      title: [],
+      button: [],
+    } as ClassesType;
+  } else if (SessionUser.functions.device.isTablet()) {
+    return {
+      column: ['is-half-tablet', 'is-12-mobile', 'is-half-desktop'],
+      title: ['is-size-7', 'has-text-weight-bold'],
+      button: ['is-size-7-tablet'],
+    } as ClassesType;
+  } else if ((SessionUser.functions.device.isDesktop() || SessionUser.functions.device.isWidescreen()) && !SessionUser.functions.device.isUltraWideScreen()) {
+    return {
+      column: ['is-half-desktop', 'is-half-tablet', 'is-12-mobile'],
+      title: [],
+      button: [],
+    } as ClassesType;
+  } else if (SessionUser.functions.device.isUltraWideScreen()) {
+    return {
+      column: ['is-one-third-desktop', 'is-half-tablet', 'is-12-mobile'],
+      title: [],
+      button: [],
+    } as ClassesType;
+  } else {
+    return {
+      // Default to desktop layout
+      column: ['is-half'],
+      title: [],
+      button: [],
+    } as ClassesType;
+  }
+});
 </script>
 
 <template>
   <div>
-    <Home />
+    <div class="columns is-vcentered mb-4 is-multiline">
+      <div class="column is-12">
+        <span class="is-auto-size-text is-size-6 has-text-weight-bold">
+          Velkommen {{ SessionUser.getName() }}
+        </span>
+      </div>
+      <div class="column is-half-desktop is-hidden-desktop is-12-tablet" v-show="IS_DEV">
+        <!-- Start wash card -->
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title has-text-link has-text-weight-bold">
+              Start vask
+            </div>
+            <div class="card-header-icon has-text-link">
+              <i class="fas fa-soap"></i>
+            </div>
+          </template>
+          <template #content>
+            <div class="identical-height-spacer" :style="{ minHeight: cardMinHeight + 'px' }">
+              Gå direkte til afdelingens vaskebaner og start en vask for dit køretøj. Vælg dit køretøj og den ønskede vasketype for at komme i gang.
+            </div>
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link to="/user/wash/start" class="button is-link is-fullwidth">
+                Start vask
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <div class="column" :class="classes.column">
+        <!-- Book wash card -->
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title" :class="classes.title">
+              Book vask
+            </div>
+            <div class="card-header-icon">
+              <i class="fas fa-calendar-check"></i>
+            </div>
+          </template>
+          <template #content>
+            <div class="identical-height-spacer" :style="{ minHeight: cardMinHeight + 'px' }">
+              Book en vask i én af vores afdelinger - med mulighed for safety seal.
+            </div>
+            <!--<b-loading :is-full-page="false" :model-value="true" :can-cancel="true"/>-->
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link to="/user/bookings/book" class="button is-link is-fullwidth" :class="classes.button">
+                Book vask
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <div class="column" :class="classes.column">
+        <!-- Add vehicle card -->
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title" :class="classes.title">
+              Opret køretøj
+            </div>
+            <div class="card-header-icon">
+              <i class="fas fa-truck"></i>
+            </div>
+          </template>
+          <template #content>
+            <div class="identical-height-spacer" :style="{ minHeight: cardMinHeight + 'px' }">
+              Tilføj et køretøj der skal kunne vaske hos Truck Wash.
+            </div>
+            <!--<b-loading :is-full-page="false" :model-value="true" :can-cancel="true"/>-->
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link to="/user/vehicles" class="button is-link is-fullwidth" :class="classes.button">
+                Opret køretøj
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <div class="column" :class="classes.column">
+        <!-- Download wash certificate card -->
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title" :class="classes.title">
+              Download vaskecertifikater
+            </div>
+            <div class="card-header-icon">
+              <i class="fas fa-file-download"></i>
+            </div>
+            </template>
+          <template #content>
+            <div class="identical-height-spacer" :style="{ minHeight: cardMinHeight + 'px' }">
+              Download vaske certifikater for dine tidligere vaske.
+            </div>
+            <!--<b-loading :is-full-page="false" :model-value="true" :can-cancel="true"/>-->
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link to="/user/orders" class="button is-link is-fullwidth" :class="classes.button">
+                Download vaskecertifikater
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <div class="column" :class="classes.column">
+        <!-- View invoices card -->
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title" :class="classes.title">
+              Download fakturaer
+            </div>
+            <div class="card-header-icon">
+              <i class="fas fa-file-invoice-dollar"></i>
+            </div>
+          </template>
+          <template #content>
+            <div class="identical-height-spacer" :style="{ minHeight: cardMinHeight + 'px' }">
+              Download dine tidligere fakturaer.
+            </div>
+            <!--<b-loading :is-full-page="false" :model-value="true" :can-cancel="true"/>-->
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link to="/user/invoices" class="button is-link is-fullwidth" :class="classes.button">
+                Download fakturaer
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <div class="column is-12">
+        <span class="is-size-6 has-text-weight-bold">
+          Ved problemer kontakt os på telefon <a href="tel:+4543717886"><span class="has-text-link">43 71 78 86</span></a> eller email <a href="mailto:cph@truckwash.dk"><span class="has-text-link">cph@truckwash.dk</span></a>.
+        </span>
+      </div>
+    </div>
+    <!--<b-loading
+        :is-full-page="true"
+        :model-value="true"
+        :can-cancel="true"
+    ></b-loading>-->
+    <!--<Home />-->
   </div>
 </template>
 
 <style scoped>
-
+.is-auto-size-text {
+  display: inline-block;
+  white-space: nowrap;
+  max-width: 100%;
+  vertical-align: top;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
index 836bd3e2..e1690267 100644
--- a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
+++ b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
@@ -478,19 +478,19 @@ const onFetchAttachments = () => {
                 <!-- Reg 1-3 -->
                 <div class="field is-grouped is-grouped-multiline">
                   <div class="control">
-                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_1', order.reg_1, 'Reg 1', loadOrder)">
+                    <div class="tags has-addons is-clickable" @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_1', order.reg_1, loadOrder)">
                       <span class="tag is-dark">Reg 1</span>
                       <span class="tag is-darker">{{ order.reg_1 }}</span>
                     </div>
                   </div>
                   <div class="control">
-                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_2', order.reg_2, 'Reg 2', loadOrder)">
+                    <div class="tags has-addons is-clickable" @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_2', order.reg_2, loadOrder)">
                       <span class="tag is-dark">Reg 2</span>
                       <span class="tag is-darker">{{ order.reg_2 }}</span>
                     </div>
                   </div>
                   <div class="control">
-                    <div class="tags has-addons is-clickable" @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_3', order.reg_3, 'Reg 3', loadOrder)">
+                    <div class="tags has-addons is-clickable" @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_3', order.reg_3, loadOrder)">
                       <span class="tag is-dark">Reg 3</span>
                       <span class="tag is-darker">{{ order.reg_3 }}</span>
                     </div>
@@ -500,7 +500,7 @@ const onFetchAttachments = () => {
                 <div class="field is-hidden-touch">
                   <label class="label">Reference</label>
                   <div class="control">
-                    <input class="input has-text-danger" type="text" v-model="order.reference" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reference', order.reference, 'Reference', loadOrder)">
+                    <input class="input has-text-danger" type="text" v-model="order.reference" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reference', order.reference, loadOrder)">
                   </div>
                 </div>
                 <!-- Ordre noter -->
@@ -524,14 +524,14 @@ const onFetchAttachments = () => {
           <!-- Other slot -->
           <template #other>
             <!-- Super user actions -->
-            <span v-if="SessionUser.canAccessSuperUser()" class="buttons">
+            <span v-if="SessionUser.canAccessSuperUser() || SessionUser.hasPermission('delete_order')" class="buttons">
               <!-- Delete order button -->
               <button class="button is-danger is-inverted" @click="showDeleteOrderDialog" v-if="(!isInvoiced() || SessionUser.canAccessSuperUser())">
                 <span class="icon"><i class="fas fa-trash"></i></span>
                 <span>Slet ordre</span>
               </button>
               <!-- Force allow edit button -->
-              <button class="button is-danger is-inverted" @click="forceAllowEdit = !forceAllowEdit" v-if="!isInvoiced()">
+              <button class="button is-danger is-inverted" @click="forceAllowEdit = !forceAllowEdit" v-if="!isInvoiced() && SessionUser.canAccessSuperUser()">
                 <span class="icon"><i class="fas fa-lock-open"></i></span>
                 <span v-if="!isEditPossible()">Gennemtving redigeringsret</span>
                 <span v-else>Fjern tvungen redigeringsret</span>
@@ -545,14 +545,14 @@ const onFetchAttachments = () => {
               <div class="field">
                 <label class="label">Afdeling ID</label>
                 <div class="control">
-                  <input class="input is-clickable" type="text" v-model="order.department_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'department_id', order.department_id, 'Afdeling (ID)', loadOrder)">
+                  <input class="input is-clickable" type="text" v-model="order.department_id" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'department_id', order.department_id, loadOrder)">
                 </div>
               </div>
               <!-- Reference -->
               <div class="field">
                 <label class="label">Reference</label>
                 <div class="control">
-                  <input class="input is-clickable" type="text" v-model="order.reference" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reference', order.reference, 'Reference', loadOrder)">
+                  <input class="input is-clickable" type="text" v-model="order.reference" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reference', order.reference, loadOrder)">
                 </div>
               </div>
               <!-- Køretøjer -->
@@ -563,7 +563,7 @@ const onFetchAttachments = () => {
                   <div class="field">
                     <label class="label">Reg 1</label>
                     <div class="control">
-                      <input class="input is-clickable" type="text" v-model="order.reg_1" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_1', order.reg_1, 'Reg 1', loadOrder)">
+                      <input class="input is-clickable" type="text" v-model="order.reg_1" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_1', order.reg_1, loadOrder)">
                     </div>
                   </div>
                 </div>
@@ -572,7 +572,7 @@ const onFetchAttachments = () => {
                   <div class="field">
                     <label class="label">Reg 2</label>
                     <div class="control">
-                      <input class="input is-clickable" type="text" v-model="order.reg_2" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_2', order.reg_2, 'Reg 2', loadOrder)">
+                      <input class="input is-clickable" type="text" v-model="order.reg_2" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_2', order.reg_2, loadOrder)">
                     </div>
                   </div>
                 </div>
@@ -581,7 +581,7 @@ const onFetchAttachments = () => {
                   <div class="field">
                     <label class="label">Reg 3</label>
                     <div class="control">
-                      <input class="input is-clickable" type="text" v-model="order.reg_3" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'reg_3', order.reg_3, 'Reg 3', loadOrder)">
+                      <input class="input is-clickable" type="text" v-model="order.reg_3" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'reg_3', order.reg_3, loadOrder)">
                     </div>
                   </div>
                 </div>
@@ -599,7 +599,7 @@ const onFetchAttachments = () => {
                   <span>Kunde</span>
                 </label>
                 <div class="control">
-                  <input class="input is-clickable" type="text" v-model="order.customer_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'customer_id', order.customer_id, 'Kunde', loadOrder)">
+                  <input class="input is-clickable" type="text" v-model="order.customer_id" readonly @click="SessionUser.objects.orders.functions.showChangeCustomerForm(order.id).finally(() => loadOrder())">
                 </div>
               </div>
               <!-- Invoice collection -->
@@ -615,7 +615,7 @@ const onFetchAttachments = () => {
                   <span>{{SessionUser.objects.global.language.invoice}}</span>
                 </label>
                 <div class="control">
-                  <input class="input is-clickable" type="text" v-model="order.invoice_collection_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'invoice_collection_id', order.invoice_collection_id, 'Faktura samling', loadOrder)">
+                  <input class="input is-clickable" type="text" v-model="order.invoice_collection_id" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'invoice_collection_id', order.invoice_collection_id, loadOrder)">
                 </div>
               </div>
               <!-- Booking (if any) -->
@@ -639,7 +639,7 @@ const onFetchAttachments = () => {
                   </div>
                 </div>
                 <div class="control">
-                  <input class="input is-clickable" type="text" v-model="order.booking_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'booking_id', order.booking_id, 'Booking', loadOrder)">
+                  <input class="input is-clickable" type="text" v-model="order.booking_id" readonly @click="SessionUser.objects.orders.showEditObjectFieldForm(order.id, 'booking_id', order.booking_id, loadOrder)">
                 </div>
               </div>
             </div>
diff --git a/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookings.vue b/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookings.vue
index 6d98e5b7..732b09d1 100644
--- a/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookings.vue
+++ b/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookings.vue
@@ -1,9 +1,9 @@
 <script setup>
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
+import OrderBookingsPagination from "@/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue";
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFall
         subtitle="Oversigt over bookinger"
     >
       <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
-        <BookingsPagination />
+        <OrderBookingsPagination :filters="{ department: SessionUser.functions.getDepartmentIdFromUrl(), order_id: 'is null', only_today: true }"/>
       </NotFoundFallBackPageWrapper>
     </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
diff --git a/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookingsLegacy.vue b/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookingsLegacy.vue
new file mode 100644
index 00000000..85a7c417
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookingsLegacy.vue
@@ -0,0 +1,25 @@
+<script setup>
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
+import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue";
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
+    <DepartmentDashboardPageWrapper
+        title="Bookinger"
+        subtitle="Oversigt over bookinger"
+    >
+      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+        <BookingsPagination :filters="{ department: SessionUser.functions.getDepartmentIdFromUrl() }"/>
+      </NotFoundFallBackPageWrapper>
+    </DepartmentDashboardPageWrapper>
+  </RestrictedPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
index d96f959f..dab82750 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
@@ -1,14 +1,10 @@
 <script setup>
 
-import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/DepartmentDashboardHero.vue";
-import PosDepartmentMVP from "@/components/displays/department/pos/PosDepartmentMVP.vue";
-import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosNavigation.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 import DepartmentDashboardDailyReportCount from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue";
-import {ref, watch} from "vue";
+import {ref, watch, defineProps, onMounted} from "vue";
 import { useRouter } from "vue-router";
 import DepartmentDashboardDailyReportProductSales
   from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue";
@@ -17,10 +13,39 @@ import DepartmentDashboardDailyReportTodayForm
 import { Colors } from "@/ThemeConfig.vue";
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import DepartmentDashboardDailyReportNavigation from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue";
-import {selected_date, isLoading, selected_date_to, date_shortcuts, selectDate, count_transactions, count_products_sold, selected_department_id, selectDepartment, count_earnings, count_washes, count_water_usage, selectDepartments, selected_department_ids} from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
+import {selected_date, isLoading, selected_date_to, date_shortcuts, selectDate, count_transactions, count_bookings, count_bookings_out_of, count_products_sold, selected_department_id, selectDepartment, count_earnings, count_washes, count_water_usage, selectDepartments, selected_department_ids} from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
 import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
 import DepartmentDashboardDailyReportHistory
   from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportHistory.vue";
+/**
+ * Prop definitions
+ */
+const props = defineProps({
+  /**
+   * Is this page department-specific?
+   */
+  departmentSpecific: {
+    type: Boolean,
+    default: true
+  },
+  defaultDepartmentId: {
+    type: Number,
+    default: null
+  }
+});
+/**
+ * Automatically select all departments if not department-specific
+ */
+const selectAllDepartments = (value) => {
+  if (!props.departmentSpecific) {
+    console.warn('Selecting all accessible departments for non-department-specific daily report');
+    selectDepartments(SessionUser.functions.getAccessibleDepartments().map(dept => dept.id));
+  }
+}
+
+onMounted(() => {
+  selectAllDepartments(props.departmentSpecific);
+})
 
 /**
  * Get the current date
@@ -42,14 +67,18 @@ const router = useRouter();
 // Support multiple departments via query parameter: ?departmentIds=1,2,3
 const queryIds = router.currentRoute.value.query && router.currentRoute.value.query.departmentIds
   ? String(router.currentRoute.value.query.departmentIds)
-  : null;
+  : props.departmentSpecific
+    ? null
+    : SessionUser.functions.getAccessibleDepartments().map(dept => dept.id).join(',');
 let initialIds = [];
 if (queryIds) {
   initialIds = queryIds.split(',').map(id => parseInt(id)).filter(id => id > 0);
 }
 const singleParamId = router.currentRoute.value.params && router.currentRoute.value.params.departmentId
   ? parseInt(router.currentRoute.value.params.departmentId)
-  : null;
+  : props.departmentSpecific
+    ? SessionUser.functions.getDepartmentIdFromUrl() || props.defaultDepartmentId
+    : null;
 // Determine initial selection
 if (initialIds.length > 0) {
   selectDepartments(initialIds);
@@ -70,36 +99,30 @@ watch(() => selected_department_id.value, (newVal) => {
 
 const reports = ref([
   {
-    title: 'Transaktioner',
-    subtitle: 'Dagens transaktioner',
-    count: count_transactions,
-    icon: 'fas fa-exchange-alt',
+    title: 'Bookinger',
+    subtitle: 'bookinger',
+    count: count_bookings,
+    icon: 'fas fa-calendar-check',
     color: Colors.global.primaryColor,
     buttons: [],
+    parseFunction: (value) => {
+      return (value !== null) ? value : 0;
+    },
+    out_of: count_bookings_out_of,
     labels: {
-      out_of: 'Mulige transaktioner',
-      out_of_suffix: null,
-      quantity: 'Antal transaktioner',
-      quantity_suffix: null
-    }
-  },
-  {
-    title: 'Produkter solgt',
-    subtitle: 'Dagens produkter solgt',
-    count: count_products_sold,
-    icon: 'fas fa-shopping-cart',
-    color: Colors.global.primaryColor,
-    buttons: [],
-    labels: {
-      out_of: 'Mulige solgte',
+      out_of: 'Antal mulige',
       out_of_suffix: '',
-      quantity: 'Solgte',
+      quantity: 'Antal fuldførte',
       quantity_suffix: ''
+    },
+    clickFunction: () => {
+      console.warn('Clicked bookings report - redirecting to bookings page');
+
     }
   },
   {
     title: 'Omsætning',
-    subtitle: 'Dagens omsætning',
+    subtitle: 'omsætning',
     count: count_earnings,
     icon: 'fas fa-money-bill-wave',
     color: Colors.global.primaryColor,
@@ -114,9 +137,27 @@ const reports = ref([
       quantity_suffix: ''
     }
   },
+  {
+    title: 'Gns. omsætning pr. vask',
+    subtitle: 'gns. omsætning pr. vask',
+    count: count_earnings,
+    icon: 'fas fa-money-bill-wave',
+    color: Colors.global.primaryColor,
+    buttons: [],
+    parseFunction: (value) => {
+      // Return the average earnings per wash, with 2 decimals, using the locale settings for the decimal separator
+      return SessionUser.functions.currency.toLocal(value / (count_washes.value || 1));
+    },
+    labels: {
+      out_of: '',
+      out_of_suffix: 'kr.',
+      quantity: 'Gns. omsætning pr. vask',
+      quantity_suffix: ''
+    }
+  },
   {
     title: 'Vaske',
-    subtitle: 'Dagens vaske',
+    subtitle: 'vaske',
     count: count_washes,
     icon: 'fas fa-car',
     color: Colors.global.primaryColor,
@@ -131,9 +172,37 @@ const reports = ref([
       quantity_suffix: ''
     }
   },
+  {
+    title: 'Transaktioner',
+    subtitle: 'transaktioner',
+    count: count_transactions,
+    icon: 'fas fa-exchange-alt',
+    color: Colors.global.primaryColor,
+    buttons: [],
+    labels: {
+      out_of: 'Mulige transaktioner',
+      out_of_suffix: null,
+      quantity: 'Antal transaktioner',
+      quantity_suffix: null
+    }
+  },
+  {
+    title: 'Produkter solgt',
+    subtitle: 'produkter solgt',
+    count: count_products_sold,
+    icon: 'fas fa-shopping-cart',
+    color: Colors.global.primaryColor,
+    buttons: [],
+    labels: {
+      out_of: 'Mulige solgte',
+      out_of_suffix: '',
+      quantity: 'Solgte',
+      quantity_suffix: ''
+    }
+  },
   {
     title: 'Vandforbrug',
-    subtitle: 'Dagens vandforbrug',
+    subtitle: 'vandforbrug',
     count: count_water_usage,
     icon: 'fas fa-car',
     color: Colors.global.primaryColor,
@@ -150,7 +219,7 @@ const reports = ref([
   },
   {
     title: 'Vandforbrug pr. vask',
-    subtitle: 'Dagens vandforbrug pr. vask',
+    subtitle: 'vandforbrug pr. vask',
     count: count_water_usage,
     icon: 'fas fa-car',
     color: Colors.global.primaryColor,
@@ -208,6 +277,54 @@ const product_ids = ref([
     },
 ]);
 
+const formatDateShort = (dateString) => {
+  // Returns e.g. Onsdag d. 15/03/23
+  const date = new Date(dateString);
+  const options = { weekday: 'long', day: '2-digit', month: '2-digit', year: '2-digit' };
+  const day_name = date.toLocaleDateString('da-DK', { weekday: 'long' });
+  const dd_mm_yy = date.toLocaleDateString('da-DK', { day: '2-digit', month: '2-digit', year: '2-digit' });
+  return `${day_name} d. ${dd_mm_yy}`;
+};
+
+const formatDateRangeSubtitle = (startDateString, endDateString) => {
+  // Returns e.g. 15/03/23 - 17/03/23
+  const startDate = new Date(startDateString);
+  const endDate = new Date(endDateString);
+  const options = { day: '2-digit', month: '2-digit', year: '2-digit' };
+  return `${startDate.toLocaleDateString('da-DK', options)} - ${endDate.toLocaleDateString('da-DK', options)}`;
+};
+
+const formatSubtitle = (subtitle) => {
+  let result = '';
+  // If the date is today, add "Dagens " prefix
+  if (SessionUser.functions.date.isToday(selected_date.value) && SessionUser.functions.date.isToday(selected_date_to.value)) {
+    result = `Dagens ${subtitle}`;
+  } else if (selected_date.value === selected_date_to.value) {
+    result = `${formatDateShort(selected_date.value)}`;
+  } else {
+    result = `${formatDateRangeSubtitle(selected_date.value, selected_date_to.value)}`;
+  }
+  // Return with the first letter capitalized
+  return result.charAt(0).toUpperCase() + result.slice(1) + ' ';
+};
+
+/**
+ * To make sure the reports are the same height, we can watch the counts and update the reports array
+ */
+const minColumnHeight = ref('auto');
+watch(() => reports.value.map(report => report.count), () => {
+  setTimeout(() => {
+    const cards = document.querySelectorAll('.column .card .card-content');
+    let maxHeight = 0;
+    cards.forEach(card => {
+      const height = card.offsetHeight;
+      if (height > maxHeight) {
+        maxHeight = height;
+      }
+    });
+    minColumnHeight.value = maxHeight + 'px';
+  }, 100);
+});
 </script>
 
 <template>
@@ -216,41 +333,50 @@ const product_ids = ref([
         title="Dagsopgørelse"
         subtitle="Få et overblik over dagens omsætning, forbrug og bookinger"
     >
-      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
+      <NotFoundFallBackPageWrapper :exists="(SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl()) || !props.departmentSpecific)" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
         <!-- At the top of the page, we want to have a button that allows the user to create a new daily report -->
         <div class="columns is-multiline">
           <!-- Display the navigation -->
           <div class="column is-12">
-            <DepartmentDashboardDailyReportNavigation />
+            <DepartmentDashboardDailyReportNavigation :selectAllDepartments="!props.departmentSpecific"/>
+          </div>
+          <!-- Display the daily report counts -->
+          <div class="column is-4" v-for="report in reports" :key="report.title">
+            <DepartmentDashboardDailyReportCount
+                :styleContent="{ minHeight: minColumnHeight }"
+                :title="report.title"
+                :subtitle="formatSubtitle(report.subtitle)"
+                :count="report.count"
+                :icon="report.icon"
+                :color="report.color"
+                :buttons="report.buttons"
+                :out_of="(report?.out_of || 0)"
+                :label_out_of="report.labels.out_of"
+                :label_out_of_suffix="report.labels.out_of_suffix"
+                :force_out_of="report.labels.out_of ? report.labels.out_of : null"
+                :label_quantity="report.labels.quantity"
+                :label_quantity_suffix="report.labels.quantity_suffix"
+                v-bind:parseFunction="report.parseFunction ? report.parseFunction : (value) => { return value; }"
+                :clickFunction="report?.clickFunction || (() => {})"
+                :isLoading="isLoading('daily_report_counts')"
+            />
           </div>
           <!-- Display the daily report product sales -->
           <div class="column is-4" v-for="product in product_ids" :key="product.id">
             <DepartmentDashboardDailyReportProductSales
+                :styleContent="{ minHeight: minColumnHeight }"
                 :product_id="product.id"
                 :date="getDate()"
                 :department_id="department_id"
                 :color="Colors.global.primaryColor"
                 :force_out_of="product.force_out_of || null"
-            />
-          </div>
-          <!-- Display the daily report counts -->
-          <div class="column is-4" v-for="report in reports" :key="report.title">
-            <DepartmentDashboardDailyReportCount
-                :title="report.title"
-                :subtitle="report.subtitle"
-                :count="report.count"
-                :icon="report.icon"
-                :color="report.color"
-                :buttons="report.buttons"
-                :label_out_of="report.labels.out_of"
-                :label_out_of_suffix="report.labels.out_of_suffix"
-                :label_quantity="report.labels.quantity"
-                :label_quantity_suffix="report.labels.quantity_suffix"
-                v-bind:parseFunction="report.parseFunction ? report.parseFunction : (value) => { return value; }"
+                :is_loading="isLoading('daily_report_counts')"
+                :subtitle="formatSubtitle('salg af produktet')"
             />
           </div>
         </div>
         <ElementTabsBox
+            v-if="props.departmentSpecific"
             class="mb-6"
             default-active-tab="tab1"
             :allow-compact-when-one-tab="true"
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
index 7f473d31..8e5f2acb 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
@@ -53,9 +53,10 @@ const count_products_sold = ref(null);
 const count_earnings = ref(null);
 const count_washes = ref(null);
 const count_water_usage = ref(null);
+const count_bookings = ref(null);
+const count_bookings_out_of = ref(null);
 // Unique ID ( This is used to make sure the data is updated when the department ID or the selected date changes )
 const uniqueId = ref(GENERATE_UNIQUE_ID());
-
 /** Get the transactions, and products sold for the selected date */
 const updateCountTransactions = async () => {
   // Determine which departments are active
@@ -70,13 +71,15 @@ const updateCountTransactions = async () => {
     count_earnings.value = 0;
     count_washes.value = 0;
     count_water_usage.value = 0;
+    count_bookings.value = 0;
+    count_bookings_out_of.value = 0;
     return;
   }
 
   // Set the loading state to true
   setLoadingTrue();
   // Aggregate across departments
-  let agg = { quantity: 0, products: 0, earnings: 0, washes: 0, water_usage: 0 };
+  let agg = { quantity: 0, products: 0, earnings: 0, washes: 0, water_usage: 0, count_bookings: 0, count_bookings_out_of: 0 };
   for (const id of ids) {
     // eslint-disable-next-line no-await-in-loop
     await SessionUser.objects.department_daily_reports.functions
@@ -88,16 +91,40 @@ const updateCountTransactions = async () => {
         agg.washes += parseFloat(response.data.data.washes || 0);
         agg.water_usage += parseFloat(response.data.data.water_usage || 0);
       });
+    // Get the bookings count
+
+    // eslint-disable-next-line no-await-in-loop
+    await SessionUser.objects.order_bookings.get.all({
+      filters: `datetime-date_from:${getStartOfDayIso(selected_date.value)},datetime-date_to:${getEndOfDayIso(selected_date_to.value)},department:${id}`,
+      //filters: `datetime-date_from:${new Date(startOfDay).toISOString()},datetime-date_to:${new Date(endOfDay).toISOString()},department:${id}`,
+    }).then(response => {
+      agg.count_bookings += parseInt(response.filter(b => b.order_id !== null).length || 0);
+      agg.count_bookings_out_of += parseInt(response?.length || 0);
+    });
   }
   count_transactions.value = agg.quantity;
   count_products_sold.value = agg.products;
   count_earnings.value = agg.earnings;
   count_washes.value = agg.washes;
   count_water_usage.value = agg.water_usage;
+  count_bookings.value = agg.count_bookings;
+  count_bookings_out_of.value = agg.count_bookings_out_of;
   // Set the loading state to false
   setLoadingFalse();
 };
 
+const getStartOfDayIso = (dateString) => {
+  const date = new Date(dateString);
+  date.setHours(0, 0, 0, 0);
+  return date.toISOString();
+};
+
+const getEndOfDayIso = (dateString) => {
+  const date = new Date(dateString);
+  date.setHours(23, 59, 59, 999);
+  return date.toISOString();
+}
+
 /** Update all, this function is called when the department ID or the selected date changes */
 const onChange = () => {
   // Generate a new unique ID ( This is done, to make sure all data is updated. - Even in other, independent components. This is done to prevent any issues with the data not being updated )
@@ -197,7 +224,7 @@ watch(selected_department_ids, () => {
 });
 
 /** Export the variables */
-export { isLoading, date_shortcuts, selected_date, selectDate, count_transactions, count_products_sold, count_earnings, selected_department_id, selectDepartment, onChangeCall, selected_date_to, count_washes, count_water_usage, selected_department_ids, selectDepartments };
+export { isLoading, date_shortcuts, selected_date, selectDate, count_bookings, count_bookings_out_of, count_transactions, count_products_sold, count_earnings, selected_department_id, selectDepartment, onChangeCall, selected_date_to, count_washes, count_water_usage, selected_department_ids, selectDepartments };
 
 
 </script>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue
index 30c59a9e..6b230210 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue
@@ -1,6 +1,6 @@
-<script setup>
-import {ref, defineProps} from 'vue';
-import { onChangeCall } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
+<script setup lang="ts">
+import {ref, defineProps, watch, onMounted} from 'vue';
+import {BSkeleton} from "buefy";
 
 const props = defineProps({
     title: String,
@@ -9,7 +9,12 @@ const props = defineProps({
     out_of: Number,
     icon: String,
     color: String,
-    buttons: Array,
+    buttons: {
+        type: Array as () => Array<{ id: string | number; text: string; icon: string; href: string }>,
+        default: () => {
+            return [];
+        }
+    },
     parseFunction: {
         type: Function,
         default: (value) => {
@@ -35,27 +40,112 @@ const props = defineProps({
     isLoading: {
       type: Boolean,
       default: false,
+    },
+    clickFunction: {
+      type: Function,
+      default: () => {}
+    },
+    styleContent: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
-})
-
+});
+const percentageElement = ref<HTMLElement|null>(null);
 const getPercentage = () => {
     if (props.out_of > 0) {
         return ((props.count / props.out_of) * 100).toFixed(1) + '%';
     }
     return null;
 }
+const autoAdjustedFontSizeTitle = ref({}); // Title
+const autoAdjustedFontSize = ref({}); // Count
+/**
+ * Auto adjust font size based on length of count
+ */
+const determineFontSize = (count: number) => {
+    if (count === null || count === undefined) {
+        return { fontSize: '2rem' };
+    }
+    const length = props.parseFunction(count).toString().length;
+    if (length <= 4) {
+        return { fontSize: '3rem' };
+    } else if (length <= 6) {
+        return { fontSize: '2.5rem' };
+    } else {
+        return { fontSize: '2rem' };
+    }
+}
 
+/**
+ * Auto adjust font size of the title, to make sure it doesn't line break
+ * This accounts for the percentage button as well (when shown)
+ */
+const titleElement = ref<HTMLElement|null>(null);
+const determineTitleFontSize = (title: string) => {
+    if (!titleElement.value) {
+        return { fontSize: '1.5rem' };
+    }
+    const baseFontSize = 1.5; // rem
+    const baseWidth = titleElement.value.clientWidth;
+    let adjustedFontSize = baseFontSize;
+
+    // If percentage button is shown, reduce available width
+    let availableWidth = baseWidth;
+    if (percentageElement.value && getPercentage() !== null) {
+        availableWidth -= percentageElement.value.clientWidth + 10; // 10px margin
+    }
+
+    // Create a temporary span to measure text width
+    const tempSpan = document.createElement('span');
+    tempSpan.style.fontSize = `${baseFontSize}rem`;
+    tempSpan.style.visibility = 'hidden';
+    tempSpan.style.whiteSpace = 'nowrap';
+    tempSpan.innerText = title;
+    document.body.appendChild(tempSpan);
+    const textWidth = tempSpan.clientWidth;
+    document.body.removeChild(tempSpan);
+
+    // Adjust font size if text width exceeds available width
+    if (textWidth > availableWidth) {
+        adjustedFontSize = (availableWidth / textWidth) * baseFontSize;
+    }
+
+    return { fontSize: `${adjustedFontSize}rem` };
+}
+watch(() => props.title, (newVal) => {
+    autoAdjustedFontSizeTitle.value = determineTitleFontSize(newVal);
+    autoAdjustedFontSize.value = determineFontSize(props.count);
+}, { immediate: true });
+watch(() => props.out_of, (newVal) => {
+  autoAdjustedFontSize.value = determineFontSize(props.count);
+  autoAdjustedFontSizeTitle.value = determineTitleFontSize(props.title);
+}, { immediate: true });
+watch(() => props.count, (newVal) => {
+  autoAdjustedFontSize.value = determineFontSize(newVal);
+  determineTitleFontSize(props.title);
+}, { immediate: true });
+
+onMounted(() => {
+    autoAdjustedFontSizeTitle.value = determineTitleFontSize(props.title);
+});
 </script>
 
 <template>
-  <div class="card">
-    <div class="card-content">
-      <div class="is-pulled-right has-text-right" v-show="getPercentage() !== null">
+  <div class="card" @click="clickFunction">
+    <div class="card-content" :style="styleContent">
+      <div class="is-pulled-right has-text-right" v-show="getPercentage() !== null" ref="percentageElement">
         <button class="button is-small is-info is-outlined">
           <!--<span class="icon is-small">
             <i class="fas fa-sync-alt"></i>
           </span>-->
-          <span>{{ getPercentage() }}</span>
+          <template v-if="isLoading">
+            <span><BSkeleton :width="'30px'" :height="'1em'"/></span>
+          </template>
+          <template v-else>
+            <span>{{ getPercentage() }}</span>
+          </template>
         </button>
       </div>
       <div class="media">
@@ -67,12 +157,26 @@ const getPercentage = () => {
           </figure>
         </div>
         <div class="media-content">
-          <p class="title is-4">{{ title }}</p>
+          <p class="title is-4" :style="autoAdjustedFontSizeTitle" ref="titleElement" style="display: flex; align-items: center;">
+            <template v-if="!isLoading">
+              {{ title }}
+            </template>
+            <template v-else>
+              <BSkeleton :width="'80%'" :height="'1em'"/>
+            </template>
+          </p>
           <p class="subtitle is-6">{{ subtitle }}</p>
         </div>
       </div>
       <div class="content has-text-centered">
-        <p class="title is-1"><span>{{ props.parseFunction(count) }}{{props.label_quantity_suffix}}</span> <span class="has-text-grey-light is-size-6" v-if="out_of > 0">/ {{ out_of }}{{props.label_out_of_suffix}}</span></p>
+        <p class="title is-1">
+          <template v-if="!isLoading">
+            <span :style="autoAdjustedFontSize">{{ props.parseFunction(count) }}{{props.label_quantity_suffix}}</span> <span class="has-text-grey-light is-size-6" v-if="out_of > 0">/ {{ out_of }}{{props.label_out_of_suffix}}</span>
+          </template>
+          <template v-else>
+            <BSkeleton :width="'100%'" :height="'1em'"/>
+          </template>
+        </p>
         <p class="subtitle is-6"><span>{{props.label_quantity}}</span><span v-if="out_of > 0" class="has-text-grey"> / {{props.label_out_of}}</span></p>
       </div>
     </div>
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
index 4fed3c9c..e3761a19 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
@@ -1,16 +1,28 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, defineProps } from 'vue';
 import { selected_date, selected_date_to, selectDate, selected_department_ids, selectDepartments } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
 import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { getDepartmentName } from "@/components/session/token/SessionUser/Objects/Departments.vue";
+import {BButton, BSkeleton} from "buefy";
+
+/**
+ * Props:
+ */
+const props = defineProps({
+  selectAllDepartments: {
+    type: Boolean,
+    default: false,
+  },
+})
 
 const accessibleDepartmentIds = ref([]);
 const departmentOptions = ref([]);
 const localSelectedIds = ref([]);
-
+const loadingDepartments = ref(false);
 const loadDepartments = async () => {
   // Get IDs user can access
+  loadingDepartments.value = true;
   accessibleDepartmentIds.value = SessionUser.functions.getAccessibleDepartments() || [];
   // Map to options with names
   const opts = [];
@@ -25,6 +37,12 @@ const loadDepartments = async () => {
   if ((selected_department_ids.value || []).length > 0) {
     localSelectedIds.value = [...selected_department_ids.value];
   }
+  // If prop to select all, do it
+  if (props.selectAllDepartments) {
+    localSelectedIds.value = [...accessibleDepartmentIds.value];
+    selectDepartments([...accessibleDepartmentIds.value]);
+  }
+  loadingDepartments.value = false;
 };
 
 onMounted(async () => {
@@ -72,10 +90,11 @@ const toggleSelection = (id) => {
         :reverse-level-order="true"
       />
     </div>
-    <div class="column is-12">
+    <div class="column">
       <label class="label mb-2">Afdelinger</label>
       <div class="buttons" style="flex-wrap: wrap; gap: 0.5rem 0.5rem;">
         <button
+          v-show="!loadingDepartments"
           v-for="opt in departmentOptions"
           :key="opt.id"
           class="button"
@@ -86,6 +105,31 @@ const toggleSelection = (id) => {
         >
           {{ opt.name }}
         </button>
+        <!-- Loading skeleton -->
+        <template v-for="i in 9" :key="'loading-skeleton-' + i" v-if="loadingDepartments">
+          <b-button class="is-light">
+            <b-skeleton width="80px" height="1rem"/>
+          </b-button>
+        </template>
+
+        <!-- All -->
+      </div>
+    </div>
+    <div class="column is-narrow">
+      <label class="label mb-2">&nbsp;</label>
+      <div class="buttons" style="flex-wrap: wrap; gap: 0.5rem 0.5rem;">
+        <button
+          class="button"
+          :class="(localSelectedIds.length === departmentOptions.length) ? 'is-info' : 'is-light'"
+          type="button"
+          @click="
+            ( localSelectedIds.length === departmentOptions.length ? localSelectedIds = [] : localSelectedIds = departmentOptions.map(o => o.id) );
+            onDepartmentsChange();
+          "
+          :aria-pressed="(localSelectedIds.length === departmentOptions.length)"
+        >
+          Alle
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue
index f7953e7b..73fef199 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue
@@ -17,6 +17,20 @@ const props = defineProps({
   force_out_of: {
     type: Number,
     default: null,
+  },
+  is_loading: {
+    type: Boolean,
+    default: false,
+  },
+  subtitle: {
+    type: String,
+    default: 'Dagens salg af produktet'
+  },
+  styleContent: {
+    type: Object,
+    default: () => {
+      return {};
+    }
   }
 });
 
@@ -24,10 +38,6 @@ const generateTitle = () => {
   return product_name.value;
 };
 
-const generateSubtitle = () => {
-  return "Dagens salg af produktet";
-};
-
 const generateCount = () => {
   return product_count.value;
 };
@@ -85,11 +95,13 @@ onChangeCall(() => {
 <template>
   <DepartmentDashboardDailyReportCount
     :title="product_name"
-    :subtitle="generateSubtitle()"
+    :subtitle="subtitle"
     :count="generateCount()"
     :out_of="props.force_out_of !== null ? props.force_out_of : product_out_of"
     :icon="generateIcon()"
     :color="generateColor()"
+    :isLoading="is_loading"
+    :style-content="styleContent"
     >
 
   </DepartmentDashboardDailyReportCount>
diff --git a/src/views/dashboards/departmentDashboard/modules/order-bookings/DepartmentDashboardOrderBooking.vue b/src/views/dashboards/departmentDashboard/modules/order-bookings/DepartmentDashboardOrderBooking.vue
new file mode 100644
index 00000000..55384d01
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/order-bookings/DepartmentDashboardOrderBooking.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { ref, watch, computed, onMounted } from 'vue';
+import { useRouter } from "vue-router";
+import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import Swal from "sweetalert2";
+import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+
+// Route params
+const router = useRouter();
+const bookingId = ref<any>(router.currentRoute.value.params.bookingId || null);
+
+// State
+const loading = ref(false);
+const saving = ref(false);
+const error = ref<string | null>(null);
+const booking = ref<any>(null);
+const showPricesOnBookingPage = () => {
+  return SessionUser.hasAttribute('showPricesOnBookingPage');
+};
+
+// Add item form state
+const products = ref<any[]>([]);
+const selectedProductId = ref<number | null>(null);
+const selectedQuantity = ref<number>(1);
+
+
+// Fetch products once (used for add form)
+const loadProducts = async () => {
+  try {
+    const all = await SessionUser.objects.products.get.all();
+    // If department filter is needed, backend typically handles via get.category; for now list all
+    products.value = all.filter((p: any) => p.display_in_booking_form);
+  } catch (e) {
+    console.warn('Failed to load products', e);
+  }
+}
+
+// Helpers
+const departmentName = computed(() => {
+  if (!booking.value) return '';
+  // Best-effort: show department id; elsewhere there's a getDepartmentName util in user table
+  return `Afdeling ${getDepartmentName(booking.value.department) || booking.value.department}`;
+});
+
+// Load booking
+const getBooking = async () => {
+  if (!bookingId.value) return;
+  loading.value = true;
+  error.value = null;
+  try {
+    booking.value = await SessionUser.objects.order_bookings.get.single(bookingId.value);
+  } catch (e: any) {
+    console.error(e);
+    error.value = 'Kunne ikke indlæse booking.';
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Mutations: persist items array
+const persistItems = async (items: any[]) => {
+  if (!booking.value) return;
+  saving.value = true;
+  try {
+    await SessionUser.objects.order_bookings.set.items(booking.value.id, items);
+    await getBooking();
+    //Swal.fire({ icon: 'success', title: 'Opdateret', text: 'Ydelser opdateret', timer: 1200, showConfirmButton: false });
+  } catch (e) {
+    console.error('Failed to update items', e);
+    Swal.fire({ icon: 'error', title: 'Fejl', text: 'Kunne ikke opdatere ydelser' });
+  } finally {
+    saving.value = false;
+  }
+};
+
+
+// Actions
+const onRemoveItem = async (index: number) => {
+  if (!booking.value) return;
+  const newItems = [...(booking.value.items || [])];
+  newItems.splice(index, 1);
+  await persistItems(newItems);
+};
+
+const onChangeQty = async (index: number, delta: number) => {
+  if (!booking.value) return;
+  const newItems = [...(booking.value.items || [])];
+  const item = { ...(newItems[index] || {}) };
+  const nextQty = parseInt(item.quantity || 1) + delta;
+  if (nextQty <= 0) {
+    // When decrementing from 1 to 0, remove the item entirely
+    newItems.splice(index, 1);
+  } else {
+    item.quantity = nextQty;
+    newItems[index] = item;
+  }
+  await persistItems(newItems);
+};
+
+const onAddItem = async () => {
+  if (!booking.value || !selectedProductId.value) return;
+  // Try to fetch product details to include name/price if backend expects it
+  try {
+    const product = await SessionUser.objects.products.get.single(parseInt(String(selectedProductId.value)));
+    const newItem = {
+      // Keep keys similar to existing items shape seen elsewhere (name, price, is_wash, id as product id)
+      id: product.id,
+      product_id: product.id,
+      name: product.name,
+      price: product.price,
+      is_wash: !!product.is_wash,
+      quantity: selectedQuantity.value || 1,
+    };
+    const newItems = [ ...((booking.value.items as any[]) || []), newItem ];
+    await persistItems(newItems);
+    // Reset form
+    selectedProductId.value = null;
+    selectedQuantity.value = 1;
+  } catch (e) {
+    console.error('Failed to add product', e);
+    Swal.fire({ icon: 'error', title: 'Fejl', text: 'Kunne ikke tilføje ydelse' });
+  }
+};
+
+// Derived
+const items = computed<any[]>(() => booking.value?.items || []);
+const total = computed(() => {
+  return (items.value || []).reduce((sum, it: any) => sum + (parseFloat(it.price || 0) * (parseInt(it.quantity || 1))), 0);
+});
+
+const canEditBooking = () => {
+  // Admins can always edit
+  if (SessionUser.canAccessAdmin() && SessionUser.hasPermission('edit_bookings')) return true;
+  if (!!booking.value.order_id) return false; // Linked to order, restrict edits for users
+  if (SessionUser.hasPermission('edit_own_bookings')) return true;
+}
+
+watch(() => router.currentRoute.value.params.bookingId, (val) => {
+  bookingId.value = val as any;
+  getBooking();
+});
+
+onMounted(async () => {
+  await Promise.all([getBooking(), loadProducts()]);
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <h1 class="title is-4">Booking #{{ booking?.id || bookingId }}</h1>
+      <p class="subtitle is-6" v-if="booking">
+        {{ departmentName }} • {{ booking.datetime }} • Køretøjer: {{ booking.reg_1 }}<span v-if="booking.reg_2">, {{ booking.reg_2 }}</span>
+      </p>
+      <div class="tags" v-if="booking">
+        <span class="tag is-info" v-if="booking.po">PO: {{ booking.po }}</span>
+        <span class="tag is-light" v-if="booking.reference">Ref: {{ booking.reference }}</span>
+        <span class="tag is-warning" v-if="booking.pickup">Pickup</span>
+      </div>
+    </div>
+
+    <div v-if="loading" class="notification is-light">Indlæser booking...</div>
+    <div v-if="error" class="notification is-danger">{{ error }}</div>
+
+    <div v-if="booking">
+      <!-- Editable booking fields (now use the shared EditableTableColumn component) -->
+      <div class="box mb-5">
+        <h2 class="title is-5">Bookingoplysninger</h2>
+        <table class="table is-fullwidth">
+          <tbody>
+          <tr>
+            <th style="width:150px">Afdeling</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="department"
+              :parse-function="(value) => value ? `${getDepartmentName(value) || value}` : 'Ingen afdeling valgt'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th style="width:220px">Dato</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="datetime"
+              :parse-function="(value) => value ? `${value}` : 'Ingen dato valgt'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>Køretøj 1</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="reg_1"
+              :parse-function="(value) => value || 'Ingen registreret'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>Køretøj 2</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="reg_2"
+              :parse-function="(value) => value || '-'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>PO</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="po"
+              :parse-function="(value) => value || '-'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>Reference</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="reference"
+              :parse-function="(value) => value || '-'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>Notat</th>
+            <EditableTableColumn
+              :componentWrapper="'td'"
+              :object="booking"
+              :loadList="getBooking"
+              column="note"
+              :parse-function="(value) => value || '-'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          <tr>
+            <th>Pickup</th>
+            <EditableTableColumn
+              :object="booking"
+              :loadList="getBooking"
+              column="pickup"
+              :parse-function="(value) => value ? 'Ja' : 'Nej'"
+              :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canEditBooking()"
+            />
+          </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Items list -->
+      <div class="box">
+        <div class="is-flex is-justify-content-space-between is-align-items-center mb-3">
+          <h2 class="title is-5 mb-0">Ydelser</h2>
+          <span class="has-text-weight-semibold" v-if="showPricesOnBookingPage()">Total: {{ total.toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</span>
+        </div>
+
+        <table class="table is-fullwidth is-striped is-hoverable">
+          <thead>
+            <tr>
+              <th>Navn</th>
+              <th class="has-text-centered">Antal</th>
+              <th class="has-text-right" v-if="showPricesOnBookingPage()">Pris</th>
+              <th style="width:130px;" class="has-text-right">Handlinger</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="items.length === 0">
+              <td colspan="4" class="has-text-centered has-text-grey">Ingen ydelser tilføjet endnu</td>
+            </tr>
+            <tr v-for="(item, index) in items" :key="index">
+              <td>
+                <span class="has-text-weight-medium">{{ item.name || ('Produkt #' + (item.id || item.product_id)) }}</span>
+                <span class="tag is-light is-rounded ml-2" v-if="item.is_wash">Vask</span>
+              </td>
+              <td class="has-text-centered">
+                <div class="buttons are-small is-centered">
+                  <button class="button" :disabled="saving || !canEditBooking()" @click="onChangeQty(index, -1)"><i class="fas fa-minus"></i></button>
+                  <span class="button is-static">{{ item.quantity || 1 }}</span>
+                  <button class="button" :disabled="saving || !canEditBooking()" @click="onChangeQty(index, +1)"><i class="fas fa-plus"></i></button>
+                </div>
+              </td>
+              <td class="has-text-right" v-if="showPricesOnBookingPage()">{{ (parseFloat(item.price || 0) * (parseInt(item.quantity || 1))).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</td>
+              <td class="has-text-right">
+                <button class="button is-small is-danger" :disabled="saving || !canEditBooking()" @click="onRemoveItem(index)">
+                  <span class="icon"><i class="fas fa-trash"></i></span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Add item form -->
+      <div class="box">
+        <h2 class="title is-6">Tilføj ydelse</h2>
+        <div class="field is-grouped">
+          <div class="control is-expanded">
+            <div class="select is-fullwidth">
+              <select v-model.number="selectedProductId" :disabled="saving || !canEditBooking()">
+                <option :value="null">Vælg produkt…</option>
+                <option v-for="p in products" :key="p.id" :value="p.id">{{ p.name }}{{ showPricesOnBookingPage() ? ` — ${p.price?.toLocaleString('da-DK', { style: 'currency', currency: 'DKK' })}` : '' }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="control">
+            <input class="input" type="number" min="1" v-model.number="selectedQuantity" style="width:100px" :disabled="saving || !canEditBooking()" />
+          </div>
+          <div class="control">
+            <button class="button is-primary" :class="{ 'is-loading': saving }" :disabled="(!selectedProductId || selectedQuantity < 1) || !canEditBooking()" @click="onAddItem">
+              Tilføj
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.buttons.is-centered { justify-content: center; }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue b/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue
index a89060e6..0184a7ae 100644
--- a/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue
+++ b/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue
@@ -5,6 +5,16 @@ import { ref, watch } from 'vue';
 import { getDepartmentName, getDepartmentDescription, isLoading, getDepartments, departments, departmentExists } from "@/components/pagination/departmentTabs.vue";
 import {useRouter} from "vue-router";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
+import DepartmentDailyReportThisWeek
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue";
+import DepartmentDailyReportSmall
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue";
+import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
+import DepartmentDailyBookingReportSmall
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue";
+import DepartmentDashboardReports
+  from "@/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardReports.vue";
 
 const router = useRouter();
 const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId));
@@ -16,6 +26,8 @@ const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId)
   >
     <template #default>
       <DepartmentModulesDisplay v-if="departmentId && !isLoading && departmentExists(departmentId)" class="my-3"></DepartmentModulesDisplay>
+      <hr/>
+      <DepartmentDashboardReports/>
     </template>
   </DepartmentDashboardPageWrapper>
 </template>
diff --git a/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardReports.vue b/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardReports.vue
new file mode 100644
index 00000000..eea16862
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardReports.vue
@@ -0,0 +1,66 @@
+<script setup>
+
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { ref } from "vue";
+import DepartmentDailyReportSmall
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
+import DepartmentDailyReportThisWeek
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue";
+import DepartmentDashboardOverviewNavigation
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";
+import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
+import DepartmentDailyBookingReportSmall
+  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import DepartmentDailyReport
+  from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
+
+const departments = ref(null);
+
+// Get the departments
+const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();
+
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
+    <!--
+      <RequiresPermission permission="list_department_daily_reports">
+        <DepartmentDailyReportThisWeek :departments="accessibleDepartments" v-if="accessibleDepartments.length > 0" />
+      </RequiresPermission>
+      -->
+    <DepartmentDailyReport :departmentSpecific="true"/>
+    <!--
+    <div class="columns is-multiline">
+      <div class="column is-12 pb-0" v-for="department_id in accessibleDepartments" :key="department_id">
+        <WhiteBoxCard :has-hover-effect="true" class="is-clickable mb-4" :has-selected-style="false" :has-selection-style="true" @click="$router.push('/admin/' + department_id)">
+          <template #header>
+            <div class="card-header-title" style="width: 100%;">
+              <div class="columns is-vcentered is-mobile" style="width: 100%;">
+                <div class="column">
+              <RequiresPermission permission="list_department_daily_reports">
+                <DepartmentDailyReportSmall :department_id="department_id" />
+              </RequiresPermission>
+              <RequiresPermission permission="list_bookings" v-show="!SessionUser.hasPermission('list_department_daily_reports')">
+                <DepartmentDailyBookingReportSmall v-bind:department_id="department_id" :options="{show_department_name: (!SessionUser.hasPermission('list_department_daily_reports'))}" />
+              </RequiresPermission>
+            </div>
+              </div>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+    </div>
+    -->
+
+  </RestrictedPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
index 87ec62b5..321b6a4a 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
@@ -4,6 +4,7 @@ import type {PosDepartment} from '@/components/displays/department/pos/steps/mob
 import type {PosProduct} from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
 
 const props = defineProps<{
+  label: string | null | undefined;
   dateTime: Date | null;
   isDisabled: boolean;
 }>();
@@ -15,35 +16,60 @@ const onClickDateTime = () => {
   // Emit the date and time selection event
   emits('onClickDateTime');
 }
+
+const formattedTime = computed(() => {
+  if (props.dateTime === null) {
+    return '--.--';
+  }
+  // If the time is 00:00, return '--.--'
+  if (props.dateTime.getHours() === 0 && props.dateTime.getMinutes() === 0) {
+    return '--.--';
+  }
+  return `~${props.dateTime.toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' })}`;
+})
+
+/**
+ * Show time and date if the date is:
+ * - null
+ * - not set to 00:00
+ */
+const showTimeAndDate = computed(() => {
+  if (props.dateTime === null) {
+    return true;
+  }
+  return !(props.dateTime.getHours() === 0 && props.dateTime.getMinutes() === 0);
+
+});
 </script>
 
 <template>
   <!-- Date & time -->
-  <div class="field">
-    <label class="label">Vælg dato (Valgfrit)</label>
+  <div class="field" v-if="label !== null">
+    <label class="label">{{label === undefined ? 'Dato og tid' : label}}</label>
   </div>
   <div class="field has-addons">
     <!-- Time -->
-    <div class="control is-expanded has-icons-left is-fixed-half">
+    <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': showTimeAndDate.valueOf() }" v-show="showTimeAndDate">
       <button class="button is-fullwidth default-button" @click="onClickDateTime" v-bind:disabled="props.isDisabled">
-            <span>
-              {{ dateTime === null ? '--.--' : dateTime.toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' }) }}
-            </span>
+        <span>
+          {{ dateTime === null ? '--.--' : formattedTime }}
+        </span>
         <span class="icon is-left">
-              <i class="fas fa-clock"></i>
-            </span>
+          <i class="fas fa-clock"></i>
+        </span>
       </button>
     </div>
     <!-- Date -->
-    <div class="control is-expanded has-icons-left is-fixed-half">
+    <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': showTimeAndDate }">
       <button class="button is-fullwidth default-button" @click="onClickDateTime" v-bind:disabled="props.isDisabled">
             <span>
-              {{ dateTime === null ? '--.--.----' : dateTime.toLocaleDateString('da-DK', { month: '2-digit', day: '2-digit', year: 'numeric' }) }}
+                {{ (dateTime === null || props.isDisabled) ? '--.--.----' : dateTime.toLocaleDateString('da-DK', { month: '2-digit', day: '2-digit', year: 'numeric' }) }}
             </span>
         <span class="icon is-left">
               <i class="fas fa-calendar-alt"></i>
             </span>
       </button>
+
     </div>
   </div>
 </template>
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
index 2c64715c..d2151a39 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {defineProps, defineEmits, computed, ref} from 'vue';
+import {defineProps, defineEmits, computed, ref, withDefaults, watch} from 'vue';
 import type {PosDepartment} from '@/components/displays/department/pos/steps/mobile/objects/PosDepartment.vue';
 import type {PosProduct} from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
 import TimeBookingsElementReg1Addons from './TimeBookingsElementReg1Addons.vue';
 import TimeBookingsElementReg2Addons
   from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementReg2Addons.vue";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   reg1: string;
   reg2: string;
   reg1Type: PosProduct | null;
@@ -16,7 +16,10 @@ const props = defineProps<{
   availableVehicleTypes: PosProduct[];
   showPriceOnBookingPage: boolean;
   label: string | null | undefined;
-}>();
+  hideTypeSelect?: boolean;
+}>(), {
+  hideTypeSelect: false
+});
 const emits = defineEmits([
   'update:reg1',
   'update:reg2',
@@ -83,6 +86,16 @@ const reg2TypeVmodel = computed({
   }
 });
 
+/**
+ * Watch for changes to the reg1, and if empty (and there is a reg2), move reg2 to reg1
+ */
+watch(() => props.reg1, (newValue) => {
+  if (newValue === '' && props.reg2 !== '') {
+    onUpdateReg1(props.reg2);
+    onUpdateReg2('');
+  }
+})
+
 </script>
 
 <template>
@@ -91,7 +104,7 @@ const reg2TypeVmodel = computed({
     <label class="label">{{label === undefined ? 'Indsæt relevante registreringsnumre' : label}}</label>
   </div>
   <div class="field has-addons">
-    <div class="control is-expanded has-icons-left is-fixed-half">
+    <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': !hideTypeSelect }">
       <button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg1"
               :class="{ 'is-link': reg1 !== '' }" v-show="!isReg1Input">
             <span>
@@ -119,7 +132,7 @@ const reg2TypeVmodel = computed({
         <i class="fas fa-truck-pickup"></i>
       </span>
     </div>
-    <div class="control is-expanded has-icons-left has-icons-right is-fixed-half">
+    <div class="control is-expanded has-icons-left has-icons-right is-fixed-half" v-show="!hideTypeSelect">
       <div class="select is-fullwidth has-icons-right has-icons-left">
         <select v-model="reg1TypeVmodel" :disabled="reg1 === ''">
           <option :value="null" disabled>Vælg køretøjstype</option>
@@ -133,8 +146,8 @@ const reg2TypeVmodel = computed({
       </span>
     </div>
   </div>
-  <div class="field has-addons">
-    <div class="control has-icons-left is-expanded is-fixed-half">
+  <div class="field has-addons" v-show="reg1 !== ''">
+    <div class="control has-icons-left is-expanded" :class="{ 'is-fixed-half': !hideTypeSelect }">
       <button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg2"
               :class="{ 'is-link': reg2 !== '' }" v-show="!isReg2Input">
             <span>
@@ -160,7 +173,7 @@ const reg2TypeVmodel = computed({
             <i class="fas fa-trailer"></i>
           </span>
     </div>
-    <div class="control is-expanded has-icons-left is-fixed-half">
+    <div class="control is-expanded has-icons-left is-fixed-half" v-show="!hideTypeSelect">
       <div class="select is-fullwidth has-icons-right has-icons-left">
         <select v-model="reg2TypeVmodel" :disabled="reg2 === ''">
           <option :value="null" disabled>Vælg køretøjstype</option>
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementVehicleSuggestions.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementVehicleSuggestions.vue
index 25a12f7c..458d0281 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementVehicleSuggestions.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementVehicleSuggestions.vue
@@ -10,6 +10,7 @@ const props = defineProps<{
   label: string | null | undefined;
   input: string;
   availableVehicleTypes: PosProduct[] | null;
+  compact?: boolean;
 }>();
 const emits = defineEmits([
   'onSelectVehicle',
@@ -31,9 +32,15 @@ const isCustomerVehiclesLoaded = ref(false); // Flag to track if customer vehicl
 const results = ref<PosVehicle[]>([]);
 
 const getCustomerVehicles = async () => {
+  if (!(SessionUser.canAccessUser() || SessionUser.canAccessAdmin())) {
+    customerVehicles.value = [];
+    return Promise.resolve([]);
+  }
   SessionUser.objects.vehicles.get.all().then((vehicles) => {
     customerVehicles.value = vehicles;
-  });
+  }).catch((err) => {
+    customerVehicles.value = [];
+  })
 }
 
 const onInputChange = (newVal: string) => {
@@ -54,6 +61,11 @@ const onInputChange = (newVal: string) => {
   if (newVal.length === 0) {
     return; // Do not search for empty input
   }
+  // If there's no customer vehicles, return empty
+  if (customerVehicles.value.length === 0) {
+    results.value = [];
+    return;
+  }
   // Filter the customer vehicles based on the input (3 first entries)
   results.value = customerVehicles.value.filter(vehicle =>
       vehicle.reg.toLowerCase().includes(newVal.toLowerCase())
@@ -76,7 +88,7 @@ watch(results, (newVal) => {
 
       <!-- Results -->
       <div v-show="results.length > 0"
-        class="column is-one-third"
+        class="column" :class="{'is-12': compact, 'is-one-third': !compact}"
         v-for="vehicle in (results.length > 0 ? results : input.length > 0 ? [] : customerVehicles)"
         :key="vehicle.id"
         @click="onSelectVehicle(vehicle)"
diff --git a/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue b/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
index d6ed64eb..93c11512 100644
--- a/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
+++ b/src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue
@@ -1,27 +1,32 @@
-<script setup>
+<script setup lang="ts">
 
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
-import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { ref } from "vue";
 import DepartmentDailyReportSmall
   from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue";
-import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 import DepartmentDailyReportThisWeek
   from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue";
-import DepartmentDashboardOverviewNavigation
-  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";
-import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
 import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
 import DepartmentDailyBookingReportSmall
   from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue";
-
-const departments = ref(null);
+import DepartmentDailyReport
+  from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
+import {BTabItem, BTabs} from "buefy";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 
 // Get the departments
 const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();
-
+/**
+ * List display type
+ */
+const listDisplayTabIndexes = {
+  cards: 0,
+  list: 1
+};
+type listDisplayType = typeof listDisplayTabIndexes[keyof typeof listDisplayTabIndexes];
+const listDisplay = ref<listDisplayType>(listDisplayTabIndexes.cards);
 </script>
 
 <template>
@@ -30,31 +35,45 @@ const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();
         title="Overblik"
         subtitle="Se hvordan dine afdelinger klarer sig"
     >
-      <RequiresPermission permission="list_department_daily_reports">
-        <DepartmentDailyReportThisWeek :departments="accessibleDepartments" v-if="accessibleDepartments.length > 0" />
-      </RequiresPermission>
-      <div class="columns is-multiline">
-        <div class="column is-12" v-for="department_id in accessibleDepartments" :key="department_id">
-          <WhiteBox>
-            <RequiresPermission permission="list_department_daily_reports">
-              <DepartmentDailyReportSmall :department_id="department_id" />
-            </RequiresPermission>
-            <RequiresPermission permission="list_bookings" v-show="!SessionUser.hasPermission('list_department_daily_reports')">
-              <DepartmentDailyBookingReportSmall v-bind:department_id="department_id" :options="{show_department_name: (!SessionUser.hasPermission('list_department_daily_reports'))}" />
-            </RequiresPermission>
-            <RequiresPermission permission="department_timebookings_entries_get" v-show="!SessionUser.hasPermission('list_department_daily_reports') && !SessionUser.hasPermission('list_bookings')">
-              <div class="message is-warning">
-                <div class="message-body">
-                  <!-- Under development -->
-                  <p>
-                    <strong>Under udvikling</strong> - Overblik over tidsbookinger, du ellers ville kunne tilgå her, er under udvikling og vil snart være tilgængelig.
-                  </p>
-                </div>
+      <b-tabs type="is-boxed" v-model="listDisplay" expanded>
+        <b-tab-item label="Kort"
+                    icon-pack="fas"
+                    icon="th-large"
+                    :visible="true"
+        >
+          <template v-if="true">
+            <DepartmentDailyReport :departmentSpecific="false"/>
+          </template>
+        </b-tab-item>
+        <b-tab-item label="Liste"
+                    icon-pack="fas"
+                    icon="list"
+        >
+          <template v-if="true">
+            <DepartmentDailyReportThisWeek :departments="accessibleDepartments"/>
+            <div class="columns is-multiline">
+              <div class="column is-12 pb-0" v-for="department_id in accessibleDepartments" :key="department_id">
+                <WhiteBoxCard :has-hover-effect="true" class="is-clickable mb-4" :has-selected-style="false" :has-selection-style="true" @click="$router.push('/admin/' + department_id)">
+                  <template #header>
+                    <div class="card-header-title" style="width: 100%;">
+                      <div class="columns is-vcentered is-mobile" style="width: 100%;">
+                        <div class="column">
+                          <RequiresPermission permission="list_department_daily_reports">
+                            <DepartmentDailyReportSmall :department_id="department_id" />
+                          </RequiresPermission>
+                          <RequiresPermission permission="list_bookings" v-show="!SessionUser.hasPermission('list_department_daily_reports')">
+                            <DepartmentDailyBookingReportSmall v-bind:department_id="department_id" :options="{show_department_name: (!SessionUser.hasPermission('list_department_daily_reports'))}" />
+                          </RequiresPermission>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </WhiteBoxCard>
               </div>
-            </RequiresPermission>
-          </WhiteBox>
-        </div>
-      </div>
+            </div>
+          </template>
+        </b-tab-item>
+      </b-tabs>
     </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
 </template>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue
index 821de3ef..574dcc10 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue
@@ -1,7 +1,8 @@
 <script setup>
 import {ref, defineProps, watch} from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
-import {show_this_week} from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import {selected_date, selected_date_to, is_loading, is_latest_fetch, next_fetch_id, finished_loading} from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import {BLoading} from "buefy";
 
 const props = defineProps({
   department_id: {
@@ -29,23 +30,15 @@ const department = ref({});
 const isCollapsed = ref(true);
 const earnings = ref(0);
 const sales = ref(0);
+const washes = ref(0);
 
-/** Get the dates in the current week */
-const getDatesThisWeek = () => {
+/** Get the dates in the current selecton */
+const getDatesInSelection = () => {
   const dates = [];
-  const today = new Date();
-  // If only today, return today
-  if (!show_this_week.value) {
-    dates.push(today.toISOString().split('T')[0]);
-    return dates;
-  }
-  const day = today.getDay();
-  const diff = today.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
-  const monday = new Date(today.setDate(diff));
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(monday);
-    date.setDate(monday.getDate() + i);
-    dates.push(date.toISOString().split('T')[0]);
+  const startDate = new Date(selected_date.value);
+  const endDate = new Date(selected_date_to.value);
+  for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+    dates.push(new Date(d).toISOString().split('T')[0]);
   }
   return dates;
 };
@@ -57,26 +50,42 @@ const getDepartment = async () => {
     department.value = response;
   });
 };
+const identifier = props.department_id ? props.department_id + '_DepartmentDailyReportSmall' : 'DepartmentDailyReportSmall';
 
 // Get the transactions for the current day
 const getTransactions = async () => {
-  // If the department ID is not set, return
-  if (!props.department_id) {
-    return;
+  // Start a new fetch
+  const current_fetch_id = next_fetch_id(identifier);
+  let tmp = {
+    sales: 0,
+    earnings: 0,
+    washes: 0
   }
-  // Reset the values
-  sales.value = 0;
-  earnings.value = 0;
   // Update the dates
-  const dates = getDatesThisWeek();
+  const dates = getDatesInSelection();
   // Get the transactions
   for (const date of dates) {
+    if (!is_latest_fetch(current_fetch_id, identifier)) {
+      console.warn('Aborting fetching of department transactions, a newer fetch is in progress. id:', current_fetch_id, 'identifier:', identifier);
+      break;
+    }
     await SessionUser.objects.department_daily_reports.functions.getTransactionCount(props.department_id, date)
       .then(response => {
-        sales.value += response.data.data.quantity;
-        earnings.value += response.data.data.earnings ?? 0;
+        if (is_latest_fetch(current_fetch_id, identifier)) {
+          tmp.sales += response.data.data.quantity;
+          tmp.earnings += response.data.data.earnings ?? 0;
+          tmp.washes += response.data.data.washes ?? 0;
+        }
       });
   }
+  // Finished loading
+  if (is_latest_fetch(current_fetch_id, identifier)) {
+    sales.value = tmp.sales;
+    earnings.value = tmp.earnings;
+    washes.value = tmp.washes;
+    console.log('Fetched transactions for department', props.department_id, 'sales:', tmp.sales, 'earnings:', tmp.earnings);
+    finished_loading(current_fetch_id, identifier);
+  }
 };
 
 // Get the department
@@ -84,8 +93,8 @@ getDepartment().then(
   () => getTransactions()
 )
 
-// Watch the show_this_week prop
-watch(() => show_this_week.value, () => {
+// Watch the selected_date and selected_date_to for changes
+watch([selected_date, selected_date_to], () => {
   getTransactions();
 });
 
@@ -96,21 +105,25 @@ watch(() => show_this_week.value, () => {
     <!-- Name -->
     <div class="column is-6">
       <h3 class="title is-5">{{ department.name }}</h3>
+      <b-loading :is-full-page="false" :modelValue="is_loading(identifier)" />
     </div>
     <!-- Sales -->
     <div class="column is-2 has-text-centered">
-      <h3 class="title is-5">{{ sales }}</h3>
-      <h6 class="subtitle is-6">Enheder</h6>
+      <h3 class="title is-5">{{ washes }}</h3>
+      <h6 class="subtitle is-6">Vaske</h6>
+      <b-loading :is-full-page="false" :modelValue="is_loading(identifier)" />
     </div>
     <!-- Income per sale -->
     <div class="column is-2 has-text-centered">
-      <h3 class="title is-5">{{ earnings > 0 ? economicParser.format(earnings / sales) : economicParser.format(0) }}</h3>
-      <h6 class="subtitle is-6">Gns. pr. enhed</h6>
+      <h3 class="title is-5">{{ earnings > 0 ? economicParser.format(earnings / washes) : economicParser.format(0) }}</h3>
+      <h6 class="subtitle is-6">Gns. omsætning pr. vask</h6>
+      <b-loading :is-full-page="false" :modelValue="is_loading(identifier)" />
     </div>
     <!-- Total income -->
     <div class="column is-2 has-text-centered">
       <h3 class="title is-5">{{ economicParser.format(earnings) }}</h3>
       <h6 class="subtitle is-6">Omsætning</h6>
+      <b-loading :is-full-page="false" :modelValue="is_loading(identifier)" />
     </div>
   </div>
 </template>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue
index 7a4b7728..5782927d 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { ref, defineProps, watch } from 'vue';
+import {ref, defineProps, watch, onMounted} from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
-import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import { is_latest_fetch, next_fetch_id, is_loading, finished_loading, selected_date_to, selected_date } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
 import DepartmentDashboardOverviewNavigation
   from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";
+import {BSkeleton} from "buefy";
 
 const props = defineProps({
   departments: {
@@ -17,60 +18,83 @@ const props = defineProps({
 const income = ref(0);
 const sales = ref(0);
 const transactions = ref(0);
+const washes = ref(0);
 
-/** Get the dates in the current week */
-const getDatesThisWeek = () => {
+/** Get the dates in the current selection */
+const getDatesInSelection = () => {
   const dates = [];
-  const today = new Date();
-  // If only today, return today
-  if (show_this_week.value === false) {
-    dates.push(today.toISOString().split('T')[0]);
-    return dates;
-  }
-  const day = today.getDay();
-  const diff = today.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
-  const monday = new Date(today.setDate(diff));
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(monday);
-    date.setDate(monday.getDate() + i);
-    dates.push(date.toISOString().split('T')[0]);
+  const startDate = new Date(selected_date.value);
+  const endDate = new Date(selected_date_to.value);
+  for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+    dates.push(new Date(d).toISOString().split('T')[0]);
   }
   return dates;
 };
 
-/** Fetch the transactions for the current week */
-const getTransactionsThisWeek = async () => {
+const identifier = 'DepartmentDailyReportThisWeek';
+
+/** Fetch the transactions for the selected date range */
+const getTransactionsInSelection = async () => {
   // If the department ID is not set, return
   if (!props.departments) {
     return;
   }
+  // Start a new fetch
+  const fetch_id = next_fetch_id(identifier);
+  console.warn('Fetching transactions for departments, fetch id:', fetch_id);
   // Reset the values
   income.value = 0;
   sales.value = 0;
   transactions.value = 0;
-  const dates = getDatesThisWeek();
+  washes.value = 0;
+  // Fetch the data
+  let tmp = {
+    income: 0,
+    sales: 0,
+    transactions: 0,
+    washes: 0,
+  };
+  const dates = getDatesInSelection();
   for (const department of props.departments) {
     for (const date of dates) {
       console.log(department, date);
       await SessionUser.objects.department_daily_reports.functions.getTransactionCount(department, date)
         .then(response => {
-          sales.value += response.data.data.products ?? 0;
-          income.value += response.data.data.earnings ?? 0;
-          transactions.value += response.data.data.quantity ?? 0;
+          if (is_latest_fetch(fetch_id, identifier)) {
+            tmp.income += response.data.data.earnings ?? 0;
+            tmp.sales += response.data.data.products ?? 0;
+            tmp.transactions += response.data.data.quantity ?? 0;
+            tmp.washes += response.data.data.washes ?? 0;
+          } else {
+            console.warn('Ignoring outdated fetch response for department', department, 'date', date, 'fetch id:', fetch_id);
+          }
         });
     }
   }
+  // Set the values
+  if (is_latest_fetch(fetch_id, identifier)) {
+    console.log('Fetched transactions for departments', props.departments, 'income:', tmp.income, 'sales:', tmp.sales, 'transactions:', tmp.transactions);
+    income.value = tmp.income;
+    sales.value = tmp.sales;
+    transactions.value = tmp.transactions;
+    washes.value = tmp.washes;
+  } else {
+    console.warn('Aborting setting of department transactions, a newer fetch is in progress. id:', fetch_id);
+    return;
+  }
+  // Finished loading
+  finished_loading(fetch_id, identifier);
   console.log(sales.value, income.value, transactions.value);
 };
 
-getTransactionsThisWeek();
-
-// Watch the only_today prop
-watch(() => show_this_week.value, () => {
-  getTransactionsThisWeek();
+// Watch the selected date range for changes
+watch([() => selected_date.value, () => selected_date_to.value], () => {
+  getTransactionsInSelection();
 });
 
-console.log((getDatesThisWeek()));
+onMounted(() => {
+  getTransactionsInSelection();
+});
 </script>
 
 <template>
@@ -79,25 +103,52 @@ console.log((getDatesThisWeek()));
     <div class="column is-12">
       <DepartmentDashboardOverviewNavigation/>
     </div>
-    <!-- Income -->
-    <div class="column is-4">
-      <div class="box">
-        <p class="subtitle is-6">Omsætning {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
-        <p class="title is-4">{{ SessionUser.functions.currency.toLocal(income) }}</p>
-      </div>
-    </div>
-    <!-- Gns. pr. enhed -->
-    <div class="column is-4">
-      <div class="box">
-        <p class="subtitle is-6">Gns. pr. enhed {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
-        <p class="title is-4">{{ SessionUser.functions.currency.toLocal(income / transactions) }}</p>
-      </div>
-    </div>
-    <!-- Transactions -->
-    <div class="column is-4">
-      <div class="box">
-        <p class="subtitle is-6">Enheder {{ !show_this_week ? 'i dag' : 'denne uge' }}</p>
-        <p class="title is-4">{{ transactions }}</p>
+  </div>
+  <div class="columns is-multiline is-vcentered">
+    <div class="column is-12">
+      <div class="columns is-multiline is-vcentered">
+        <!-- Income -->
+        <div class="column is-4">
+          <div class="box">
+            <p class="subtitle is-6">Omsætning {{ SessionUser.functions.date.isToday(selected_date) && SessionUser.functions.date.isToday(selected_date_to) ? 'i dag' : '' }}</p>
+            <p class="title is-4">
+            <template v-if="is_loading(identifier)">
+              <b-skeleton :width="'100%'" :height="'1em'"/>
+            </template>
+            <template v-else>
+              {{ SessionUser.functions.currency.toLocal(income) }}
+            </template>
+            </p>
+          </div>
+        </div>
+        <!-- Gns. omsætning pr. vask -->
+        <div class="column is-4">
+          <div class="box">
+            <p class="subtitle is-6">Gns. omsætning pr. vask {{ SessionUser.functions.date.isToday(selected_date) && SessionUser.functions.date.isToday(selected_date_to) ? 'i dag' : '' }}</p>
+            <p class="title is-4">
+            <template v-if="is_loading(identifier)">
+              <b-skeleton :width="'100%'" :height="'1em'"/>
+            </template>
+            <template v-else>
+              {{ SessionUser.functions.currency.toLocal((income / washes) || 0) }}
+            </template>
+            </p>
+          </div>
+        </div>
+        <!-- Transactions -->
+        <div class="column is-4">
+          <div class="box">
+            <p class="subtitle is-6">Vaske {{ SessionUser.functions.date.isToday(selected_date) && SessionUser.functions.date.isToday(selected_date_to) ? 'i dag' : '' }}</p>
+            <p class="title is-4">
+              <template v-if="is_loading(identifier)">
+                <b-skeleton :width="'100%'" :height="'1em'"/>
+              </template>
+              <template v-else>
+                {{ washes }}
+              </template>
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
index aed0c833..5b420b50 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
@@ -1,38 +1,32 @@
 <script setup>
-import { defineProps, ref } from 'vue';
-import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import { defineEmits } from 'vue';
+import { selected_date, selected_date_to } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
+import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
 
+// Emits for parents that want to react to date changes (non-breaking if unused)
+const emit = defineEmits(['date-change']);
 
-const selected_option = ref(0);
-
-const options = [
-  { id: 0, label: 'I dag' },
-  { id: 1, label: 'Denne uge' },
-];
-
-const selectOption = (option) => {
-  selected_option.value = option;
-  show_this_week.value = option === 1;
+// Local selection state (ISO yyyy-mm-dd)
+const todayIso = new Date().toISOString().split('T')[0];
+const selectDate = (startIso, endIso) => {
+  console.warn('DepartmentDashboardOverviewNavigation selectDate', startIso, endIso);
+  selected_date.value = startIso;
+  selected_date_to.value = endIso;
+  emit('date-change', { startDate: startIso, endDate: endIso });
 };
 
 </script>
 
 <template>
-  <div class="navbar is-white">
-    <div class="navbar-menu">
-      <!-- Date shortcuts -->
-      <div class="navbar-start">
-        <div class="navbar-item">
-          <div class="buttons">
-            <button v-for="(shortcut, index) in options" :key="index" @click="selectOption(shortcut.id)"
-                    class="button is-light" :class="{ 'is-info': selected_option === shortcut.id }">
-              {{ shortcut.label }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <DatePeriodSelector
+      :on-selection-change="(startDate, endDate) => selectDate(startDate.toISOString().split('T')[0], endDate.toISOString().split('T')[0])"
+      :selection="{ startDate: new Date(selected_date), endDate: new Date(selected_date_to) }"
+      :visibility="{ showDailySelector: true, showWeeklySelector: true, showMultipleMonthWarning: false, showUpdateButton: false }"
+      :reverse-level-order="true"
+      @update:selection="(newSelection) => {
+        selectDate(newSelection.startDate.toISOString().split('T')[0], newSelection.endDate.toISOString().split('T')[0]);
+      }"
+  />
 </template>
 
 <style scoped>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
index 22581ae1..1ed0bebc 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
@@ -1,7 +1,56 @@
-<script>
-import { ref, watch } from 'vue';
-import { SessionUser } from '@/components/session/token/SessionUser.vue';
+<script lang="ts">
+import {defineComponent, ref, watch} from 'vue';
 
+
+type fetch = {
+  id: number,
+  identifier: string | null,
+  loading: boolean,
+  date_from: string,
+  date_to: string
+};
 /** Define the variables */
 export const show_this_week = ref(false);
+export const selected_date = ref(new Date().toISOString().split('T')[0]);
+export const selected_date_to = ref(new Date().toISOString().split('T')[0]);
+export const last_fetch_id = ref(0);
+export const fetches = ref<fetch[]>([]);
+/** Define the functions */
+export const next_fetch_id = (identifier: string | null = null): number => {
+  last_fetch_id.value += 1;
+  fetches.value.push({
+    id: last_fetch_id.value,
+    identifier: identifier,
+    loading: true,
+    date_from: selected_date.value,
+    date_to: selected_date_to.value
+  });
+  return last_fetch_id.value;
+};
+export const is_latest_fetch = (id: number, identifier: string | null = null): boolean => {
+  const relevantFetches = fetches.value.filter(f => f.identifier === identifier);
+  if (relevantFetches.length === 0) return false;
+  const latestFetch = relevantFetches.reduce((prev, current) => (prev.id > current.id) ? prev : current);
+  return latestFetch.id === id;
+};
+export const is_loading = (identifier: string | null = null): boolean => {
+  const relevantFetches = fetches.value.filter(f => f.identifier === identifier && f.loading);
+  return relevantFetches.length > 0;
+};
+export const finished_loading = (id: number, identifier: string | null = null): void => {
+  const fetchIndex = fetches.value.findIndex(f => f.id === id && f.identifier === identifier);
+  if (fetchIndex !== -1) {
+    fetches.value[fetchIndex].loading = false;
+  }
+};
+// Watch for changes in selected_date and selected_date_to to reset fetches
+watch([selected_date, selected_date_to], () => {
+  fetches.value = [];
+});
+
+
+// Component exports
+export default defineComponent({
+  name: 'DepartmentsOverviewObject'
+});
 </script>
\ No newline at end of file
diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportView.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportView.vue
index d3ad6b37..1959232b 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportView.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportView.vue
@@ -80,23 +80,27 @@ const getViewCustomer = (customer: any = {customer_number: Number}, targetView:
   );
 };
 
-const addViewCustomerTransaction = (customer: any, transaction: {amount: number, booked: boolean, date: string, id: number}) => {
+const addViewCustomerTransaction = (customer: any, transaction: { excluded: boolean, amount: number, booked: boolean, date: string, id: number}) => {
   // Add a transaction to the customer in the current view
   const viewCustomer = getViewCustomer(customer, currentView);
-  if (viewCustomer) {
+  if (viewCustomer && !transaction.excluded) {
     viewCustomer.transactions.push(transaction);
   } else {
     console.warn(`Customer "${customer.customer_number}" not found in view "${currentView.value}".`);
   }
 };
 
-const updateViewCustomerTransaction = (customer: any, transaction: {amount: number, booked: boolean, date: string, id: number}) => {
+const updateViewCustomerTransaction = (customer: any, transaction: {excluded: boolean, amount: number, booked: boolean, date: string, id: number}) => {
   // Update a transaction for the customer in the current view
   const viewCustomer = getViewCustomer(customer, currentView);
   if (viewCustomer) {
     const transactionIndex = viewCustomer.transactions.findIndex((t: any) => t.id === transaction.id);
-    if (transactionIndex !== -1) {
+    if (transactionIndex !== -1 && !transaction.excluded) {
       viewCustomer.transactions[transactionIndex] = transaction;
+    } else if (transactionIndex !== -1 && transaction.excluded) {
+      // If the transaction is excluded, remove it
+      console.warn(`Transaction "${transaction.id}" is excluded. Removing it from view "${currentView.value}".`);
+      viewCustomer.transactions.splice(transactionIndex, 1);
     } else {
       // If the transaction does not exist, add it
       console.warn(`Transaction "${transaction.id}" not found in view "${currentView.value}". Adding it.`);
@@ -128,12 +132,13 @@ const getCustomerViewTotalNetAmount = (customer: any, options: {
 
   if (options.includeTransactions) {
     // If transactions are included, calculate the total from transactions
-    const totalNetAmount = customer.transactions.reduce((sum: number, transaction: any) => sum + transaction.amount, 0);
+    const totalNetAmount = customer.transactions.reduce((sum: number, transaction: any) => sum + (transaction.excluded ? 0 : transaction.amount), 0);
     return totalNetAmount.toFixed(2);
   }
   console.warn('Defaulting to 0.00 for customer total net amount, no options enabled and no transactions found.');
   return parseFloat('0.00').toFixed(2);
 };
+const filterExcluded = (transactions: any[]) => transactions.filter((transaction: any) => !transaction.excluded);
 
 const functionsViews = {
   setCurrentView,
@@ -143,6 +148,7 @@ const functionsViews = {
   getViewCustomer,
   addViewCustomerTransaction,
   updateViewCustomerTransaction,
+  filterExcluded, // Transaction filter function
 };
 
 
@@ -189,7 +195,7 @@ const computedViews = {
           }
           // If not, sum the transaction amounts
           return total + customer.transactions.reduce((sum: number, transaction: any) => {
-            return sum + transaction.amount;
+            return sum + transaction.excluded ? 0 : transaction.amount;
           }, 0);
         }, totalNetAmount);
       }
@@ -206,7 +212,7 @@ const computedViews = {
         return shared.types[currentView.value].reduce((total: number, customer: any) => {
           //TODO: Check if this works with the fixed_pricing.
           return total + customer.transactions.reduce((sum: number, transaction: any) => {
-            return sum + (transaction.booked ? transaction.amount : 0);
+            return sum + (transaction.booked ? transaction.excluded ? 0 : transaction.amount : 0);
           }, 0);
         }, totalNetAmountNotRequiresBooked);
       }
diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
index 208c836b..28285cd7 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
@@ -64,7 +64,18 @@ const getTransactionIds = (customer: any) => {
   if (!customer.transactions || customer.transactions.length === 0) {
     return [];
   }
-  return customer.transactions.map(transaction => transaction.id);
+  // Filter out excluded transactions
+  const filteredTransactions = customer.transactions.filter(transaction => transaction.excluded !== true);
+  return filteredTransactions.map(transaction => transaction.id);
+}
+
+const getExcludedTransactionIds = (customer: any) => {
+  if (!customer.transactions || customer.transactions.length === 0) {
+    return [];
+  }
+  // Get excluded transactions
+  const excludedTransactions = customer.transactions.filter(transaction => transaction.excluded === true);
+  return excludedTransactions.map(transaction => transaction.id);
 }
 
 const transactionIdsInvoiceCollectionCache = ref<{ [key: number]: number | null }>({}); // Cache for transaction ID to invoice collection ID mapping
@@ -168,7 +179,8 @@ const isAllCustomerTransactionsBooked = (customer: any, transactionIds: number[]
     return false;
   }
   const bookedTransactionIds = customer.transactions.filter((t: any) => t.booked === true).map((t: any) => t.id);
-  return transactionIds.every(id => bookedTransactionIds.includes(id));
+  const excludedTransactionIds = customer.transactions.filter((t: any) => t.excluded === true).map((t: any) => t.id);
+  return (transactionIds.every(id => bookedTransactionIds.includes(id)) || transactionIds.every(id => excludedTransactionIds.includes(id)));
 }
 
 const getTransactionQueryParameters = () => {
@@ -233,7 +245,7 @@ const getTransactionQueryParameters = () => {
             </div>
             <!-- Transactions count -->
             <div class="column is-narrow">
-              <p v-if="customer.transactions.length !== 0">{{customer.transactions.length}} {{ customer.transactions.length > 1 ? SessionUser.objects.orders.meta.labels.multiple : SessionUser.objects.orders.meta.labels.single }}</p>
+              <p v-if="customer.transactions.length !== 0">{{view.functions.filterExcluded(customer.transactions).length}} {{ view.functions.filterExcluded(customer.transactions).length > 1 ? SessionUser.objects.orders.meta.labels.multiple : SessionUser.objects.orders.meta.labels.single }}</p>
               <p v-else>{{ SessionUser.objects.global.language.none }} {{ SessionUser.objects.orders.meta.labels.multiple }}</p>
             </div>
             <!-- Total amount -->
@@ -302,6 +314,7 @@ const getTransactionQueryParameters = () => {
                 }"
                 v-bind:show-only-with-ids="getTransactionIds(customer)"
                 v-bind:query-parameters="getTransactionQueryParameters()"
+                v-bind:excluded-order-ids="getExcludedTransactionIds(customer)"
                 />
             </template>
             <!-- Expanded view of customer transactions -->
@@ -321,6 +334,8 @@ const getTransactionQueryParameters = () => {
                     dateFrom: dates.variables.start.value.toISOString().split('T')[0],
                     dateTo: dates.variables.end.value.toISOString().split('T')[0]
                   }"
+                  v-bind:show-only-with-ids="getTransactionIds(customer)"
+                  v-bind:excluded-order-ids="getExcludedTransactionIds(customer)"
               />
             </template>
           </div>
diff --git a/src/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue b/src/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue
index adb65fb1..a140cc0c 100644
--- a/src/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue
+++ b/src/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue
@@ -4,7 +4,7 @@ import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrap
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
 import { useRouter } from "vue-router";
-import { ref } from 'vue';
+import {computed, ref} from 'vue';
 import CollectedOrderInvoiceOverview
   from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceOverview.vue";
 import CollectedOrderInvoiceManage
@@ -53,6 +53,10 @@ const getCollectedOrderInvoice = async () => {
 // Get the collected order invoice
 getCollectedOrderInvoice();
 
+const orderIds = computed(() => {
+  return orders.value.map(order => order.id);
+});
+
 </script>
 
 <template>
@@ -88,7 +92,7 @@ getCollectedOrderInvoice();
             v-bind:collectedOrderInvoice="collectedOrderInvoice"
         />
         <!-- Orders -->
-        <InvoiceOrdersPagination :auto-load="true" :onlyFromInvoiceCollection="collectedOrderInvoiceId" :invoice-view="true" :apply-default-filters="false"/>
+        <InvoiceOrdersPagination :auto-load="true" :onlyFromInvoiceCollection="collectedOrderInvoiceId" :invoice-view="true" :apply-default-filters="false" :show-only-with-ids="orderIds"/>
         <!-- <OrdersPagination :auto-load="true" :onlyFromInvoiceCollection="collectedOrderInvoiceId" /> -->
       </template>
     </NotFoundFallBackPageWrapper>
diff --git a/src/views/dashboards/superUserDashboard/configuration/ConfigurationSelfServe.vue b/src/views/dashboards/superUserDashboard/configuration/ConfigurationSelfServe.vue
new file mode 100644
index 00000000..86fbb00b
--- /dev/null
+++ b/src/views/dashboards/superUserDashboard/configuration/ConfigurationSelfServe.vue
@@ -0,0 +1,112 @@
+<script setup>
+import PageTitle from "@/components/global/PageTitle.vue";
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { useRouter } from 'vue-router'
+import { ref } from 'vue';
+import ConfigurationSubPageWrapper
+  from "@/views/dashboards/superUserDashboard/configuration/ConfigurationSubPageWrapper.vue";
+import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
+import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
+import ConfigurationInputNumber from "@/components/displays/superuser/configuration/ConfigurationInputNumber.vue";
+
+// Get the department from the route
+const router = useRouter()
+
+const enabled = ref(false);
+const module_config = ref([]);
+
+const getEnabled = async () => {
+  await SessionUser.superUser.modules.selfserve.config.enabled.get().then((response) => {
+    console.log('SelfServe enabled: ', response.data.data);
+    enabled.value = response.data.data;
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
+const getModuleConfig = async () => {
+  await SessionUser.superUser.modules.selfserve.config.get_all().then((response) => {
+    let tmp_module_config = response.data.data;
+    let tmp_module_config_array = [];
+    for (const [key, value] of Object.entries(tmp_module_config)) {
+      console.log(`${value.variable}: ${value.value}`);
+      tmp_module_config_array.push({
+        variable: value.variable,
+        value: value.value,
+      });
+    }
+    module_config.value = tmp_module_config_array;
+    console.log(module_config.value);
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
+const getModuleConfigValue = (variable) => {
+  const config = module_config.value.find((config) => config.variable === variable);
+  // Log to the console, what the value was found
+  if (config) {
+    console.log(`Found value for ${variable}: ${config.value}`);
+  } else {
+    console.log(`No value found for ${variable}`);
+  }
+  return config ? config.value : '';
+};
+
+const load = async () => {
+  await getModuleConfig();
+};
+
+load();
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
+    <ConfigurationSubPageWrapper>
+      <template #title>
+        <PageTitle title="SelfServe configuration" subtitle="The configuration of the SelfServe integration" />
+      </template>
+      <template v-if="module_config.length > 0" #content>
+        <ConfigurationCategory
+          class="mt-2"
+          module="SelfServe"
+          title="General settings"
+          description="The general settings for the SelfServe integration."
+          icon="fas fa-cogs"
+        >
+        <ConfigurationSwitch
+          class="mt-2"
+          module="SelfServe"
+          title="Enable SelfServe"
+          description="Enable or disable the SelfServe integration."
+          icon="fas fa-cogs"
+          :value="getModuleConfigValue('enabled') === true"
+          :on-switch="SessionUser.superUser.modules.selfserve.config.enabled.set"
+        />
+        </ConfigurationCategory>
+        <ConfigurationCategory
+          class="mt-2"
+          module="SelfServe"
+          title="Billing settings"
+          description="The SelfServe API billing settings."
+          icon="fas fa-cogs"
+        >
+          <ConfigurationInputNumber
+            class="mt-2"
+            module="SelfServe"
+            title="Minute product ID"
+            description="The product ID used for billing minutes in SelfServe."
+            icon="fas fa-cogs"
+            :value="parseInt(getModuleConfigValue('minute_product'))"
+            :on-save="SessionUser.superUser.modules.selfserve.config.keys.minute_product.set"
+          />
+        </ConfigurationCategory>
+      </template>
+    </ConfigurationSubPageWrapper>
+  </RestrictedPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue b/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
index 3c7a0ffb..efbe9c8d 100644
--- a/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
+++ b/src/views/dashboards/superUserDashboard/configuration/SuperUserDashboardConfigurationNavigation.vue
@@ -21,6 +21,10 @@ const tabs = [
   { name: 'Limble', path: '/superuser/configuration/limble' },
   { name: 'OcrSpace', path: '/superuser/configuration/ocrspace' },
   { name: 'OpenAI', path: '/superuser/configuration/openai' },
+  { name: 'License Plate Recognizer', path: '/superuser/configuration/licenseplaterecognizer' },
+  { name: 'VirkData', path: '/superuser/configuration/virkdata' },
+  { name: 'Shelly', path: '/superuser/configuration/shelly' },
+  { name: 'Self Serve', path: '/superuser/configuration/selfserve' },
 ];
 
 // Get the current path
diff --git a/src/views/dashboards/superUserDashboard/department/DepartmentProfile.vue b/src/views/dashboards/superUserDashboard/department/DepartmentProfile.vue
index e59b10c2..78cb8b73 100644
--- a/src/views/dashboards/superUserDashboard/department/DepartmentProfile.vue
+++ b/src/views/dashboards/superUserDashboard/department/DepartmentProfile.vue
@@ -70,6 +70,40 @@ watch(() => departmentAdvanced.value.getBranding(), () => {
         <PageTitle title="Department" subtitle="Department pricing" />
       </template>
       <div>
+        <table class="table-auto w-full mb-4">
+          <thead>
+            <tr>
+              <th class="px-4 py-2 text-left">Field</th>
+              <th class="px-4 py-2 text-left">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="border px-4 py-2">Name</td>
+              <td class="border px-4 py-2">{{ branding.name }}</td>
+            </tr>
+            <tr>
+              <td class="border px-4 py-2">Address</td>
+              <td class="border px-4 py-2">{{ branding.address }}</td>
+            </tr>
+            <tr>
+              <td class="border px-4 py-2">Phone</td>
+              <td class="border px-4 py-2">{{ branding.phone }}</td>
+            </tr>
+            <tr>
+              <td class="border px-4 py-2">Email</td>
+              <td class="border px-4 py-2">{{ branding.email }}</td>
+            </tr>
+            <tr>
+              <td class="border px-4 py-2">Website</td>
+              <td class="border px-4 py-2">{{ branding.website }}</td>
+            </tr>
+            <tr>
+              <td class="border px-4 py-2">CVR</td>
+              <td class="border px-4 py-2">{{ branding.cvr }}</td>
+            </tr>
+          </tbody>
+        </table>
         {{branding }}
         <!-- The form to create a new branding -->
         <template v-if="!departmentAdvanced.hasBranding()">
diff --git a/src/views/dashboards/superUserDashboard/department/modules/DepartmentModulesSetup.vue b/src/views/dashboards/superUserDashboard/department/modules/DepartmentModulesSetup.vue
index dbfdbec9..97e2acc8 100644
--- a/src/views/dashboards/superUserDashboard/department/modules/DepartmentModulesSetup.vue
+++ b/src/views/dashboards/superUserDashboard/department/modules/DepartmentModulesSetup.vue
@@ -171,6 +171,30 @@ const setDepartmentStripeLocation = async (locationId) => {
               ></ConfigurationInput>
           </template>
         </ConfigurationCategory>
+        <!-- Exclude from invoicing -->
+        <ConfigurationCategory
+          module="Afdelingsopsætning"
+          title="Moduler"
+          icon="fas fa-cogs"
+          subtitle="Fakturering"
+        >
+          <template #default>
+            <ConfigurationSwitch
+              title="Udeluk fra fakturering"
+              description="Hvis aktiveret, vil denne afdeling ikke blive inkluderet i faktureringen. OBS: Ændringer tager effekt efter op til 5 minutter."
+              v-bind:value="getBooleanValue('exclude_from_invoicing')"
+              :on-switch="(value) => {
+                SessionUser.objects.department_variables.add(
+                    departmentId,
+                    'exclude_from_invoicing',
+                    value ? 'true' : 'false'
+                ).then(() => {
+                  getDepartmentVariables();
+                });
+              }"
+              ></ConfigurationSwitch>
+          </template>
+        </ConfigurationCategory>
       </div>
     </DepartmentSubPageWrapper>
   </RestrictedPageWrapper>
diff --git a/src/views/dashboards/userDashboard/Home.vue b/src/views/dashboards/userDashboard/Home.vue
index 283101e4..48c0db7b 100644
--- a/src/views/dashboards/userDashboard/Home.vue
+++ b/src/views/dashboards/userDashboard/Home.vue
@@ -1,6 +1,5 @@
 <script setup>
 
-import UserDashboardNavigation from "@/views/dashboards/userDashboard/userDashboardNavigation.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
@@ -12,12 +11,12 @@ import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashb
         title="Dashboard"
         subtitle="Her kan du se dine ordrer, bookinger og køretøjer"
     >
-    <UserDashboardNavigation/>
+    <!--<UserDashboardNavigation/>
     <p>
       Dette er dit dashboard. Her kan du se dine ordrer, bookinger og køretøjer.<br>
       Hvis du har spørgsmål, så kontakt os på <a href="mailto:cph@truckwash.dk">cph@truckwash.dk</a> eller ring til os på <a href="tel:+4543717886">43 71 78 86</a>.<br>
       Oplever du tekniske problemer, så kontakt os på <a href="mailto:jb@truckwash.dk">jb@truckwash.dk</a> eller ring til os på <a href="tel:+4542331128">42 33 11 28</a>.
-    </p>
+    </p>-->
     </UserDashboardPageWrapper>
   </RestrictedPageWrapper>
 </template>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookings.vue b/src/views/dashboards/userDashboard/bookings/MyBookings.vue
index 4c55bf91..0d095acb 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookings.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookings.vue
@@ -1,13 +1,14 @@
 <script setup>
 
-import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import OrderBookingsPagination from "@/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue";
 </script>
 
 <template>
   <div>
     <UserDashboardPageWrapper title="Mine bookinger" subtitle="Se dine bookinger">
-      <BookingsPagination/>
+      <OrderBookingsPagination :filters="{ only_today: true }"/>
+      <!-- TODO: Complete implementation! -->
     </UserDashboardPageWrapper>
   </div>
 </template>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
index cd74bae2..642985b1 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
@@ -1,7 +1,8 @@
 <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} from "vue";
+import type {Ref} from 'vue';
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} 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 +13,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";
@@ -41,19 +43,20 @@ import TimeBookingsElementVehicleSuggestions
 import TimeBookingsElementCompleteButton
   from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementCompleteButton.vue";
 import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
-import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
-import NextStep from "@/components/forms/department/pos/buttons/NextStep.vue";
 import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
 import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
 import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
 import NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
-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 {getProductsCategory, setDepartment, setProductsCategory} from "@/components/shop/POSDepartmentProcess.vue";
+import Swal from "sweetalert2";
 
-const department = ref(departments[0]);
+const customerNumber = ref<number | null>(SessionUser?.user?.customer_number.value ? parseInt(SessionUser.user.customer_number.value) : null);
+// Guest mode: enabled when the user is not authenticated (no token/session)
+const guestMode = computed(() => !SessionUser.authenticated.value);
+const department = ref<any>(null);
 const isDepartmentInput = ref(false);
 const wash_type = ref("general"); // general or tankcleaning
 const reg1 = ref("");
@@ -71,10 +74,14 @@ const notes = ref("");
 const isReferenceInput = ref(false);
 const isPoNumberInput = ref(false);
 const isNotesInput = ref(false);
-const dateTime = ref<Date | null>(null);
+const dateTime = ref<Date | null>(new Date(new Date().setHours(0, 0, 0, 0)));
+const pickup = ref(false);
 const isDateTimeInput = ref(false);
+const hasDepartment = computed(() => !!(department.value && (department.value as any).id));
+const hasVehicle = computed(() => ((reg1.value !== '') || (reg2.value !== '')));
 const hasShowPriceOnBookingPageAttribute = () => {
-  return false;
+  // Never show prices to guests
+  return !guestMode.value && SessionUser.hasAttribute('showPricesOnBookingPage');
 }
 const setInputFocus = (id: string) => {
   // Wait for the next tick to ensure the input is rendered
@@ -85,11 +92,97 @@ const setInputFocus = (id: string) => {
     }
   }, 0);
 }
+
+// Force add product "Inkl. Pick-Up" (ID: 40) when pickup is enabled
+const forcedPickupProductId = 40;
+const forcedPickupProduct = ref<PosProduct | null>(null);
+
+
+const loadInclPickupProduct = async () => {
+  if (guestMode.value) {
+    // Guests can't load authenticated product data
+    forcedPickupProduct.value = null;
+    return;
+  }
+  SessionUser.objects.products.get.single(forcedPickupProductId).then(product => {
+    forcedPickupProduct.value = product;
+  }).catch(e => {
+    console.warn('Could not load forced pickup product (ID: 40). Pickup option will be disabled.', e);
+    forcedPickupProduct.value = null;
+  });
+}
+
+onMounted(() => {
+  // Load the semi-universal products
+  loadInclPickupProduct();
+  loadWashCertificateProduct();
+  // Check if the user has a valid customer number
+  if (!!customerNumber.value && customerNumber.value > 0) {
+    // Valid customer number
+    onCustomerNumberChange(customerNumber.value);
+  }
+});
 const onClickSelectDepartment = () => {
   // Set the input to true
   isDepartmentInput.value = true;
   setInputFocus('department');
 };
+
+// When a department is selected, automatically open and focus the first vehicle input
+const onSelectDepartment = (dept: any) => {
+  // Update state and close the department picker
+  department.value = dept;
+  isDepartmentInput.value = false;
+
+  // If the user hasn't entered any vehicle yet, focus the first vehicle input
+  if (!reg1.value && !reg2.value) {
+    // Open the first vehicle input field
+    isReg1Input.value = true;
+    // Focus the visible reg1 input once it exists in the DOM
+    setTimeout(() => {
+      const inputs = Array.from(document.querySelectorAll('input[id^="reg1-input-"]')) as HTMLInputElement[];
+      const visible = inputs.find((i) => {
+        const style = window.getComputedStyle(i);
+        return i.offsetParent !== null && style.display !== 'none' && style.visibility !== 'hidden';
+      });
+      if (visible) {
+        visible.focus();
+      }
+    }, 0);
+  }
+};
+// Watch for changes in the customer number
+watch(SessionUser.user.customer_number, (newCustomerNumber) => {
+  const parsedCustomerNumber = parseInt(newCustomerNumber);
+  if (!isNaN(parsedCustomerNumber) && parsedCustomerNumber > 0) {
+    customerNumber.value = parsedCustomerNumber;
+  } else {
+    customerNumber.value = null;
+  }
+});
+
+// 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;
@@ -116,11 +209,11 @@ const onClickNotes = () => {
   setInputFocus('notes');
 };
 const onClickDateTime = () => {
-  // In case dateTime is null, set it to the next full hour
+  // In case dateTime is null, set it to 00:00 todays date
   if (!dateTime.value) {
     const now = new Date();
-    const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0);
-    dateTime.value = nextHour;
+    //const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 0);
+    dateTime.value = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0); // Set to 00:00 today
   }
   // Set the input to true
   isDateTimeInput.value = true;
@@ -169,6 +262,8 @@ const getTimeSlots = (date) => {
   const slots = [];
   const startHour = 8;
   const endHour = 18;
+  // Add unknown timeslot
+  slots.push({ time: '00:00', date });
   for (let hour = startHour; hour <= endHour; hour++) {
     const time = hour.toString().padStart(2, '0') + ':00';
     slots.push({ time, date });
@@ -192,6 +287,11 @@ const selectTimeSlot = (timeslot, date) => {
 
 const availableVehicleTypes = ref<PosProduct[]>([]);
 const getAvailableVehicleTypes = async () => {
+  // In guest mode, skip loading vehicle types (requires authentication)
+  if (guestMode.value) {
+    availableVehicleTypes.value = [];
+    return;
+  }
   SessionUser.objects.vehicles.columns.type.options(true, {isWash: true, addDefaultOption: false, restrictToCategory4: false, includeProductRaw: true}).then(options => {
     availableVehicleTypes.value = orderProductsByOrderPriority(options.map(option => {
       return {
@@ -221,8 +321,12 @@ const addToCalendar = async () => {
     reference: reference.value,
     poNumber: poNumber.value,
     notes: notes.value,
-  }
+  };
   const startTime = dateTime.value;
+  if (!startTime) {
+    console.warn('addToCalendar called without a selected date/time.');
+    return;
+  }
   const endTime = new Date(
     startTime.getFullYear(),
     startTime.getMonth(),
@@ -250,7 +354,7 @@ const addToCalendar = async () => {
     address: booking.department.description,
     latitude: booking.department.latitude,
     longitude: booking.department.longitude,
-  }
+  };
   const event = {
     title,
     description,
@@ -269,14 +373,13 @@ const addToCalendar = async () => {
     backgroundColorOpacity: 0.5,
     selectable: false,
     selectMirror: false,
-  }
+  };
   // Generate google calendar event
   const calendarEvent = {
     summary: title,
     description,
     start: {
       dateTime: changeTimeZoneWithoutChangingTime(startTime).toISOString(),
-
     },
     end: {
       dateTime: changeTimeZoneWithoutChangingTime(endTime).toISOString(),
@@ -331,6 +434,13 @@ const getProductsCombined = computed(() => {
       }
     });
   }
+  // If pickup is enabled, force-add the pickup product (ID: 40) to the basket preview
+  if (pickup.value && forcedPickupProduct.value) {
+    const exists = products.some(p => p.id === forcedPickupProduct.value.id);
+    if (!exists) {
+      products.push({ ...forcedPickupProduct.value, quantity: 1 });
+    }
+  }
   return products;
 });
 
@@ -357,11 +467,76 @@ const setStep = (value: number) => {
 const isStep = (value: number) => {
   return step.value === value;
 }
+const isConfirmDisabled = computed(() => {
+  // Desktop confirm button enable/disable logic
+  if (guestMode.value) {
+    return !(hasDepartment.value && hasVehicle.value && !!dateTime.value && isCustomerNumberValid.value === true);
+  }
+  return !(hasDepartment.value && !!dateTime.value && isCustomerNumberValid.value === true && completeBasket.value.length > 0);
+});
+
 const onClickComplete = () => {
-  console.warn('onClickComplete triggered.');
+  // Open the summary; onSummaryConfirm will handle guest/login flow
+  openSummary();
 }
 
 
+// Mobile wizard steps (mobile only UI)
+const mobileStep = ref(1);
+const mobileStepsTotal = 4;
+const isMobileStep = (n: number) => mobileStep.value === n;
+const canProceedFromMobileStep = computed(() => {
+  switch (mobileStep.value) {
+    case 1:
+      return hasDepartment.value;
+    case 2:
+      return hasVehicle.value;
+    case 3:
+      // Allow guests to proceed without selecting products (no product API for guests)
+      return guestMode.value ? hasVehicle.value : (completeBasket.value.length > 0);
+    case 4:
+      // For guests: allow confirmation screen if date/time, department and vehicle + valid customer number are set
+      return guestMode.value
+        ? (!!dateTime.value && hasDepartment.value && hasVehicle.value && isCustomerNumberValid.value === true)
+        : (!!dateTime.value && isCustomerNumberValid.value === true && completeBasket.value.length > 0 && hasDepartment.value);
+    default:
+      return false;
+  }
+});
+const showMobileBottomNav = computed(() => !isDepartmentInput.value && !isDateTimeInput.value && !showSummary.value);
+const onMobileBack = () => {
+  if (mobileStep.value > 1) mobileStep.value -= 1;
+};
+const onMobileNext = () => {
+  if (mobileStep.value < mobileStepsTotal) {
+    // Step-specific side effects when advancing
+    if (mobileStep.value === 1 && hasDepartment.value) {
+      // Focus vehicle input on entering step 2
+      mobileStep.value = 2;
+      isReg1Input.value = true;
+      setInputFocus('reg1');
+      return;
+    }
+    if (mobileStep.value === 2 && hasVehicle.value) {
+      mobileStep.value = 3;
+      return;
+    }
+    if (mobileStep.value === 3 && completeBasket.value.length > 0) {
+      mobileStep.value = 4;
+      // Encourage selecting a time immediately
+      if (!isDateTimeInput.value) {
+        onClickDateTime();
+      }
+      return;
+    }
+  }
+  // On last step: open confirmation when valid
+  if (mobileStep.value === mobileStepsTotal && canProceedFromMobileStep.value) {
+    openSummary();
+  }
+};
+
+
 // Define the tabs
 const right_tabs = [
   {
@@ -370,17 +545,11 @@ const right_tabs = [
     icon: "fas fa-shopping-basket",
     hidden: false,
   },
-  {
-    name: "Kunde",
-    slot: "customer",
-    icon: "fas fa-user",
-    hidden: false,
-  }
 ];
 
 const addItemToBasket = (product: PosProduct, options = {quantity: 1}) => {
   //console.warn('addItemToBasket triggered.', product, options);
-  const newId = 'a' + Math.random().toString(36).substr(2, 9);
+  const newId = 99000000000000 + basket.value.length
   // Add the product to the basket
 
   basket.value.push({
@@ -388,28 +557,40 @@ const addItemToBasket = (product: PosProduct, options = {quantity: 1}) => {
     ...options,
     id: newId,
     related_item_id: null,
+    addons: product?.addons || [],
+    quantity: options.quantity,
   });
   // Add any addons with a quantity greater than 0
-  for (const addon of product.addons as PosAddon[]) {
-    //console.warn('Checking if addon has quantity.', addon);
-    if (addon.product && addon.product.quantity && addon.product.quantity > 0) {
-      //console.warn('Adding addon to basket.', addon);
-      basket.value.push({
-        ...addon.product,
-        // Add relation item id
-        related_item_id: newId,
-      });
-    } else {
-      //console.warn('Skipping addon, no quantity set.', addon);
+  if (product?.addons) {
+    for (const addon of product.addons as PosAddon[]) {
+      //console.warn('Checking if addon has quantity.', addon);
+      if (addon.product && addon.product.quantity && addon.product.quantity > 0) {
+        //console.warn('Adding addon to basket.', addon);
+        basket.value.push({
+          ...addon.product,
+          // Add relation item id
+          related_item_id: newId,
+          quantity: addon.product.quantity || 1,
+        });
+      } else {
+        //console.warn('Skipping addon, no quantity set.', addon);
+      }
     }
   }
 };
 
 const basket = ref<PosProduct[]>([]);
+const isUpdatingBasket = ref(false);
 const onAddProduct = (product: PosProduct) => {
-  //console.warn('Adding product to basket.', product);
-  // Add the product to the basket
-  addItemToBasket(product);
+  // Make the first selection visible immediately by rebuilding the basket with the base product
+  if (isUpdatingBasket.value) return;
+  try {
+    isUpdatingBasket.value = true;
+    clearBasket();
+    addItemToBasket(product, { quantity: 1 });
+  } finally {
+    isUpdatingBasket.value = false;
+  }
 }
 
 const updateOrderItems = (orderItems: PosProduct[]) => {
@@ -417,60 +598,481 @@ const updateOrderItems = (orderItems: PosProduct[]) => {
   basket.value = orderItems;
 }
 
-const basketAsOrderItems = computed(() => {
+const basketAsOrderItems = () => {
+  // Filter out any products that don't have a quantity
   return basket.value.map(product => ({
     // If the id is not set, generate a random id
-    ...(product.id ? {id: product.id} : {id: Math.random().toString(36).substr(2, 9)}),
     product: product,
-    quantity: product.quantity || 0,
+    quantity: product.quantity || 1,
     price: product.price || 0,
-    related_item_id: product.related_item_id,
+    id: product.id || 99000000000000 + basket.value.length,
+    ...(product.related_item_id) ? { related_item_id: product.related_item_id } : {}
   }));
-})
+};
 
-const selectedProduct = ref<PosProduct | null>(null);
-const onSelectProduct = (product: PosProduct) => {
-  console.warn('Selecting product.', product);
-  // Replace the selected product in the basket
-  removeProductInBasketById(selectedProduct.value?.id);
-  if (selectedProduct.value !== product) {
-    selectedProduct.value = product;
+const basketAsOrderItemsParsed = computed(() => {
+  return basketAsOrderItems();
+});
+
+const clearBasket = () => {
+  basket.value = [];
+}
+
+const selectedProduct = ref<PosProduct | any>(null);
+const onSelectProduct = async (product: PosProduct) => {
+  // Prevent re-entrancy while we update the basket
+  if (isUpdatingBasket.value) return;
+  // Check if the product is an interior wash
+  const isInteriorWash = product?.name?.includes('Indvendig');
+  if (isInteriorWash) {
+    // Toggle the interior wash flag instead
+    washInterior.value = true;
+    washExterior.value = false;
+    // Get the associated exterior wash product (if any)
+    getProductWithAssociatedInteriorWash(product).then(exteriorProduct => {
+      if (exteriorProduct) {
+        productAssociatedWithInteriorWash.value = exteriorProduct;
+      } else {
+        console.warn('No associated exterior wash product found for interior wash.', product);
+        productAssociatedWithInteriorWash.value = null;
+      }
+    });
+  } else {
+    // Reset default toggles on product switch to ensure immediate basket visibility
+    washExterior.value = true; // default true
+    washInterior.value = false;
   }
-  // Add the product to the basket
-  addItemToBasket({
-    ...product,
-    quantity: 1,
-  });
+  selectedProduct.value = product;
+  // Defer to next tick so reactive updates settle before adding
+  await nextTick();
+  onAddProduct(product);
 }
 
 const onUpdateAddons = (addons: PosAddon[]) => {
-  console.warn('Updating addons.', addons);
-  // Update the selected product's addons
-  selectedProduct.value = {
-    ...selectedProduct.value,
-    addons: addons.map(addon => ({
+  // Merge updates for non-interior addons while preserving the interior wash addon (handled by its own button)
+  const currentAddons = (selectedProduct.value?.addons || []) as any[];
+  const interiorEntry = currentAddons.find(a => a?.product?.name?.includes('Indvendig'));
+
+  const updatedNonInterior = addons
+    .filter(a => !((a?.product?.name || '').includes('Indvendig')))
+    .map(addon => ({
       ...addon,
       product: {
         ...addon.product,
         price: addon.price,
         quantity: addon.quantity,
       }
-    }))
+    }));
+
+  selectedProduct.value = {
+    ...selectedProduct.value,
+    addons: interiorEntry ? [interiorEntry, ...updatedNonInterior] : updatedNonInterior,
   } as PosProduct;
-  // Replace the selected product in the basket
-  removeProductInBasketById(selectedProduct.value.id);
-  // Add the product to the basket
+  // Refresh basket to reflect addon changes
   onAddProduct(selectedProduct.value);
 }
 
-const removeProductInBasketById = (id: string | number | null | undefined) => {
-  console.warn('Removing product from basket by id.', id);
-  if (!id) {
+const washInterior = ref(false);
+const washExterior = ref(true); // default true
+
+// Wash certificate product (id: 41) to auto-attach when interior wash is selected
+const washCertificateProduct: Ref<PosProduct | null> = ref(null);
+const loadWashCertificateProduct = async () => {
+  if (guestMode.value) {
+    // Not available for guests (no auth); fall back to stub later
+    washCertificateProduct.value = null;
     return;
   }
-  basket.value = basket.value.filter(product => product.id !== id);
+  try {
+    const deptId = (department.value && (department.value as any).id) ? (department.value as any).id : null;
+    // Try to load with department context to get correct pricing if possible
+    if (deptId) {
+      // @ts-ignore - runtime object provides get.single
+      washCertificateProduct.value = await SessionUser.objects.products.get.single(41, { department_id: deptId });
+    } else {
+      // @ts-ignore
+      washCertificateProduct.value = await SessionUser.objects.products.get.single(41);
+    }
+  } catch (e) {
+    console.warn('Could not load wash certificate product (id:41). Will fall back to stub.', e);
+    washCertificateProduct.value = null;
+  }
+};
+// Reload wash certificate product when department changes to keep pricing accurate
+watch(() => department.value, () => { loadWashCertificateProduct(); });
+const onClickInteriorWashButton = () => {
+  // Toggle the wash interior flag
+  washInterior.value = !washInterior.value;
 }
 
+const onClickExteriorWashButton = () => {
+  // Toggle the wash exterior flag
+  washExterior.value = !washExterior.value;
+  // If the wash exterior flag is set, add the product to the basket
+  if (washExterior.value) {
+    // Check if the product is an interior wash itself
+    if (selectedProduct.value?.name?.includes('Indvendig')) {
+      addItemToBasket(productAssociatedWithInteriorWash.value as PosProduct, {quantity: 1});
+      return;
+    }
+    // Get the interior product addon, and add it as a product
+    addItemToBasket(selectedProduct.value, {quantity: 1});
+  }
+}
+
+const getInteriorWashAddon = (product: PosProduct) => {
+  // Check if the product is an interior wash itself
+  if (product?.name?.includes('Indvendig')) {
+    console.warn('Found interior wash product.', product);
+    return { ...product, addons: [], quantity: 1 };
+  }
+  if (!product?.addons) return null;
+  return product.addons.find(addon => addon.product?.name?.includes('Indvendig'))?.product || null;
+}
+
+const vehicleTypeWithInteriorWashCache = ref<Record<number, PosProduct | null>>({});
+const productAssociatedWithInteriorWash = ref<PosProduct | null>(null);
+
+const getProductWithAssociatedInteriorWash = async (interior: PosProduct): Promise<PosProduct | null> => {
+  // Find the first available type, and return the associated product that has the interior wash as an addon
+  try {
+    if (guestMode.value) return null;
+    if (vehicleTypeWithInteriorWashCache[interior.id]) {
+      return vehicleTypeWithInteriorWashCache[interior.id];
+    }
+    const vehicleTypes = await SessionUser.objects.vehicles.columns.type.options(true, {
+      isWash: true,
+      addDefaultOption: false,
+      restrictToCategory4: false,
+      includeProductRaw: true
+    });
+    for (const typeOption of vehicleTypes) {
+      const prod = typeOption.product as PosProduct;
+      if (prod.addons) {
+        const interiorAddonEntry = prod.addons.find(addon => addon.product?.id === interior.id);
+        const hasInteriorAddon = !!interiorAddonEntry;
+        if (hasInteriorAddon) {
+          vehicleTypeWithInteriorWashCache[interior.id] = prod;
+          console.warn('Found product with associated interior wash.', prod);
+          return prod;
+        }
+      }
+    }
+    return null;
+  } catch (e) {
+    console.warn('Could not find product associated with interior wash addon.', e);
+  }
+  return null;
+}
+
+const getExteriorWash = (product: PosProduct) => {
+  // Check if the product is an interior wash itself
+  if (product?.name?.includes('Indvendig')) {
+    console.warn('Product is an interior wash, no exterior wash found.', product);
+    return getProductWithAssociatedInteriorWash(product);
+  }
+  return { ...product, addons: [], quantity: 1 };
+}
+
+// Detects the Safety Seal addon by name (case-insensitive). Prefer ID if available later.
+const isSafetySealAddon = (p: any): boolean => {
+  const name = ((p && p.name) ? String(p.name) : '').toLowerCase();
+  // Common variants: Danish "plombe"/"sikkerhedsplombe" and English "safety seal"
+  return name.includes('plombe') || name.includes('safety seal') || name.includes('sikkerhedsplombe');
+}
+
+const interiorAddon = computed(() => {
+  if (!selectedProduct.value) return null;
+  return getInteriorWashAddon(selectedProduct.value as PosProduct);
+});
+
+const isInteriorWashPrimary = computed(() => {
+  if (!selectedProduct.value) return false;
+  return selectedProduct.value?.name?.includes('Indvendig');
+})
+
+const formatDkk = (amount?: number | null) => {
+  return (amount || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' });
+};
+
+const interiorPriceLabel = computed(() => {
+  if (!hasShowPriceOnBookingPageAttribute()) return '';
+  return interiorAddon.value ? `Pris: ${formatDkk((interiorAddon.value as PosProduct)?.price)}` : '';
+});
+
+const exteriorPriceLabel = computed(() => {
+  if (!selectedProduct.value) return '';
+  if (!hasShowPriceOnBookingPageAttribute()) return '';
+  // Check if the product is an interior wash itself
+  if (selectedProduct.value?.name?.includes('Indvendig')) {
+    const associatedExterior = productAssociatedWithInteriorWash.value;
+    return associatedExterior ? `Pris: ${formatDkk(associatedExterior.price)}` : '';
+  }
+  // Exterior wash is always included in the base product
+  const base = getExteriorWash(selectedProduct.value as PosProduct);
+  return `Pris: ${formatDkk(base?.price)}`;
+});
+
+const isPickupAddon = (p: any): boolean => {
+  const id = (p && p.id) ? p.id : null;
+  return id === 40;
+}
+
+// Filtered list of addons for the UI: hide the interior wash addon (has its own dedicated button)
+// and hide the Safety Seal addon (redundant now)
+const visibleAddons = computed(() => {
+  const addons = [...(selectedProduct.value?.addons || []) as any[]];
+  // Check if the selected product is an interior wash itself (in which case we must include the associated exterior wash addons)
+  if (selectedProduct.value?.name?.includes('Indvendig') && productAssociatedWithInteriorWash.value && washExterior.value) {
+    // Add the missing exterior wash addons
+    productAssociatedWithInteriorWash.value?.addons?.forEach((addon: any) => {
+      const exists = addons.some(a => a?.product?.id === addon?.product?.id);
+      if (!exists) {
+        addons.push(addon);
+      }
+    });
+  }
+  return addons.filter(a => !a?.product?.name?.includes('Indvendig') && !isSafetySealAddon(a?.product) && !isPickupAddon(a?.product));
+});
+
+const completeBasket = computed({
+  get: () => {
+    if (!selectedProduct.value) return [];
+    const product = selectedProduct.value as PosProduct;
+    const result: PosProduct[] = [];
+    const interiorWashAddon = getInteriorWashAddon(product);
+    const exteriorWash = getExteriorWash(product);
+    // Selected addons with quantity > 0 (excluding interior wash which is controlled by its own toggle)
+    const selectedAddons = (product.addons || [])
+      .map((a: any) => a?.product)
+      .filter((p: any) => p && (p.quantity || 0) > 0 && !(p?.name || '').includes('Indvendig') && !isSafetySealAddon(p) && !isPickupAddon(p)) as PosProduct[];
+
+    // Exterior/base product (default selected)
+    if (washExterior.value && exteriorWash) {
+      // If the product is an interior wash itself, get the associated exterior wash product
+      if (product?.name?.includes('Indvendig')) {
+        const associatedExterior = productAssociatedWithInteriorWash.value;
+        if (associatedExterior) {
+          result.push({ ...(associatedExterior as any), quantity: 1 });
+        }
+      } else {
+        result.push({ ...(exteriorWash as any), quantity: 1 });
+      }
+    }
+    // Interior wash via toggle
+    if (washInterior.value && interiorWashAddon) {
+      // Avoid duplicate if already included via selectedAddons
+      if (!selectedAddons.some(a => a.id === interiorWashAddon.id)) {
+        const qty = (interiorWashAddon as any)?.quantity && (interiorWashAddon as any).quantity > 0 ? (interiorWashAddon as any).quantity : 1;
+        result.push({ ...(interiorWashAddon as any), quantity: qty });
+      }
+    }
+    // Add other selected addons
+    selectedAddons.forEach(addon => {
+      if (!result.some(r => r.id === addon.id)) {
+        result.push(addon);
+      }
+    });
+
+    // Auto-add wash certificate product (id: 41) when an interior wash is included
+    const hasInteriorInBasket = washInterior.value && !!interiorWashAddon;
+    if (hasInteriorInBasket) {
+      const alreadyHasCertificate = result.some(r => r.id === 41);
+      if (!alreadyHasCertificate) {
+        // Prefer the fetched product to preserve pricing/meta; else provide a minimal stub
+        const cert = washCertificateProduct.value ? { ...(washCertificateProduct.value as PosProduct) } : {
+          id: 41,
+          name: 'Vaskecertifikat',
+          price: 0,
+          subscription_allowed: false,
+          is_wash: false,
+          display_in_booking_form: false,
+        } as PosProduct;
+        cert.quantity = 1;
+        result.push(cert);
+      }
+    }
+
+    // Auto-add the pickup product (id: 40) if enabled
+    if (pickup.value && forcedPickupProduct.value) {
+      const alreadyHasPickup = result.some(r => r.id === forcedPickupProduct.value?.id);
+      if (!alreadyHasPickup) {
+        result.push({ ...forcedPickupProduct.value, quantity: 1 });
+      }
+    }
+
+    return result;
+  },
+  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;
+  if (guestMode.value) {
+    // Guests cannot complete booking; ask them to log in
+    Swal.fire({
+      icon: 'info',
+      title: 'Log ind for at fuldføre booking',
+      html: 'Som gæst kan du vælge afdeling, registrering og tidspunkt. For at oprette bookingen skal du logge ind.',
+      showCancelButton: true,
+      confirmButtonText: 'Log ind',
+      cancelButtonText: 'Luk',
+    }).then((res) => {
+      if (res.isConfirmed) {
+        SessionUser.functions.redirectTo.pages.login();
+      }
+    });
+    return;
+  }
+  /**
+   * Without changing the timezones, the following will produce the following date strings:
+   * - 2025-11-05 11:45:12
+   */
+  const date = dateTime.value.getDate().toString().padStart(2, '0');
+  const month = (dateTime.value.getMonth() + 1).toString().padStart(2, '0');
+  const year = dateTime.value.getFullYear();
+  const hours = dateTime.value.getHours().toString().padStart(2, '0');
+  const minutes = dateTime.value.getMinutes().toString().padStart(2, '0');
+  const seconds = dateTime.value.getSeconds().toString().padStart(2, '0');
+  const timeString = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
+  try {
+    SessionUser.objects.order_bookings.add(
+        customerNumber.value,
+        department.value.id,
+        reg1.value,
+        reg2.value,
+        null, // reg3,
+        timeString,
+        notes.value,
+        reference.value,
+        poNumber.value,
+        pickup.value,
+        completeBasket.value,
+    ).then(order => {
+      console.warn('Order created.', order);
+      // Show a success message
+      Swal.fire({
+        icon: 'success',
+        title: 'Tak for din booking!',
+        text: 'Din booking er nu oprettet.',
+        showConfirmButton: false,
+        timer: 2000,
+      }).then(() => {
+        // Wait 2 seconds before reloading
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      });
+    }).catch(e => {
+      console.error('Could not create order booking.', e);
+      const errorMessageFallback = (e && e.message) ? e.message : 'Ukendt fejl';
+      const errorMessage = (e && e.response && e.response.data && e.response.data.data && e.response.data.data.message) ? e.response.data.data.message : errorMessageFallback;
+      Swal.fire({
+        icon: 'error',
+        title: 'Fejl ved oprettelse af booking',
+        text: errorMessage,
+        showConfirmButton: true,
+        showCancelButton: true,
+        showDenyButton: true,
+        confirmButtonText: 'Prøv igen',
+        denyButtonText: 'Kopier fejlmelding',
+        cancelButtonText: 'Luk',
+        focusConfirm: false,
+        preConfirm: () => {
+          return new Promise((resolve) => {
+            // Retry the booking process
+            onSummaryConfirm();
+            resolve(true);
+          });
+        },
+        preDeny: () => {
+          return new Promise((resolve) => {
+            // Copy the error message to clipboard
+            navigator.clipboard.writeText(errorMessage).then(() => {
+              Swal.showValidationMessage('Fejlmelding kopieret til udklipsholderen');
+              // Prevent the modal from closing
+              resolve(false);
+            });
+          });
+        },
+        denyFocusCancel: 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');
+});
+
+const missingFields = computed(() => {
+  let missingFields = [];
+  if (!department.value) missingFields.push('Vaskehal');
+  if (!customerNumber.value) missingFields.push('Kundenummer');
+  if (!isCustomerNumberValid.value) missingFields.push('Gyldigt kundenummer');
+  if (!reg1.value) missingFields.push('Køretøj');
+  if (!dateTime.value) missingFields.push('Dato');
+  if (!guestMode.value && !completeBasket.value.length) missingFields.push('Produkter');
+  return missingFields;
+})
+
+/**
+ * Determine if the user has selected a time. (or the time is 00:00)
+ */
+const hasSelectedTime = computed(() => {
+  return dateTime.value && dateTime.value.getHours() > 0;
+});
+
+/**
+ * Customer number validation
+ */
+const customerResult = ref<boolean | null>(null);
+const isCustomerNumberValid = computed(() => {
+  return customerResult.value === true;
+});
+const isValidatingCustomerNumber = ref(false);
+const onCustomerNumberChange = (newCustomerNumber: number | null) => {
+  if (newCustomerNumber === null) {
+    customerResult.value = null;
+    return;
+  }
+  isValidatingCustomerNumber.value = true;
+  SessionUser.request("/guest/validation/customer-number",
+    'POST',
+      {
+        customer_number: newCustomerNumber,
+      }
+  ).then(response => {
+    console.warn('Customer number validation result:', response);
+    customerResult.value = response.data.data.exists === true;
+  }).catch(e => {
+    console.warn('Could not validate customer number.', e);
+    customerResult.value = false;
+  }).finally(() => {
+    isValidatingCustomerNumber.value = false;
+  });
+}
+watch(customerNumber, (newVal) => {
+  onCustomerNumberChange(newVal);
+});
+
 </script>
 
 <template>
@@ -478,96 +1080,43 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
     <ViewportResponsiveWrapper>
       <template #desktop>
         <div>
-          <p><strong>Basket length</strong>: {{ basket.length }}</p>
-          <p><strong>Basket as order items</strong>: {{ basketAsOrderItems.length }}</p>
-          {{ basket }}
-          <div class="columns">
-            <!-- Choose products -->
-            <div class="column is-8-desktop pl-0 pr-3">
-              <SelectProductsFormPOS :isCustomerBooking="true"
-                                     :isAddonsVisible="true"
-                                     :emitActionsOnly="true"
-                                     @onAddProduct="onAddProduct"
-                                     :automaticallySelectCategory="6"
-                                     @onSelectProduct="onSelectProduct"
-                                     :compact="true"/>
-              <div class="columns is-mobile">
-                <div class="column">
-                  <button class="button is-fullwidth">
-                    Indvendig vask
-                  </button>
-                </div>
-                <div class="column">
-                  <button class="button is-fullwidth">
-                    Udvendig vask
-                  </button>
-                </div>
-              </div>
-              <!-- Addons -->
-              <PosDepartmentStepMobile2Addons :addons="selectedProduct?.addons || []" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons"/>
-              <PosNotes :notes="notes" class="mt-3" :isAddFormVisible="false" :isOldNotesVisible="true"/>
-            </div>
-            <!-- Current order items -->
-            <div class="column is-4-desktop keep-in-viewport pl-3 pr-0">
-              <WhiteBox style="min-height: 40%;">
-                <ElementTabsBox
-                    v-bind:tabs="right_tabs"
-                    default-active-tab="basket"
-                    class="is-boxed"
-                    :allowCompactWhenOneTab="true"
-                >
-                  <template #customer>
-                    <PosSelectedCustomer />
-                  </template>
-                  <template #basket>
-                    <PosOrderItemsCurrent v-bind:orderItems="basketAsOrderItems"
-                                          :loadOrderItems="() => {}"
-                                          :emitEventsOnly="true"
-                                          :editPossible="true"
-                                          :orderId="-1"
-                                          :customer_name="'ABC'"
-                                          :disallowItemEdit="true"
-                                          @onDestoryItem="(itemId) => {
-                                            console.warn('Item to destroy:', itemId);
-                                          }"
-                                          @update:orderItems="updateOrderItems"
-                    />
-                  </template>
-                </ElementTabsBox>
-              </WhiteBox>
-              <!--<PosSelectedCustomer class="mt-3"/> -->
-              <NextStepError class="is-fullwidth" />
-              <div class="buttons">
-                <NextStep
-                    class="is-fullwidth"
-                    label="Næste"
-                />
-                <Cancel class="is-fullwidth" />
-              </div>
-            </div>
+          <!-- If the user is not logged in, show a guest mode warning -->
+          <div class="notification is-warning is-light" v-if="guestMode">
+            <span class="icon">
+              <i class="fas fa-info-circle"></i>
+            </span>
+            <strong>Du er i gæstetilstand.</strong>
+            <p>For at fuldføre din booking skal du logge ind på din konto.</p>
+            <button class="button is-link is-light is-small mt-2" @click="SessionUser.functions.redirectTo.pages.login()">
+              <span class="icon">
+                <i class="fas fa-sign-in-alt"></i>
+              </span>
+              <span>Log ind</span>
+            </button>
           </div>
-        </div>
-        <div class="columns is-multiline" :class="{ 'is-vcentered': isWalkthroughDisplayed() }">
-          <div class="column is-6">
+          <!--
+          <p><strong>Basket length</strong>: {{ basket.length }}</p>
+          <p><strong>Basket as order items</strong>: {{ basketAsOrderItems().length }}</p>
+          -->
+          <template v-if="!guestMode">
             <div class="columns">
-              <!-- If there's no department selected, show the full width backdrop stating this is required. -->
-              <template v-if="!department">
-                <div class="column is-12">
+              <!-- Choose products -->
+              <div class="column is-8-desktop pl-0 pr-3">
+                <template v-if="!department">
                   <div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                     <span class="icon is-large">
                       <i class="fas fa-building fa-3x"></i>
                     </span>
                     <p class="is-size-5 mt-2">Vælg venligst en vaskehal for at fortsætte</p>
                   </div>
-                  <!-- Department selection -->
                   <div class="columns is-mobile is-vcentered is-multiline">
                     <div class="column is-3" v-for="dept in departments" :key="dept.id">
                       <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="department = dept" :toggleable="false" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="true">
                         <template v-slot:header>
                           <div class="card-header-icon">
-                        <span class="icon">
-                          <i class="fas fa-building"></i>
-                        </span>
+                            <span class="icon">
+                              <i class="fas fa-building"></i>
+                            </span>
                           </div>
                           <div class="card-header-title">
                             {{ dept.name }}
@@ -576,217 +1125,466 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
                       </WhiteBoxCard>
                     </div>
                   </div>
-                </div>
-              </template>
-              <!-- If there's no vehicles selected, show the full width backdrop stating this is required. -->
-              <template v-else-if="((reg1 === '' || reg1Type === null) && (reg2 === '' || reg2Type === null)) || forceDisplayRightWalkthrough">
-                <div class="column is-12">
+                </template>
+                <template v-else-if="((reg1 === '') && (reg2 === '')) || forceDisplayRightWalkthrough">
                   <div @click="interactingWithRightWalkthrough(true)">
                     <div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-                    <span class="icon is-large">
-                      <i class="fas fa-car-side fa-3x"></i>
-                    </span>
+                      <span class="icon is-large">
+                        <i class="fas fa-car-side fa-3x"></i>
+                      </span>
                       <p class="is-size-5 mt-2">Vælg venligst et køretøj for at se tilgængelige tillæg</p>
                     </div>
-                    <!-- Vehicles selection quick options -->
                     <TimeBookingsElementSelectVehicles :label="null"
                                                        :reg1="reg1" :reg1-type="reg1Type" :reg2="reg2" :reg2-type="reg2Type" :is-reg1-input="isReg1Input"
                                                        :is-reg2-input="isReg2Input" :available-vehicle-types="orderProductsByOrderPriority(availableVehicleTypes)"
                                                        :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
                                                        @update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
                                                        @update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
+                                                       :hide-type-select="true"
                     />
-                    <!-- Vehicles suggestions -->
-                    <TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(reg1 !== '' && !reg1Type) ? reg1 : (reg2 !== '' && !reg2Type) ? reg2 : ''" :availableVehicleTypes="availableVehicleTypes"
+                    <TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(isReg2Input ? reg2 : (isReg1Input ? reg1 : ((reg1 !== '') ? reg1 : reg2)))" :availableVehicleTypes="availableVehicleTypes"
                                                            @update:isAnySuggestionsDisplayed="setAnyVisibleSuggestions($event)"
                                                            @onSelectVehicle="
-                      (vehicle) => {
-                      if (reg1 !== '' && !reg1Type) {
-                        reg1 = vehicle.reg;
-                        reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
-                      } else if (reg2 !== '' && !reg2Type) {
-                        reg2 = vehicle.reg;
-                        reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
-                      }
-                    }"
+                        (vehicle) => {
+                        if (isReg2Input) {
+                          reg2 = vehicle.reg;
+                          reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                        } else if (isReg1Input) {
+                          reg1 = vehicle.reg;
+                          reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                        } else if (reg1 !== '') {
+                          reg1 = vehicle.reg;
+                          reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                        } else {
+                          reg2 = vehicle.reg;
+                          reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                        }
+                      }"
                     />
-                    <div class="" v-show="!isAnySuggestionsDisplayed">
-                      <!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
+                    <div class="">
                       <template v-if="(forceDisplayRightWalkthrough)">
-                        <div class="has-text-centered mt-4" v-if="(reg1 !== '' && reg1Type !== null) || (reg2 !== '' && reg2Type !== null)">
-                          <button class="button is-light is-fullwidth is-link has-icons-right" @click="delayThen(1, () => interactingWithRightWalkthrough(false)); forceDisplayRightWalkthrough = false;">
+                        <div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
+                          <button class="button is-light is-fullwidth is-link has-icons-right" @click="delayThen(1, () => {interactingWithRightWalkthrough(false);}); forceDisplayRightWalkthrough = false;">
                             <span>Næste trin: Vælg tillæg</span>
                             <span class="icon is-right">
-                          <i class="fas fa-arrow-right"></i>
-                        </span>
+                              <i class="fas fa-arrow-right"></i>
+                            </span>
                           </button>
                         </div>
                       </template>
                     </div>
                   </div>
-                </div>
-              </template>
-              <template v-else>
-                <SelectProductsFormPOS :isCustomerBooking="true"
-                                       :isAddonsVisible="false"
-                                       :emitActionsOnly="true"
-                                       @onAddProduct="onAddProduct"
-                                       :automaticallySelectCategory="6"/>
-              </template>
-              <template v-show="false">
-                <div class="column" :class="{ 'is-12': (reg2 === '' || reg2Type === null), 'is-6': (reg2 !== '' || reg2Type !== null) }" v-if="reg1 !== '' && reg1Type !== null && !forceDisplayRightWalkthrough">
-                  <TimeBookingsElementReg1Addons
-                      :reg1="reg1"
-                      :reg1Type="reg1Type"
-                      :showPriceOnBookingPage="hasShowPriceOnBookingPageAttribute()"
-                      @update:reg1Type="reg1Type = $event"
-                  />
-                </div>
-                <div class="column" v-if="reg2 !== '' && reg2Type !== null && !forceDisplayRightWalkthrough" :class="{ 'is-12': (reg1 === '' || reg1Type === null), 'is-6': (reg1 !== '' || reg1Type !== null) }">
-                  <TimeBookingsElementReg1Addons
-                      :reg1="reg2"
-                      :reg1Type="reg2Type"
-                      :showPriceOnBookingPage="hasShowPriceOnBookingPageAttribute()"
-                      @update:reg1Type="reg2Type = $event"
-                  />
-                </div>
-              </template>
-            </div>
-          </div>
-          <div class="column is-6">
-            <div class="columns">
-              <div class="column is-12" v-show="false">
-                <!-- Location -->
-                <TimeBookingsElementSelectLocation :department="department" @onClickSelectDepartment="onClickSelectDepartment"/>
-              </div>
-              <!--<div class="column is-6"></div>-->
-            </div>
-            <div class="columns">
-              <div class="column is-6">
-                <!-- Wash type -->
-                <TimeBookingsElementSelectWashType :wash_type="wash_type as 'general' | 'tankcleaning'" @update:wash_type="wash_type = $event"/>
-              </div>
-              <div class="column is-6">
-                <!-- Date & time -->
-                <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!department"/>
-
-              </div>
-            </div>
-
-            <div class="columns is-multiline">
-              <div class="column is-12">
-                <label class="label">Reference og PO Nummer (valgfrit)</label>
-              </div>
-              <div class="column is-6" v-show="false">
-                <!-- Vehicles -->
-                <TimeBookingsElementSelectVehicles :reg1="reg1" :reg1-type="reg1Type" :reg2="reg2" :reg2-type="reg2Type" :is-reg1-input="isReg1Input"
-                                                   :is-reg2-input="isReg2Input" :available-vehicle-types="orderProductsByOrderPriority(availableVehicleTypes)"
-                                                   :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
-                                                   @update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
-                                                   @update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
-                                                   :label="undefined"
-                />
-              </div>
-              <div class="column is-6">
-                <!-- Reference -->
-                <TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
-                                                    :is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
-                                                    :label="null"
-                />
-              </div>
-              <div class="column is-6">
-                <!-- PO Number -->
-                <TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
-                                                   @onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
-                                                   @update:is-po-number-input="isPoNumberInput = $event"
-                                                   :label="null"
-                />
-              </div>
-              <div class="column is-12">
-                <TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
-                                                :is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"
-                                                :label="(notes !== '' || isNotesInput) ? 'Note (valgfrit)' : null"
-                />
-              </div>
-            </div>
-
-
-          </div>
-
-              <div class="column is-6"><!--Spacer--></div>
-              <div class="column is-6" v-show="isAnySuggestionsDisplayed">
-                <!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
-                <template v-if="(forceDisplayRightWalkthrough)">
-                  <div class="has-text-centered mt-4" v-if="(reg1 !== '' && reg1Type !== null) || (reg2 !== '' && reg2Type !== null)">
-                    <button class="button is-light is-fullwidth is-link has-icons-right" @click="interactingWithRightWalkthrough(false); forceDisplayRightWalkthrough = false;">
-                      <span>Næste trin: Vælg tillæg</span>
-                      <span class="icon is-right">
-                          <i class="fas fa-arrow-right"></i>
-                        </span>
-                    </button>
+                </template>
+                <template v-else>
+                  <template v-if="!guestMode">
+                  <SelectProductsFormPOS :isCustomerBooking="true"
+                                         :showPrices="hasShowPriceOnBookingPageAttribute()"
+                                         :isAddonsVisible="true"
+                                         :emitActionsOnly="true"
+                                         @onAddProduct="onAddProduct"
+                                         :automaticallySelectCategory="6"
+                                         @onSelectProduct="onSelectProduct"
+                                         :gridBeforeSelect="true"
+                                         :selectedId="selectedProduct?.id || null"
+                                         :autoScrollOnSelect="true"
+                                         :attemptAutoSelectId="reg1Type?.id || reg2Type?.id || null"
+                                         v-model:customer_number="customerNumber"
+                                         :compact="true"/>
+                  </template>
+                  <template v-else>
+                    <WhiteBox class="mb-3 has-text-centered">
+                      <p class="mb-2">Produktvalg er ikke tilgængeligt som gæst.</p>
+                      <p class="is-size-7 has-text-grey">Log ind for at vælge produkter til din booking.</p>
+                    </WhiteBox>
+                  </template>
+                  <div class="columns is-mobile" v-if="selectedProduct?.id">
+                    <div class="column">
+                      <button class="button is-fullwidth" :class="{ 'is-link is-light': washInterior }" @click="onClickInteriorWashButton" :disabled="!interiorAddon">
+                        <span class="icon is-small"><i :class="washInterior ? 'fas fa-check-circle' : 'far fa-circle'"></i></span>
+                        <span>Indvendig vask</span>
+                        <span class="tag is-light" style="margin-left: .5rem;" v-if="interiorAddon && hasShowPriceOnBookingPageAttribute()">{{ interiorPriceLabel }}</span>
+                      </button>
+                    </div>
+                    <div class="column">
+                      <button class="button is-fullwidth" :class="{ 'is-link is-light': washExterior }" @click="onClickExteriorWashButton" :disabled="isInteriorWashPrimary && (!getProductWithAssociatedInteriorWash(selectedProduct as PosProduct) || productAssociatedWithInteriorWash === null)">
+                        <span class="icon is-small"><i :class="washExterior ? 'fas fa-check-circle' : 'far fa-circle'"></i></span>
+                        <span>Udvendig vask</span>
+                        <span class="tag is-light" style="margin-left: .5rem;" v-if="hasShowPriceOnBookingPageAttribute() && exteriorPriceLabel !== ''">{{ exteriorPriceLabel }}</span>
+                      </button>
+                    </div>
                   </div>
+                  <!-- Addons -->
+                  <PosDepartmentStepMobile2Addons v-if="selectedProduct?.id" :addons="visibleAddons" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons" :showPrices="hasShowPriceOnBookingPageAttribute()" />
                 </template>
               </div>
-
-          <div class="column is-12">
-            <!-- Order item preview -->
-            <hr />
-            <TimeBookingsElementCompleteButton label="Bekræft booking" :disabled="false" @onClickComplete="onClickComplete"/>
-            <template v-if="reg1 !== '' && reg1Type !== null">
-              <OrderItemsTable :orderItems="getProductsCombined.map((product => ({
-                product: product,
-                quantity: product.quantity || 1,
-                price: product.price || 0,
-              })))"/>
-            </template>
-          </div>
-        </div>
-
-        <!-- Select department -->
-        <PosDepartmentStepMobileFixedBottomControl v-show="isDepartmentInput">
-          <div class="box" style="overflow-y: auto; overflow-x: hidden;">
-            <!-- Close button -->
-            <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
-              <button class="button is-white" @click="isDepartmentInput = false">
-              <span class="icon">
-                <i class="fas fa-times"></i>
-              </span>
-              </button>
-            </div>
-            <!-- Header "Select department" -->
-            <div class="field">
-              <label class="label has-text-centered">Vælg vaskehal</label>
-            </div>
-            <hr />
-            <!-- Department selection -->
-            <div style="max-width: inherit; overflow-x: scroll; white-space: nowrap; overflow-y: auto; padding: 2px 16px; max-height: 40vh;" class="has-invisible-scrollbar">
-              <div class="columns is-mobile is-vcentered is-multiline">
-                <div class="column is-12-mobile is-3-desktop" v-for="dept in departments" :key="dept.id">
-                  <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="department = dept; isDepartmentInput = false" :toggleable="false" :hasHoverEffect="true" :hasSelectionStyle="true" class="is-clickable">
-                    <template v-slot:header>
-                      <div class="card-header-icon">
-                    <span class="icon">
-                      <i class="fas fa-building"></i>
-                    </span>
+              <!-- Current order items -->
+              <div class="column is-4-desktop keep-in-viewport pl-3 pr-0">
+                <WhiteBox style="min-height: 40vh;">
+                  <ElementTabsBox
+                      v-bind:tabs="right_tabs"
+                      default-active-tab="basket"
+                      class="is-boxed"
+                      :allowCompactWhenOneTab="true"
+                  >
+                    <template #basket>
+                      <div v-if="completeBasket.length">
+                        <div class="mb-2" v-for="(item, idx) in completeBasket" :key="`${item.id || item.name}-${idx}`">
+                          <div class="is-flex is-justify-content-space-between">
+                            <span>
+                              {{ item.name }}
+                              <span v-if="(item.quantity || 1) > 1" class="has-text-grey ml-1">× {{ item.quantity }}</span>
+                            </span>
+                            <span v-if="hasShowPriceOnBookingPageAttribute()">{{ (((item.price || 0) * (item.quantity || 1)) || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</span>
+                          </div>
+                        </div>
+                        <template v-if="hasShowPriceOnBookingPageAttribute()">
+                          <hr />
+                          <div class="is-flex is-justify-content-space-between has-text-weight-semibold">
+                            <span>Total</span>
+                            <span>{{ completeBasket.reduce((sum, p) => sum + ((p.price || 0) * (p.quantity || 1)), 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</span>
+                          </div>
+                        </template>
                       </div>
-                      <div class="card-header-title">
-                        {{ dept.name }}
-                      </div>
-                      <div class="card-header-icon">
-                    <span class="icon">
-                      <i class="fas fa-map-marker-alt" v-if="department && department.id === dept.id"></i>
-                      <i class="fas fa-arrow-right" v-else></i>
-                    </span>
+                      <div v-else class="has-text-centered has-text-grey">
+                        Ingen varer i kurven endnu
                       </div>
                     </template>
-                  </WhiteBoxCard>
+                  </ElementTabsBox>
+                </WhiteBox>
+                <WhiteBox class="mt-3">
+                  <div class="mb-3">
+                    <span class="is-pulled-right">
+                      <small class="has-text-grey">Påkrævet</small>
+                    </span>
+                    <label class="label">Forventet dato og tidspunkt</label>
+                    <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment && false" :label="null"/>
+                  </div>
+                  <div class="mb-3">
+                    <label class="label">Reference</label>
+                    <TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
+                                                        :is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
+                                                        :label="null"
+                    />
+                  </div>
+                  <div class="mb-3">
+                    <label class="label">PO Nummer</label>
+                    <TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
+                                                       @onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
+                                                       @update:is-po-number-input="isPoNumberInput = $event"
+                                                       :label="null"
+                    />
+                  </div>
+                  <div class="mb-3">
+                    <label class="label">Note</label>
+                    <TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
+                                                    :is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"
+                                                    :label="null"
+                    />
+                  </div>
+                  <div class="mb-3">
+                    <span class="is-pulled-right">
+                      <small class="has-text-grey">Påkrævet</small>
+                    </span>
+                    <label class="label">Kundenummer</label>
+                    <div class="field has-addons">
+                      <div class="control is-expanded">
+                        <input id="customer-number" class="input" :class="{ 'is-danger': (customerResult === false) }"
+                               type="number" placeholder="Angiv kundenummer" v-model.number="customerNumber" min="0" />
+                      </div>
+                      <div class="control">
+                        <button class="button is-static" :class="{ 'is-loading': isValidatingCustomerNumber }" :disabled="true">
+                          <span class="icon is-small">
+                            <!-- Checkmark if customer number is valid, x-circle if not -->
+                            <i :class="isCustomerNumberValid ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                    <span class="help is-danger" v-if="customerResult === false">Kundenummeret findes ikke.</span>
+                  </div>
+                  <div class="mb-3">
+                    <label class="label">Afhentning</label>
+                    <div class="field">
+                      <label class="checkbox">
+                        <input id="pickup" type="checkbox" v-model="pickup" />
+                        Inkl. Pick-Up
+                      </label>
+                    </div>
+                  </div>
+                </WhiteBox>
+                <!--<PosSelectedCustomer class="mt-3"/> -->
+                <NextStepError class="is-fullwidth" />
+                <span class="has-text-danger" v-if="missingFields.length > 0">
+                  <strong>Udfyld venligst følgende påkrævede felter for at fortsætte:</strong>
+                  <ul>
+                    <li v-for="field in missingFields" :key="field">{{ field }}</li>
+                  </ul>
+                </span>
+                <div class="buttons">
+                  <button class="button is-fullwidth is-primary" @click="openSummary" :disabled="missingFields.length > 0">
+                    Gå til bekræftelse
+                  </button>
+                  <Cancel class="is-fullwidth" />
                 </div>
               </div>
             </div>
-          </div>
-        </PosDepartmentStepMobileFixedBottomControl>
-        <!-- DateTime -->
-        <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput">
+            <div class="columns is-multiline" v-show="false" :class="{ 'is-vcentered': isWalkthroughDisplayed() }">
+              <div class="column is-6">
+                <div class="columns">
+                  <!-- If there's no department selected, show the full width backdrop stating this is required. -->
+                  <template v-if="!department">
+                    <div class="column is-12">
+                      <div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+                        <span class="icon is-large">
+                          <i class="fas fa-building fa-3x"></i>
+                        </span>
+                        <p class="is-size-5 mt-2">Vælg venligst en vaskehal for at fortsætte</p>
+                      </div>
+                      <!-- Department selection -->
+                      <div class="columns is-mobile is-vcentered is-multiline">
+                        <div class="column is-3" v-for="dept in departments" :key="dept.id">
+                          <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="department = dept" :toggleable="false" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="true">
+                            <template v-slot:header>
+                              <div class="card-header-icon">
+                            <span class="icon">
+                              <i class="fas fa-building"></i>
+                            </span>
+                              </div>
+                              <div class="card-header-title">
+                                {{ dept.name }}
+                              </div>
+                            </template>
+                          </WhiteBoxCard>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- If there's no vehicles selected, show the full width backdrop stating this is required. -->
+                  <template v-else-if="((reg1 === '') && (reg2 === '')) || forceDisplayRightWalkthrough">
+                    <div class="column is-12">
+                      <div @click="interactingWithRightWalkthrough(true)">
+                        <div class="has-text-centered" style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+                        <span class="icon is-large">
+                          <i class="fas fa-car-side fa-3x"></i>
+                        </span>
+                          <p class="is-size-5 mt-2">Vælg venligst et køretøj for at se tilgængelige tillæg</p>
+                        </div>
+                        <!-- Vehicles selection quick options -->
+                        <TimeBookingsElementSelectVehicles :label="null"
+                                                           :reg1="reg1" :reg1-type="reg1Type" :reg2="reg2" :reg2-type="reg2Type" :is-reg1-input="isReg1Input"
+                                                           :is-reg2-input="isReg2Input" :available-vehicle-types="orderProductsByOrderPriority(availableVehicleTypes)"
+                                                           :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
+                                                           @update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
+                                                           @update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
+                                                           :hide-type-select="true"
+                        />
+                        <!-- Vehicles suggestions -->
+                        <TimeBookingsElementVehicleSuggestions :label="'Er det et af disse køretøjer?'" :input="(isReg2Input ? reg2 : (isReg1Input ? reg1 : ((reg1 !== '') ? reg1 : reg2)))" :availableVehicleTypes="availableVehicleTypes"
+                                                               @update:isAnySuggestionsDisplayed="setAnyVisibleSuggestions($event)"
+                                                               @onSelectVehicle="
+                          (vehicle) => {
+                          if (isReg2Input) {
+                            reg2 = vehicle.reg;
+                            reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                          } else if (isReg1Input) {
+                            reg1 = vehicle.reg;
+                            reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                          } else if (reg1 !== '') {
+                            reg1 = vehicle.reg;
+                            reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                          } else {
+                            reg2 = vehicle.reg;
+                            reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                          }
+                        }"
+                        />
+                        <div class="">
+                          <!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
+                          <template v-if="(forceDisplayRightWalkthrough)">
+                            <div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
+                              <button class="button is-light is-fullwidth is-link has-icons-right" @click="delayThen(1, () => interactingWithRightWalkthrough(false)); forceDisplayRightWalkthrough = false;">
+                                <span>Næste trin: Vælg tillæg</span>
+                                <span class="icon is-right">
+                              <i class="fas fa-arrow-right"></i>
+                            </span>
+                              </button>
+                            </div>
+                          </template>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <template v-if="!guestMode">
+                    <SelectProductsFormPOS :isCustomerBooking="true"
+                                           :isAddonsVisible="false"
+                                           :emitActionsOnly="true"
+                                           @onAddProduct="onAddProduct"
+                                           :automaticallySelectCategory="6"/>
+                    </template>
+                    <template v-else>
+                      <WhiteBox class="mb-3 has-text-centered">
+                        <p class="mb-2">Produktvalg er ikke tilgængeligt som gæst.</p>
+                        <p class="is-size-7 has-text-grey">Log ind for at se og vælge produkter.</p>
+                      </WhiteBox>
+                    </template>
+                  </template>
+                  <template v-show="false">
+                    <div class="column" :class="{ 'is-12': (reg2 === '' || reg2Type === null), 'is-6': (reg2 !== '' || reg2Type !== null) }" v-if="reg1 !== '' && reg1Type !== null && !forceDisplayRightWalkthrough">
+                      <TimeBookingsElementReg1Addons
+                          :reg1="reg1"
+                          :reg1Type="reg1Type"
+                          :showPriceOnBookingPage="hasShowPriceOnBookingPageAttribute()"
+                          @update:reg1Type="reg1Type = $event"
+                      />
+                    </div>
+                    <div class="column" v-if="reg2 !== '' && reg2Type !== null && !forceDisplayRightWalkthrough" :class="{ 'is-12': (reg1 === '' || reg1Type === null), 'is-6': (reg1 !== '' || reg1Type !== null) }">
+                      <TimeBookingsElementReg1Addons
+                          :reg1="reg2"
+                          :reg1Type="reg2Type"
+                          :showPriceOnBookingPage="hasShowPriceOnBookingPageAttribute()"
+                          @update:reg1Type="reg2Type = $event"
+                      />
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div class="column is-6">
+                <div class="columns">
+                  <div class="column is-12" v-show="false">
+                    <!-- Location -->
+                    <TimeBookingsElementSelectLocation :department="department" @onClickSelectDepartment="onClickSelectDepartment"/>
+                  </div>
+                  <!--<div class="column is-6"></div>-->
+                </div>
+                <div class="columns">
+                  <div class="column is-6">
+                    <!-- Wash type -->
+                    <TimeBookingsElementSelectWashType :wash_type="wash_type as 'general' | 'tankcleaning'" @update:wash_type="wash_type = $event"/>
+                  </div>
+                  <div class="column is-6" v-show="false">
+                    <!-- Date & time (moved to right sidebar persistent panel) -->
+                    <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment" :label="undefined"/>
+                  </div>
+                </div>
+
+                <div class="columns is-multiline" v-show="false">
+                  <div class="column is-12">
+                    <label class="label">Reference og PO Nummer (valgfrit)</label>
+                  </div>
+                  <div class="column is-6" v-show="false">
+                    <!-- Vehicles -->
+                    <TimeBookingsElementSelectVehicles :reg1="reg1" :reg1-type="reg1Type" :reg2="reg2" :reg2-type="reg2Type" :is-reg1-input="isReg1Input"
+                                                       :is-reg2-input="isReg2Input" :available-vehicle-types="orderProductsByOrderPriority(availableVehicleTypes)"
+                                                       :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
+                                                       @update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
+                                                       @update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
+                                                       :label="undefined"
+                    />
+                  </div>
+                  <div class="column is-6">
+                    <!-- Reference -->
+                    <TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
+                                                        :is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
+                                                        :label="null"
+                    />
+                  </div>
+                  <div class="column is-6">
+                    <!-- PO Number -->
+                    <TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
+                                                       @onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
+                                                       @update:is-po-number-input="isPoNumberInput = $event"
+                                                       :label="null"
+                    />
+                  </div>
+                  <div class="column is-12">
+                    <TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
+                                                    :is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"
+                                                    :label="(notes !== '' || isNotesInput) ? 'Note (valgfrit)' : null"
+                    />
+                  </div>
+                </div>
+
+
+              </div>
+
+                  <div class="column is-6"><!--Spacer--></div>
+                  <div class="column is-6" v-show="isAnySuggestionsDisplayed">
+                    <!-- If the user has selected a vehicle, whilst reactively interacting with the right walkthrough, show the next button -->
+                    <template v-if="(forceDisplayRightWalkthrough)">
+                      <div class="has-text-centered mt-4" v-if="(reg1 !== '') || (reg2 !== '')">
+                        <button class="button is-light is-fullwidth is-link has-icons-right" @click="interactingWithRightWalkthrough(false); forceDisplayRightWalkthrough = false;">
+                          <span>Næste trin: Vælg tillæg</span>
+                          <span class="icon is-right">
+                              <i class="fas fa-arrow-right"></i>
+                            </span>
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+              <div class="column is-12">
+                <!-- Order item preview -->
+                <hr />
+                <TimeBookingsElementCompleteButton label="Bekræft booking" :disabled="isConfirmDisabled" @onClickComplete="onClickComplete"/>
+                <p v-if="guestMode" class="is-size-7 has-text-grey mt-2">Du skal være logget ind for at fuldføre bookingen.</p>
+                <template v-if="reg1 !== '' && reg1Type !== null">
+                  <OrderItemsTable :orderItems="getProductsCombined.map((product => ({
+                    product: product,
+                    quantity: product.quantity || 1,
+                    price: product.price || 0,
+                  })))"/>
+                </template>
+              </div>
+            </div>
+
+            <!-- Select department -->
+            <PosDepartmentStepMobileFixedBottomControl v-show="isDepartmentInput">
+              <div class="box" style="overflow-y: auto; overflow-x: hidden;">
+                <!-- Close button -->
+                <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
+                  <button class="button is-white" @click="isDepartmentInput = false">
+                  <span class="icon">
+                    <i class="fas fa-times"></i>
+                  </span>
+                  </button>
+                </div>
+                <!-- Header "Select department" -->
+                <div class="field">
+                  <label class="label has-text-centered">Vælg vaskehal</label>
+                </div>
+                <hr />
+                <!-- Department selection -->
+                <div style="max-width: inherit; overflow-x: scroll; white-space: nowrap; overflow-y: auto; padding: 2px 16px; max-height: 40vh;" class="has-invisible-scrollbar">
+                  <div class="columns is-mobile is-vcentered is-multiline">
+                    <div class="column is-12-mobile is-3-desktop" v-for="dept in departments" :key="dept.id">
+                      <div role="button" tabindex="0" @keydown.enter="onSelectDepartment(dept)" :aria-pressed="department && department.id === dept.id" :aria-label="`Vælg ${dept.name}`">
+                        <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="onSelectDepartment(dept)" :toggleable="false" :hasHoverEffect="true" :hasSelectionStyle="true" class="is-clickable">
+                          <template v-slot:header>
+                            <div class="card-header-icon">
+                          <span class="icon">
+                            <i class="fas fa-building"></i>
+                          </span>
+                            </div>
+                            <div class="card-header-title">
+                              {{ dept.name }}
+                            </div>
+                            <div class="card-header-icon">
+                          <span class="icon">
+                            <i class="fas fa-map-marker-alt" v-if="department && department.id === dept.id"></i>
+                            <i class="fas fa-arrow-right" v-else></i>
+                          </span>
+                            </div>
+                          </template>
+                        </WhiteBoxCard>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </PosDepartmentStepMobileFixedBottomControl>
+            <!-- DateTime -->
+            <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput">
           <div class="box" style="overflow-y: auto; overflow-x: hidden;">
             <!-- Close button -->
             <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
@@ -798,7 +1596,7 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
             </div>
             <!-- Header "Schedule" -->
             <div class="field">
-              <label class="label has-text-centered">Hvornår skal du vaske?</label>
+              <label class="label has-text-centered">Vælg dato og forventet ankomsttidspunkt</label>
             </div>
             <hr />
             <!-- Date selection -->
@@ -818,8 +1616,13 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
             <!-- Time selection -->
             <div class="columns is-mobile is-vcentered is-multiline">
               <div class="column is-2" v-for="timeslot in getTimeSlots(dateTime)" :key="timeslot.time" style="cursor: not-allowed;">
-                <div class="custom-date-picker-time custom-disabled" :class="{ 'is-selected': isTimeSlotSelected(timeslot, dateTime) && false }" @click="selectTimeSlot(timeslot, dateTime)">
-                  <div class="custom-date-picker-time-hour">{{ timeslot.time }}</div>
+                <div class="custom-date-picker-time" :class="{ 'is-selected': isTimeSlotSelected(timeslot, dateTime) }" @click="selectTimeSlot(timeslot, dateTime)">
+                  <template v-if="timeslot.time === '00:00'">
+                    <div class="custom-date-picker-time-hour">I løbet af dagen</div>
+                  </template>
+                  <template v-else>
+                    <div class="custom-date-picker-time-hour">~{{ timeslot.time }}</div>
+                  </template>
                 </div>
               </div>
             </div>
@@ -827,7 +1630,10 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
             <!-- Save button -->
             <div class="field">
               <button class="button is-fullwidth is-link" @click="isDateTimeInput = false">
-                <span>Bekræft tidspunkt</span>
+                <!-- No time selected -->
+                <span v-if="!hasSelectedTime">Vælg {{ SessionUser.functions.date.toWords(dateTime) }}, i løbet af dagen</span>
+                <!-- Time selected -->
+                <span v-else>Vælg {{ SessionUser.functions.date.toWords(dateTime) }}, ca. kl. {{ dateTime.getHours().toString().padStart(2, '0') }}:{{ dateTime.getMinutes().toString().padStart(2, '0') }}</span>
                 <span class="icon is-left">
                 <i class="fas fa-check-circle"></i>
               </span>
@@ -842,108 +1648,308 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
               </span>
               </button>
             </div>
-            <!-- Add to calendar -->
-            <div class="field" v-show="false">
-              <button class="button is-fullwidth is-link" @click="addToCalendar(); isDateTimeInput = false">
-                <span>Tilføj til kalender</span>
-                <span class="icon is-left">
-                <i class="fas fa-calendar-plus"></i>
-              </span>
-              </button>
-            </div>
           </div>
         </PosDepartmentStepMobileFixedBottomControl>
+          </template>
+        </div>
       </template>
       <template #mobile>
-        <!-- Location -->
-        <TimeBookingsElementSelectLocation :department="department" @onClickSelectDepartment="onClickSelectDepartment"/>
-        <!-- Wash type -->
-        <TimeBookingsElementSelectWashType :wash_type="wash_type as 'general' | 'tankcleaning'" @update:wash_type="wash_type = $event"/>
-        <!-- Vehicles -->
-        <TimeBookingsElementSelectVehicles :reg1="reg1" :reg1-type="reg1Type" :reg2="reg2" :reg2-type="reg2Type" :is-reg1-input="isReg1Input"
-                                           :is-reg2-input="isReg2Input" :available-vehicle-types="availableVehicleTypes"
-                                           :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()" @update:reg1="reg1 = $event" @update:reg1-type="reg1Type = $event"
-                                           @update:reg2="reg2 = $event" @update:reg2-type="reg2Type = $event" @update:is-reg1-input="isReg1Input = $event"
-                                           @update:is-reg2-input="isReg2Input = $event" @setInputFocus="setInputFocus($event)"
-        />
-        <!-- Date & time -->
-        <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime"/>
-        <!-- Reference -->
-        <TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
-                                            :is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
-        />
-        <!-- PO Number -->
-        <TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
-                                           @onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
-                                           @update:is-po-number-input="isPoNumberInput = $event"
-        />
-        <TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
-                                        :is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"/>
-        <!-- Select department -->
-        <PosDepartmentStepMobileFixedBottomControl v-show="isDepartmentInput">
-          <div class="box" style="overflow-y: auto; overflow-x: hidden;">
-            <!-- Close button -->
-            <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
-              <button class="button is-white" @click="isDepartmentInput = false">
+        <div>
+          <!-- If the user is not logged in, show a guest mode warning -->
+          <div class="notification is-warning is-light" v-if="guestMode">
+            <span class="icon">
+              <i class="fas fa-info-circle"></i>
+            </span>
+            <strong>Du er i gæstetilstand.</strong>
+            <p>For at fuldføre din booking skal du logge ind på din konto.</p>
+            <button class="button is-link is-light is-small mt-2" @click="SessionUser.functions.redirectTo.pages.login()">
               <span class="icon">
-                <i class="fas fa-times"></i>
+                <i class="fas fa-sign-in-alt"></i>
               </span>
-              </button>
-            </div>
-            <!-- Header "Select department" -->
-            <div class="field">
-              <label class="label has-text-centered">Vælg vaskehal</label>
-            </div>
-            <hr />
-            <!-- Department selection -->
-            <div style="max-width: inherit; overflow-x: scroll; white-space: nowrap; overflow-y: auto; padding: 2px 16px; max-height: 40vh;" class="has-invisible-scrollbar">
-              <div class="columns is-mobile is-vcentered is-multiline">
-                <div class="column is-12" v-for="dept in departments" :key="dept.id">
-                  <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="department = dept; isDepartmentInput = false" :toggleable="false">
-                    <template v-slot:header>
-                      <div class="card-header-icon">
-                    <span class="icon">
-                      <i class="fas fa-building"></i>
-                    </span>
-                      </div>
-                      <div class="card-header-title">
-                        {{ dept.name }}
-                      </div>
-                      <div class="card-header-icon">
-                    <span class="icon">
-                      <i class="fas fa-map-marker-alt" v-if="department && department.id === dept.id"></i>
-                      <i class="fas fa-arrow-right" v-else></i>
-                    </span>
+              <span>Log ind</span>
+            </button>
+          </div>
+          <template v-if="!guestMode">
+            <div class="columns is-mobile is-multiline mobile-bottom-offset">
+              <!-- Step 1: Department -->
+              <div class="column is-12" v-if="isMobileStep(1)">
+                <WhiteBox class="mb-3">
+                  <TimeBookingsElementSelectLocation :department="department" @onClickSelectDepartment="onClickSelectDepartment" />
+                </WhiteBox>
+              </div>
+
+              <!-- Step 2: Vehicles -->
+              <template v-if="isMobileStep(2)">
+                <div class="column is-12" v-if="department">
+                  <WhiteBox class="mb-3" @click="interactingWithRightWalkthrough(true)">
+                    <TimeBookingsElementSelectVehicles
+                        :label="null"
+                        :reg1="reg1" :reg1-type="reg1Type"
+                        :reg2="reg2" :reg2-type="reg2Type"
+                        :is-reg1-input="isReg1Input" :is-reg2-input="isReg2Input"
+                        :available-vehicle-types="orderProductsByOrderPriority(availableVehicleTypes)"
+                        :show-price-on-booking-page="hasShowPriceOnBookingPageAttribute()"
+                        @update:reg1="reg1 = $event"
+                        @update:reg1-type="reg1Type = $event"
+                        @update:reg2="reg2 = $event"
+                        @update:reg2-type="reg2Type = $event"
+                        @update:is-reg1-input="isReg1Input = $event"
+                        @update:is-reg2-input="isReg2Input = $event"
+                        @setInputFocus="setInputFocus($event)"
+                        :hide-type-select="true"
+                    />
+                    <TimeBookingsElementVehicleSuggestions
+                        :label="'Er det et af disse køretøjer?'"
+                        :input="(isReg2Input ? reg2 : (isReg1Input ? reg1 : ((reg1 !== '') ? reg1 : reg2)))"
+                        :availableVehicleTypes="availableVehicleTypes"
+                        @update:isAnySuggestionsDisplayed="setAnyVisibleSuggestions($event)"
+                        @onSelectVehicle="
+                          (vehicle) => {
+                            if (isReg2Input) {
+                              reg2 = vehicle.reg;
+                              reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                            } else if (isReg1Input) {
+                              reg1 = vehicle.reg;
+                              reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                            } else if (reg1 !== '') {
+                              reg1 = vehicle.reg;
+                              reg1Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                            } else {
+                              reg2 = vehicle.reg;
+                              reg2Type = availableVehicleTypes.find(vehicleType => vehicleType.id === vehicle.type);
+                            }
+                          }"
+                    />
+                  </WhiteBox>
+                </div>
+              </template>
+
+              <!-- Step 3: Products/Addons + Basket -->
+              <template v-if="isMobileStep(3)">
+                <div class="column is-12" v-if="department">
+                  <WhiteBox class="mb-3">
+                    <template v-if="!guestMode">
+                    <SelectProductsFormPOS
+                        :isCustomerBooking="true"
+                        :showPrices="hasShowPriceOnBookingPageAttribute()"
+                        :isAddonsVisible="true"
+                        :emitActionsOnly="true"
+                        @onAddProduct="onAddProduct"
+                        :automaticallySelectCategory="6"
+                        @onSelectProduct="onSelectProduct"
+                        :gridBeforeSelect="true"
+                        :selectedId="selectedProduct?.id || null"
+                        :autoScrollOnSelect="true"
+                        :attemptAutoSelectId="reg1Type?.id || reg2Type?.id || null"
+                        v-model:customer_number="customerNumber"
+                        :compact="true"
+                    />
+                    </template>
+                    <template v-else>
+                      <div class="has-text-centered">
+                        <p class="mb-2">Produktvalg er ikke tilgængeligt som gæst.</p>
+                        <p class="is-size-7 has-text-grey">Log ind for at se og vælge produkter.</p>
                       </div>
                     </template>
-                  </WhiteBoxCard>
+
+                    <div class="columns is-mobile mt-2 wash-toggle-row is-multiline" v-if="selectedProduct?.id">
+                      <div class="column is-12-mobile is-6-tablet">
+                        <button class="button is-fullwidth wash-toggle-btn" :class="{ 'is-link is-light': washInterior }" @click="onClickInteriorWashButton" :disabled="!interiorAddon">
+                          <span class="icon is-small"><i :class="washInterior ? 'fas fa-check-circle' : 'far fa-circle'"></i></span>
+                          <span>Indvendig vask</span>
+                          <span class="tag is-light" style="margin-left: .5rem;" v-if="interiorAddon && hasShowPriceOnBookingPageAttribute()">{{ interiorPriceLabel }}</span>
+                        </button>
+                      </div>
+                      <div class="column is-12-mobile is-6-tablet">
+                        <button class="button is-fullwidth wash-toggle-btn" :class="{ 'is-link is-light': washExterior }" @click="onClickExteriorWashButton" :disabled="isInteriorWashPrimary && (!getProductWithAssociatedInteriorWash(selectedProduct as PosProduct) || productAssociatedWithInteriorWash === null)">
+                          <span class="icon is-small"><i :class="washExterior ? 'fas fa-check-circle' : 'far fa-circle'"></i></span>
+                          <span>Udvendig vask</span>
+                          <span class="tag is-light" style="margin-left: .5rem;" v-if="hasShowPriceOnBookingPageAttribute() && exteriorPriceLabel !== ''">{{ exteriorPriceLabel }}</span>
+                        </button>
+                      </div>
+                    </div>
+
+                    <!-- Addons list -->
+                    <PosDepartmentStepMobile2Addons
+                        v-if="selectedProduct?.id"
+                        :addons="visibleAddons"
+                        :label="'Add-ons'"
+                        :compact="true"
+                        @update:addons="onUpdateAddons"
+                        :showPrices="hasShowPriceOnBookingPageAttribute()"
+                    />
+                  </WhiteBox>
+                </div>
+
+                <!-- Basket summary -->
+                <div class="column is-12">
+                  <WhiteBox class="mb-3">
+                    <div v-if="completeBasket.length">
+                      <div class="mb-2" v-for="(item, idx) in completeBasket" :key="`${item.id || item.name}-${idx}`">
+                        <div class="is-flex is-justify-content-space-between">
+                          <span>
+                            {{ item.name }}
+                            <span v-if="(item.quantity || 1) > 1" class="has-text-grey ml-1">× {{ item.quantity }}</span>
+                          </span>
+                          <span v-if="hasShowPriceOnBookingPageAttribute()">{{ (((item.price || 0) * (item.quantity || 1)) || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</span>
+                        </div>
+                      </div>
+                      <template v-if="hasShowPriceOnBookingPageAttribute()">
+                        <hr />
+                        <div class="is-flex is-justify-content-space-between has-text-weight-semibold">
+                          <span>Total</span>
+                          <span>{{ completeBasket.reduce((sum, p) => sum + ((p.price || 0) * (p.quantity || 1)), 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }) }}</span>
+                        </div>
+                      </template>
+                    </div>
+                    <div v-else class="has-text-centered has-text-grey">
+                      Ingen varer i kurven endnu
+                    </div>
+                  </WhiteBox>
+                </div>
+              </template>
+
+              <!-- Step 4: Date/time and details -->
+              <template v-if="isMobileStep(4)">
+                <div class="column is-12">
+                  <WhiteBox class="mb-3">
+                    <div class="mb-3">
+                      <span class="is-pulled-right">
+                        <small class="has-text-grey">Påkrævet</small>
+                      </span>
+                      <label class="label">Forventet dato og tidspunkt</label>
+                      <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment && false" :label="null"/>
+                    </div>
+
+                    <div class="mb-3">
+                      <label class="label">Reference</label>
+                      <TimeBookingsElementSelectReference :reference="reference" @update:reference="reference = $event" @onClickReference="onClickReference"
+                                                          :is-reference-input="isReferenceInput" @update:is-reference-input="isReferenceInput = $event"
+                                                          :label="null"
+                      />
+                    </div>
+
+                    <div class="mb-3">
+                      <label class="label">PO Nummer</label>
+                      <TimeBookingsElementSelectPoNumber :poNumber="poNumber" @update:poNumber="poNumber = $event"
+                                                         @onClickPoNumber="onClickPoNumber" :is-po-number-input="isPoNumberInput"
+                                                         @update:is-po-number-input="isPoNumberInput = $event"
+                                                         :label="null"
+                      />
+                    </div>
+
+                    <div class="mb-3">
+                      <label class="label">Note</label>
+                      <TimeBookingsElementSelectNotes :notes="notes" @update:notes="notes = $event" @onClickNotes="onClickNotes"
+                                                      :is-notes-input="isNotesInput" @update:is-notes-input="isNotesInput = $event"
+                                                      :label="null"
+                      />
+                    </div>
+
+                    <div class="mb-3">
+                      <span class="is-pulled-right">
+                        <small class="has-text-grey">Påkrævet</small>
+                      </span>
+                      <label class="label">Kundenummer</label>
+                      <div class="field has-addons">
+                        <div class="control is-expanded">
+                          <input id="customer-number-mobile" class="input" :class="{ 'is-danger': (customerResult === false) }"
+                                 type="number" placeholder="Angiv kundenummer" v-model.number="customerNumber" min="0" />
+                        </div>
+                        <div class="control">
+                          <button class="button is-static" :class="{ 'is-loading': isValidatingCustomerNumber }" :disabled="true">
+                            <span class="icon is-small">
+                              <i :class="isCustomerNumberValid ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                      <span class="help is-danger" v-if="customerResult === false">Kundenummeret findes ikke.</span>
+                    </div>
+
+                    <div class="mb-3">
+                      <label class="label">Afhentning</label>
+                      <div class="field">
+                        <label class="checkbox">
+                          <input id="pickup-mobile" type="checkbox" v-model="pickup" />
+                          Inkl. Pick-Up
+                        </label>
+                      </div>
+                    </div>
+                  </WhiteBox>
+                </div>
+              </template>
+            </div>
+
+            <!-- Fixed bottom navigation (mobile) -->
+            <div class="mobile-bottom-nav" v-if="showMobileBottomNav">
+              <div class="mobile-bottom-nav-inner">
+                <div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
+                  <small class="has-text-grey">Trin {{ mobileStep }} af {{ mobileStepsTotal }}</small>
+                  <div class="has-text-right">
+                    <small class="has-text-grey" v-if="mobileStep === 1 && !hasDepartment">Vælg en vaskehal</small>
+                    <small class="has-text-grey" v-else-if="mobileStep === 2 && !hasVehicle">Angiv køretøj</small>
+                    <small class="has-text-grey" v-else-if="mobileStep === 3 && !completeBasket.length">Vælg produkter</small>
+                    <small class="has-text-grey" v-else-if="mobileStep === 4 && (!dateTime || !isCustomerNumberValid)">Vælg dato/tid og kundenummer</small>
+                  </div>
+                </div>
+                <div class="buttons">
+                  <button class="button is-light" :disabled="mobileStep === 1" @click="onMobileBack">Tilbage</button>
+                  <button class="button is-primary" :disabled="!canProceedFromMobileStep" @click="onMobileNext">
+                    <span v-if="mobileStep < mobileStepsTotal">Næste</span>
+                    <span v-else>Gå til bekræftelse</span>
+                  </button>
                 </div>
               </div>
             </div>
-          </div>
-        </PosDepartmentStepMobileFixedBottomControl>
-        <!-- DateTime -->
-        <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput && dateTime !== null">
+
+            <!-- Bottom sheets for mobile (department & date/time) -->
+            <PosDepartmentStepMobileFixedBottomControl v-show="isDepartmentInput">
+              <div class="box" style="overflow-y: auto; overflow-x: hidden;">
+                <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
+                  <button class="button is-white" @click="isDepartmentInput = false">
+                    <span class="icon"><i class="fas fa-times"></i></span>
+                  </button>
+                </div>
+                <div class="field">
+                  <label class="label has-text-centered">Vælg vaskehal</label>
+                </div>
+                <hr />
+                <div style="max-width: inherit; overflow-x: scroll; white-space: nowrap; overflow-y: auto; padding: 2px 16px; max-height: 40vh;" class="has-invisible-scrollbar">
+                  <div class="columns is-mobile is-vcentered is-multiline">
+                    <div class="column is-12-mobile is-3-desktop" v-for="dept in departments" :key="dept.id">
+                      <div role="button" tabindex="0" @keydown.enter="onSelectDepartment(dept)" :aria-pressed="department && department.id === dept.id" :aria-label="`Vælg ${dept.name}`">
+                        <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :has-selected-style="department && department.id === dept.id" @click="onSelectDepartment(dept)" :toggleable="false" :hasHoverEffect="true" :hasSelectionStyle="true" class="is-clickable">
+                          <template #header>
+                            <div class="card-header-icon">
+                              <span class="icon"><i class="fas fa-building"></i></span>
+                            </div>
+                            <div class="card-header-title">{{ dept.name }}</div>
+                          </template>
+                        </WhiteBoxCard>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </PosDepartmentStepMobileFixedBottomControl>
+
+            <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput">
           <div class="box" style="overflow-y: auto; overflow-x: hidden;">
-            <!-- Close button -->
             <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
               <button class="button is-white" @click="isDateTimeInput = false">
-              <span class="icon">
-                <i class="fas fa-times"></i>
-              </span>
+                <span class="icon"><i class="fas fa-times"></i></span>
               </button>
             </div>
-            <!-- Header "Schedule" -->
             <div class="field">
-              <label class="label has-text-centered">Hvornår skal du vaske?</label>
+              <label class="label has-text-centered">Vælg dato og forventet ankomsttidspunkt</label>
             </div>
             <hr />
-            <!-- Date selection -->
             <div style="max-width: inherit; overflow-x: auto; white-space: nowrap; overflow-y: hidden; padding: 2px 16px;" class="has-invisible-scrollbar">
               <div class="columns is-mobile is-vcentered">
                 <template v-for="day in getNextDays(30)" :key="day.date.toDateString()">
                   <div class="column is-narrow">
-                    <div class="custom-date-picker-date" :class="{ 'is-selected': isSameDate(day.date, dateTime) }" @click="dateTime = new Date(dateTime.getFullYear(), dateTime.getMonth(), day.date.getDate())">
+                    <div class="custom-date-picker-date" :class="{ 'is-selected': isSameDate(day.date, dateTime) }" @click="dateTime = new Date(dateTime.getFullYear(), day.date.getMonth(), day.date.getDate(), dateTime.getHours(), dateTime.getMinutes())">
                       <div class="custom-date-picker-date-day">{{ day.day }}</div>
                       <div class="custom-date-picker-date-date">{{ day.date.getDate() }}</div>
                     </div>
@@ -952,26 +1958,35 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
               </div>
             </div>
             <hr />
-            <!-- Time selection -->
             <div class="columns is-mobile is-vcentered is-multiline">
-              <div class="column is-one-third" v-for="timeslot in getTimeSlots(dateTime)" :key="timeslot.time">
+              <div class="column is-6" v-for="timeslot in getTimeSlots(dateTime)" :key="timeslot.time" style="cursor: not-allowed;">
                 <div class="custom-date-picker-time" :class="{ 'is-selected': isTimeSlotSelected(timeslot, dateTime) }" @click="selectTimeSlot(timeslot, dateTime)">
-                  <div class="custom-date-picker-time-hour">{{ timeslot.time }}</div>
+                  <template v-if="timeslot.time === '00:00'">
+                    <div class="custom-date-picker-time-hour">I løbet af dagen</div>
+                  </template>
+                  <template v-else>
+                    <div class="custom-date-picker-time-hour">~{{ timeslot.time }}</div>
+                  </template>
                 </div>
               </div>
             </div>
             <hr />
-            <!-- Add to calendar -->
             <div class="field">
-              <button class="button is-fullwidth is-link" @click="addToCalendar(); isDateTimeInput = false">
-                <span>Tilføj til kalender</span>
-                <span class="icon is-left">
-                <i class="fas fa-calendar-plus"></i>
-              </span>
+              <button class="button is-fullwidth is-link" @click="isDateTimeInput = false">
+                <span>Bekræft</span>
+                <span class="icon is-left"><i class="fas fa-check-circle"></i></span>
+              </button>
+            </div>
+            <div class="field">
+              <button class="button is-fullwidth is-link is-light" @click="dateTime = null; isDateTimeInput = false">
+                <span>Annuller, fortryd</span>
+                <span class="icon is-left"><i class="fas fa-times-circle"></i></span>
               </button>
             </div>
           </div>
         </PosDepartmentStepMobileFixedBottomControl>
+          </template>
+        </div>
       </template>
     </ViewportResponsiveWrapper>
     <UserDashboardPageWrapper title="Mine bookinger" subtitle="Book en ny vask">
@@ -991,6 +2006,44 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
       </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"
+            :pickup="pickup"
+            :showPrices="hasShowPriceOnBookingPageAttribute()"
+            @back="onSummaryBack"
+            @confirm="onSummaryConfirm"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1085,4 +2138,79 @@ const removeProductInBasketById = (id: string | number | null | undefined) => {
 .custom-date-picker-time.is-selected:hover {
   background-color: #d0dff5;
 }
-</style>
\ No newline at end of file
+
+/* Mobile fit: wash toggle buttons */
+@media screen and (max-width: 768px) {
+  .wash-toggle-row .button.wash-toggle-btn {
+    white-space: normal; /* allow labels to wrap */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .wash-toggle-row .button.wash-toggle-btn .tag {
+    white-space: nowrap; /* keep price on one line */
+    max-width: 8.5rem;   /* prevent overflow */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* Fixed mobile bottom navigation & layout offset */
+.mobile-bottom-offset {
+  padding-bottom: 5.25rem; /* leave space for fixed bottom nav */
+}
+.mobile-bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  background: #ffffff;
+  border-top: 1px solid rgba(10,10,10,0.1);
+  padding: 0.5rem 0.75rem;
+}
+.mobile-bottom-nav-inner .buttons {
+  margin-bottom: 0; /* tighter */
+}
+.mobile-bottom-nav .buttons .button {
+  flex: 1;
+}
+</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>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue
new file mode 100644
index 00000000..15110571
--- /dev/null
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue
@@ -0,0 +1,19 @@
+<script setup>
+
+import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue";
+</script>
+
+<template>
+  <div>
+    <UserDashboardPageWrapper title="Mine bookinger" subtitle="Se dine bookinger">
+      <BookingsPagination/>
+      <!-- TODO: Complete implementation! -->
+    </UserDashboardPageWrapper>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue b/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue
new file mode 100644
index 00000000..c8ec10dd
--- /dev/null
+++ b/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { computed, defineProps, defineEmits } from 'vue';
+import WhiteBox from '@/components/displays/boxes/WhiteBox.vue';
+import SessionUser from "@/components/session/token/SessionUser.vue";
+
+const props = defineProps<{
+  department: any | null,
+  reg1: string,
+  reg1Type: any | null,
+  reg2: string,
+  reg2Type: any | null,
+  dateTime: Date | null,
+  basket: Array<{ id?: number|string, name: string, price?: number|null, quantity?: number|null }>,
+  notes: string,
+  reference: string,
+  poNumber: string,
+  pickup?: boolean,
+  showPrices?: boolean,
+}>();
+
+const emits = defineEmits<{
+  (e: 'back'): void,
+  (e: 'confirm'): void,
+}>();
+
+const formattedDateTime = computed(() => {
+  if (!props.dateTime) return 'Ikke valgt';
+  const d = props.dateTime;
+  const date = d.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' });
+  const time = d.toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' });
+  // Check if the time is 00:00 and return only the date if so
+  if (time === '00:00') return date;
+  return `${date} kl. ${time}`;
+});
+
+const totalAmount = computed(() => {
+  return (props.basket || []).reduce((sum, p) => sum + ((p.price || 0) * (p.quantity || 1)), 0);
+});
+
+const formatDkk = (amount?: number | null) => (amount || 0).toLocaleString('da-DK', { style: 'currency', currency: 'DKK' });
+
+const showWarning = computed(() => {
+  const isDepartmentValid = props.department !== null;
+  const isRegistrationValid = (props.reg1 || props.reg2) !== '';
+  const isDateTimeValid = props.dateTime !== null;
+  const hasItemsInBasket = props.basket && props.basket.length > 0;
+  // Notifications (email and SMS)
+  const emailNotificationsEnabled = SessionUser.user.notifications.email_notifications_enabled.value;
+  const smsNotificationsEnabled = SessionUser.user.notifications.sms_notifications_enabled.value;
+  const contactEmail = SessionUser.user.email.value;
+  const washCertificateEmail = SessionUser.user.notifications.wash_certificate_email.value;
+  const countryCode = SessionUser.user.phone.country_code.value;
+  const phoneNumber = SessionUser.user.phone.number.value;
+  // Check if the user has enabled notifications and the required fields are filled in
+  const bookingEmailValid = emailNotificationsEnabled ? (contactEmail !== '' || washCertificateEmail !== '') : true;
+  const bookingSMSValid = smsNotificationsEnabled ? (countryCode !== '' && phoneNumber !== '') : true;
+  // Overall validity
+  const isValid = isDepartmentValid && isRegistrationValid && isDateTimeValid && hasItemsInBasket && bookingEmailValid && bookingSMSValid;
+  if (!isValid) return true;
+  // Show warning if no department is selected or no registration numbers are provided
+  return false;
+});
+</script>
+
+<template>
+  <div>
+    <WhiteBox>
+      <template #default>
+        <h3 class="title is-5 mb-3">Bekræft din booking</h3>
+        <div class="content">
+          <div class="mb-3">
+            <strong>Lokation:</strong>
+            <div>
+              <span v-if="department">{{ department.name }}</span>
+              <span v-else class="has-text-grey">Ikke valgt</span>
+            </div>
+          </div>
+          <div class="mb-3">
+            <strong>Registreringsnumre:</strong>
+            <div>
+              <div v-if="reg1">
+                {{ reg1 }}
+                <span v-if="reg1Type" class="tag is-light ml-2">{{ reg1Type.name }}</span>
+              </div>
+              <div v-if="reg2">
+                {{ reg2 }}
+                <span v-if="reg2Type" class="tag is-light ml-2">{{ reg2Type.name }}</span>
+              </div>
+              <div v-if="!reg1 && !reg2" class="has-text-grey">Ikke valgt</div>
+            </div>
+          </div>
+          <div class="mb-3">
+            <strong>Dato og tidspunkt:</strong>
+            <div>{{ formattedDateTime }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Valgte ydelser:</strong>
+            <div v-if="basket && basket.length">
+              <div class="is-flex is-justify-content-space-between" v-for="(item, idx) in basket" :key="`${item.id || item.name}-${idx}`">
+                <span>
+                  {{ item.name }}
+                  <span v-if="(item.quantity || 1) > 1" class="has-text-grey ml-1">× {{ item.quantity }}</span>
+                </span>
+                <span v-if="showPrices">{{ formatDkk((item.price || 0) * (item.quantity || 1)) }}</span>
+              </div>
+              <hr />
+              <div class="is-flex is-justify-content-space-between has-text-weight-semibold" v-if="showPrices">
+                <span>Total</span>
+                <span>{{ formatDkk(totalAmount) }}</span>
+              </div>
+            </div>
+            <div v-else class="has-text-grey">Ingen ydelser valgt</div>
+          </div>
+          <div class="mb-3">
+            <strong>Reference:</strong>
+            <div>{{ reference || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>PO-nummer:</strong>
+            <div>{{ poNumber || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Noter:</strong>
+            <div style="white-space: pre-wrap;">{{ notes || '—' }}</div>
+          </div>
+          <div class="mb-3">
+            <strong>Afhentning:</strong>
+            <div>{{ (pickup ?? false) ? 'Ja' : 'Nej' }}</div>
+          </div>
+          <div class="mb-3">
+            <hr/>
+            <!-- Warning about missing fields -->
+            <div class="notification is-warning is-light" v-if="showWarning">
+              <!-- Add a warning icon -->
+              <span class="icon is-small mr-2">
+                <i class="fas fa-exclamation-triangle"></i>
+              </span>
+              <!-- Add the warning text -->
+              <template v-if="!basket || basket.length === 0"><strong>Advarsel:</strong> Du har ikke valgt nogle ydelser.</template>
+              <template v-if="!department"><strong>Advarsel:</strong> Du har ikke valgt en lokation.</template>
+              <template v-if="!reg1 && !reg2"><strong>Advarsel:</strong> Du har ikke angivet noget registreringsnummer.</template>
+              <template v-if="!dateTime"><strong>Advarsel:</strong> Du har ikke valgt dato og tidspunkt.</template>
+              <template v-if="SessionUser.authenticated.value">
+                <template v-if="SessionUser.user.notifications.email_notifications_enabled.value && ! (SessionUser.user.email.value || SessionUser.user.notifications.wash_certificate_email.value) ">
+                  <strong>Advarsel:</strong> Du har aktiveret e-mail notifikationer, men har ikke angivet en kontakt e-mail eller e-mail til vaskecertifikat.
+                </template>
+                <template v-if="SessionUser.user.notifications.sms_notifications_enabled.value && ! (SessionUser.user.phone.country_code.value && SessionUser.user.phone.number.value) ">
+                  <strong>Advarsel:</strong> Du har aktiveret SMS notifikationer, men har ikke angivet et gyldigt telefonnummer.
+                </template>
+              </template>
+            </div>
+            <!-- When there's no warnings, show a success message -->
+            <div class="notification is-success is-light" v-else>
+              <span class="icon is-small mr-2">
+                <i class="fas fa-check-circle"></i>
+              </span>
+              Alle oplysninger ser gode ud! Du kan nu bekræfte din booking.
+              <template v-if="SessionUser.authenticated.value">
+                <template v-if="!SessionUser.user.notifications.email_notifications_enabled.value && !SessionUser.user.notifications.sms_notifications_enabled.value">
+                  <br/>
+                  <strong>Bemærk:</strong> Du har ikke aktiveret notifikationer for din booking. Du vil ikke modtage nogen bekræftelse, påmindelse eller opdateringer om din booking.
+                </template>
+                <!-- If the user has enabled notifications, but not all required fields are filled in, show a warning -->
+                <template v-if="(SessionUser.user.notifications.email_notifications_enabled.value && ! (SessionUser.user.email.value || SessionUser.user.notifications.wash_certificate_email.value)) || (SessionUser.user.notifications.sms_notifications_enabled.value && ! (SessionUser.user.phone.country_code.value && SessionUser.user.phone.number.value))">
+                  <br/>
+                  <strong>Bemærk:</strong> Du har aktiveret notifikationer, men ikke udfyldt alle nødvendige oplysninger for at modtage dem.
+                </template>
+                <!-- If the user has enabled notifications for either email or SMS, show where they will be sent -->
+                <template v-if="SessionUser.user.notifications.email_notifications_enabled.value || SessionUser.user.notifications.sms_notifications_enabled.value">
+                  <br/>
+                  Notifikationer vil blive sendt til:
+                  <ul>
+                    <li v-if="SessionUser.user.notifications.email_notifications_enabled.value">
+                      E-mail:
+                      <span v-if="SessionUser.user.email.value && !SessionUser.user.notifications.wash_certificate_email.value">{{ SessionUser.user.email.value }}</span>
+                      <span v-else-if="SessionUser.user.notifications.wash_certificate_email.value">{{ SessionUser.user.notifications.wash_certificate_email.value }}</span>
+                      <span v-else class="has-text-grey">Ikke angivet</span>
+                    </li>
+                    <li v-if="SessionUser.user.notifications.sms_notifications_enabled.value">
+                      SMS:
+                      <span v-if="SessionUser.user.phone.country_code.value && SessionUser.user.phone.number.value">+{{ SessionUser.user.phone.country_code.value }} {{ SessionUser.user.phone.number.value }}</span>
+                      <span v-else class="has-text-grey">Ikke angivet</span>
+                    </li>
+                  </ul>
+                </template>
+                <a href="/user/profile" target="_blank">Opdater dine notifikationsindstillinger her.</a>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </WhiteBox>
+
+    <div class="buttons mt-4">
+      <button class="button is-light is-fullwidth" @click="emits('back')">Tilbage</button>
+      <button class="button is-primary is-fullwidth" @click="emits('confirm')" :disabled="!basket || !basket.length">Bekræft booking</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
new file mode 100644
index 00000000..0a5467d8
--- /dev/null
+++ b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
@@ -0,0 +1,540 @@
+<script setup>
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { defineProps, computed, reactive } from "vue";
+import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import { loadList } from "@/components/pagination/paginatedList.vue";
+import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays/PopperDefault.vue";
+import ViewportResponsiveWrapper from "@/components/viewport/conditions/elements/ViewportResponsiveWrapper.vue";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+
+/**
+ * Props
+ */
+const props = defineProps({
+  objects: {
+    type: Array,
+    required: true,
+    default: () => [],
+  }
+});
+/**
+ * This function will return a string that tells how long until the given time
+ * @param time example: 2025-11-05 13:11:31
+ * @returns {string}
+ */
+const getTimeUntilString = (time) => {
+  const dateTime = new Date(time);
+  const now = new Date();
+  const diff = dateTime - now;
+  const minutes = Math.floor(diff / 1000 / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  const prefix = diff < 0 ? "for" : "om";
+  if (years > 0) {
+    return `${prefix} ${years} år`;
+  } else if (months > 0) {
+    if (months === 1) return `${prefix} ${months} måned`;
+    return `${prefix} ${months} måneder`;
+  } else if (weeks > 0) {
+    if (weeks === 1) return `${prefix} ${weeks} uge`;
+    return `${prefix} ${weeks} uger`;
+  } else if (days > 0) {
+    if (days === 1) return `${prefix} ${days} dag`;
+    return `${prefix} ${days} dage`;
+  } else if (hours > 0) {
+    if (hours === 1) return `${prefix} ${hours} time`;
+    return `${prefix} ${hours} timer`;
+  } else if (minutes > 0) {
+    if (minutes === 1) return `${prefix} ${minutes} minut`;
+    return `${prefix} ${minutes} minutter`;
+  } else {
+    // Check if the time is in the past
+    if (diff > 0) {
+      return `lige nu`;
+    } else if (years < -1) {
+      return `${prefix} ${-years} år siden`;
+    } else if (months < -1) {
+      if (months === -1) return `${prefix} ${-months} måned siden`;
+      return `${prefix} ${-months} måneder siden`;
+    } else if (weeks < -1) {
+      if (weeks === -1) return `${prefix} ${-weeks} uge siden`;
+      return `${prefix} ${-weeks} uger siden`;
+    } else if (days < -1) {
+      if (days === -1) return `${prefix} ${-days} dag siden`;
+      return `${prefix} ${-days} dage siden`;
+    } else if (hours < -1) {
+      if (hours === -1) return `${prefix} ${-hours} time siden`;
+      return `${prefix} ${-hours} timer siden`;
+    } else if (minutes < -1) {
+      if (minutes === -1) return `${prefix} ${-minutes} minut siden`;
+      return `${prefix} ${-minutes} minutter siden`;
+    } else {
+      return "lige nu";
+    }
+  }
+}
+
+const formatSummaryString = (items) => {
+  if (!items) return "Ingen";
+  const itemCount = items.length;
+  const itemNames = items.map(item => item.name);
+  // Return only the names of the items with is_wash = true
+  const washItems = items.filter(item => item.is_wash);
+  const washItemNames = washItems.map(item => item.name).join(", ");
+  const itemNamesString = itemNames.slice(0, 1).join(", ");
+  if (itemCount === 1) {
+    return washItemNames;
+  } else if (itemCount === 2) {
+    return `${washItemNames} og 1 anden`;
+  } else if (itemCount > 2) {
+    return `${washItemNames} og ${itemCount - 1} andre`;
+  }
+}
+
+const formatEntireItemsString = (items) => {
+  if (!items || items.length === 0) return 'Ingen ydelser';
+  return items.map(item => {
+    const qty = item.quantity ?? item.qty ?? item.amount ?? 1;
+    const name = item.name || 'Ukendt ydelse';
+    const qtyString = qty && qty !== 1 ? ` x${qty}` : '';
+    return `${name}${qtyString}`;
+  }).join(',' + '\n');
+};
+
+const getItemsPopperHtml = (items) => {
+  if (!items || items.length === 0) return '<em>Ingen ydelser</em>';
+  let html = '<div class="items-popper" style="max-width: 420px; max-height: 300px; overflow: auto;">';
+  html += '<ul class="menu-list">';
+  items.forEach((item) => {
+    const qty = item.quantity ?? item.qty ?? item.amount ?? 1;
+    const name = item.name || 'Ukendt ydelse';
+    const qtyHtml = qty && qty !== 1 ? ` <span class="has-text-grey">x${qty}</span>` : '';
+    const washTag = item.is_wash ? '<span class="tag is-info is-light ml-2">Vask</span>' : '';
+    html += `<li><span>${name}</span>${qtyHtml} ${washTag}</li>`;
+  });
+  html += '</ul>';
+  html += '</div>';
+  return html;
+};
+
+const onItemsMouseEnter = (event, booking) => {
+  if (!booking || !booking.items || booking.items.length === 0) return;
+  const content = getItemsPopperHtml(booking.items);
+  showPopper(popperBox('Ydelser', content), event.currentTarget || event.target);
+};
+
+const onItemsMouseLeave = () => {
+  removePopperIfOpen();
+};
+
+const onItemsClick = (event, booking) => {
+  if (!booking || !booking.items || booking.items.length === 0) return;
+  const content = getItemsPopperHtml(booking.items);
+  showPopper(popperBox('Ydelser', content), event.currentTarget || event.target);
+};
+
+const canEditBooking = (bookingobj) => {
+  // Admins can always edit
+  if (SessionUser.canAccessAdmin() && SessionUser.hasPermission('edit_bookings')) return true;
+  console.warn(bookingobj);
+  if (!!bookingobj.order_id) return false; // Only allow editing bookings without an order
+  if (SessionUser.hasPermission('edit_own_bookings')) return true;
+}
+
+const sortedList = computed(() => {
+  return (props.objects || []).slice().sort((a, b) => {
+    const aDate = new Date(a.datetime);
+    const bDate = new Date(b.datetime);
+    return aDate - bDate;
+  }).reverse();
+});
+
+const isFirstBookingOfDay = (booking) => {
+  if (!booking.datetime) return false;
+  const bookingDate = new Date(booking.datetime);
+  for (const otherBooking of sortedList.value) {
+    if (otherBooking.id === booking.id) {
+      break; // Reached the current booking
+    }
+    if (otherBooking.datetime) {
+      const otherBookingDate = new Date(otherBooking.datetime);
+      if (otherBookingDate.getFullYear() === bookingDate.getFullYear() &&
+          otherBookingDate.getMonth() === bookingDate.getMonth() &&
+          otherBookingDate.getDate() === bookingDate.getDate()) {
+        return false; // Found another booking on the same day before this one
+      }
+    }
+  }
+  return true;
+}
+
+/**
+ * Field visibility
+ */
+const fieldVisibility = reactive({
+  customer_number: SessionUser.canAccessAdmin()
+});
+
+const getColspan = () => {
+  let colspan = 8;
+  if (fieldVisibility.customer_number) colspan++;
+  return colspan;
+}
+
+// No pagination or filter handling here. This component is presentational only.
+
+</script>
+
+<template>
+  <div>
+    <ViewportResponsiveWrapper>
+      <template #desktop>
+        <div>
+          <table class="table is-fullwidth is-hoverable is-striped"
+                 style="table-layout: fixed;">
+            <tr>
+              <th>Dato</th>
+              <th v-show="fieldVisibility.customer_number">Kunde</th>
+              <th>Køretøjer</th>
+              <th>Afdeling</th>
+              <th>PO</th>
+              <th>Reference</th>
+              <th>Pickup</th>
+              <th>Ydelser</th>
+              <th><!-- Actions --></th>
+            </tr>
+            <template v-if="(objects || []).length === 0">
+              <tr>
+                <td :colspan="getColspan()" class="has-text-centered">Ingen bookinger fundet.</td>
+              </tr>
+            </template>
+            <template v-else>
+              <template v-for="booking in sortedList" :key="booking.id">
+              <tr v-if="isFirstBookingOfDay(booking)">
+                <td :colspan="getColspan()" class="has-text-left">
+                  <span class="has-text-grey">
+                    <i class="fas fa-calendar-day"></i>
+                  </span>
+                  <span class="has-text-grey ml-1">
+                    <!-- Human readable date (Today, Yesterday, etc.) -->
+                    {{
+                      (() => {
+                        const bookingDate = new Date(booking.datetime);
+                        const today = new Date();
+                        const yesterday = new Date();
+                        yesterday.setDate(today.getDate() - 1);
+                        if (bookingDate.toDateString() === today.toDateString()) {
+                          return 'I dag';
+                        } else if (bookingDate.toDateString() === yesterday.toDateString()) {
+                          return 'I går';
+                        } else {
+                          return bookingDate.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' });
+                        }
+                      })()
+                    }} - <!-- Number of bookings on the date -->{{ sortedList.filter((b) => {
+                      const bDate = new Date(b.datetime);
+                      const bookingDate = new Date(booking.datetime);
+                      return bDate.getFullYear() === bookingDate.getFullYear() &&
+                             bDate.getMonth() === bookingDate.getMonth() &&
+                             bDate.getDate() === bookingDate.getDate();
+                    }).length }} {{ sortedList.filter((b) => {
+                      const bDate = new Date(b.datetime);
+                      const bookingDate = new Date(booking.datetime);
+                      return bDate.getFullYear() === bookingDate.getFullYear() &&
+                             bDate.getMonth() === bookingDate.getMonth() &&
+                             bDate.getDate() === bookingDate.getDate();
+                    }).length === 1 ? SessionUser.objects.order_bookings.meta.labels.single.toLowerCase() : SessionUser.objects.order_bookings.meta.labels.multiple.toLowerCase() }}
+                  </span>
+                </td>
+              </tr>
+              <!-- Editable table row
+                <TableRowEditable :editFunction="SessionUser.objects.order_bookings.showEditObjectFieldForm" :rowData="booking" :columns="SessionUser.objects.order_bookings.columns" :reloadFunction="loadList">
+                </TableRowEditable>-->
+              <tr v-show="true">
+                <td>
+                  <p>
+                    <!-- Date -->
+                    <EditableTableColumn
+                        :theme="'simple'"
+                        :componentWrapper="'div'"
+                        :object="booking"
+                        :loadList="loadList"
+                        column="datetime"
+                        :parse-function="(value) => value ? `${value}` : 'Ingen dato valgt'"
+                        :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                        :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                    />
+                  </p>
+                </td>
+                <!-- Customer Number -->
+                <td v-show="fieldVisibility.customer_number">
+                  <p>
+                    <EditableTableColumn
+                        :componentWrapper="'div'"
+                        :object="booking"
+                        :loadList="loadList"
+                        column="customer_number"
+                        :parse-function="(value) => booking.customer_name ? `${booking.customer_name}` : 'Ukendt kunde'"
+                        :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                        :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                    />
+                  </p>
+                </td>
+                <!-- Vehicles -->
+                <td>
+                  <p>
+                    <EditableTableColumn
+                        :componentWrapper="'div'"
+                        :object="booking"
+                        :loadList="loadList"
+                        column="reg_1"
+                        :parse-function="(value) => value || 'Ingen registreret'"
+                        :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                        :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                    />
+                  </p>
+                  <p>
+                    <EditableTableColumn
+                        :componentWrapper="'div'"
+                        :object="booking"
+                        :loadList="loadList"
+                        column="reg_2"
+                        :parse-function="(value) => value || '-'"
+                        :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                        :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                    />
+                  </p>
+                </td>
+                <!-- Department -->
+                <EditableTableColumn
+                    :object="booking"
+                    :loadList="loadList"
+                    column="department"
+                    :parse-function="(value) => getDepartmentName(parseInt(booking.department))"
+                    :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                    :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                />
+                <!-- PO -->
+                <EditableTableColumn
+                    :object="booking"
+                    :loadList="loadList"
+                    column="po"
+                    :parse-function="(value) => value || '-'"
+                    :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                    :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                />
+                <!-- Reference -->
+                <EditableTableColumn
+                    :object="booking"
+                    :loadList="loadList"
+                    column="reference"
+                    :parse-function="(value) => value || '-'"
+                    :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                    :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                />
+                <!-- Pickup -->
+                <EditableTableColumn
+                    :object="booking"
+                    :loadList="loadList"
+                    column="pickup"
+                    :permissionCheckFunction="(bookingobj) => canEditBooking(booking)"
+                    :parse-function="(value) => value ? 'Ja' : 'Nej'"
+                    :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                />
+                <!-- Items -->
+                    <EditableTableColumn
+                        :object="booking"
+                        :loadList="loadList"
+                        :hoverText="formatEntireItemsString(booking.items)"
+                        :hoverHtml="true"
+                        column="items"
+                        :permissionCheckFunction="(bookingobj) => false"
+                        :parse-function="(value) => formatSummaryString(booking.items)"
+                        :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+                    >
+                      <template v-slot:hoverHtml>
+                        <div style="max-width: 420px; max-height: 300px; overflow: auto;" class="has-text-left">
+                          <ul class="menu-list">
+                            <li v-for="item in booking.items" :key="item.id">
+                              <span>{{ item.name }}</span>
+                              <span v-if="item.quantity && item.quantity !== 1" class="has-text-grey"> x{{ item.quantity }}</span>
+                              <span v-if="item.is_wash" class="tag is-info is-light ml-2">Vask</span>
+                            </li>
+                          </ul>
+                        </div>
+                      </template>
+                    </EditableTableColumn>
+                <!-- Actions -->
+                <td>
+                  <div class="buttons is-right">
+                    <button v-if="canEditBooking(booking) && !booking.order_id && SessionUser.canAccessAdmin()" class="button is-small is-warning" @click="SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(booking.id, loadList)">
+                      <span class="icon">
+                        <i class="fas fa-edit"></i>
+                      </span>
+                    </button>
+                    <button v-if="!!booking.order_id" class="button is-small is-success" disabled>
+                      <span class="icon">
+                        <i class="fas fa-check-circle"></i>
+                      </span>
+                    </button>
+                    <ActionSettingsWheelButton :order_booking_id="booking.id" :order_id="booking.order_id" :customer_number="booking.customer_number" :department_id="booking.department" :refresh-function="loadList" :reg_1="booking.reg_1" :reg_2="booking.reg_2" :icon="'fas fa-ellipsis-v'">
+                      <template #actions>
+                      </template>
+                    </ActionSettingsWheelButton>
+                  </div>
+                </td>
+              </tr>
+              </template>
+            </template>
+          </table>
+        </div>
+      </template>
+      <template #mobile>
+        <div class="columns is-multiline is-mobile">
+          <!-- Bookings -->
+          <div class="column is-full">
+            <div v-if="(objects || []).length === 0">
+              <p class="has-text-centered">Ingen bookinger fundet.</p>
+            </div>
+            <template v-else>
+              <div class="columns is-multiline is-mobile">
+                <template v-for="booking in sortedList" :key="booking.id">
+                  <!-- Date separator -->
+                  <div class="column is-full" v-if="isFirstBookingOfDay(booking)">
+                    <hr/>
+                    <strong>
+                      {{
+                        (() => {
+                          const bookingDate = new Date(booking.datetime);
+                          const today = new Date();
+                          const yesterday = new Date();
+                          yesterday.setDate(today.getDate() - 1);
+                          if (bookingDate.toDateString() === today.toDateString()) {
+                            return 'I dag';
+                          } else if (bookingDate.toDateString() === yesterday.toDateString()) {
+                            return 'I går';
+                          } else {
+                            return bookingDate.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' });
+                          }
+                        })()
+                      }}
+                      •
+                      {{ sortedList.filter((b) => {
+                        const bDate = new Date(b.datetime);
+                        const bookingDate = new Date(booking.datetime);
+                        return bDate.getFullYear() === bookingDate.getFullYear() &&
+                               bDate.getMonth() === bookingDate.getMonth() &&
+                               bDate.getDate() === bookingDate.getDate();
+                      }).length }} {{SessionUser.objects.order_bookings.meta.labels.multiple.toLowerCase()}}
+                    </strong>
+                    <hr/>
+                  </div>
+                  <div class="column is-full">
+                    <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :toggleable="true" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="false">
+                      <template v-slot:header>
+                        <div class="card-header-title is-flex is-justify-content-space-between is-align-items-center" style="width: 100%;">
+                          <div>
+                            <div><small>{{ booking.customer_name || 'Ukendt kunde' }}</small></div>
+                          </div>
+                        </div>
+                        <div class="is-pulled-right" style="width: fit-content">
+                          <div>
+                            <div class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center">
+                              <!-- Department tag and status icon -->
+                              <div class="column is-narrow has-text-right mb-2">
+                                <span class="tag is-light is-small mr-1">
+                                  <span class="icon">
+                                    <!-- Clock, when pending -->
+                                    <i class="fas fa-clock has-text-warning" v-if="!booking.order_id"></i>
+                                          <!-- Check, when completed -->
+                                    <i class="fas fa-check-circle has-text-success" v-else></i>
+                                  </span>
+                                  <small>
+                                    {{ getDepartmentName(parseInt(booking.department)) }}
+                                  </small>
+                                </span>
+                              </div>
+                              <!-- Edit button -->
+                              <div class="column is-12 has-text-right mb-2">
+                                <span class="buttons is-right mr-1">
+                                  <span class="button is-light is-danger is-small" @click="SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(booking.id, loadList)">
+                                    <span class="icon">
+                                      <i class="fas fa-trash-alt fa-lg"></i>
+                                    </span>
+                                  </span>
+                                  <span class="button is-warning is-small" v-if="canEditBooking(booking) && !booking.order_id && SessionUser.canAccessAdmin()" @click="SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(booking.id, loadList)">
+                                    <span class="icon">
+                                      <i class="fas fa-edit fa-lg"></i>
+                                    </span>
+                                  </span>
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-slot:default>
+                        <div class="card-content">
+                        <div><small>{{ booking.reg_1 || 'Ingen registreret' }} {{ booking.reg_2 ? ', ' + booking.reg_2 : '' }}</small></div>
+                        <div>
+                          <div class="columns is-mobile is-multiline">
+                            <div class="column is-narrow">
+                                  <span
+                                      @mouseenter="onItemsMouseEnter($event, booking)"
+                                      @mouseleave="onItemsMouseLeave"
+                                      @click="onItemsClick($event, booking)"
+                                      style="cursor: pointer; text-overflow: ellipsis; overflow: hidden;"
+                                      class="mr-1"
+                                  >
+                                    <small class="is-size-7">{{ formatSummaryString(booking.items) }}</small>
+                                  </span>
+                            </div>
+                            <div class="column is-fixed-bottom is-12">
+                              <strong><small class="is-size-7" >{{ new Date(booking.datetime).toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }) }}</small></strong>
+                            </div>
+                          </div>
+                        </div>
+                        </div>
+                      </template>
+                      <template v-slot:content>
+                        <div>
+                          <p v-show="!!booking.po"><strong>PO:</strong> {{ booking.po || '-' }}</p>
+                          <p v-show="!!booking.reference"><strong>Reference:</strong> {{ booking.reference || '-' }}</p>
+                          <strong>Ydelser:</strong>
+                          <ul>
+                            <li v-for="item in booking.items" :key="item.id">
+                              {{ item.name }} <span v-if="item.quantity && item.quantity !== 1">
+                              ({{ item.quantity }} stk)
+                              </span>
+                            </li>
+                          </ul>
+                          <hr/>
+                          <ActionSettingsWheelButton :order_booking_id="booking.id" :order_id="booking.order_id" :customer_number="booking.customer_number" :department_id="booking.department" :refresh-function="loadList" :reg_1="booking.reg_1" :reg_2="booking.reg_2" :displayActionsDirectly="true">
+                            <template #actions/>
+                          </ActionSettingsWheelButton>
+                        </div>
+                      </template>
+                    </WhiteBoxCard>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </ViewportResponsiveWrapper>
+  </div>
+</template>
+
+<style scoped>
+.has-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/userDashboard/profile/UserProfile.vue b/src/views/dashboards/userDashboard/profile/UserProfile.vue
index ad89e090..84a9b4d6 100644
--- a/src/views/dashboards/userDashboard/profile/UserProfile.vue
+++ b/src/views/dashboards/userDashboard/profile/UserProfile.vue
@@ -11,6 +11,7 @@ import MicrosoftAuthenticationBox
   from "@/views/dashboards/userDashboard/profile/displays/MicrosoftAuthentication/MicrosoftAuthenticationBox.vue";
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import { parseError, removeError, addError } from "@/components/request/HandleGlobalError.vue";
+import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
 
 const isLoading = ref(false);
 /** Email */
@@ -290,6 +291,121 @@ const onClickChangePassword = async () => {
   });
 }
 
+const onClickSavePhoneNumber = async () => {
+  // Show the phone number and country code input dialog
+  await Swal.fire({
+    title: 'Indtast telefonnummer',
+    html:
+        '<input id="swal-input1" class="swal2-input" type="number" placeholder="Telefonnummer">' +
+        '<input id="swal-input2" class="swal2-input" type="number" placeholder="Landekode (f.eks. 45 for Danmark)">',
+    focusConfirm: false,
+    showCancelButton: true,
+    preConfirm: () => {
+      const phoneNumber = Swal.getPopup().querySelector('#swal-input1').value;
+      const countryCode = Swal.getPopup().querySelector('#swal-input2').value;
+      // Simple validation
+      if (!phoneNumber) {
+        Swal.showValidationMessage('Indtast venligst et telefonnummer');
+        return;
+      }
+      if (!countryCode) {
+        Swal.showValidationMessage('Indtast venligst en landekode');
+        return;
+      }
+      isLoading.value = true;
+      Swal.showLoading();
+      return { phoneNumber, countryCode };
+    },
+    allowOutsideClick: () => !Swal.isLoading(),
+    showLoaderOnConfirm: true,
+  }).then((result) => {
+    if (result.isConfirmed) {
+      const { phoneNumber, countryCode } = result.value;
+      // Send the change phone number request
+      SessionUser.request(
+          '/account/security/change-phone-number',
+          'POST',
+          {
+            phone_number: parseInt(phoneNumber),
+            country_code: parseInt(countryCode),
+          }
+      ).then((response) => {
+        if (response.status === 200) {
+          Swal.fire({
+            title: 'Telefonnummer gemt',
+            text: 'Dit telefonnummer er blevet gemt.',
+            icon: 'success',
+          });
+          SessionUser.getSessionData();
+        } else {
+          // Show validation errors
+          Swal.fire({
+            title: 'Fejl',
+            text: 'Der opstod en fejl under gemme af telefonnummeret.',
+            icon: 'error',
+          });
+        }
+      }).catch((error) => {
+        Swal.fire({
+          title: 'Fejl',
+          text: SessionUser.functions.parseErrorMessage(error),
+          icon: 'error',
+        });
+      }).finally(() => {
+        isLoading.value = false;
+      });
+    }
+  })
+}
+
+const onClickSaveWashCertificateEmail = async () => {
+  // Show the wash certificate email input dialog
+  await Swal.fire({
+    title: 'Indtast e-mailadresse til booking bekræftelser',
+    input: 'text',
+    inputLabel: 'E-mailadresse',
+    inputPlaceholder: 'E-mailadresse',
+    showCancelButton: true,
+    preConfirm: (value) => {
+      if (!value) {
+        Swal.showValidationMessage('Indtast venligst en e-mailadresse');
+        return;
+      }
+      // Validate the email address
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        Swal.showValidationMessage('Indtast venligst en gyldig e-mailadresse');
+        return;
+      }
+      isLoading.value = true;
+      Swal.showLoading();
+      return value;
+    },
+    allowOutsideClick: () => !Swal.isLoading(),
+    showLoaderOnConfirm: true,
+  }).then((result) => {
+    if (result.isConfirmed) {
+      const email = result.value;
+      // Send the change wash certificate email request
+      SessionUser.user.notifications.setWashCertificateEmail(email).then(() => {
+        Swal.fire({
+          title: 'E-mailadresse gemt',
+          text: 'Din e-mailadresse til booking bekræftelser er blevet gemt.',
+          icon: 'success',
+        });
+      }).catch((error) => {
+        Swal.fire({
+          title: 'Fejl',
+          text: SessionUser.functions.parseErrorMessage(error),
+          icon: 'error',
+        });
+      }).finally(() => {
+        isLoading.value = false;
+      });
+    }
+  })
+}
+
 
 
 </script>
@@ -300,7 +416,7 @@ const onClickChangePassword = async () => {
       <!-- Invoicing -->
       <ConfigurationCategory
           class="mt-2"
-          module="Brugerprofil"
+          :module="SessionUser.functions.device.isMobile() ? `` : `Brugerprofil`"
           title="Fakturaoplysninger"
           description="Dine fakturaoplysninger"
           icon="fas fa-user"
@@ -323,7 +439,7 @@ const onClickChangePassword = async () => {
       <!-- Security -->
       <ConfigurationCategory
           class="mt-2"
-          module="Brugerprofil"
+          :module="SessionUser.functions.device.isMobile() ? `` : `Brugerprofil`"
           title="Sikkerhed"
           description="Dine sikkerhedsindstillinger"
           icon="fas fa-lock"
@@ -331,7 +447,7 @@ const onClickChangePassword = async () => {
         <!-- E-mail -->
         <ConfigurationInput
             :title="SessionUser.objects.global.language.email"
-            description="Vi bruger denne e-mail til at nulstille din adgangskode"
+            description="Vi bruger denne e-mail til at nulstille din adgangskode, fremsende vaskecertifikater og andre vigtige oplysninger."
             v-bind:value="SessionUser.user.email"
             :disabled="true"
         />
@@ -349,33 +465,132 @@ const onClickChangePassword = async () => {
         <ConfigurationInput
             :title="SessionUser.objects.global.language.phone_number"
             description="Telefonnummer"
-            v-bind:value="SessionUser.user.phone.phone"
+            v-bind:value="SessionUser.user.phone.number"
             :disabled="true"
         />
-        <!-- Change password -->
-        <button
-            class="button is-link is-small mt-2"
-            @click="onClickChangePassword"
-            :disabled="isLoading"
-        >
+        <div class="buttons">
+          <!-- Change phone number and country code -->
+          <button
+              class="button is-link is-small mt-2"
+              @click="onClickSavePhoneNumber"
+              :disabled="isLoading"
+          >
+            <span>
+              <i class="fas fa-edit"></i>
+              <span class="ml-2">Rediger telefonnummer</span>
+            </span>
+          </button>
+          <!-- Change password -->
+          <button
+              class="button is-link is-small mt-2"
+              @click="onClickChangePassword"
+              :disabled="isLoading"
+          >
           <span>
             <i class="fas fa-key"></i>
             <span class="ml-2">Skift adgangskode</span>
           </span>
-        </button>
+          </button>
+          <!-- Sign out -->
+          <button
+              class="button is-danger is-small mt-2"
+              @click="SessionUser.functions.showConfirmLogoutDialog()"
+              :disabled="isLoading"
+          >
+          <span>
+            <i class="fas fa-sign-out-alt"></i>
+            <span class="ml-2">Log ud</span>
+          </span>
+          </button>
+        </div>
       </ConfigurationCategory>
+      <!-- Notifications - email notifications -->
+      <ConfigurationCategory
+          class="mt-2"
+          :module="SessionUser.functions.device.isMobile() ? `` : `Brugerprofil`"
+          title="Notifikationer"
+          subtitle="E-mail"
+          description="Dine notifikationsindstillinger"
+          icon="fas fa-bell"
+      >
+        <!-- Email to booking confirmation -->
+        <ConfigurationInput
+            :title="'E-mail til bookinger'"
+            description="Den e-mailadresse, der modtager booking bekræftelser og vaskecertifikater."
+            v-bind:value="SessionUser.user.notifications.wash_certificate_email"
+            :disabled="true"
+        />
+        <!-- Change email to booking confirmation -->
+        <button
+            class="button is-link is-small mt-2"
+            @click="onClickSaveWashCertificateEmail"
+            :disabled="isLoading"
+        >
+          <span>
+            <i class="fas fa-edit"></i>
+            <span class="ml-2">Rediger e-mail til booking bekræftelse</span>
+          </span>
+        </button>
+        <hr class="my-4"/>
+        <!-- Enable/disable email notifications -->
+        <ConfigurationSwitch
+            :title="'E-mail notifikationer'"
+            description="Modtag e-mails med bookingbekræftelser og vaskecertifikater."
+            v-bind:value="SessionUser.user.notifications.email_notifications_enabled.value"
+            :on-switch="(value) => SessionUser.user.notifications.setEmailNotificationsEnabled(value)"
+        />
+      </ConfigurationCategory>
+      <!-- Notifications - SMS notifications -->
+      <ConfigurationCategory
+          class="mt-2"
+          :module="SessionUser.functions.device.isMobile() ? `` : `Brugerprofil`"
+          title="Notifikationer"
+          subtitle="SMS"
+          description="Dine notifikationsindstillinger"
+          icon="fas fa-sms"
+      >
+        <!-- Phone number for SMS notifications -->
+        <ConfigurationInput
+            :title="'Telefonnummer til SMS notifikationer'"
+            description="Det telefonnummer, der modtager SMS notifikationer."
+            v-bind:value="SessionUser.user.phone.number"
+            :disabled="true"
+        />
+        <!-- Change phone number for SMS notifications -->
+        <button
+            class="button is-link is-small mt-2"
+            @click="onClickSavePhoneNumber"
+            :disabled="isLoading"
+        >
+          <span>
+            <i class="fas fa-edit"></i>
+            <span class="ml-2">Rediger telefonnummer til SMS notifikationer</span>
+          </span>
+        </button>
+        <hr class="my-4"/>
+        <!-- Enable/disable SMS notifications -->
+        <ConfigurationSwitch
+            :title="'SMS notifikationer'"
+            description="Modtag SMS notifikationer ved forskellige begivenheder."
+            v-bind:value="SessionUser.user.notifications.sms_notifications_enabled.value"
+            :on-switch="(value) => SessionUser.user.notifications.setSmsNotificationsEnabled(value)"
+        />
+      </ConfigurationCategory>
+      <template v-if="false">
       <!-- Microsoft -->
       <ConfigurationCategory
           class="mt-2"
-          module="Brugerprofil"
+          :module="SessionUser.functions.device.isMobile() ? `` : `Brugerprofil`"
           title="Microsoft"
           description="Dine Microsoft indstillinger"
           icon="fab fa-microsoft"
       >
         <MicrosoftAuthenticationBox/>
       </ConfigurationCategory>
+      </template>
       <!-- Default department -->
       <ConfigurationCategory
+          v-show="false"
           v-if="SessionUser.user.customer_number.value > 0"
           class="mt-2"
           module="Brugerprofil"
diff --git a/src/views/dashboards/userDashboard/userDashboardNavigation.vue b/src/views/dashboards/userDashboard/userDashboardNavigation.vue
index 082046c2..5bf4ea52 100644
--- a/src/views/dashboards/userDashboard/userDashboardNavigation.vue
+++ b/src/views/dashboards/userDashboard/userDashboardNavigation.vue
@@ -7,10 +7,10 @@ const router = useRouter();
 
 /** Define the tabs */
 const tabs = [
-  { name: 'Hjem', path: '/user' },
-  { name: 'Mine vaske', path: '/user/orders/' },
-  { name: 'Mine køretøjer', path: '/user/vehicles/' },
-  { name: 'Mine bookinger', path: '/user/bookings/' },
+  //{ name: 'Hjem', path: '/user' },
+  //{ name: 'Mine vaske', path: '/user/orders/' },
+  //{ name: 'Mine køretøjer', path: '/user/vehicles/' },
+  //{ name: 'Mine bookinger', path: '/user/bookings/' },
 ];
 
 // Get the current path
diff --git a/src/views/dashboards/userDashboard/wash/MyWash.vue b/src/views/dashboards/userDashboard/wash/MyWash.vue
new file mode 100644
index 00000000..5e9cdf10
--- /dev/null
+++ b/src/views/dashboards/userDashboard/wash/MyWash.vue
@@ -0,0 +1,133 @@
+<script setup>
+import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import PosDepartmentStepMobile1Location
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
+
+import { getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
+import {onMounted, ref, watch} from "vue";
+const guestDepartments = ref([]);
+onMounted(async () => {
+  guestDepartments.value = await getDepartmentsGuest();
+});
+
+const nearestDepartment = ref(null);
+
+import { locations } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { BLoading } from "buefy";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+
+// Watch for changes in the locations data
+watch(() => guestDepartments.value, (newValue) => {
+  evaluateLocationDepartments(locations.location.value);
+});
+watch(() => locations.location.value, (newValue) => {
+  evaluateLocationDepartments(newValue);
+});
+
+const evaluateLocationDepartments = (newValue) => {
+  // Get the departments
+  let currentNearestDepartment = {
+    id: null, // Department ID
+    distance: Infinity // Distance in km
+  }
+  // Find the nearest department
+  guestDepartments.value.forEach(department => {
+    if (!newValue?.coords) return;
+    const from = {latitude: newValue.coords.latitude, longitude: newValue.coords.longitude};
+    const to = {latitude: department.latitude, longitude: department.longitude};
+    const distance = locations.getDistance(from, to);
+    if (distance < currentNearestDepartment.distance) {
+      currentNearestDepartment = {
+        id: department.id,
+        distance: distance,
+        name: department.name,
+        address: department.address
+      };
+    }
+  });
+  if (currentNearestDepartment.id) {
+    nearestDepartment.value = currentNearestDepartment;
+  }
+};
+
+const orderDepartmentsByDistance = (departmentsList) => {
+  if (!locations.location.value?.coords) return departmentsList;
+  return departmentsList.slice().sort((a, b) => {
+    const distanceA = locations.getDistance(
+      { latitude: locations.location.value.coords.latitude, longitude: locations.location.value.coords.longitude },
+      { latitude: a.latitude, longitude: a.longitude }
+    );
+    const distanceB = locations.getDistance(
+      { latitude: locations.location.value.coords.latitude, longitude: locations.location.value.coords.longitude },
+      { latitude: b.latitude, longitude: b.longitude }
+    );
+    return distanceA - distanceB;
+  });
+};
+
+</script>
+
+<template>
+  <UserDashboardPageWrapper title="Start Wash" subtitle="Vælg et af dine køretøjer for at starte en vask">
+    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments"/>
+    <div class="columns is-multiline">
+      <div class="column is-12">
+        <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title has-text-link has-text-weight-bold">
+             {{ nearestDepartment ? nearestDepartment.name : 'Indlæser...' }}
+            </div>
+            <div class="card-header-icon has-text-link">
+              <i class="fas fa-map-marker-alt"></i>
+            </div>
+          </template>
+          <template #content>
+            Den nærmeste afdeling er {{ nearestDepartment ? nearestDepartment.name : '-' }}, som ligger ca. {{ nearestDepartment ? nearestDepartment.distance.toFixed(2) : '-'}} km væk fra din nuværende placering.
+            <BLoading :is-full-page="false" :model-value="!nearestDepartment" :can-cancel="true"/>
+          </template>
+          <template #footer>
+            <div class="card-footer-item">
+              <router-link v-if="nearestDepartment" to="/user/wash/start" class="button is-link is-fullwidth">
+                Start vask
+              </router-link>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+      <template v-for="department in orderDepartmentsByDistance(guestDepartments)" :key="department.id">
+        <div class="column is-12-mobile is-6-tablet is-4-desktop" v-if="nearestDepartment && department.id !== nearestDepartment.id">
+          <WhiteBoxCard :force-state="true" :defaultOpen="false" :toggleable="false" :loading="false">
+            <template #header>
+              <div class="card-header-title has-text-grey has-text-weight-bold">
+                {{ department.name }}
+              </div>
+              <div class="card-header-icon has-text-grey">
+                <span>
+                {{ locations.getDistance(
+                  { latitude: locations.location.value?.coords.latitude, longitude: locations.location.value?.coords.longitude },
+                  { latitude: department.latitude, longitude: department.longitude }
+                ).toFixed(2) }} km</span>
+                <span class="icon">
+                  <i class="fas fa-building"></i>
+                </span>
+              </div>
+            </template>
+            <template #footer>
+              <div class="card-footer-item">
+                <router-link :to="{ name: 'pos', params: { departmentId: department.id } }" class="button is-light is-fullwidth">
+                  <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
+                  <span>{{department.address}}</span>
+                </router-link>
+              </div>
+            </template>
+          </WhiteBoxCard>
+        </div>
+      </template>
+      </div>
+    <!--{{SessionUser.user.customer_number.value}}-->
+  </UserDashboardPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
new file mode 100644
index 00000000..b18c18f0
--- /dev/null
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -0,0 +1,997 @@
+<script setup lang="ts">
+import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import PosDepartmentStepMobile1Location
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
+import {locations} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import {
+  BAutocomplete,
+  BButton,
+  BField,
+  BIcon,
+  BInput,
+  BMessage,
+  BRadioButton,
+  BSelect,
+  BSkeleton,
+  BStepItem,
+  BSteps
+} from "buefy";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+
+import {getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
+import ScrollableSteps from "@/components/displays/steps/ScrollableSteps.vue";
+import { setShowFooterInContent } from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
+
+const guestDepartments = ref([]);
+
+const licensePlateInput = ref(null);
+const customerNumberInput = ref(null);
+const nearestDepartment = ref(null);
+const forceNearestDepartmentEvaluationId = ref(0); // When this is set, force nearest department to be the one with this ID
+const lastDepartmentFetchTime = ref(null); // Used to make sure we don't fetch too often
+const fetchIntervalMs = 10 * 1000; // 10 seconds
+
+onMounted(async () => {
+  setShowFooterInContent(false);
+  guestDepartments.value = await getDepartmentsGuest({include_lanes: true});
+  // Initialize customer number input
+  customerNumberInput.value = SessionUser.user.customer_number.value || '';
+  // Fetch the vehicles for the customer
+  await fetchCustomerVehicles();
+  // Fetch vehicle types
+  await fetchVehicleTypes();
+  // Load any in-progress wash from localStorage
+  const savedProgress = loadProgress();
+  if (savedProgress) {
+    washInProgress.value = savedProgress.washInProgress;
+    washLaneId.value = savedProgress.washLaneId;
+    washStartTime.value = savedProgress.washStartTime;
+    currentStep.value = savedProgress.currentStep;
+    licensePlateInput.value = savedProgress.licensePlateInput;
+    vehicleTypeSelect.value = savedProgress.vehicleTypeSelect;
+    radioWashType.value = savedProgress.radioWashType;
+    radioLaneOption.value = savedProgress.radioLaneOption;
+    customerNumberInput.value = savedProgress.customerNumberInput;
+    forceNearestDepartmentEvaluationId.value = savedProgress.nearestDepartmentId;
+    // Re-evaluate nearest department based on saved ID
+    evaluateLocationDepartments(locations.location.value);
+    // If wash is in progress, start the timer
+    if (washInProgress.value) {
+      startElapsedTimer();
+    }
+  }
+  // Save progress on unload
+  window.addEventListener('beforeunload', saveProgress);
+});
+// Refresh departments every 10 seconds if needed
+setInterval(async () => {
+  const currentTime = Date.now();
+  if (!lastDepartmentFetchTime.value || (currentTime - lastDepartmentFetchTime.value) >= fetchIntervalMs) {
+    guestDepartments.value = await getDepartmentsGuest({include_lanes: true});
+    lastDepartmentFetchTime.value = currentTime;
+  }
+}, fetchIntervalMs);
+
+// Watch for changes in the locations data
+watch(() => guestDepartments.value, (newValue) => {
+  evaluateLocationDepartments(locations.location.value);
+});
+watch(() => locations.location.value, (newValue) => {
+  evaluateLocationDepartments(newValue);
+});
+watch(() => SessionUser.user.customer_number.value, (newValue) => {
+  customerNumberInput.value = newValue;
+});
+
+const evaluateLocationDepartments = (newValue) => {
+  // Get the departments
+  let currentNearestDepartment = {
+    id: null, // Department ID
+    distance: Infinity // Distance in km
+  }
+  // Find the nearest department
+  guestDepartments.value.forEach(department => {
+    if (!newValue?.coords) return;
+    const from = {latitude: newValue.coords.latitude, longitude: newValue.coords.longitude};
+    const to = {latitude: department.latitude, longitude: department.longitude};
+    const distance = locations.getDistance(from, to);
+    if (distance < currentNearestDepartment.distance) {
+      currentNearestDepartment = {
+        id: department.id,
+        distance: distance,
+        name: department.name,
+        address: department.address,
+        lanes: department.lanes || [],
+      };
+    }
+  });
+  if (currentNearestDepartment.id) {
+    if (forceNearestDepartmentEvaluationId.value) {
+      // If forced, find that department
+      const forcedDepartment = guestDepartments.value.find(dept => dept.id === forceNearestDepartmentEvaluationId.value);
+      if (forcedDepartment) {
+        nearestDepartment.value = {
+          id: forcedDepartment.id,
+          name: forcedDepartment.name,
+          address: forcedDepartment.address,
+          lanes: forcedDepartment.lanes || [],
+        };
+      }
+    } else {
+      nearestDepartment.value = currentNearestDepartment;
+    }
+  }
+};
+
+const isLaneAvailable = (lane) => {
+  return lane.status === 'AVAILABLE'
+};
+
+const washInProgress = ref(false);
+const washLaneId = ref<null | number>(null);
+const washStartTime = ref<number | null>(null);
+// Store total duration when a wash completes
+const completedDurationMs = ref<number | null>(null);
+// Reactive "now" to drive the timer UI
+const now = ref<number>(Date.now());
+let timerInterval: ReturnType<typeof setInterval> | null = null;
+
+// --- Persistence (localStorage) for in-progress washes ---
+const STORAGE_KEY = 'mywash_progress_v1';
+
+const saveProgress = () => {
+  try {
+    if (!washInProgress.value) {
+      // Only persist when a wash is actually in progress
+      localStorage.removeItem(STORAGE_KEY);
+      return;
+    }
+    const payload = {
+      washInProgress: washInProgress.value,
+      washLaneId: washLaneId.value,
+      washStartTime: washStartTime.value,
+      currentStep: currentStep.value,
+      licensePlateInput: licensePlateInput.value,
+      vehicleTypeSelect: vehicleTypeSelect.value,
+      radioWashType: radioWashType.value,
+      radioLaneOption: radioLaneOption.value,
+      customerNumberInput: customerNumberInput.value,
+      nearestDepartmentId: nearestDepartment.value?.id || null,
+      savedAt: Date.now(),
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
+  } catch (e) {
+    console.warn('Failed to save wash progress:', e);
+  }
+};
+
+const clearProgress = () => {
+  try { localStorage.removeItem(STORAGE_KEY); } catch {}
+};
+
+const loadProgress = () => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const data = JSON.parse(raw);
+    return data;
+  } catch (e) {
+    console.warn('Failed to load wash progress:', e);
+    return null;
+  }
+};
+
+const startElapsedTimer = () => {
+  // ensure only one interval
+  if (timerInterval) clearInterval(timerInterval);
+  timerInterval = setInterval(() => {
+    now.value = Date.now();
+    // periodically persist while in progress
+    if (washInProgress.value) saveProgress();
+  }, 1000);
+};
+
+const stopElapsedTimer = () => {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+};
+
+const timeSinceWashStart = computed(() => {
+  if (washInProgress.value && washStartTime.value) {
+    return now.value - washStartTime.value;
+  }
+  return 0;
+});
+
+// Helpers for a cleaner in-progress display
+const pad2 = (n: number) => n.toString().padStart(2, '0');
+const formattedElapsed = computed(() => {
+  const totalSeconds = Math.floor(timeSinceWashStart.value / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  // If the elapsed time is negative, return 00:00
+  if (minutes < 0 || seconds < 0) {
+    return '00:00';
+  }
+  // Format as MM:SS
+  return `${pad2(minutes)}:${pad2(seconds)}`;
+});
+const humanElapsed = computed(() => {
+  const totalSeconds = Math.floor(timeSinceWashStart.value / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes} minutter og ${seconds} sekunder`;
+});
+
+// Current lane (for nicer labeling than just ID)
+const currentLane = computed(() => {
+  const lanes = nearestDepartment.value?.lanes || [];
+  return lanes.find((l: any) => l.id === washLaneId.value) || null;
+});
+
+const onStartWash = (laneId, licensePlate, customerNumber) => {
+  if (!nearestDepartment.value) {
+    alert('Ingen afdeling valgt.');
+    return;
+  }
+  if (!licensePlate || licensePlate.trim() === '') {
+    alert('Indtast venligst et registreringsnummer.');
+    return;
+  }
+  if (!parseInt(customerNumber)) {
+    alert('Indtast venligst et kundenummer.');
+    return;
+  }
+  // Create the request payload
+  const payload = {
+    lane_id: laneId,
+    license_plate: licensePlate.trim().toUpperCase(),
+    customer_number: parseInt(customerNumber),
+    command: 'START',
+  }
+  // Send the request to start the wash
+  SessionUser.request('/modules/self-serve/lane/command', 'post', payload)
+    .then(response => {
+      if (response.data.success) {
+        // Wash started successfully
+        washLaneId.value = laneId;
+        // Start time tracking
+        washStartTime.value = Date.now();
+        // Reset any previous completed duration
+        completedDurationMs.value = null;
+        washInProgress.value = true;
+        startElapsedTimer();
+        saveProgress();
+        // Go to the wash in progress step
+        currentStep.value = steps.WASH_IN_PROGRESS;
+        // Optionally, you can redirect the user or reset the form here
+        licensePlateInput.value = '';
+      } else {
+        alert('Fejl ved start af vask: ' + (response.data.message || 'Ukendt fejl.'));
+      }
+    })
+    .catch(error => {
+      console.error('Error starting wash:', error);
+      alert('Der opstod en fejl ved start af vasken. Prøv igen senere.');
+    });
+};
+
+const onStopWash = (laneId) => {
+  if (!nearestDepartment.value) {
+    alert('Ingen afdeling valgt.');
+    return;
+  }
+  // Create the request payload
+  const payload = {
+    lane_id: laneId,
+    command: 'STOP',
+  }
+  // Send the request to stop the wash
+  SessionUser.request('/modules/self-serve/lane/command', 'post', payload)
+    .then(response => {
+      if (response.data.success) {
+        //alert('Vask stoppet succesfuldt!');
+        // Capture total duration before clearing state
+        completedDurationMs.value = washStartTime.value ? (now.value - washStartTime.value) : 0;
+        washInProgress.value = false;
+        washLaneId.value = null;
+        stopElapsedTimer();
+        clearProgress();
+      } else {
+        alert('Fejl ved stop af vask: ' + (response.data.message || 'Ukendt fejl.'));
+      }
+    })
+    .catch(error => {
+      console.error('Error stopping wash:', error);
+      alert('Der opstod en fejl ved stop af vasken. Prøv igen senere.');
+    });
+};
+
+onUnmounted(() => {
+  stopElapsedTimer();
+  // Best-effort save on unmount (navigation)
+  saveProgress();
+  window.removeEventListener('beforeunload', saveProgress);
+  setShowFooterInContent(true);
+});
+
+const getWashStatus = (laneId) => {
+  if (!nearestDepartment.value) {
+    alert('Ingen afdeling valgt.');
+    return;
+  }
+  // Create the request payload
+  const payload = {
+    lane_id: laneId,
+  }
+  // Send the request to get the wash status
+  SessionUser.request('/modules/self-serve/lane/status', 'post', payload)
+    .then(response => {
+      if (response.data.success) {
+        alert('Vaskestatus: ' + (response.data.status || 'Ukendt status.'));
+      } else {
+        alert('Fejl ved hentning af vaskestatus: ' + (response.data.message || 'Ukendt fejl.'));
+      }
+    })
+    .catch(error => {
+      console.error('Error getting wash status:', error);
+      alert('Der opstod en fejl ved hentning af vaskestatus. Prøv igen senere.');
+    });
+};
+
+/**
+ * Close action on the Completed step.
+ * Resets the local flow state and returns to the first step.
+ */
+const onCloseCompleted = () => {
+  // Stop any running timer just in case
+  stopElapsedTimer();
+  // Reset flow state
+  washInProgress.value = false;
+  washLaneId.value = null;
+  washStartTime.value = null;
+  completedDurationMs.value = null;
+  // Reset inputs
+  licensePlateInput.value = '';
+  // Keep selected lane if still available, otherwise it will auto-pick via watcher
+  // Return to first step
+  currentStep.value = steps.VEHICLE;
+  clearProgress();
+};
+
+/**
+ * Steps:
+ * 1. Get location
+ * 2. Customer number (if needed)
+ * 3. Vehicle (license plate)
+ * 4. Select wash lane
+ * 6. Show wash in progress
+ */
+const steps = {
+  VEHICLE: 0,
+  SELECT_LANE: 1,
+  WASH_IN_PROGRESS: 2,
+  COMPLETED: 3,
+}
+const clickableSteps = {
+  [steps.VEHICLE]: () => {
+    const customerNumberValid = !!(customerNumberInput.value && parseInt(customerNumberInput.value));
+    const licensePlateValid = !!(licensePlateInput.value && licensePlateInput.value.trim() !== '');
+    return customerNumberValid && licensePlateValid && !!vehicleTypeSelect.value;
+  },
+  [steps.SELECT_LANE]: () => {
+    return !!(licensePlateInput.value && licensePlateInput.value.trim() !== '') && !!vehicleTypeSelect.value;
+  },
+  [steps.WASH_IN_PROGRESS]: () => {
+    return false;
+  },
+}
+const currentStep = ref(steps.VEHICLE);
+
+/**
+ * Machine or manual start option
+ */
+const radioWashType = ref('Manual');
+/**
+ * Lane option
+ */
+const radioLaneOption = ref('Any');
+/**
+ * Check if machine is available for the selected lane
+ */
+const isMachineAvailable = (laneId) => {
+  const lane = nearestDepartment.value?.lanes.find(l => l.id === laneId);
+  if (!lane) return false;
+  return lane?.machine_available === true;
+}
+
+/**
+ * Is the next button disabled
+ */
+const isNextButtonDisabled = () => {
+  if (currentStep.value === steps.VEHICLE) {
+    return !clickableSteps[steps.VEHICLE]();
+  }
+  if (currentStep.value === steps.SELECT_LANE) {
+    // Check if a lane is selected and is available
+    const selectedLane = nearestDepartment.value?.lanes.find(lane => lane.id === radioLaneOption.value);
+    if (!selectedLane || !isLaneAvailable(selectedLane)) {
+      return true;
+    }
+    // If machine wash is selected, check if machine is available
+    return radioWashType.value === 'Machine' && !isMachineAvailable(radioLaneOption.value);
+
+  }
+  return false;
+}
+/**
+ * Customer vehicles
+ */
+const customerVehicles = ref([]);
+const isCustomerVehiclesLoading = ref(false);
+const fetchCustomerVehicles = async () => {
+  isCustomerVehiclesLoading.value = true;
+  try {
+    const response = await SessionUser.objects.vehicles.get.all();
+    customerVehicles.value = response || [];
+  } catch (error) {
+    console.error('Error fetching customer vehicles:', error);
+  } finally {
+    isCustomerVehiclesLoading.value = false;
+  }
+};
+/**
+ * Type of vehicle
+ */
+const vehicleTypeSelect = ref(null);
+const vehicleTypes = ref([]);
+const fetchVehicleTypes = async () => {
+  try {
+    const response = await SessionUser.objects.vehicles.columns.type.options();
+    vehicleTypes.value = response || [];
+  } catch (error) {
+    console.error('Error fetching vehicle types:', error);
+  }
+};
+const doesUserVehicleExist = (licensePlate: string) => {
+  if (!licensePlate || licensePlate.trim() === '') return false;
+  return customerVehicles.value.some(vehicle => vehicle.reg.toUpperCase() === licensePlate.trim().toUpperCase());
+};
+watch(() => licensePlateInput.value, (newValue) => {
+  if (newValue && doesUserVehicleExist(newValue)) {
+    const vehicle = customerVehicles.value.find(vehicle => vehicle.reg.toUpperCase() === newValue.trim().toUpperCase());
+    if (vehicle) {
+      vehicleTypeSelect.value = vehicle.type || null;
+    }
+  } else {
+    vehicleTypeSelect.value = null;
+  }
+});
+watch(() => SessionUser.user.customer_number.value, (newValue) => {
+  customerNumberInput.value = newValue;
+});
+
+// Persist when any critical state changes during an active wash
+watch([
+  () => washInProgress.value,
+  () => washLaneId.value,
+  () => washStartTime.value,
+  () => currentStep.value,
+  () => radioLaneOption.value,
+  () => radioWashType.value,
+  () => licensePlateInput.value,
+  () => vehicleTypeSelect.value,
+  () => customerNumberInput.value,
+], () => {
+  if (washInProgress.value) saveProgress();
+});
+/**
+ * If the lane isn't set, and there's an available lane, select it
+ */
+watch(() => nearestDepartment.value, (newValue) => {
+  if (newValue && newValue.lanes && newValue.lanes.length > 0) {
+    // If the wash lane option is not set or is invalid, select the first available lane
+    if (!radioLaneOption.value || !newValue.lanes.find(lane => lane.id === radioLaneOption.value)) {
+      const availableLane = newValue.lanes.find(lane => isLaneAvailable(lane));
+      if (availableLane) {
+        radioLaneOption.value = availableLane.id;
+      }
+    }
+  }
+});
+
+/**
+ * Guided wash flow
+ */
+const guidedWashFlow = ref(true);
+type guidedWashFlowBrushColor = 'is-black' | 'is-info' | 'is-link' | 'is-danger' | 'is-warning' | 'is-white';
+type guidedWashFlowBrushes = {
+  label: string,
+  description: string,
+  warning?: string,
+  color: guidedWashFlowBrushColor,
+  position: 'left' | 'right',
+}[];
+type guidedWashFlowStep = {
+  title: string,
+  warning?: string,
+  content: string,
+  brushes: guidedWashFlowBrushes,
+}
+const guidedWashFlowSteps: guidedWashFlowStep[] = [
+  {
+    title: 'Højtryks forvask',
+    content: 'Spul med højtryk for at løsne skidt.',
+    warning: '',
+    brushes: [
+      {
+        label: 'Sort slange',
+        description: 'til højtryks forvask.',
+        warning: 'Min. afstand til bil 20cm.',
+        color: 'is-black',
+        position: 'right',
+      },
+    ],
+  },
+  {
+    title: 'Sæbe-pålægning',
+    content: 'Dæk bilen ind i sæbe.',
+    brushes: [
+      {
+        label: 'Blå børste',
+        description: 'til at dække bilen i sæbe.',
+        color: 'is-info',
+        position: 'left',
+      },
+    ],
+  },
+  {
+    title: 'Børstevask',
+    content: 'Børst for at fjerne resterende snavs.',
+    brushes: [
+      {
+        label: 'Blå børste',
+        description: 'til lakerede overflader.',
+        color: 'is-link',
+        position: 'left',
+      },
+      {
+        label: 'Rød børste',
+        description: 'til undervogn og fælge.',
+        color: 'is-danger',
+        position: 'right',
+      },
+    ],
+  },
+  {
+    title: 'Højtryks skylning',
+    content: 'Spul med vand indtil sæben er væk.',
+    brushes: [
+      {
+        label: 'Sort slange',
+        description: 'til at spule sæben af.',
+        color: 'is-black',
+        position: 'right',
+      },
+    ],
+  },
+  {
+    title: 'Voks pålægning',
+    content: 'Pålæg voks på førerhuset.',
+    brushes: [
+      {
+        label: 'Gul slange',
+        description: 'til voks pålægning.',
+        color: 'is-warning',
+        position: 'left',
+      },
+    ],
+  },
+  {
+    title: 'Spot Free skylning',
+    content: 'Skyl hurtigt førerhuset med Spot Free for at undgå pletter.',
+    brushes: [
+      {
+        label: 'Hvid slange',
+        description: 'til Spot Free skylning.',
+        color: 'is-white',
+        position: 'right',
+      },
+    ],
+  }
+];
+const currentGuidedWashStep = ref(0);
+const toggleGuidedWashFlow = () => {
+  guidedWashFlow.value = !guidedWashFlow.value;
+};
+const nextGuidedWashStep = () => {
+  if (currentGuidedWashStep.value < guidedWashFlowSteps.length - 1) {
+    currentGuidedWashStep.value += 1;
+  }
+};
+const previousGuidedWashStep = () => {
+  if (currentGuidedWashStep.value > 0) {
+    currentGuidedWashStep.value -= 1;
+  }
+}
+
+/**
+ * Watch for changes in the steps and update the localStorage accordingly.
+ */
+watch(() => currentStep.value, () => {
+  saveProgress();
+});
+</script>
+
+<template>
+  <UserDashboardPageWrapper title="Start Wash" subtitle="Vælg et af dine køretøjer for at starte en vask">
+    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments"/>
+    <div class="columns is-multiline">
+      <!-- Nearest department display -->
+      <div class="column is-12" v-show="false">
+        <WhiteBoxCard :force-state="true" :defaultOpen="false" :toggleable="false" :loading="false">
+          <template #header>
+            <div class="card-header-title has-text-link has-text-weight-bold">
+              {{ nearestDepartment ? nearestDepartment.name : 'Indlæser...' }}
+            </div>
+            <div class="card-header-icon has-text-link">
+              <i class="fas fa-map-marker-alt"></i>
+            </div>
+          </template>
+        </WhiteBoxCard>
+      </div>
+    <!-- Steps -->
+      <div class="column is-12">
+        <section>
+            <h3 class="title is-4 has-text-centered mb-4">
+              <b-skeleton v-if="!nearestDepartment" :width="300" :height="24" class="mb-2 is-centered"/>
+              <span v-else>
+              {{ nearestDepartment ? nearestDepartment.name : 'Indlæser afdeling...' }}
+              </span>
+            </h3>
+            <h5 class="subtitle is-6 has-text-centered mb-4">
+              <b-skeleton v-if="!nearestDepartment" :width="200" :height="20" class="mb-4 is-centered"/>
+              <span v-else>
+                {{ nearestDepartment.address }}
+              </span>
+            </h5>
+          <b-steps type="is-link" size="is-small" v-model="currentStep" :has-navigation="true">
+            <!-- Vehicle -->
+            <b-step-item label="Køretøj" iconPack="fas" icon="car-side" :step="steps.VEHICLE" :clickable="clickableSteps[steps.VEHICLE]()">
+              <h1 class="title has-text-centered">Køretøj</h1>
+              <!-- Customer number (if needed) -->
+                <b-field label="Kundenummer" v-if="!SessionUser.user.customer_number.value || !customerNumberInput">
+                  <b-input v-model="customerNumberInput" placeholder="Indtast kundenummer"></b-input>
+                </b-field>
+              <b-field label="Registreringsnummer">
+                <b-autocomplete
+                    v-model="licensePlateInput"
+                    :data="customerVehicles.map(vehicle => vehicle.reg).filter(reg => reg && reg.trim() !== '' && reg.toUpperCase() !== (licensePlateInput || '').toUpperCase())"
+                    placeholder="Indtast registreringsnummer"
+                    :debounce="300"
+                    :min-length="1"
+                    :filter="(option, query) => option.toLowerCase().includes(query.toLowerCase())"
+                    icon-pack="fas"
+                    icon="car-side"
+                    clearable
+                    @select="licensePlateInput = licensePlateInput ? licensePlateInput.toUpperCase() : ''"
+                    @input="licensePlateInput = licensePlateInput ? licensePlateInput.toUpperCase() : ''"
+                    :loading="customerVehicles.length === 0 && isCustomerVehiclesLoading"
+                    :selectableHeader="true"
+                    @select-header="() => {licensePlateInput = licensePlateInput.toUpperCase();}"
+                >
+                  <template #header>
+                    <template v-if="doesUserVehicleExist(licensePlateInput)">
+                      Vælg <b>{{ licensePlateInput }}</b> fra dine køretøjer
+                    </template>
+                    <template v-else>
+                      Tilføj <b>{{ licensePlateInput }}</b> som nyt køretøj
+                    </template>
+                  </template>
+                  <template #empty>Ingen køretøjer fundet</template>
+                </b-autocomplete>
+              </b-field>
+              <!-- Type of vehicle -->
+              <b-field label="Type af køretøj">
+                <b-select v-model="vehicleTypeSelect" placeholder="Vælg type af køretøj" expanded style="max-height: 200px; overflow-y: auto;" :loading="vehicleTypes.length === 0">
+                  <template v-if="vehicleTypes.length === 0">
+                    <option disabled>Indlæser typer...</option>
+                  </template>
+                  <template v-for="type in vehicleTypes" :key="type.id">
+                    <option :value="type.id">
+                      {{ type.name }}
+                    </option>
+                  </template>
+                </b-select>
+              </b-field>
+            </b-step-item>
+            <!-- Optional services -->
+            <b-step-item label="Start vask" iconPack="fas" icon="droplet" :step="steps.SELECT_LANE" :clickable="clickableSteps[steps.SELECT_LANE]()">
+              <h1 class="title has-text-centered">Start vask</h1>
+              <b-field label="Vaskebane">
+                <div class="columns is-multiline is-mobile" :class="{ 'is-centered': nearestDepartment && (nearestDepartment.lanes || []).length >= 2 }">
+                  <template v-for="lane in nearestDepartment?.lanes || []" :key="lane">
+                    <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+                      <!-- Radio button for lane selection -->
+                      <BRadioButton
+                          v-model="radioLaneOption"
+                          :native-value="lane.id"
+                          type="is-link"
+                      >
+                        <span>
+                          <span>
+                          Bane {{ lane.name }}<br>
+                          </span>
+                          <span v-if="!isLaneAvailable(lane)">
+                            <small>
+                              <BIcon icon="times-circle" type="is-danger" pack="fas" class="mr-1"/>
+                              Optaget
+                            </small>
+                          </span>
+                          <span v-else>
+                            <small>
+                              <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
+                              Tilgængelig
+                            </small>
+                          </span>
+                        </span>
+                      </BRadioButton>
+                    </div>
+                      <button v-show="false"
+                          class="button is-fullwidth"
+                          :class="isLaneAvailable(lane) ? 'is-link' : 'is-danger'"
+                          :disabled="!isLaneAvailable(lane)"
+                          @click="() => onStartWash(lane.id, licensePlateInput, customerNumberInput)"
+                      >
+                      </button>
+                  </template>
+                  <!-- If no lanes are available -->
+                  <div class="column is-12" v-if="nearestDepartment && (!nearestDepartment.lanes || nearestDepartment.lanes.length === 0)">
+                    <b-message type="is-warning" aria-close-label="Luk besked">
+                      Ingen vaskebaner tilgængelige for selvvask i <b>{{nearestDepartment ? nearestDepartment.name : 'denne'}}</b> afdeling.
+                    </b-message>
+                  </div>
+                </div>
+              </b-field>
+              <!-- Machine or manual start option -->
+              <b-field label="Maskine eller manuel vask">
+                <div class="columns is-mobile is-centered is-multiline">
+                  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+                    <b-radio-button v-model="radioWashType" native-value="Manual" type="is-link">
+                      <span>
+                          <span>
+                          Manuel<br/>
+                          </span>
+                          <small>
+                            <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
+                            Tilgængelig
+                          </small>
+                        </span>
+                    </b-radio-button>
+                  </div>
+                  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+                    <b-radio-button v-model="radioWashType" native-value="Machine" type="is-link" :disabled="!isMachineAvailable(radioLaneOption)">
+                      <span>
+                          <span>
+                          Maskine<br/>
+                          </span>
+                          <span v-if="!isMachineAvailable(radioLaneOption)">
+                            <small>
+                              <BIcon icon="times-circle" type="is-danger" pack="fas" class="mr-1"/>
+                              Utilgængelig
+                            </small>
+                          </span>
+                          <span v-else>
+                            <small>
+                              <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
+                              Tilgængelig
+                            </small>
+                          </span>
+                        </span>
+                    </b-radio-button>
+                  </div>
+                </div>
+              </b-field>
+            </b-step-item>
+            <!-- Wash -->
+            <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()">
+              <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
+                <h1 class="title has-text-centered">Vask i gang</h1>
+                <h2 class="subtitle has-text-centered">
+                  <strong>{{ formattedElapsed }}</strong>
+                </h2>
+              </div>
+              <template v-if="guidedWashFlow">
+                <ScrollableSteps :maxHeight="'100%'">
+                  <template v-slot:header>
+                    <div class="level is-mobile">
+                      <div class="level-left">
+                        <div class="level-item">
+                          <h3 class="title is-6">Følg de 6 trin for det bedste resultat:</h3>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-slot:steps>
+                    <template v-for="(step, index) in guidedWashFlowSteps" :key="index">
+                      <section class="my-2">
+                        <b-field :label="`${index + 1}. ${step.title}`">
+                          <div class="content">
+                            <!-- Content & Brushes -->
+                            <div class="is-block has-background-light p-3" style="border-radius: 4px;">
+                              <!-- Content -->
+                              <template v-if="step.content">
+                                <p>{{ step.content }}</p>
+                              </template>
+                              <!-- Brushes -->
+                              <template v-for="(brush, bIndex) in step.brushes" :key="bIndex">
+                                <p><strong>{{ brush.label }}</strong> {{ brush.description }}</p>
+                                <p v-if="brush.warning" class="has-text-danger"><strong>Advarsel:</strong> {{ brush.warning }}</p>
+                              </template>
+                            </div>
+                          </div>
+                        </b-field>
+                      </section>
+                    </template>
+                  </template>
+                </ScrollableSteps>
+                <b-field label="Vasketrin" v-show="false">
+                  <b-steps type="is-link" size="is-small" v-model="currentGuidedWashStep">
+                    <b-step-item
+                        v-for="(step, index) in guidedWashFlowSteps"
+                        :key="index"
+                        :label="currentGuidedWashStep === index ? step.title : ''"
+                        :icon-pack="'fas'"
+                        :icon="index === currentGuidedWashStep ? 'brush' : 'soap'"
+                        :type="index === currentGuidedWashStep ? 'is-link' : 'is-light'"
+                        :step="index"
+                    >
+                      <h3 class="title is-5 has-text-centered">{{ step.title }}</h3>
+                      <!-- Warning -->
+                      <div v-if="step.warning" class="notification is-warning is-light has-text-centered">
+                        <span class="icon">
+                          <i class="fas fa-exclamation-triangle fa-lg"></i>
+                        </span>
+                        <span class="ml-2"><strong>{{ step.warning }}</strong></span>
+                      </div>
+                      <!-- Brushes -->
+                      <div class="columns is-centered">
+                        <div
+                            class="column is-narrow"
+                            v-for="(brush, bIndex) in step.brushes"
+                            :key="bIndex"
+                        >
+                          <div :class="['tag', 'is-medium', brush.color, 'mx-2', 'mb-0', 'mt-2']" style="display: flex; align-items: center; justify-content: center;">
+                            <span class="icon is-large">
+                              <i class="fas fa-droplet fa-lg"></i>
+                            </span>
+                            <span class="ml-1"><b>{{ brush.label }}</b></span>
+                          </div>
+                          <div class="is-block has-background-light p-2 mx-2" style="border-radius: 4px;">
+                            <p class="has-text-centered mt-1">{{ brush.description }}</p>
+                          </div>
+                          <div v-show="brush.warning"
+                               :class="['tag', 'is-medium', 'is-warning', 'mx-2', 'mb-0', 'mt-0']"
+                               style="display: flex; align-items: center; justify-content: center; border-top-left-radius: 0; border-top-right-radius: 0;">
+                            <span class="icon">
+                              <i class="fas fa-exclamation-triangle fa-lg"></i>
+                            </span>
+                            <span><strong>{{ brush.warning }}</strong></span>
+                          </div>
+                        </div>
+                      </div>
+                      <p class="has-text-centered">{{ step.content }}</p>
+                      <div class="buttons is-centered">
+                        <b-button
+                            type="is-link is-light"
+                            icon-pack="fas"
+                            icon-left="arrow-left"
+                            :disabled="currentGuidedWashStep === 0"
+                            @click="previousGuidedWashStep"
+                        >Forrige</b-button>
+                        <b-button
+                            type="is-link"
+                            icon-pack="fas"
+                            icon-right="arrow-right"
+                            :disabled="currentGuidedWashStep === guidedWashFlowSteps.length - 1"
+                            @click="nextGuidedWashStep"
+                        >Næste</b-button>
+                      </div>
+                    </b-step-item>
+                  </b-steps>
+                </b-field>
+              </template>
+            </b-step-item>
+            <!-- Completed -->
+            <b-step-item label="Færdig" iconPack="fas" icon="check-circle" :step="steps.COMPLETED">
+              <h1 class="title has-text-centered">Vask færdig</h1>
+              <p class="has-text-centered">
+                Din vask er nu færdig! Tak fordi du brugte vores selvbetjeningsvask.
+              </p>
+              <p class="has-text-centered" v-if="completedDurationMs !== null">
+                <strong>
+                  Samlet tid: {{ Math.floor(completedDurationMs / 60000) }} minutter og {{ Math.floor((completedDurationMs % 60000) / 1000) }} sekunder
+                </strong>
+              </p>
+              <p class="has-text-centered">
+                Vi håber, at du er tilfreds med resultatet. Hvis du har brug for yderligere assistance, er du velkommen til at kontakte vores personale.
+              </p>
+            </b-step-item>
+            <!-- Navigation buttons -->
+            <template #navigation="{ previous, next }">
+              <!--{{ currentStep }}-->
+              <div class="buttons is-centered">
+                <b-button
+                    v-show="currentStep !== steps.WASH_IN_PROGRESS && currentStep !== steps.COMPLETED"
+                    type="is-link is-light"
+                    icon-pack="fas"
+                    icon-left="arrow-left"
+                    :disabled="previous.disabled || currentStep === steps.COMPLETED || currentStep === steps.WASH_IN_PROGRESS"
+                    @click.prevent="previous.action"
+                >
+                  Forrige
+                </b-button>
+                <!-- Default next button for all steps except Completed -->
+                <b-button
+                    v-if="currentStep !== steps.COMPLETED"
+                    v-show="!(currentStep === steps.SELECT_LANE || currentStep === steps.WASH_IN_PROGRESS)"
+                    type="is-link"
+                    icon-pack="fas"
+                    icon-right="arrow-right"
+                    :disabled="next.disabled || isNextButtonDisabled()"
+                    @click.prevent="next.action"
+                >
+                  Næste
+                </b-button>
+                <!-- Close button on Completed step -->
+                <b-button
+                    v-if="currentStep === steps.COMPLETED"
+                    type="is-link"
+                    icon-pack="fas"
+                    icon-left="times"
+                    @click.prevent="onCloseCompleted"
+                >
+                  Luk
+                </b-button>
+                <!-- Start wash button -->
+                <b-button
+                    v-show="currentStep === steps.SELECT_LANE"
+                    type="is-link"
+                    icon-pack="fas"
+                    icon-right="arrow-right"
+                    :disabled="isNextButtonDisabled()"
+                    @click="() => onStartWash(radioLaneOption, licensePlateInput, customerNumberInput)"
+                >Bekræft</b-button>
+                <!-- Help button during wash -->
+                <b-button
+                    v-show="currentStep === steps.WASH_IN_PROGRESS"
+                    type="is-link is-light"
+                    icon-pack="fas"
+                    icon-right="info-circle"
+                    @click.prevent="SessionUser.functions.contact.onClickCallPhoneNumber()"
+                    >Assistance</b-button>
+                <!-- Complete button -->
+                <b-button
+                    v-show="currentStep === steps.WASH_IN_PROGRESS"
+                    type="is-link"
+                    icon-pack="fas"
+                    icon-right="check"
+                    @click.prevent="onStopWash(washLaneId); currentStep = steps.COMPLETED"
+                >Færdig</b-button>
+              </div>
+            </template>
+          </b-steps>
+        </section>
+      </div>
+    </div>
+    <!--{{SessionUser.user.customer_number.value}}-->
+  </UserDashboardPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/guest/book/GuestBookExteriorWash.vue b/src/views/guest/book/GuestBookExteriorWash.vue
index 6658f1bc..08254b0e 100644
--- a/src/views/guest/book/GuestBookExteriorWash.vue
+++ b/src/views/guest/book/GuestBookExteriorWash.vue
@@ -6,6 +6,10 @@ import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrap
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import GuestDashboardPageWrapper from "@/views/guest/GuestDashboardPageWrapper.vue";
 import FormDisplay from "@/components/displays/FormDisplay.vue";
+import MyBookingsBook from "@/views/dashboards/userDashboard/bookings/MyBookingsBook.vue";
+import { getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
+import { onMounted} from "vue";
+onMounted(() => {getDepartmentsGuest()});
 </script>
 
 <template>
@@ -13,7 +17,7 @@ import FormDisplay from "@/components/displays/FormDisplay.vue";
         title="Book Vask"
         subtitle="Book Vask"
     >
-      <FormDisplay :form_identifier="'BOOK_WASH'" :validator_options="{validateCustomerNumber: {locked: false}}"/>
+      <MyBookingsBook/>
     </GuestDashboardPageWrapper>
 </template>
 
diff --git a/vite.config.js b/vite.config.js
index 3f0cc04f..a9b28c94 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,7 +25,20 @@ export default defineConfig(({ mode }) => {
     process.env.COMMIT_HASH = commit
     process.env.APP_VERSION = version
     process.env.IS_DEV = !isProd ? 'true' : 'false'
-
+    // If the build is a production build, update the server with the new version
+    if (isProd) {
+        console.log('Updating server with new version...')
+        const token = process.env.SERVER_UPDATE_TOKEN
+        if (!token) {
+            console.warn('SERVER_UPDATE_TOKEN is not set. Skipping server update.')
+        } else {
+            // Run GET request to update version endpoint
+            const url = `https://api.truckwash.dk/worker/update-version?version=${commit}`
+            const bearer = `Bearer ${token}`
+            console.log(`Calling URL: ${url}`)
+            execSync(`curl -X GET "${url}" -H "Authorization: ${bearer}"`)
+        }
+    }
     // Keep a relative base for static hosting; align manifest with base
     const base = '/'
     const pwaScope = base === './' ? '.' : base
@@ -104,9 +117,9 @@ export default defineConfig(({ mode }) => {
                     ]
                 },
                 manifest: {
-                    name: 'Pleno',
-                    short_name: 'Pleno',
-                    description: 'Access your Pleno accounts and transactions from anywhere.',
+                    name: 'Truck Wash',
+                    short_name: 'Truck Wash',
+                    description: 'Access your Truck Wash accounts and transactions from anywhere.',
                     theme_color: '#063651',
                     background_color: '#0787bb',
                     // Use relative scope when base is relative