From c0638f59c3b1f48206133f5095dd61ad165bafbb Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Mon, 9 Nov 2020 22:18:18 +0100
Subject: [PATCH] Incremental work on designer

---
 .../ElsaDashboard.Blazor/Client/Program.cs    |   9 +-
 .../Server/BlazorServerStartup.cs             |   1 +
 .../Server/BlazorWebAssemblyStartup.cs        |   1 +
 .../Server/Pages/_Host.cshtml                 |   6 +-
 .../Shared/ClientApp/public/index.html        |  21 +-
 .../ClientApp/public/workflow-designer.html   |  32 +-
 .../ClientApp/public/workflow-instances.html  |  21 +-
 .../Shared/ClientApp/public/workflows.html    |  21 +-
 .../ClientApp/src/partials/flyoutpanel.html   |   6 +-
 .../Shared/ClientApp/src/partials/layout.html |  13 +-
 .../ClientApp/src/partials/navmenu.html       |   8 +-
 .../ClientApp/src/workflow-designer.html      |   5 +-
 .../Shared/ElsaDashboard.Blazor.Shared.csproj |   5 +
 .../Extensions/ServiceCollectionExtensions.cs |  13 +
 .../Shared/Pages/Designer.razor               | 110 -------
 .../Shared/Pages/Designer/Activity.razor      |  63 ++++
 .../Shared/Pages/Designer/Activity.razor.cs   |  11 +
 .../Shared/Pages/Designer/Designer.razor      | 184 +++++++++++
 .../Shared/Pages/Designer/Designer.razor.cs   |  35 +++
 .../Shared/Services/FlyoutPanelService.cs     |  40 +++
 .../Shared/Services/IFlyoutPanelService.cs    |  10 +
 .../Shared/Shared/FlyoutPanel.razor           | 289 ++++++++++--------
 .../Shared/Shared/MainLayout.razor            |  63 +++-
 .../Shared/Shared/NavMenu.razor               | 242 ++++++++++-----
 24 files changed, 813 insertions(+), 396 deletions(-)
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Extensions/ServiceCollectionExtensions.cs
 delete mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor.cs
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor.cs
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/FlyoutPanelService.cs
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/IFlyoutPanelService.cs

diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Client/Program.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Client/Program.cs
index f1bb61df8..9216f4f8f 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Client/Program.cs
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Client/Program.cs
@@ -1,11 +1,7 @@
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Extensions.Logging;
 using System;
-using System.Collections.Generic;
 using System.Net.Http;
-using System.Text;
 using System.Threading.Tasks;
 using ElsaDashboard.Blazor.Shared;
 
@@ -17,8 +13,9 @@ namespace ElsaDashboard.Blazor.WebAssembly
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
             builder.RootComponents.Add<App>("#app");
