diff --git a/src/components/displays/buttons/ColorIndicator.vue b/src/components/displays/buttons/ColorIndicator.vue
index 1c1bd92c..dc56876d 100644
--- a/src/components/displays/buttons/ColorIndicator.vue
+++ b/src/components/displays/buttons/ColorIndicator.vue
@@ -324,4 +324,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.no-underline-text {
+  text-decoration: none !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/order/orderItemsTable.vue b/src/components/displays/department/pos/order/orderItemsTable.vue
index 7ec28ded..40a68eba 100644
--- a/src/components/displays/department/pos/order/orderItemsTable.vue
+++ b/src/components/displays/department/pos/order/orderItemsTable.vue
@@ -1,5 +1,41 @@
 <script setup>
-defineProps(['orderItems', 'isLoading']);
+const props = defineProps({
+  orderItems: {
+    type: Array,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  taxPercentage: {
+    type: Number,
+    default: 0,
+  },
+  paid: {
+    type: Boolean,
+    default: false,
+  },
+  showPaymentStatus: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const calculateTax = (price) => {
+  if (!price || !props.taxPercentage) {
+    return 0;
+  }
+  return price * (props.taxPercentage / 100);
+};
+const calculateTotalPrice = (price, quantity) => {
+  if (!price || !quantity) {
+    return 0;
+  }
+  const totalPrice = price * quantity;
+  const tax = calculateTax(totalPrice, props.taxPercentage);
+  return totalPrice + tax;
+};
 </script>
 
 <template>
@@ -14,13 +50,13 @@ defineProps(['orderItems', 'isLoading']);
     </tr>
     </thead>
     <tbody>
-    <tr v-if="isLoading" v-for="n in 5" :key="n">
+    <tr v-if="props.isLoading" v-for="n in 5" :key="n">
       <!-- Skeleton-lines 5 rows -->
       <td v-for="n in 5" :key="n">
         <div class="skeleton-lines"><div style="width: 100%;"></div></div>
       </td>
     </tr>
-    <tr v-for="orderItem in orderItems" :key="orderItem.id" v-else>
+    <tr v-for="orderItem in props.orderItems" :key="orderItem.id" v-else>
       <td>{{ orderItem.product.name }}</td>
       <td>{{ orderItem.notes }}</td>
       <td>{{ orderItem.reference }}</td>
@@ -32,13 +68,38 @@ defineProps(['orderItems', 'isLoading']);
     </tr>
     </tbody>
     <tfoot>
-    <tr>
-      <td colspan="4">Total</td>
-      <td style="text-align: right;" v-if="isLoading">
+    <!-- Tax -->
+    <tr v-if="props.taxPercentage > 0">
+      <td colspan="4">Tax ({{ props.taxPercentage }}%)</td>
+      <td style="text-align: right;" v-if="props.isLoading">
         <!-- Skeleton-lines 1 row -->
         <div class="skeleton-lines"><div style="width: 100%;"></div></div>
       </td>
-      <td style="text-align: right;" v-else>{{ orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) }} DKK</td>
+      <td style="text-align: right;" v-else>{{ calculateTax(props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0)) }} DKK</td>
+    </tr>
+    <tr v-if="props.taxPercentage > 0">
+      <td colspan="4">Subtotal</td>
+      <td style="text-align: right;" v-if="props.isLoading">
+        <!-- Skeleton-lines 1 row -->
+        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
+      </td>
+      <td style="text-align: right;" v-else>{{ props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) }} DKK</td>
+    </tr>
+    <tr>
+      <td colspan="4">Total</td>
+      <td style="text-align: right;" v-if="props.isLoading">
+        <!-- Skeleton-lines 1 row -->
+        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
+      </td>
+      <td style="text-align: right;" v-else>{{ props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) + calculateTax(props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0)) }} DKK</td>
+    </tr>
+    <tr v-if="props.showPaymentStatus">
+      <td colspan="4">Payment Status</td>
+      <td style="text-align: right;" v-if="props.isLoading">
+        <!-- Skeleton-lines 1 row -->
+        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
+      </td>
+      <td style="text-align: right;" :class="props.paid ? 'has-text-success' : 'has-text-danger'" v-else>{{ props.paid ? 'Paid' : 'Unpaid' }}</td>
     </tr>
     </tfoot>
   </table>
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index 5d3d3c45..4e0c86b1 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -96,7 +96,7 @@ export const getSessionData = async () => {
           SessionUser.economicData.customerNumber.value = response.data.data.economic_customer.customerNumber;
           SessionUser.economicData.name.value = response.data.data.economic_customer.name;
           // Set the display name to the e-conomic name if it's empty
-          if (SessionUser.user.display_name.value === null) {
+          if (SessionUser.user.display_name.value === null || SessionUser.user.display_name.value === 'Unnamed') {
             SessionUser.user.display_name.value = response.data.data.economic_customer.name;
           }
           SessionUser.economicData.address.value = response.data.data.economic_customer.address;
diff --git a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
index 3bc41532..e9c1b561 100644
--- a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
+++ b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue
@@ -4,8 +4,8 @@ import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/Depa
 import PosDepartmentMVP from "@/components/displays/department/pos/PosDepartmentMVP.vue";
 import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosNavigation.vue";
 import { useRouter } from "vue-router";
-import {ref} from "vue";
-import { selectCustomer, setOrderId, customer_name, deleteOrder, showDeleteOrderDialog, invoiceAllOrdersIndividually, invoiceUsingStripe, setProductsCategory, order_items } from "@/components/shop/POSDepartmentProcess.vue";
+import {onMounted, ref, watch} from "vue";
+import { selectCustomer, setOrderId, customer_name, deleteOrder, showDeleteOrderDialog, invoiceAllOrdersIndividually, invoiceUsingStripe, setProductsCategory, order_items, customer_id, invoiceCollectionId } from "@/components/shop/POSDepartmentProcess.vue";
 import { getOrder, editOrderNotes } from "@/components/shop/Orders.vue";
 import { getOrderItems } from "@/components/shop/OrdersItems.vue";
 import { showEditOrderNotesForm } from "@/components/forms/superUser/editOrderNotesForm.vue";
@@ -16,9 +16,11 @@ import ExportOrderToDraftButton from "@/components/search/economic/exportOrderTo
 import ExportOrderToInvoiceButton from "@/components/search/economic/exportOrderToInvoiceButton.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { Colors } from '@/ThemeConfig.vue'
+
 import RemoveOrderDraftInvoiceButton from "@/components/search/economic/removeOrderDraftInvoiceButton.vue";
 const router = useRouter();
-import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import { getDepartmentName, getDepartments } from "@/components/pagination/departmentTabs.vue";
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDepartmentStep2.vue";
 import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
@@ -30,6 +32,8 @@ import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import PrintInvoiceFromOrderItems from "@/components/forms/department/pos/buttons/PrintInvoiceFromOrderItems.vue";
+import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";
+import MyOrder from "@/views/dashboards/userDashboard/orders/MyOrder.vue";
 
 // Get the id from the route
 const orderId = ref(router.currentRoute.value.params.orderId);
@@ -79,6 +83,7 @@ const loadOrder = async () => {
   }
 };
 
+
 const isInvoicedWithStripe = () => {
   // If the stripe module is anything else than an empty object, then the order is invoiced
   if (Object.keys(stripeModule.value).length !== 0) {
@@ -156,11 +161,122 @@ const isBookedWithEconomic = () => {
 const isCompleted = () => {
   return order.value.completed_at !== null;
 };
+
+const isPaymentMethodStripe = ref(() => {
+  return customer_id.value === 999;
+});
+
+const invoiceCollection = ref(null);
+const getInvoiceCollection = async () => {
+  if (!invoiceCollectionId.value) {
+    return;
+  }
+  const response = await SessionUser.objects.collectedOrderInvoices.get.single(invoiceCollectionId.value);
+  invoiceCollection.value = response;
+}
+const isPaymentCollectionLoaded = ref(() => {
+  return invoiceCollection.value !== null;
+});
+
+const getInvoiceCollectionValue = () => {
+  return invoiceCollection.value;
+};
+
+watch(() => invoiceCollectionId.value, async () => {
+  await getInvoiceCollection();
+});
+
+const getStripePaymentStatus = () => {
+  let result = {
+    color_class: 'has-text-dark',
+    text: 'Ikke betalt',
+    classes: [],
+    amount: null,
+    amount_capturable: null,
+    amount_received: null,
+  }
+  if (!invoiceCollection.value) {
+    result.text = SessionUser.objects.global.language.loading
+    return result;
+  }
+  let tmp_amounts = {
+    amount: (getInvoiceCollectionValue().stripe.amount ?? null),
+    amount_capturable: (getInvoiceCollectionValue().stripe.amount_capturable ?? null),
+    amount_received: (getInvoiceCollectionValue().stripe.amount_received ?? null),
+  };
+  function isNotNull(value) {
+    return value !== null;
+  }
+  function isPaid() {
+    return (
+        tmp_amounts.amount === tmp_amounts.amount_received &&
+        tmp_amounts.amount_capturable === 0 &&
+        isNotNull(tmp_amounts.amount) &&
+        isNotNull(tmp_amounts.amount_received)
+    );
+  }
+  function isPartiallyPaid() {
+    return (
+        tmp_amounts.amount > tmp_amounts.amount_received &&
+        tmp_amounts.amount_capturable > 0 &&
+        isNotNull(tmp_amounts.amount) &&
+        isNotNull(tmp_amounts.amount_received)
+    );
+  }
+  function isNotPaid() {
+    return (
+        tmp_amounts.amount > 0 &&
+        tmp_amounts.amount_received === 0 &&
+        tmp_amounts.amount_capturable > 0 &&
+        isNotNull(tmp_amounts.amount) &&
+        isNotNull(tmp_amounts.amount_received)
+    );
+  }
+
+  if (isPaid()) {
+    result.color_class = 'has-text-success';
+    result.text = 'Betalt';
+  } else if (isPartiallyPaid()) {
+    result.color_class = 'has-text-warning';
+    result.text = 'Delvist betalt';
+  } else if (isNotPaid()) {
+    result.color_class = 'has-text-danger';
+    result.text = 'Ikke betalt';
+  }
+  else {
+    result.color_class = 'has-text-dark';
+    result.text = 'Ukendt';
+  }
+
+  // Add the amounts to the result
+  result = {
+    ...result,
+    amount: tmp_amounts.amount,
+    amount_capturable: tmp_amounts.amount_capturable,
+    amount_received: tmp_amounts.amount_received,
+  };
+  return result;
+};
+
+const isShowingPrintReceipt = ref(false);
+
+getDepartments();
+
+
+const openPrintDialog = () => {
+  isShowingPrintReceipt.value = true;
+  // Use the window.print() function to open the print dialog
+  setTimeout(() => {
+    window.print();
+    isShowingPrintReceipt.value = false;
+  }, 500);
+};
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
     <DepartmentDashboardPageWrapper
+      v-show="!isShowingPrintReceipt"
       title="Kassesystem"
       subtitle="Transaktion"
       >
@@ -184,6 +300,62 @@ const isCompleted = () => {
               <div class="tag is-success" v-if="isStripeInvoicePaid()"> Betalt </div>
               <div class="tag is-warning" v-else> {{ getStripeInvoiceStatus() }} </div>
             </div>
+            <div v-else-if="isPaymentMethodStripe()">
+              <div class="tag">
+                <ColorIndicator
+                    v-bind:label="getStripePaymentStatus()"
+                    v-bind:color_class="getStripePaymentStatus().color_class"
+                    v-bind:is_loading="!isPaymentCollectionLoaded()"
+                    v-bind:dropdown_content="{
+                      title: 'Betalings status',
+                      content: [
+                        {
+                          text: 'Betalings status',
+                          action: () => {},
+                          classes: ['has-text-grey'],
+                          button: true,
+                          button_classes: ['no-underline-text', 'is-text', ...[getStripePaymentStatus().color_class]],
+                          v_centered: true,
+                          button_text: getStripePaymentStatus().text,
+                        },
+                        ...(getStripePaymentStatus().amount_received > 0 ? [
+                          {
+                            text: 'Beløb modtaget',
+                            action: () => {},
+                            classes: ['has-text-grey'],
+                            button: true,
+                            button_classes: ['no-underline-text', 'has-text-grey', 'is-text'],
+                            v_centered: true,
+                            button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount_received / 100),
+                          },
+                        ] : []),
+                        ...(getStripePaymentStatus().amount_capturable > 0 ? [
+                            {
+                              text: 'Beløb reserveret',
+                              action: () => {},
+                              classes: ['has-text-grey'],
+                              button: true,
+                              button_classes: ['no-underline-text', 'is-text', ...[(getStripePaymentStatus().amount_capturable <= 0 ? 'has-text-grey' : 'has-text-warning')]],
+                              v_centered: true,
+                              button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount_capturable / 100),
+                            },
+                        ] : []),
+                        ...(getStripePaymentStatus().amount - getStripePaymentStatus().amount_received > 0 ? [
+                            {
+                              text: 'Skyldig beløb',
+                              action: () => {},
+                              classes: ['has-text-grey'],
+                              button: true,
+                              button_classes: ['no-underline-text', 'is-text', ...[(getStripePaymentStatus().amount - getStripePaymentStatus().amount_received) <= 0 ? 'has-text-grey' : 'has-text-danger']],
+                              v_centered: true,
+                              button_text: SessionUser.functions.currency.toLocal(getStripePaymentStatus().amount / 100 - getStripePaymentStatus().amount_received / 100),
+                            },
+                        ] : []),
+                      ]
+                    }"
+                />
+              </div>
+            </div>
             <div v-else-if="economicModule.invoice_id">
               <div class="tag is-dark"> Faktura {{ economicModule.invoice_id }} </div>
             </div>
@@ -458,15 +630,76 @@ const isCompleted = () => {
             <span class="icon"><i class="fas fa-file-invoice"></i></span>
             <span>Hent faktura</span>
           </button> -->
-          <!--<PrintInvoiceFromOrderItems v-bind:orderItems="order_items" tax_percentage="25" v-bind:paid="isStripeInvoicePaid()" v-bind:order_id="orderId" /> -->
+          <!-- Print invoice button -->
+          <button class="button is-dark is-fullwidth" @click="isShowingPrintReceipt = !isShowingPrintReceipt; openPrintDialog()">
+            <span class="icon"><i class="fas fa-print"></i></span>
+            <span>Print kvittering</span>
+          </button>
         </div>
       </div>
     </div>
+
+      <!-- Test -->
+
     </notFoundFallBackPageWrapper>
     </DepartmentDashboardPageWrapper>
+    <div v-show="isShowingPrintReceipt">
+      <!-- Image -->
+      <div class="has-text-centered py-6 keep-bg-during-print" :style="{'background-color': Colors.menus.parentBackgroundColor}">
+        <img src="@/assets/branding/truckwash-banner-white-compressed.png" alt="Truck Wash Logo" style="max-width: 100%; max-height: 200px;"/>
+      </div>
+      <!-- Order details -->
+      <div class="box">
+        <div class="columns is-mobile is-multiline">
+          <!-- Order information -->
+          <div class="column is-half">
+            <div class="content">
+              <h3 class="title is-4">Transaktions information</h3>
+              <p><strong>Transaktions ID:</strong> {{ orderId }}</p>
+              <p><strong>Faktura ID:</strong> {{ getInvoiceCollectionValue().id }}</p>
+              <p><strong>Oprettet:</strong> {{ order.created_at }}</p>
+              <p><strong>Afdeling:</strong> {{ getDepartmentName(order.department_id)}}</p>
+            </div>
+          </div>
+          <!-- Customer information -->
+          <div class="column is-half">
+            <div class="content has-text-right">
+              <h3 class="title is-4">Kunde information</h3>
+              <p><strong>Kunde:</strong> {{ customer_name }}</p>
+            </div>
+          </div>
+        </div>
+        <!-- Vehicle information -->
+        <div class="column is-12 pt-0">
+          <div class="divider">Køretøjer</div>
+          <div class="columns has-text-centered">
+            <div class="column" v-if="order.reg_1">
+              <p><strong>Reg. 1:</strong> {{ order.reg_1 }}</p>
+            </div>
+            <div class="column" v-if="order.reg_2">
+              <p><strong>Reg. 2:</strong> {{ order.reg_2 }}</p>
+            </div>
+            <div class="column" v-if="order.reg_3">
+              <p><strong>Reg. 3:</strong> {{ order.reg_3 }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    <!-- Order items table -->
+      <OrderItemsTable
+          v-bind:orderItems="order_items"
+          v-bind:show-payment-status="true"
+          v-bind:is-loading="false"
+          v-bind:paid="true"
+          v-bind:tax-percentage="25"
+      />
+    </div>
   </RestrictedPageWrapper>
 </template>
 
 <style scoped>
-
+.keep-bg-during-print {
+  -webkit-print-color-adjust: exact !important;
+  print-color-adjust: exact !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dashboards/userDashboard/orders/MyOrder.vue b/src/views/dashboards/userDashboard/orders/MyOrder.vue
index c39cbba9..d2bd1e7b 100644
--- a/src/views/dashboards/userDashboard/orders/MyOrder.vue
+++ b/src/views/dashboards/userDashboard/orders/MyOrder.vue
@@ -1,14 +1,45 @@
-<script setup>
+<script setup lang="ts">
 
 import UserDashboardHero from "@/views/dashboards/userDashboard/UserDashboardHero.vue";
 import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
 import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {ref, defineProps, Component} from "vue";
 import {getUserOrder} from "@/components/shop/Orders.vue";
 import {getDepartmentName, getDepartments} from "@/components/pagination/departmentTabs.vue";
 import '@creativebulma/bulma-divider/dist/bulma-divider.min.css';
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 
+const props = defineProps({
+  visibleComponents: {
+    type: Object as () => {
+      warnings: boolean;
+      transaction_details: boolean;
+      customer_details: boolean;
+      vehicle_details: boolean;
+      order_items: boolean;
+      payment_status: boolean;
+    },
+    default: () => ({
+      warnings: true,
+      transaction_details: true,
+      customer_details: true,
+      vehicle_details: true,
+      order_items: true,
+      payment_status: false,
+    })
+  },
+  orderObject: {
+    type: Object as () => {
+      orderId: number | null;
+      paid: boolean | null;
+    },
+    default: () => ({
+      orderId: null,
+      paid: false,
+      tax_percentage: 0,
+    })
+  }
+});
 const router = useRouter();
 
 const orderId = ref(router.currentRoute.value.params.orderId);
@@ -18,11 +49,20 @@ const economicModuleOrders = ref([]);
 const isLoading = ref(true);
 const customer = ref([]);
 
+const getOrderId = () => {
+  // If the orderObject is set, use that
+  if (props.orderObject && props.orderObject.orderId) {
+    return props.orderObject.orderId;
+  }
+  // Otherwise, use the orderId from the URL
+  return orderId.value;
+};
+
 // Load the departments
 getDepartments();
 
 // Load the order, when the page is loaded
-getUserOrder(orderId.value, true).then((response) => {
+getUserOrder(getOrderId(), true).then((response) => {
   orderItems.value = response.data.includes.orderItems;
   order.value = response.data.data;
   economicModuleOrders.value = response.data.includes.economicModuleOrders;
@@ -32,24 +72,26 @@ getUserOrder(orderId.value, true).then((response) => {
 </script>
 
 <template>
-  <UserDashboardPageWrapper :title="'Transaktion ' + orderId" subtitle="Se detaljer om transaktionen">
-    <div class="message is-warning mt-2" v-if="!isLoading && !economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
-      <div class="message-body">
-        <p class="is-size-6">Denne transaktion er under behandling, og er ikke klar til at blive faktureret.</p>
+  <UserDashboardPageWrapper :title="'Transaktion ' + getOrderId()" subtitle="Se detaljer om transaktionen">
+    <template v-if="props.visibleComponents.warnings">
+      <div class="message is-warning mt-2" v-if="!isLoading && !economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
+        <div class="message-body">
+          <p class="is-size-6">Denne transaktion er under behandling, og er ikke klar til at blive faktureret.</p>
+        </div>
       </div>
-    </div>
-    <div class="message is-dark mt-2" v-if="!isLoading && economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
-      <div class="message-body">
-        <p class="is-size-6">Denne transaktion er blevet gemt, og er klar til at blive faktureret.</p>
+      <div class="message is-dark mt-2" v-if="!isLoading && economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
+        <div class="message-body">
+          <p class="is-size-6">Denne transaktion er blevet gemt, og er klar til at blive faktureret.</p>
+        </div>
       </div>
-    </div>
-    <div class="notification is-success mt-2" v-if="!isLoading && economicModuleOrders.invoice_id">
-      <p class="is-size-6">Denne transaktion er blevet faktureret.</p>
-    </div>
+      <div class="notification is-success mt-2" v-if="!isLoading && economicModuleOrders.invoice_id">
+        <p class="is-size-6">Denne transaktion er blevet faktureret.</p>
+      </div>
+    </template>
     <div class="box">
       <div class="columns is-mobile is-multiline">
         <!-- Order information -->
-        <div class="column is-half">
+        <div class="column" :class="(props.visibleComponents.transaction_details && props.visibleComponents.customer_details) ? 'is-half' : 'is-full'" v-if="props.visibleComponents.transaction_details">
           <div class="content">
             <h3 class="title is-4">Transaktions information</h3>
             <p><strong>Dato:</strong> {{ order.created_at }}</p>
@@ -60,8 +102,8 @@ getUserOrder(orderId.value, true).then((response) => {
           </div>
         </div>
         <!-- Customer information -->
-        <div class="column is-half">
-          <div class="content has-text-right">
+        <div class="column" :class="(props.visibleComponents.transaction_details && props.visibleComponents.customer_details) ? 'is-half' : 'is-full'" v-if="props.visibleComponents.customer_details">
+          <div class="content" :class="(props.visibleComponents.transaction_details ? 'has-text-right' : 'has-text-left')">
             <h3 class="title is-4">Kunde information</h3>
             <p><strong>CVR:</strong> {{ customer.economic_customer.corporateIdentificationNumber ? customer.economic_customer.corporateIdentificationNumber : 'Ingen CVR' }}</p>
             <p><strong>Kunde ID:</strong> {{ customer.customer_number }}</p>
@@ -70,7 +112,7 @@ getUserOrder(orderId.value, true).then((response) => {
           </div>
         </div>
         <!-- Vehicle information -->
-        <div class="column is-12 pt-0">
+        <div class="column is-12 pt-0" v-if="props.visibleComponents.vehicle_details">
           <div class="divider">Køretøjer</div>
           <div class="columns has-text-centered">
             <div class="column" v-if="order.reg_1">
@@ -86,7 +128,7 @@ getUserOrder(orderId.value, true).then((response) => {
         </div>
       </div>
     </div>
-  <OrderItemsTable :orderItems="orderItems" :isLoading="isLoading" />
+  <OrderItemsTable :orderItems="orderItems" :isLoading="isLoading" v-if="props.visibleComponents.order_items" v-bind:paid="props.orderObject.paid" v-bind:tax-percentage="order.tax_percentage" v-bind:show-payment-status="props.visibleComponents.payment_status" />
   </UserDashboardPageWrapper>
 </template>