diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index e50cb63b32..adbb66ad7c 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -102,7 +102,6 @@ import { NestedMenuPositionDirective } from './components/app-layout/cloud/direc
         ThemePickerModule,
         ChartsModule,
         MonacoEditorModule.forRoot(),
-        ProcessServicesCloudModule,
         GroupCloudModule
     ],
     declarations: [
diff --git a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.html
index 41041217c3..4cd466d5f5 100644
--- a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.html
+++ b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.html
@@ -5,7 +5,21 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<adf-cloud-process-header
-    [appName]="appName"
-    [processInstanceId]="processInstanceId">
-</adf-cloud-process-header>
+<div class="adf-process-cloud-container">
+
+    <adf-cloud-task-list
+        fxFlex
+        class="adf-cloud-layout-overflow"
+        [appName]="appName"
+        [processInstanceId]="processInstanceId"
+        (rowClick)="onRowClick($event)"
+        #taskCloud>
+    </adf-cloud-task-list>
+
+    <adf-cloud-process-header
+        class="adf-process-cloud-header"
+        [appName]="appName"
+        [processInstanceId]="processInstanceId">
+    </adf-cloud-process-header>
+</div>
+
diff --git a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.scss
index e69de29bb2..f5e062505b 100644
--- a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.scss
@@ -0,0 +1,14 @@
+ .adf {
+    &-process-cloud-container {
+        display: flex;
+    }
+
+    &-cloud-layout-overflow {
+        width:67%;
+    }
+
+    &-process-cloud-header {
+        margin-left: 10px;
+        width: 25%;
+    }
+ }
diff --git a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.ts
index cfbb6c696c..faa9f1daaa 100644
--- a/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/app-layout/cloud/process-details-cloud-demo.component.ts
@@ -40,4 +40,10 @@ export class ProcessDetailsCloudDemoComponent {
     onGoBack() {
         this.router.navigate([`/cloud/${this.appName}/`]);
     }
+
+    onRowClick(taskId: string) {
+        if (taskId) {
+            this.router.navigate([`/cloud/${this.appName}/task-details/${taskId}`]);
+        }
+    }
 }