-
-            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+            
+            var services =builder.Services;
+            services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
             await builder.Build().RunAsync();
         }
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorServerStartup.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorServerStartup.cs
index a96a394dd..122c7b24f 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorServerStartup.cs
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorServerStartup.cs
@@ -24,6 +24,7 @@ namespace ElsaDashboard.Blazor.Server
         {
             services.AddRazorPages();
             services.AddServerSideBlazor();
+            services.AddElsaDashboard();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorWebAssemblyStartup.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorWebAssemblyStartup.cs
index b397102f9..6f911c275 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorWebAssemblyStartup.cs
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/BlazorWebAssemblyStartup.cs
@@ -24,6 +24,7 @@ namespace ElsaDashboard.Blazor.Server
         {
             services.AddControllersWithViews();
             services.AddRazorPages();
+            services.AddElsaDashboard();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/Pages/_Host.cshtml b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/Pages/_Host.cshtml
index 0a5f0091b..7f3deb0e6 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Server/Pages/_Host.cshtml
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Server/Pages/_Host.cshtml
@@ -18,9 +18,10 @@
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/tailwind.css">
     <link href="ElsaDashboard.Blazor.Server.styles.css" rel="stylesheet"/>
-    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
+    <script src="https://cdn.jsdelivr.net/npm/@@ryangjchandler/spruce@2.0.1/dist/spruce.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
 </head>
-<body class="antialiased font-sans bg-gray-200 overflow-hidden">
+<body class="antialiased font-sans bg-gray-200">
 @if (Program.UseBlazorServer)
 {
     <component type="typeof(App)" render-mode="@Program.RenderMode"/>
@@ -51,5 +52,6 @@ else
 {
     <script src="_framework/blazor.webassembly.js"></script>
 }
+<script src="_content/ElsaDashboard.Blazor.Shared/store.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
index 2dafb66be..0d0423943 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
@@ -12,18 +12,17 @@
     <link rel="stylesheet" href="/tailwind.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head><body class="antialiased font-sans bg-gray-200">
-<div class="" style="">
+<div>
     <div style="min-height: 640px;">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -104,9 +103,9 @@
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
             <!-- User account dropdown -->
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
                 <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
-                    <button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
                         <div class="flex w-full justify-between items-center">
                             <div class="flex min-w-0 items-center justify-between space-x-3">
                                 <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@@ -216,7 +215,7 @@
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
                 <!-- Search header -->
                 <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
-                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
                         <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                             <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
@@ -237,9 +236,9 @@
                         </div>
                         <div class="flex items-center">
                             <!-- Profile dropdown -->
-                            <div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
                                 <div>
-                                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
                                         <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                                     </button>
                                 </div>
@@ -274,6 +273,6 @@
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
+<div style="clear: both; display: block; height: 0;"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
index 88198e2c3..840fc5ffc 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
@@ -14,18 +14,17 @@
     <link rel="stylesheet" href="/tailwind.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head><body class="antialiased font-sans bg-gray-200">
-<div class="" style="">
+<div>
     <div style="min-height: 640px;">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -106,9 +105,9 @@
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
             <!-- User account dropdown -->
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
                 <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
-                    <button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
                         <div class="flex w-full justify-between items-center">
                             <div class="flex min-w-0 items-center justify-between space-x-3">
                                 <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@@ -218,7 +217,7 @@
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
                 <!-- Search header -->
                 <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
-                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
                         <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                             <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
@@ -239,9 +238,9 @@
                         </div>
                         <div class="flex items-center">
                             <!-- Profile dropdown -->
-                            <div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
                                 <div>
-                                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
                                         <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                                     </button>
                                 </div>
@@ -283,13 +282,12 @@
         </span>
         </div>
     </div>
-
     <div class="relative">
         <div id="workflow-canvas" class="flex-1 flex">
             <div class="flex-1 text-gray-200">
                 <div class="p-10">
 
-                    <div class="canvas">
+                    <div class="canvas select-none">
                         <div class="tree">
                             <ul>
                                 <li>
@@ -1225,9 +1223,9 @@
                 </div>
             </div>
         </div>
-        <div x-show="open" x-data="{ open: true }" @keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
+        <div x-show="open" x-data="{ open: true }" x-on:keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
     <div class="absolute inset-0 overflow-hidden">
-        <section @click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+        <section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
             <div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
                 <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
                     <div class="flex-1">
@@ -1243,7 +1241,7 @@
                                     </p>
                                 </div>
                                 <div class="h-7 flex items-center">
-                                    <button @click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
+                                    <button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                                         <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                         </svg>
@@ -1430,14 +1428,12 @@
 </div>
     </div>
 
-
-
                 </main>
             </div>
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
+<div style="clear: both; display: block; height: 0;"></div>
 </body>
 </html>
 
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
index 49e0ec8e7..cdd5e820e 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
@@ -12,18 +12,17 @@
     <link rel="stylesheet" href="/tailwind.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head><body class="antialiased font-sans bg-gray-200">
-<div class="" style="">
+<div>
     <div style="min-height: 640px;">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -104,9 +103,9 @@
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
             <!-- User account dropdown -->
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
                 <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
-                    <button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
                         <div class="flex w-full justify-between items-center">
                             <div class="flex min-w-0 items-center justify-between space-x-3">
                                 <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@@ -216,7 +215,7 @@
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
                 <!-- Search header -->
                 <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
-                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
                         <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                             <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
@@ -237,9 +236,9 @@
                         </div>
                         <div class="flex items-center">
                             <!-- Profile dropdown -->
-                            <div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
                                 <div>
-                                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
                                         <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                                     </button>
                                 </div>
@@ -503,6 +502,6 @@
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
+<div style="clear: both; display: block; height: 0;"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
index ac5417ccf..88c2ed9a0 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
@@ -12,18 +12,17 @@
     <link rel="stylesheet" href="/tailwind.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head><body class="antialiased font-sans bg-gray-200">
-<div class="" style="">
+<div>
     <div style="min-height: 640px;">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -104,9 +103,9 @@
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
             <!-- User account dropdown -->
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
                 <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
-                    <button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
                         <div class="flex w-full justify-between items-center">
                             <div class="flex min-w-0 items-center justify-between space-x-3">
                                 <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
@@ -216,7 +215,7 @@
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
                 <!-- Search header -->
                 <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
-                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
                         <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                             <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
@@ -237,9 +236,9 @@
                         </div>
                         <div class="flex items-center">
                             <!-- Profile dropdown -->
-                            <div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
                                 <div>
-                                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
                                         <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                                     </button>
                                 </div>
@@ -514,6 +513,6 @@
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
+<div style="clear: both; display: block; height: 0;"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/flyoutpanel.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/flyoutpanel.html
index 75c4ae2bd..a83a47cdf 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/flyoutpanel.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/flyoutpanel.html
@@ -1,6 +1,6 @@
-<div x-show="open" x-data="{ open: true }" @keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
+<div x-show="open" x-data="{ open: true }" x-on:keydown.window.escape="open = false" class="fixed inset-0 overflow-hidden">
     <div class="absolute inset-0 overflow-hidden">
-        <section @click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+        <section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
             <div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
                 <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
                     <div class="flex-1">
@@ -16,7 +16,7 @@
                                     </p>
                                 </div>
                                 <div class="h-7 flex items-center">
-                                    <button @click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
+                                    <button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                                         <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                         </svg>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
index 789c238a7..2765cf7c6 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
@@ -12,16 +12,15 @@
     <link rel="stylesheet" href="/tailwind.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 <body class="antialiased font-sans bg-gray-200">
-<div class="" style="">
+<div>
     <div style="min-height: 640px;">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <module href="navmenu.html"></module>
             <!-- Main column -->
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
                 <!-- Search header -->
                 <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
-                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." @click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
                         <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                             <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
@@ -42,9 +41,9 @@
                         </div>
                         <div class="flex items-center">
                             <!-- Profile dropdown -->
-                            <div @click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
                                 <div>
-                                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
                                         <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                                     </button>
                                 </div>
@@ -77,6 +76,6 @@
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
+<div style="clear: both; display: block; height: 0;"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
index bf50ade36..72422dae7 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
@@ -1,11 +1,11 @@
 <div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -86,9 +86,9 @@
         <!-- Sidebar component, swap this element with another sidebar if you like -->
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
             <!-- User account dropdown -->
-            <div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
                 <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
-                    <button @click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
                         <div class="flex w-full justify-between items-center">
                             <div class="flex min-w-0 items-center justify-between space-x-3">
                                 <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
index 06d4f961b..f341baa39 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
@@ -15,13 +15,12 @@
         </span>
         </div>
     </div>
-
     <div class="relative">
         <div id="workflow-canvas" class="flex-1 flex">
             <div class="flex-1 text-gray-200">
                 <div class="p-10">
 
-                    <div class="canvas">
+                    <div class="canvas select-none">
                         <div class="tree">
                             <ul>
                                 <li>
@@ -185,8 +184,6 @@
         </div>
         <module href="./src/partials/flyoutpanel.html"></module>
     </div>
-
-
 </module>
 
 <script>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ElsaDashboard.Blazor.Shared.csproj b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ElsaDashboard.Blazor.Shared.csproj
index 4576929f6..038643574 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ElsaDashboard.Blazor.Shared.csproj
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ElsaDashboard.Blazor.Shared.csproj
@@ -15,4 +15,9 @@
       <SupportedPlatform Remove="Android" />
       <SupportedPlatform Remove="Windows" />
     </ItemGroup>
+
+    <ItemGroup>
+      <None Include="wwwroot\flyoutPanel.js" />
+      <None Include="wwwroot\workflowDesigner.js" />
+    </ItemGroup>
 </Project>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Extensions/ServiceCollectionExtensions.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Extensions/ServiceCollectionExtensions.cs
new file mode 100644
index 000000000..a1b51d30b
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Extensions/ServiceCollectionExtensions.cs
@@ -0,0 +1,13 @@
+using ElsaDashboard.Blazor.Shared.Services;
+
+// ReSharper disable once CheckNamespace
+namespace Microsoft.Extensions.DependencyInjection
+{
+    public static class ServiceCollectionExtensions
+    {
+        public static IServiceCollection AddElsaDashboard(this IServiceCollection services)
+        {
+            return services.AddScoped<IFlyoutPanelService, FlyoutPanelService>();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer.razor
deleted file mode 100644
index 467f7df19..000000000
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer.razor
+++ /dev/null
@@ -1,110 +0,0 @@
-@page "/designer"
-<div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
-    <div class="flex-1 min-w-0">
-        <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
-            Workflow Editor
-        </h1>
-    </div>
-    <div class="mt-4 flex sm:mt-0 sm:ml-4">
-        <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
-            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
-                Publish
-            </button>
-        </span>
-    </div>
-</div>
-
-<div id="workflow-canvas" class="flex-1 flex">
-    <div class="flex-1 text-gray-200">
-        <div class="p-10">
-            <div class="canvas mx-auto">
-                <ul>
-                    <li>
-                        <div x-data="{ open: false }"
-                             x-on:keydown.escape="open = false"
-                             x-on:click.away="open = false"
-                             class="box border-2 border-solid border-white rounded bg-white text-left text-black text-lg relative hover:border-blue-600 select-none">
-                            <div class="p-5 border-b border-b-solid">
-                                <div class="flex justify-between">
-                                    <div class="flex-shrink-0">
-                                        <svg class="h-10 w-10 text-blue-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                            <path stroke="none" d="M0 0h24v24H0z"/>
-                                            <circle cx="12" cy="12" r="9"/>
-                                            <polyline points="12 7 12 12 15 15"/>
-                                        </svg>
-                                    </div>
-                                    <div class="flex-1 font-medium leading-8 ml-2">
-                                        <p>Timer</p>
-                                    </div>
-                                    <div class="flex-shrink-0">
-                                        <button x-on:click="open = !open" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
-                                            <svg class="h-6 w-6 text-gray-400" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                <path stroke="none" d="M0 0h24v24H0z"/>
-                                                <circle cx="5" cy="12" r="1"/>
-                                                <circle cx="12" cy="12" r="1"/>
-                                                <circle cx="19" cy="12" r="1"/>
-                                            </svg>
-                                        </button>
-                                        <div x-show="open"
-                                             x-transition:enter="transition ease-out duration-100"
-                                             x-transition:enter-start="transform opacity-0 scale-95"
-                                             x-transition:enter-end="transform opacity-100 scale-100"
-                                             x-transition:leave="transition ease-in duration-75"
-                                             x-transition:leave-start="transform opacity-100 scale-100"
-                                             x-transition:leave-end="transform opacity-0 scale-95"
-                                             class="z-10 mx-3 origin-top-left absolute -right-48 top-3 w-48 mt-1 rounded-md shadow-lg">
-                                            <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
-                                                <div class="py-1">
-                                                    <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
-                                                </div>
-                                                <div class="border-t border-gray-100"></div>
-                                                <div class="py-1">
-                                                    <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
-                                                        Removed
-                                                        from pinned
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                            </div>
-                            <div class="p-6 text-gray-400 text-sm">
-                                Every <a href="#" class="font-medium border-b border-solid border-gray-200 text-black">5 minutes</a>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <ul class="children">
-                            <li>
-                                <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager1">
-                                    <p>Manager 1</p>
-                                </div>
-                            </li>
-                            <li>
-                                <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager2">
-                                    <p>Manager 2</p>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                    <li>
-                        <ul class="children">
-                            <li>
-                                <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child1">
-                                    <p>Child 1</p>
-                                </div>
-                            </li>
-                            <li>
-                                <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child2">
-                                    <p>Child 2</p>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor
new file mode 100644
index 000000000..159a0f7da
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor
@@ -0,0 +1,63 @@
+<div x-data="{ open: false }"
+     x-on:keydown.escape="open = false"
+     x-on:click.away="open = false"
+     id="@ActivityId"
+     class="activity border-2 border-solid border-white rounded bg-white text-left text-black text-lg hover:border-blue-600 select-none  max-w-md shadow-sm"
+     @onclick="OnClick">
+    <div class="p-5 border-b border-b-solid">
+        <div class="flex justify-between space-x-8">
+            <div class="flex-shrink-0">
+                <svg class="h-10 w-10 text-blue-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <circle cx="12" cy="12" r="9"/>
+                    <polyline points="12 7 12 12 15 15"/>
+                </svg>
+            </div>
+            <div class="flex-1 font-medium leading-8">
+                <p>Activity</p>
+            </div>
+            <div class="flex-shrink-0">
+                <button x-on:click="open = !open" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                    <svg class="h-6 w-6 text-gray-400" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="5" cy="12" r="1"/>
+                        <circle cx="12" cy="12" r="1"/>
+                        <circle cx="19" cy="12" r="1"/>
+                    </svg>
+                </button>
+                <div x-show="open"
+                     x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="transform opacity-0 scale-95"
+                     x-transition:enter-end="transform opacity-100 scale-100"
+                     x-transition:leave="transition ease-in duration-75"
+                     x-transition:leave-start="transform opacity-100 scale-100"
+                     x-transition:leave-end="transform opacity-0 scale-95"
+                     class="z-10 mx-3 origin-top-left absolute -right-48 top-3 w-48 mt-1 rounded-md shadow-lg">
+                    <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
+                        <div class="py-1">
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
+                        </div>
+                        <div class="border-t border-gray-100"></div>
+                        <div class="py-1">
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
+                                Removed
+                                from pinned
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="p-6 text-gray-400 text-sm">
+        Every <a href="#" class="font-medium border-b border-solid border-gray-200 text-black">5 minutes</a>
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public string ActivityId { get; set; }
+
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor.cs
new file mode 100644
index 000000000..990bc2719
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Activity.razor.cs
@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace ElsaDashboard.Blazor.Shared.Pages.Designer
+{
+    partial class Activity
+    {
+        [Parameter]
+        public EventCallback<MouseEventArgs> OnClick { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor
new file mode 100644
index 000000000..65119946f
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor
@@ -0,0 +1,184 @@
+@implements IAsyncDisposable
+@page "/designer"
+<div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
+    <div class="flex-1 min-w-0">
+        <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+            Workflow Editor
+        </h1>
+    </div>
+    <div class="mt-4 flex sm:mt-0 sm:ml-4">
+        <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
+            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
+                Publish
+            </button>
+        </span>
+    </div>
+</div>
+<div class="relative">
+    <div id="workflow-canvas" class="flex-1 flex">
+        <div class="flex-1 text-gray-200">
+            <div class="p-10">
+
+                <div class="canvas select-none">
+                    <div class="tree">
+                        <ul>
+                            <li>
+                                <Activity ActivityId="activity-1" OnClick="@(async e => await OnActivityClick(e))" />
+                                <ul>
+                                    <li>
+                                        <Activity ActivityId="activity-2" />
+                                        <ul>
+                                            <li>
+                                                <Activity ActivityId="activity-3" />
+                                                <ul>
+                                                    <li>
+                                                        <div class="blockcondition blockyes ">
+                                                            <span style="padding: 6px;">Yes</span>
+                                                        </div>
+                                                        <ul>
+                                                            <li>
+                                                                <Activity ActivityId="activity-4a" />
+                                                                <ul>
+                                                                    <li>
+                                                                        <Activity ActivityId="activity-5" />
+                                                                        <ul>
+                                                                            <li>
+                                                                                <div class="blockcondition blockno ">
+                                                                                    <span style="padding: 6px;">No</span>
+                                                                                </div>
+                                                                                <ul>
+                                                                                    <li>
+                                                                                        <Activity ActivityId="activity-6" />
+                                                                                    </li>
+                                                                                </ul>
+                                                                            </li>
+                                                                            <li>
+                                                                                <div class="blockcondition blockyes ">
+                                                                                    <span style="padding: 6px;">Yes</span>
+                                                                                </div>
+                                                                                <ul>
+                                                                                    <li>
+                                                                                        <Activity ActivityId="activity-7" />
+                                                                                        <ul>
+                                                                                            <li>
+                                                                                                <div class="blockcondition blockyes ">
+                                                                                                    <span style="padding: 6px;">Yes</span>
+                                                                                                </div>
+                                                                                                <ul>
+                                                                                                    <li>
+                                                                                                        <Activity ActivityId="activity-8" />
+                                                                                                    </li>
+                                                                                                </ul>
+                                                                                            </li>
+                                                                                        </ul>
+                                                                                    </li>
+                                                                                </ul>
+                                                                            </li>
+                                                                        </ul>
+                                                                    </li>
+                                                                </ul>
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                    <li>
+                                                        <div class="blockcondition blockno ">
+                                                            <span style="padding: 6px;">No</span>
+                                                        </div>
+                                                        <ul>
+                                                            <li>
+                                                                <Activity ActivityId="activity-4b" />
+                                                                <ul>
+                                                                    <li>
+                                                                        <module href="./src/partials/activity.html"></module>
+                                                                        <ul>
+                                                                            <li>
+                                                                                <div class="blockcondition blockno ">
+                                                                                    <span style="padding: 6px;">No</span>
+                                                                                </div>
+                                                                                <ul>
+                                                                                    <li>
+                                                                                        <Activity ActivityId="activity-9" />
+                                                                                        <ul>
+                                                                                            <li>
+                                                                                                <div class="blockcondition blockyes ">
+                                                                                                    <span style="padding: 6px;">Yes</span>
+                                                                                                </div>
+                                                                                                <ul>
+                                                                                                    <li>
+                                                                                                        <Activity ActivityId="activity-10" />
+                                                                                                        <ul>
+                                                                                                            <li>
+                                                                                                                <Activity ActivityId="activity-11" />
+                                                                                                            </li>
+                                                                                                        </ul>
+                                                                                                    </li>
+                                                                                                </ul>
+                                                                                            </li>
+                                                                                        </ul>
+                                                                                    </li>
+                                                                                </ul>
+                                                                            </li>
+                                                                            <li>
+                                                                                <div class="blockcondition blockyes ">
+                                                                                    <span style="padding: 6px;">Yes</span>
+                                                                                </div>
+                                                                                <ul>
+                                                                                    <li>
+                                                                                        <Activity ActivityId="activity-12" />
+                                                                                        <ul>
+                                                                                            <li>
+                                                                                                <div class="blockcondition blockyes ">
+                                                                                                    <span style="padding: 6px;">Yes</span>
+                                                                                                </div>
+                                                                                                <ul>
+                                                                                                    <li>
+                                                                                                        <Activity ActivityId="activity-13" />
+                                                                                                        <ul>
+                                                                                                            <li>
+                                                                                                                <div class="blockcondition blockyes ">
+                                                                                                                    <span style="padding: 6px;">+</span>
+                                                                                                                </div>
+                                                                                                                <ul>
+                                                                                                                    <li>
+                                                                                                                        <Activity ActivityId="activity-14" />
+                                                                                                                        <ul>
+                                                                                                                            <li>
+                                                                                                                                <Activity ActivityId="activity-15" />
+                                                                                                                                <ul>
+                                                                                                                                    <li>
+                                                                                                                                        <Activity ActivityId="activity-16" />
+                                                                                                                                    </li>
+                                                                                                                                </ul>
+                                                                                                                            </li>
+                                                                                                                        </ul>
+                                                                                                                    </li>
+                                                                                                                </ul>
+                                                                                                            </li>
+                                                                                                        </ul>
+                                                                                                    </li>
+                                                                                                </ul>
+                                                                                            </li>
+                                                                                        </ul>
+                                                                                    </li>
+                                                                                </ul>
+                                                                            </li>
+                                                                        </ul>
+                                                                    </li>
+                                                                </ul>
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <FlyoutPanel/>
+</div>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor.cs
new file mode 100644
index 000000000..e486a1e02
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Pages/Designer/Designer.razor.cs
@@ -0,0 +1,35 @@
+using System;
+using System.Threading.Tasks;
+using ElsaDashboard.Blazor.Shared.Services;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+
+namespace ElsaDashboard.Blazor.Shared.Pages.Designer
+{
+    partial class Designer
+    {
+        [Inject] private IJSRuntime JS { get; set; } = default!;
+        [Inject] private IFlyoutPanelService FlyoutPanelService { get; set; } = default!;
+        private IJSObjectReference _designerModule;
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                _designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/workflowDesigner.js");
+            }
+        }
+
+        public async ValueTask DisposeAsync()
+        {
+            if(_designerModule != null)
+                await _designerModule.DisposeAsync();
+        }
+
+        private async ValueTask OnActivityClick(MouseEventArgs e)
+        {
+            await FlyoutPanelService.ShowAsync();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/FlyoutPanelService.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/FlyoutPanelService.cs
new file mode 100644
index 000000000..65a1defd3
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/FlyoutPanelService.cs
@@ -0,0 +1,40 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace ElsaDashboard.Blazor.Shared.Services
+{
+    public class FlyoutPanelService : IFlyoutPanelService, IAsyncDisposable
+    {
+        private readonly IJSRuntime _jsRuntime;
+        private IJSObjectReference _module;
+
+        public FlyoutPanelService(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+        
+        public async ValueTask ShowAsync()
+        {
+            await InitModuleAsync();
+            await _module.InvokeVoidAsync("show");
+        }
+        
+        public async ValueTask HideAsync()
+        {
+            await InitModuleAsync();
+            await _module.InvokeVoidAsync("hide");
+        }
+
+        public async ValueTask DisposeAsync()
+        {
+            if (_module != null)
+                await _module.DisposeAsync();
+        }
+        
+        private async Task InitModuleAsync()
+        {
+            _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/flyoutPanel.js");
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/IFlyoutPanelService.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/IFlyoutPanelService.cs
new file mode 100644
index 000000000..3cb4c5758
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Services/IFlyoutPanelService.cs
@@ -0,0 +1,10 @@
+using System.Threading.Tasks;
+
+namespace ElsaDashboard.Blazor.Shared.Services
+{
+    public interface IFlyoutPanelService
+    {
+        ValueTask ShowAsync();
+        ValueTask HideAsync();
+    }
+}
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/FlyoutPanel.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/FlyoutPanel.razor
index 3f36ed787..b47e1b1f7 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/FlyoutPanel.razor
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/FlyoutPanel.razor
@@ -1,164 +1,203 @@
-<div x-data="{open: true}">
-    <section x-on:click.away="open = false;" class="absolute inset-y-0 pl-16 max-w-full right-0 flex">
-        <div class="w-screen max-w-md" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
-            <div class="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
-                <div class="flex-1 h-0 overflow-y-auto">
-                    <header class="space-y-1 py-6 px-4 bg-indigo-700 sm:px-6">
-                        <div class="flex items-center justify-between space-x-3">
-                            <h2 class="text-lg leading-7 font-medium text-white">
-                                New Project
-                            </h2>
-                            <div class="h-7 flex items-center">
-                                <button x-on:click="open = false;" aria-label="Close panel" class="text-indigo-200 hover:text-white transition ease-in-out duration-150">
-                                    <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div>
-                            <p class="text-sm leading-5 text-indigo-300">
-                                Get started by filling in the information below to create your new project.
-                            </p>
-                        </div>
-                    </header>
-                    <div class="flex-1 flex flex-col justify-between">
-                        <div class="px-4 divide-y divide-gray-200 sm:px-6">
-                            <div class="space-y-6 pt-6 pb-5">
+<div x-show="$store.flyoutPanel.show" x-data="{ open: false }" x-on:keydown.window.escape="$store.flyoutPanel.show = false" class="fixed inset-0 overflow-hidden">
+    <div class="absolute inset-0 overflow-hidden">
+        <section x-on:click.away="$store.flyoutPanel.show = false" class="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+            <div class="w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." x-show="$store.flyoutPanel.show == true" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
+                <div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
+                    <div class="flex-1">
+                        <!-- Header -->
+                        <header class="px-4 py-6 bg-gray-50 sm:px-6">
+                            <div class="flex items-start justify-between space-x-3">
                                 <div class="space-y-1">
-                                    <label for="project_name" class="block text-sm font-medium leading-5 text-gray-900">
+                                    <h2 class="text-lg leading-7 font-medium text-gray-900">
+                                        New project
+                                    </h2>
+                                    <p class="text-sm text-gray-500 leading-5">
+                                        Get started by filling in the information below to create your new project.
+                                    </p>
+                                </div>
+                                <div class="h-7 flex items-center">
+                                    <button x-on:click="$store.flyoutPanel.show = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
+                                        <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                        </header>
+
+                        <!-- Divider container -->
+                        <div class="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+                            <!-- Project name -->
+                            <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+                                <div>
+                                    <label for="project_name" class="block text-sm font-medium leading-5 text-gray-900 sm:mt-px sm:pt-2">
                                         Project name
                                     </label>
-                                    <div class="relative rounded-md shadow-sm">
-                                        <input id="project_name" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150">
+                                </div>
+                                <div class="sm:col-span-2">
+                                    <div class="rounded-md shadow-sm">
+                                        <input id="project_name" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="">
                                     </div>
                                 </div>
-                                <div class="space-y-1">
-                                    <label for="description" class="block text-sm font-medium leading-5 text-gray-900">
+                            </div>
+
+                            <!-- Project description -->
+                            <div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+                                <div>
+                                    <label for="project_description" class="block text-sm font-medium leading-5 text-gray-900 sm:mt-px sm:pt-2">
                                         Description
                                     </label>
-                                    <div class="relative rounded-md shadow-sm">
-                                        <textarea id="description" rows="4" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"></textarea>
+                                </div>
+                                <div class="sm:col-span-2">
+                                    <div class="flex rounded-md shadow-sm">
+                                        <textarea id="project_description" rows="3" class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></textarea>
                                     </div>
                                 </div>
-                                <div class="space-y-2">
+                            </div>
+
+                            <!-- Team members -->
+                            <div class="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:px-6 sm:py-5">
+                                <div>
                                     <h3 class="text-sm font-medium leading-5 text-gray-900">
                                         Team Members
                                     </h3>
-                                    <div>
-                                        <div class="flex space-x-2">
-                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
-                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
-                                            </a>
-                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
-                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Sally Preston">
-                                            </a>
-                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
-                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="Dave Gusman">
-                                            </a>
-                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
-                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Cook">
-                                            </a>
-                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
-                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.5&amp;w=256&amp;h=256&amp;q=80" alt="Brandon Rogers">
-                                            </a>
-                                            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-gray-200 text-gray-400 hover:text-gray-500 hover:border-gray-300 focus:text-gray-500 focus:border-gray-300 focus:outline-none transition ease-in-out duration-150" aria-label="Add team member">
-                                                <svg class="h-5 w-5" x-description="Heroicon name: plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
-                                                </svg>
-                                            </button>
-                                        </div>
+                                </div>
+                                <div class="sm:col-span-2">
+                                    <div class="flex space-x-2">
+
+                                        <a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                            <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
+                                        </a>
+
+                                        <a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                            <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
+                                        </a>
+
+                                        <a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                            <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
+                                        </a>
+
+                                        <a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                            <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
+                                        </a>
+
+                                        <a href="#" class="flex-shrink-0 rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                            <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Tom Warner">
+                                        </a>
+
+
+                                        <button type="button" class="flex-shrink-0 inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-gray-200 text-gray-400 hover:text-gray-500 hover:border-gray-300 focus:text-gray-500 focus:border-gray-300 focus:outline-none transition ease-in-out duration-150" aria-label="Add team member">
+                                            <svg class="h-5 w-5" x-description="Heroicon name: plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
+                                            </svg>
+                                        </button>
                                     </div>
                                 </div>
-                                <fieldset class="space-y-2">
-                                    <legend class="text-sm leading-5 font-medium text-gray-900">
-                                        Privacy
-                                    </legend>
-                                    <div class="space-y-5">
-                                        <div class="relative flex items-start">
-                                            <div class="absolute flex items-center h-5">
-                                                <input id="privacy_public" aria-describedby="privacy_public_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
-                                            </div>
-                                            <div class="pl-7 text-sm leading-5">
-                                                <label for="privacy_public" class="font-medium text-gray-900">
-                                                    Public access
-                                                </label>
-                                                <p id="privacy_public_description" class="text-gray-500">
-                                                    Everyone with the link will see this project.
-                                                </p>
-                                            </div>
-                                        </div>
-                                        <div>
+                            </div>
+
+                            <!-- Privacy -->
+                            <fieldset>
+                                <div class="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
+                                    <div>
+                                        <legend class="text-sm leading-5 font-medium text-gray-900">
+                                            Privacy
+                                        </legend>
+                                    </div>
+                                    <div class="space-y-5 sm:col-span-2">
+                                        <div class="space-y-5 sm:mt-0">
+
                                             <div class="relative flex items-start">
                                                 <div class="absolute flex items-center h-5">
-                                                    <input id="privacy_private-to-project" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+
+                                                    <input id="public_access" aria-describedby="public_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" checked="">
                                                 </div>
                                                 <div class="pl-7 text-sm leading-5">
-                                                    <label for="privacy_private-to-project" class="font-medium text-gray-900">
-                                                        Private to project members
+                                                    <label for="public_access" class="font-medium text-gray-900">
+                                                        Public access
                                                     </label>
-                                                    <p id="privacy_private-to-project_description" class="text-gray-500">
-                                                        Only members of this project would be able to access.
+                                                    <p id="public_access_description" class="text-gray-500">
+                                                        Everyone with the link will see this project
                                                     </p>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div>
+
                                             <div class="relative flex items-start">
                                                 <div class="absolute flex items-center h-5">
-                                                    <input id="privacy_private" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+
+                                                    <input id="restricted_access" aria-describedby="restricted_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
                                                 </div>
                                                 <div class="pl-7 text-sm leading-5">
-                                                    <label for="privacy_private" class="font-medium text-gray-900">
+                                                    <label for="restricted_access" class="font-medium text-gray-900">
+                                                        Private to Project Members
+                                                    </label>
+                                                    <p id="restricted_access_description" class="text-gray-500">
+                                                        Only members of this project would be able to access
+                                                    </p>
+                                                </div>
+                                            </div>
+
+                                            <div class="relative flex items-start">
+                                                <div class="absolute flex items-center h-5">
+
+                                                    <input id="private_access" aria-describedby="private_access_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+                                                </div>
+                                                <div class="pl-7 text-sm leading-5">
+                                                    <label for="private_access" class="font-medium text-gray-900">
                                                         Private to you
                                                     </label>
-                                                    <p id="privacy_private_description" class="text-gray-500">
-                                                        You are the only one able to access this project.
+                                                    <p id="private_access_description" class="text-gray-500">
+                                                        You are the only one able to access this project
                                                     </p>
                                                 </div>
                                             </div>
+
+                                        </div>
+                                        <hr class="border-gray-200">
+                                        <div class="flex flex-col space-between space-y-4 sm:flex-row sm:items-center sm:space-between sm:space-y-0">
+                                            <div class="flex-1">
+                                                <a href="#" class="group flex items-center text-sm leading-5 text-indigo-600 hover:text-indigo-900 focus:text-indigo-900 font-medium space-x-2.5">
+                                                    <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-900 group-focus:text-indigo-900" x-description="Heroicon name: link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
+                                                    </svg>
+                                                    <span>
+                              Copy link
+                            </span>
+                                                </a>
+                                            </div>
+                                            <div>
+                                                <a href="#" class="group flex items-center text-sm leading-5 text-gray-500 hover:text-gray-900 focus:text-gray-900 space-x-2.5">
+                                                    <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: question-mark-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+                                                    </svg>
+                                                    <span>
+                              Learn more about sharing
+                            </span>
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
-                                </fieldset>
-                            </div>
-                            <div class="space-y-4 pt-4 pb-6">
-                                <div class="flex text-sm leading-5">
-                                    <a href="#" class="group space-x-2 inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900 transition ease-in-out duration-150">
-                                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-900 transition ease-in-out duration-150" x-description="Heroicon name: link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
-                                        </svg>
-                                        <span>
-                                            Copy link
-                                        </span>
-                                    </a>
                                 </div>
-                                <div class="flex text-sm leading-5">
-                                    <a href="#" class="group space-x-2 inline-flex items-center text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
-                                        <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: question-mark-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
-                                        </svg>
-                                        <span>
-                                            Learn more about sharing
-                                        </span>
-                                    </a>
-                                </div>
-                            </div>
+                            </fieldset>
+                        </div>
+                    </div>
+
+                    <!-- Action buttons -->
+                    <div class="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
+                        <div class="space-x-3 flex justify-end">
+                <span class="inline-flex rounded-md shadow-sm">
+                  <button type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
+                    Cancel
+                  </button>
+                </span>
+                            <span class="inline-flex rounded-md shadow-sm">
+                  <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
+                    Create
+                  </button>
+                </span>
                         </div>
                     </div>
                 </div>
-                <div class="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
-                    <span class="inline-flex rounded-md shadow-sm">
-                        <button x-on:click="open = false; setTimeout(() => open = true, 1000);" type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
-                            Cancel
-                        </button>
-                    </span>
-                    <span class="inline-flex rounded-md shadow-sm">
-                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
-                            Save
-                        </button>
-                    </span>
-                </div>
             </div>
-        </div>
-    </section>
+        </section>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/MainLayout.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/MainLayout.razor
index 90aee3ec0..32e335684 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/MainLayout.razor
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/MainLayout.razor
@@ -1,24 +1,67 @@
 @inherits LayoutComponentBase
 
 <div>
-    <div style="min-height: 640px;" class="bg-gray-100">
-
-        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
+    <div style="min-height: 640px;">
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-on:keydown.window.escape="sidebarOpen = false">
             <NavMenu/>
+            <!-- Main column -->
             <div class="flex flex-col w-0 flex-1 overflow-hidden">
-                <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
-                    <button x-on:click.stop="sidebarOpen = true" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
-                        <svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                <!-- Search header -->
+                <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
+                    <button x-description="Sidebar toggle, controls the 'sidebarOpen' sidebar state." x-on:click.stop="sidebarOpen = true" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 lg:hidden" aria-label="Open sidebar">
+                        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+                            <path d="M4 6h16M4 12h8m-8 6h16"></path>
                         </svg>
                     </button>
+                    <div class="flex-1 flex justify-between px-4 sm:px-6 lg:px-8">
+                        <div class="flex-1 flex">
+                            <form class="w-full flex md:ml-0" action="#" method="GET">
+                                <label for="search_field" class="sr-only">Search</label>
+                                <div class="relative w-full text-gray-400 focus-within:text-gray-600">
+                                    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+                                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"></path>
+                                        </svg>
+                                    </div>
+                                    <input id="search_field" class="block w-full h-full pl-8 pr-3 py-2 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search">
+                                </div>
+                            </form>
+                        </div>
+                        <div class="flex items-center">
+                            <!-- Profile dropdown -->
+                            <div x-on:click.away="open = false" class="ml-3 relative" x-data="{ open: false }">
+                                <div>
+                                    <button x-on:click="open = !open" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline" id="user-menu" aria-label="User menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                                        <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+                                    </button>
+                                </div>
+                                <div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg" style="display: none;">
+                                    <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                        <div class="py-1">
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
+                                        </div>
+                                        <div class="border-t border-gray-100"></div>
+                                        <div class="py-1">
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
+                                        </div>
+                                        <div class="border-t border-gray-100"></div>
+                                        <div class="py-1">
+                                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
                     @Body
                 </main>
             </div>
-            <FlyoutPanel/>
         </div>
     </div>
 </div>
-<div style="clear: both; display: block; height: 0px;"></div>
\ No newline at end of file
+<div style="clear: both; display: block; height: 0;"></div>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/NavMenu.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/NavMenu.razor
index 2e5e7bc37..9bf421656 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/NavMenu.razor
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/Shared/NavMenu.razor
@@ -1,102 +1,196 @@
-@inherits LayoutComponentBase
-<div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
+<div x-show="sidebarOpen" class="lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state.">
     <div class="fixed inset-0 flex z-40">
-        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
-        <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
+        <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
                 </button>
             </div>
-            <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
-                <div class="flex-shrink-0 flex items-center px-4">
-                    <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
-                </div>
-                <nav class="mt-5 px-2 space-y-1">
-                    @foreach (var menuItem in MenuItems)
-                    {
-                        <NavLink href="@menuItem.Url" 
-                                 class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:text-gray-900 focus:bg-gray-50" 
-                                 ActiveClass="text-gray-900 bg-gray-50 text-gray-900 bg-gray-50 text-gray-900 bg-gray-100 hover:bg-gray-100 focus:bg-gray-200">
-                            <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
-                            </svg>
-                            @menuItem.Text
-                        </NavLink>
-                    }
-                </nav>
+            <div class="flex-shrink-0 flex items-center px-4">
+                <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
             </div>
-            <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
-                <a href="#" class="flex-shrink-0 group block focus:outline-none">
-                    <div class="flex items-center">
-                        <div>
-                            <img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-base leading-6 font-medium text-gray-700 group-hover:text-gray-900">
-                                Tom Cook
-                            </p>
-                            <p class="text-sm leading-5 font-medium text-gray-500 group-hover:text-gray-700 group-focus:underline transition ease-in-out duration-150">
-                                View profile
-                            </p>
+            <div class="mt-5 flex-1 h-0 overflow-y-auto">
+                <nav class="px-2">
+                    <div class="space-y-1">
+
+                        <a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-900 bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-200 focus:outline-none transition ease-in-out duration-150">
+                            <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: home" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                            </svg>
+                            Home
+                        </a>
+
+                        <a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
+                            <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: view-list" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+                            </svg>
+                            My tasks
+                        </a>
+
+                        <a href="#" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150">
+                            <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: clock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            Recent
+                        </a>
+
+                    </div>
+                    <div class="mt-8">
+                        <h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
+                            Teams
+                        </h3>
+                        <div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
+
+                            <a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                                <span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
+                                <span class="truncate">
+                        Engineering
+                      </span>
+                            </a>
+
+                            <a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                                <span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
+                                <span class="truncate">
+                        Human Resources
+                      </span>
+                            </a>
+
+                            <a href="#" class="group flex items-center px-3 py-2 text-base leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                                <span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
+                                <span class="truncate">
+                        Customer Success
+                      </span>
+                            </a>
+
                         </div>
                     </div>
-                </a>
+                </nav>
             </div>
         </div>
         <div class="flex-shrink-0 w-14">
-            <!-- Force sidebar to shrink to fit close icon -->
+            <!-- Dummy element to force sidebar to shrink to fit close icon -->
         </div>
     </div>
 </div>
 <!-- Static sidebar for desktop -->
-<div class="hidden md:flex md:flex-shrink-0">
-    <div class="flex flex-col w-64">
+<div class="hidden lg:flex lg:flex-shrink-0">
+    <div class="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-gray-100">
+        <div class="flex items-center flex-shrink-0 px-6">
+            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
+        </div>
         <!-- Sidebar component, swap this element with another sidebar if you like -->
-        <div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
-            <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-                <div class="flex items-center flex-shrink-0 px-4">
-                    <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-logo-purple-on-white.svg" alt="Workflow">
-                </div>
-                <nav class="mt-5 flex-1 px-2 bg-white space-y-1">
-                    @{ var match = NavLinkMatch.All; }
-                    @foreach (var menuItem in MenuItems)
-                    {
-                        <NavLink href="@menuItem.Url"
-                                 class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md hover:text-gray-900 focus:outline-none transition ease-in-out duration-150 text-gray-600 hover:bg-gray-50 focus:text-gray-900 focus:bg-gray-50"
-                                 Match="match"
-                                 ActiveClass="text-gray-900 bg-gray-100 hover:bg-gray-100 focus:bg-gray-200">
-                            <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
+        <div class="h-0 flex-1 flex flex-col overflow-y-auto">
+            <!-- User account dropdown -->
+            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="px-3 mt-6 relative inline-block text-left">
+                <div x-description="Dropdown menu toggle, controlling the show/hide state of dropdown menu.">
+                    <button x-on:click="open = !open" type="button" class="group w-full rounded-md px-3.5 py-2 text-sm leading-5 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:bg-gray-200 focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" x-bind:aria-expanded="open">
+                        <div class="flex w-full justify-between items-center">
+                            <div class="flex min-w-0 items-center justify-between space-x-3">
+                                <img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80" alt="">
+                                <div class="flex-1 min-w-0">
+                                    <h2 class="text-gray-900 text-sm leading-5 font-medium truncate">Jessy Schwarz</h2>
+                                    <p class="text-gray-500 text-sm leading-5 truncate">@@jessyschwarz</p>
+                                </div>
+                            </div>
+                            <svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                             </svg>
-                            @menuItem.Text
-                        </NavLink>
-
-                        match = NavLinkMatch.Prefix;
-                    }
-                </nav>
-            </div>
-            <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
-                <a href="#" class="flex-shrink-0 w-full group block">
-                    <div class="flex items-center">
-                        <div>
-                            <img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                         </div>
-                        <div class="ml-3">
-                            <p class="text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900">
-                                Tom Cook
-                            </p>
-                            <p class="text-xs leading-4 font-medium text-gray-500 group-hover:text-gray-700 transition ease-in-out duration-150">
-                                View profile
-                            </p>
+                    </button>
+                </div>
+                <div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="z-10 mx-3 origin-top absolute right-0 left-0 mt-1 rounded-md shadow-lg" style="display: none;">
+                    <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+                        <div class="py-1">
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">View profile</a>
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Settings</a>
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Notifications</a>
+                        </div>
+                        <div class="border-t border-gray-100"></div>
+                        <div class="py-1">
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Get desktop app</a>
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Support</a>
+                        </div>
+                        <div class="border-t border-gray-100"></div>
+                        <div class="py-1">
+                            <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Logout</a>
                         </div>
                     </div>
-                </a>
+                </div>
             </div>
+            <!-- Sidebar Search -->
+            <div class="px-3 mt-5">
+                <label for="search" class="sr-only">Search</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <svg class="mr-3 h-4 w-4 text-gray-400" x-description="Heroicon name: search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+                        </svg>
+                    </div>
+                    <input id="search" class="form-input block w-full pl-9 sm:text-sm sm:leading-5" placeholder="Search">
+                </div>
+            </div>
+            <!-- Navigation -->
+            <nav class="px-3 mt-6">
+                <div class="space-y-1">
+
+                    <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-900 bg-gray-200 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                        <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: home" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                        </svg>
+                        Home
+                    </a>
+
+                    <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                        <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: view-list" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+                        </svg>
+                        My tasks
+                    </a>
+
+                    <a href="#" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                        <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" x-description="Heroicon name: clock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        Recent
+                    </a>
+
+                </div>
+                <div class="mt-8">
+                    <!-- Secondary navigation -->
+                    <h3 class="px-3 text-xs leading-4 font-semibold text-gray-500 uppercase tracking-wider" id="teams-headline">
+                        Teams
+                    </h3>
+                    <div class="mt-1 space-y-1" role="group" aria-labelledby="teams-headline">
+
+                        <a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                            <span class="w-2.5 h-2.5 mr-4 bg-indigo-500 rounded-full"></span>
+                            <span class="truncate">
+                      Engineering
+                    </span>
+                        </a>
+
+                        <a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                            <span class="w-2.5 h-2.5 mr-4 bg-teal-400 rounded-full"></span>
+                            <span class="truncate">
+                      Human Resources
+                    </span>
+                        </a>
+
+                        <a href="#" class="group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-700 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150">
+                            <span class="w-2.5 h-2.5 mr-4 bg-orange-500 rounded-full"></span>
+                            <span class="truncate">
+                      Customer Success
+                    </span>
+                        </a>
+
+                    </div>
+                </div>
+            </nav>
         </div>
     </div>
 </div>
\ No newline at end of file