diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts
index 59557ca44..5e8333667 100644
--- a/src/designer/elsa-workflows-studio/src/components.d.ts
+++ b/src/designer/elsa-workflows-studio/src/components.d.ts
@@ -132,6 +132,23 @@ export namespace Components {
         "propertyDescriptor": ActivityPropertyDescriptor;
         "propertyModel": ActivityDefinitionProperty;
     }
+    interface ElsaStudioRoot {
+        "serverUrl": string;
+    }
+    interface ElsaStudioWorkflowDefinitionsEdit {
+        "match": MatchResults;
+        "serverUrl": string;
+    }
+    interface ElsaStudioWorkflowDefinitionsList {
+        "history": RouterHistory;
+        "serverUrl": string;
+    }
+    interface ElsaStudioWorkflowInstancesList {
+        "history": RouterHistory;
+        "serverUrl": string;
+    }
+    interface ElsaStudioWorkflowRegistry {
+    }
     interface ElsaToastNotification {
         "hide": () => Promise<void>;
         "show": (options: ToastNotificationOptions) => Promise<void>;
@@ -314,6 +331,36 @@ declare global {
         prototype: HTMLElsaSingleLinePropertyElement;
         new (): HTMLElsaSingleLinePropertyElement;
     };
+    interface HTMLElsaStudioRootElement extends Components.ElsaStudioRoot, HTMLStencilElement {
+    }
+    var HTMLElsaStudioRootElement: {
+        prototype: HTMLElsaStudioRootElement;
+        new (): HTMLElsaStudioRootElement;
+    };
+    interface HTMLElsaStudioWorkflowDefinitionsEditElement extends Components.ElsaStudioWorkflowDefinitionsEdit, HTMLStencilElement {
+    }
+    var HTMLElsaStudioWorkflowDefinitionsEditElement: {
+        prototype: HTMLElsaStudioWorkflowDefinitionsEditElement;
+        new (): HTMLElsaStudioWorkflowDefinitionsEditElement;
+    };
+    interface HTMLElsaStudioWorkflowDefinitionsListElement extends Components.ElsaStudioWorkflowDefinitionsList, HTMLStencilElement {
+    }
+    var HTMLElsaStudioWorkflowDefinitionsListElement: {
+        prototype: HTMLElsaStudioWorkflowDefinitionsListElement;
+        new (): HTMLElsaStudioWorkflowDefinitionsListElement;
+    };
+    interface HTMLElsaStudioWorkflowInstancesListElement extends Components.ElsaStudioWorkflowInstancesList, HTMLStencilElement {
+    }
+    var HTMLElsaStudioWorkflowInstancesListElement: {
+        prototype: HTMLElsaStudioWorkflowInstancesListElement;
+        new (): HTMLElsaStudioWorkflowInstancesListElement;
+    };
+    interface HTMLElsaStudioWorkflowRegistryElement extends Components.ElsaStudioWorkflowRegistry, HTMLStencilElement {
+    }
+    var HTMLElsaStudioWorkflowRegistryElement: {
+        prototype: HTMLElsaStudioWorkflowRegistryElement;
+        new (): HTMLElsaStudioWorkflowRegistryElement;
+    };
     interface HTMLElsaToastNotificationElement extends Components.ElsaToastNotification, HTMLStencilElement {
     }
     var HTMLElsaToastNotificationElement: {
@@ -382,6 +429,11 @@ declare global {
         "elsa-property-editor": HTMLElsaPropertyEditorElement;
         "elsa-script-property": HTMLElsaScriptPropertyElement;
         "elsa-single-line-property": HTMLElsaSingleLinePropertyElement;
+        "elsa-studio-root": HTMLElsaStudioRootElement;
+        "elsa-studio-workflow-definitions-edit": HTMLElsaStudioWorkflowDefinitionsEditElement;
+        "elsa-studio-workflow-definitions-list": HTMLElsaStudioWorkflowDefinitionsListElement;
+        "elsa-studio-workflow-instances-list": HTMLElsaStudioWorkflowInstancesListElement;
+        "elsa-studio-workflow-registry": HTMLElsaStudioWorkflowRegistryElement;
         "elsa-toast-notification": HTMLElsaToastNotificationElement;
         "elsa-workflow-definition-editor-screen": HTMLElsaWorkflowDefinitionEditorScreenElement;
         "elsa-workflow-definitions-list-screen": HTMLElsaWorkflowDefinitionsListScreenElement;
@@ -512,6 +564,23 @@ declare namespace LocalJSX {
         "propertyDescriptor"?: ActivityPropertyDescriptor;
         "propertyModel"?: ActivityDefinitionProperty;
     }
+    interface ElsaStudioRoot {
+        "serverUrl"?: string;
+    }
+    interface ElsaStudioWorkflowDefinitionsEdit {
+        "match"?: MatchResults;
+        "serverUrl"?: string;
+    }
+    interface ElsaStudioWorkflowDefinitionsList {
+        "history"?: RouterHistory;
+        "serverUrl"?: string;
+    }
+    interface ElsaStudioWorkflowInstancesList {
+        "history"?: RouterHistory;
+        "serverUrl"?: string;
+    }
+    interface ElsaStudioWorkflowRegistry {
+    }
     interface ElsaToastNotification {
     }
     interface ElsaWorkflowDefinitionEditorScreen {
@@ -567,6 +636,11 @@ declare namespace LocalJSX {
         "elsa-property-editor": ElsaPropertyEditor;
         "elsa-script-property": ElsaScriptProperty;
         "elsa-single-line-property": ElsaSingleLineProperty;
+        "elsa-studio-root": ElsaStudioRoot;
+        "elsa-studio-workflow-definitions-edit": ElsaStudioWorkflowDefinitionsEdit;
+        "elsa-studio-workflow-definitions-list": ElsaStudioWorkflowDefinitionsList;
+        "elsa-studio-workflow-instances-list": ElsaStudioWorkflowInstancesList;
+        "elsa-studio-workflow-registry": ElsaStudioWorkflowRegistry;
         "elsa-toast-notification": ElsaToastNotification;
         "elsa-workflow-definition-editor-screen": ElsaWorkflowDefinitionEditorScreen;
         "elsa-workflow-definitions-list-screen": ElsaWorkflowDefinitionsListScreen;
@@ -605,6 +679,11 @@ declare module "@stencil/core" {
             "elsa-property-editor": LocalJSX.ElsaPropertyEditor & JSXBase.HTMLAttributes<HTMLElsaPropertyEditorElement>;
             "elsa-script-property": LocalJSX.ElsaScriptProperty & JSXBase.HTMLAttributes<HTMLElsaScriptPropertyElement>;
             "elsa-single-line-property": LocalJSX.ElsaSingleLineProperty & JSXBase.HTMLAttributes<HTMLElsaSingleLinePropertyElement>;
+            "elsa-studio-root": LocalJSX.ElsaStudioRoot & JSXBase.HTMLAttributes<HTMLElsaStudioRootElement>;
+            "elsa-studio-workflow-definitions-edit": LocalJSX.ElsaStudioWorkflowDefinitionsEdit & JSXBase.HTMLAttributes<HTMLElsaStudioWorkflowDefinitionsEditElement>;
+            "elsa-studio-workflow-definitions-list": LocalJSX.ElsaStudioWorkflowDefinitionsList & JSXBase.HTMLAttributes<HTMLElsaStudioWorkflowDefinitionsListElement>;
+            "elsa-studio-workflow-instances-list": LocalJSX.ElsaStudioWorkflowInstancesList & JSXBase.HTMLAttributes<HTMLElsaStudioWorkflowInstancesListElement>;
+            "elsa-studio-workflow-registry": LocalJSX.ElsaStudioWorkflowRegistry & JSXBase.HTMLAttributes<HTMLElsaStudioWorkflowRegistryElement>;
             "elsa-toast-notification": LocalJSX.ElsaToastNotification & JSXBase.HTMLAttributes<HTMLElsaToastNotificationElement>;
             "elsa-workflow-definition-editor-screen": LocalJSX.ElsaWorkflowDefinitionEditorScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorScreenElement>;
             "elsa-workflow-definitions-list-screen": LocalJSX.ElsaWorkflowDefinitionsListScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionsListScreenElement>;
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.css b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.css
deleted file mode 100644
index a8fb2e3dc..000000000
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.css
+++ /dev/null
@@ -1,15 +0,0 @@
-header {
-  background: #5851ff;
-  color: white;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-
-h1 {
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: #fff;
-  padding: 0 12px;
-}
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-edit/app-workflow-definitions-edit.css b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-edit/app-workflow-definitions-edit.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-list/app-workflow-definitions-list.css b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-list/app-workflow-definitions-list.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-instances-list/app-workflow-instances-list.css b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-instances-list/app-workflow-instances-list.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-registry/app-workflow-registry.css b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-registry/app-workflow-registry.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
similarity index 86%
rename from src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.tsx
rename to src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
index 5ff6181ad..e14dbe512 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-root/app-root.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
@@ -1,12 +1,10 @@
 import {Component, h, Prop} from '@stencil/core';
-import Tunnel, {DashboardState} from '../../../../data/dashboard';
 
 @Component({
-  tag: 'app-root',
-  styleUrl: 'app-root.css',
+  tag: 'elsa-studio-root',
   shadow: false,
 })
-export class AppRoot {
+export class ElsaStudioRoot {
 
   @Prop({attribute: 'server-url', reflect: true}) serverUrl: string;
 
@@ -49,10 +47,10 @@ export class AppRoot {
           <stencil-router>
             <stencil-route-switch scrollTopOffset={0}>
               <stencil-route url="/" routeRender={props => <stencil-route-redirect url="/workflow-registry"/>} exact={true}/>
-              <stencil-route url="/workflow-registry" component="app-workflow-registry"/>
-              <stencil-route url="/workflow-definitions" component="app-workflow-definitions-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
-              <stencil-route url="/workflow-definitions/:id" component="app-workflow-definitions-edit" componentProps={{'serverUrl': serverUrl}} />
-              <stencil-route url="/workflow-instances" component="app-workflow-instances-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
+              <stencil-route url="/workflow-registry" component="elsa-studio-workflow-registry"/>
+              <stencil-route url="/workflow-definitions" component="elsa-studio-workflow-definitions-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
+              <stencil-route url="/workflow-definitions/:id" component="elsa-studio-workflow-definitions-edit" componentProps={{'serverUrl': serverUrl}} />
+              <stencil-route url="/workflow-instances" component="elsa-studio-workflow-instances-list" componentProps={{'serverUrl': serverUrl}} exact={true}/>
             </stencil-route-switch>
           </stencil-router>
           {/*</Tunnel.Provider>*/}
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-edit/app-workflow-definitions-edit.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-edit/elsa-studio-workflow-definitions-edit.tsx
similarity index 80%
rename from src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-edit/app-workflow-definitions-edit.tsx
rename to src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-edit/elsa-studio-workflow-definitions-edit.tsx
index 78db6ffe7..54179ff68 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-edit/app-workflow-definitions-edit.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-edit/elsa-studio-workflow-definitions-edit.tsx
@@ -2,11 +2,10 @@ import {Component, Prop, h} from '@stencil/core';
 import {MatchResults} from '@stencil/router';
 
 @Component({
-  tag: 'app-workflow-definitions-edit',
-  styleUrl: 'app-workflow-definitions-edit.css',
+  tag: 'elsa-studio-workflow-definitions-edit',
   shadow: false,
 })
-export class AppWorkflowDefinitionsEdit {
+export class ElsaStudioWorkflowDefinitionsEdit {
   @Prop() match: MatchResults;
   @Prop() serverUrl: string;
 
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-list/app-workflow-definitions-list.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-list/elsa-studio-workflow-definitions-list.tsx
similarity index 89%
rename from src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-list/app-workflow-definitions-list.tsx
rename to src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-list/elsa-studio-workflow-definitions-list.tsx
index 4686c3c55..8fcd29b52 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-definitions-list/app-workflow-definitions-list.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-definitions-list/elsa-studio-workflow-definitions-list.tsx
@@ -2,11 +2,10 @@ import {Component, h, Prop, State} from '@stencil/core';
 import {RouterHistory} from "@stencil/router";
 
 @Component({
-  tag: 'app-workflow-definitions-list',
-  styleUrl: 'app-workflow-definitions-list.css',
+  tag: 'elsa-studio-workflow-definitions-list',
   shadow: false,
 })
-export class AppWorkflowDefinitionsList {
+export class ElsaStudioWorkflowDefinitionsList {
   @Prop() history: RouterHistory;
   @Prop() serverUrl: string;
 
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-instances-list/app-workflow-instances-list.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-list/elsa-studio-workflow-instances-list.tsx
similarity index 84%
rename from src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-instances-list/app-workflow-instances-list.tsx
rename to src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-list/elsa-studio-workflow-instances-list.tsx
index 22a679c2e..f797f9e84 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-instances-list/app-workflow-instances-list.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-instances-list/elsa-studio-workflow-instances-list.tsx
@@ -2,11 +2,10 @@ import {Component, h, Prop, State} from '@stencil/core';
 import {RouterHistory} from "@stencil/router";
 
 @Component({
-  tag: 'app-workflow-instances-list',
-  styleUrl: 'app-workflow-instances-list.css',
+  tag: 'elsa-studio-workflow-instances-list',
   shadow: false,
 })
-export class AppWorkflowInstancesList {
+export class ElsaStudioWorkflowInstancesList {
   @Prop() history: RouterHistory;
   @Prop() serverUrl: string;
 
diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-registry/app-workflow-registry.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-registry/elsa-studio-workflow-registry.tsx
similarity index 97%
rename from src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-registry/app-workflow-registry.tsx
rename to src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-registry/elsa-studio-workflow-registry.tsx
index 53a19b4c2..261b80b83 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/app-workflow-registry/app-workflow-registry.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-workflow-registry/elsa-studio-workflow-registry.tsx
@@ -1,11 +1,10 @@
 import {Component, h} from '@stencil/core';
 
 @Component({
-  tag: 'app-workflow-registry',
-  styleUrl: 'app-workflow-registry.css',
+  tag: 'elsa-studio-workflow-registry',
   shadow: false,
 })
-export class AppHome {
+export class ElsaStudioWorkflowRegistry {
   render() {
     return (
       <div>
diff --git a/src/designer/elsa-workflows-studio/src/index.html b/src/designer/elsa-workflows-studio/src/index.html
index 2a833516f..9b9a99fe0 100644
--- a/src/designer/elsa-workflows-studio/src/index.html
+++ b/src/designer/elsa-workflows-studio/src/index.html
@@ -16,7 +16,7 @@
 
 <!--<elsa-workflow-editor id="workflowEditor" server-url="https://localhost:11000/" workflow-definition-id="7eed1333c2674370a1e9b300aa94fda2" monaco-lib-path="build/assets/js"></elsa-workflow-editor>-->
 
-<app-root server-url="https://localhost:11000/"></app-root>
+<elsa-studio-root server-url="https://localhost:11000/"></elsa-studio-root>
 
 </body>
 </html>