diff --git a/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html
new file mode 100644
index 00000000..d2d9b84b
--- /dev/null
+++ b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html
@@ -0,0 +1,3 @@
+<pre>
+  {{ fulfillment | json }}
+</pre>
diff --git a/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.ts b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.ts
index e70b7541..04acc93a 100644
--- a/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.ts
+++ b/packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.ts
@@ -4,12 +4,7 @@ import { IFulfillment } from '@console-core/types';
 
 @Component({
   selector: 'app-module-fulfillment-view-details',
-  template: `
-    <pre>
-      {{ fulfillment | json }}
-    </pre
-    >
-  `,
+  templateUrl: './fulfillment-view-details.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FulfillmentViewDetailsComponent {
diff --git a/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.html b/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.html
index eb68ce3d..12599009 100644
--- a/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.html
+++ b/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.html
@@ -8,6 +8,7 @@
   [triggerRead]="triggerRead"
   [triggerSelectId]="triggerSelectId"
   [triggerRemove]="triggerRemove"
+  [triggerSubmitFulfillment]="triggerSubmitFulfillment"
 >
   <ng-container rc-crud-search>
     <div
diff --git a/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.ts b/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.ts
index 950bb064..0f16b321 100644
--- a/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.ts
+++ b/packages/modules/fulfillment/src/lib/components/template/fulfillment-template.component.ts
@@ -56,6 +56,19 @@ export class FulfillmentTemplateComponent implements OnInit, OnDestroy {
     limit: PAGINATION.limit,
   };
 
+  readonly triggerSubmitFulfillment = new BehaviorSubject<string | null>(null);
+  readonly triggerSubmitFulfillment$ = this.triggerSubmitFulfillment
+    .asObservable()
+    .pipe(
+      tap((id) => {
+        if (id === null) {
+          return;
+        }
+
+        // this.orderFacade.createFulfilment(id);
+      })
+    );
+
   readonly triggerRead = new BehaviorSubject<null>(null);
   readonly triggerRead$ = this.triggerRead
     .asObservable()
diff --git a/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.html b/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.html
index 52e928fd..6ee9691f 100644
--- a/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.html
+++ b/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.html
@@ -123,6 +123,20 @@
                     <vcl-icon icon="mdi:truck-plus-outline" />
                   </button>
 
+                  <button
+                    *ngIf="
+                      isTriggerSubmitFulfillment &&
+                      [EUrlSegment.View].includes(urlSegment)
+                    "
+                    (click)="onCreateFulfillment(id)"
+                    vcl-button
+                    rc-append
+                    class="square half-transparent button"
+                    title="Submit Fulfillment"
+                  >
+                    <vcl-icon icon="mdi:truck-plus-outline" />
+                  </button>
+
                   <button
                     vcl-button
                     rc-append
diff --git a/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.ts b/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.ts
index 932e633b..a103b4c8 100644
--- a/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.ts
+++ b/packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.ts
@@ -29,6 +29,7 @@ export class RcCrudMainComponent implements OnInit, OnDestroy {
   @Input({ required: true }) triggerRemove!: BehaviorSubject<string | null>;
   @Input() triggerCreateInvoice?: BehaviorSubject<string | null>;
   @Input() triggerCreateFulfillment?: BehaviorSubject<string | null>;
+  @Input() triggerSubmitFulfillment?: BehaviorSubject<string | null>;
   @Input() title = '';
   @Input() isRead = true;
   @Input() isCreate = true;
@@ -38,6 +39,7 @@ export class RcCrudMainComponent implements OnInit, OnDestroy {
 
   isTriggerCreateInvoice = false;
   isTriggerCreateFulfillment = false;
+  isTriggerSubmitFulfillment = false;
 
   readonly EUrlSegment = EUrlSegment;
 
@@ -78,6 +80,7 @@ export class RcCrudMainComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.isTriggerCreateInvoice = !!this.triggerCreateInvoice;
     this.isTriggerCreateFulfillment = !!this.triggerCreateFulfillment;
+    this.isTriggerSubmitFulfillment = !!this.triggerSubmitFulfillment;
   }
 
   ngOnDestroy(): void {
@@ -100,6 +103,10 @@ export class RcCrudMainComponent implements OnInit, OnDestroy {
     this.triggerCreateFulfillment?.next(id);
   }
 
+  onSubmitFulfillment(id: string | null): void {
+    this.triggerSubmitFulfillment?.next(id);
+  }
+
   onRemove(id: string | null): void {
     this.subscriptions.sink = this.alertService
       .open({