diff --git a/ayanova/src/views/customer-workorder.vue b/ayanova/src/views/customer-workorder.vue
index a446d95e..c9043b72 100644
--- a/ayanova/src/views/customer-workorder.vue
+++ b/ayanova/src/views/customer-workorder.vue
@@ -5,10 +5,74 @@
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
         <v-row>
-          <h1>UNDER CONSTRUCTION</h1>
-          <h2>
-            {{ $store.state.customerRights }}
-          </h2>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              v-model="obj.serial"
+              readonly
+              :label="$ay.t('WorkOrderSerialNumber')"
+              data-cy="serial"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              v-model="obj.customerViz"
+              readonly
+              :label="$ay.t('Customer')"
+              data-cy="customerViz"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              v-model="obj.customerReferenceNumber"
+              readonly
+              :label="$ay.t('WorkOrderCustomerReferenceNumber')"
+              data-cy="customerReferenceNumber"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              v-model="obj.customerContactName"
+              readonly
+              :label="$ay.t('WorkOrderCustomerContactName')"
+              data-cy="customerContactName"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              v-model="obj.invoiceNumber"
+              readonly
+              :label="$ay.t('WorkOrderInvoiceNumber')"
+              data-cy="invoiceNumber"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <gz-date-time-picker
+              :label="$ay.t('WorkOrderServiceDate')"
+              v-model="obj.serviceDate"
+              readonly
+              data-cy="serviceDate"
+            ></gz-date-time-picker>
+          </v-col>
+          <v-col v-if="obj.canWiki" cols="12">
+            <gz-wiki
+              :aya-type="ayaType"
+              :aya-id="obj.id"
+              ref="wiki"
+              v-model="obj.wiki"
+              readonly
+              data-cy="wiki"
+            ></gz-wiki
+          ></v-col>
+
+          <v-col v-if="obj.canAttachments" cols="12">
+            <gz-attachments
+              readonly
+              :aya-type="ayaType"
+              :aya-id="obj.id"
+              data-cy="attachments"
+            ></gz-attachments
+          ></v-col>
         </v-row>
       </v-form>
     </div>
@@ -52,7 +116,16 @@ export default {
     return {
       obj: {
         id: 0,
-        concurrency: 0
+        serial: 0,
+        wiki: null,
+        customerId: 0,
+        customerViz: null,
+        customerReferenceNumber: null,
+        customerContactName: null,
+        serviceDate: null,
+        invoiceNumber: null,
+        canWiki: false,
+        canAttachments: false
       },
       formState: {
         ready: false,