diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-list/elsa-workflow-instance-list-screen/elsa-workflow-instance-list-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-list/elsa-workflow-instance-list-screen/elsa-workflow-instance-list-screen.tsx
index b121ca103..18fd2560f 100644
--- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-list/elsa-workflow-instance-list-screen/elsa-workflow-instance-list-screen.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-list/elsa-workflow-instance-list-screen/elsa-workflow-instance-list-screen.tsx
@@ -34,10 +34,10 @@ export class ElsaWorkflowInstanceListScreen {
   @Prop() history?: RouterHistory;
   @Prop() serverUrl: string;
   @Prop() basePath: string;
-  @Prop() workflowId?: string;
-  @Prop() correlationId?: string;
-  @Prop() workflowStatus?: WorkflowStatus;
-  @Prop() orderBy?: OrderBy = OrderBy.Started;
+  @Prop({attribute: 'workflow-id'}) workflowId?: string;
+  @Prop({attribute: 'correlation-id'}) correlationId?: string;
+  @Prop({attribute: 'workflow-status'}) workflowStatus?: WorkflowStatus;
+  @Prop({attribute: 'order-by'}) orderBy?: OrderBy = OrderBy.Started;
   @Prop() culture: string;
   @State() bulkActions: Array<DropdownButtonItem>;
   @State() workflowBlueprints: Array<WorkflowBlueprintSummary> = [];
@@ -48,7 +48,7 @@ export class ElsaWorkflowInstanceListScreen {
   @State() selectedOrderByState?: OrderBy = OrderBy.Started;
   @State() selectedWorkflowInstanceIds: Array<string> = [];
   @State() selectAllChecked: boolean;
-  
+
   @State() currentPage: number = 0;
   @State() currentPageSize: number = ElsaWorkflowInstanceListScreen.DEFAULT_PAGE_SIZE;
   @State() currentSearchTerm?: string;
@@ -64,6 +64,11 @@ export class ElsaWorkflowInstanceListScreen {
       this.applyQueryString(this.history.location.search);
     }
 
+    await this.handleWorkflowIdChanged(this.workflowId);
+    await this.handleCorrelationIdChanged(this.correlationId);
+    await this.handleWorkflowStatusChanged(this.workflowStatus);
+    await this.handleOrderByChanged(this.orderBy);
+
     await this.loadWorkflowBlueprints();
     await this.loadWorkflowInstances();
 
@@ -131,7 +136,7 @@ export class ElsaWorkflowInstanceListScreen {
     const query = parseQuery(queryString);
 
     this.selectedWorkflowId = query.workflow;
-    this.correlationId = query.correlationId;  
+    this.correlationId = query.correlationId;
     this.selectedWorkflowStatus = query.status;
     this.selectedOrderByState = query.orderBy ?? OrderBy.Started;
     this.currentPage = !!query.page ? parseInt(query.page) : 0;
diff --git a/src/designer/elsa-workflows-studio/src/index.html b/src/designer/elsa-workflows-studio/src/index.html
index 8948b48bd..3e39cfb65 100644
--- a/src/designer/elsa-workflows-studio/src/index.html
+++ b/src/designer/elsa-workflows-studio/src/index.html
@@ -16,10 +16,10 @@
 
 <elsa-studio-root server-url="https://localhost:11000" monaco-lib-path="build/assets/js/monaco-editor/min" culture="en-US">
   <!-- The root dashboard component -->
-  <elsa-studio-dashboard></elsa-studio-dashboard>
+<!--  <elsa-studio-dashboard></elsa-studio-dashboard>-->
 
   <!-- Instead of using the full dashboard component, you can display lower-level components instead-->
-  <!--<elsa-workflow-instance-list-screen></elsa-workflow-instance-list-screen>-->
+  <elsa-workflow-instance-list-screen workflow-id="7448d8d2ded64c868b474b8afce9e852"></elsa-workflow-instance-list-screen>
   <!--<elsa-workflow-definition-editor-screen workflow-definition-id="{workflowDefinitionId}"></elsa-workflow-definition-editor-screen>-->
   <!--<elsa-workflow-instance-viewer-screen id="workflowInstanceViewer" workflow-instance-id="8014e2358d8b4907946eb5f0e075c63c"></elsa-workflow-instance-viewer-screen>-->
 </elsa-studio-root>