diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/public/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/public/workflow-designer.html
index 840fc5ffc..e5f3ceea3 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/public/workflow-designer.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/public/workflow-designer.html
@@ -291,50 +291,16 @@
                         <div class="tree">
                             <ul>
                                 <li>
-                                    <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" id="activity-1" 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">
-    <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"></path>
-                    <circle cx="12" cy="12" r="9"></circle>
-                    <polyline points="12 7 12 12 15 15"></polyline>
-                </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"></path>
-                        <circle cx="5" cy="12" r="1"></circle>
-                        <circle cx="12" cy="12" r="1"></circle>
-                        <circle cx="19" cy="12" r="1"></circle>
-                    </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>
+                                    <div class="inline-flex flex flex-col items-center">
+                                        <button id="start-button" type="button" class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150">
+                                            Start
+                                        </button>
+                                        <div id="start-button-plus" class="mt-6">
+                                            <svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                            </svg>
+                                        </div>
+                                    </div>
                                     <ul>
                                         <li>
                                             <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" id="activity-2" 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">
@@ -1225,23 +1191,18 @@
         </div>
         <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 x-on: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-md md: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">
                         <!-- Header -->
-                        <header class="px-4 py-6 bg-gray-50 sm:px-6">
+                        <header class="p-6">
                             <div class="flex items-start justify-between space-x-3">
-                                <div class="space-y-1">
-                                    <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>
+                                <h2 class="text-lg leading-7 font-medium text-gray-900">
+                                    Activities
+                                </h2>
                                 <div class="h-7 flex items-center">
-                                    <button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
+                                    <button @click="open = false; setTimeout(() => open = true, 1000);" 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>
@@ -1250,177 +1211,80 @@
                             </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>
-                                <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 class="p-6">
+                            <div class="relative rounded-md shadow-sm">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <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"></path>
+                                        <circle cx="10" cy="10" r="7"></circle>
+                                        <line x1="21" y1="21" x2="15" y2="15"></line>
+                                    </svg>
                                 </div>
+                                <input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5" placeholder="Search activities">
                             </div>
+                        </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>
-                                <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="border-b border-gray-200">
+                            <div class="px-6">
+                                <nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" aria-current="page">All</a>
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Actions</a>
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Triggers</a>
+                                </nav>
                             </div>
+                        </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="sm:col-span-2">
-                                    <div class="flex space-x-2">
+                        <div class="p-6 space-y-6 overflow-y-auto">
 
-                                        <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>
+                            <div>
+                                <h2>Primitives</h2>
 
-                                        <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>
+                                <ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
+                                    <li class="relative col-span-1 flex shadow-sm rounded-md">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
+                                            <svg class="h-10 w-10 text-white" 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>
-                                        </button>
-                                    </div>
-                                </div>
+                                        </div>
+                                        <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                                            <div class="flex-1 px-4 py-2 text-sm leading-5">
+                                                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
+                                                    Timer
+                                                </a>
+                                                <p class="text-gray-500">Trigger the workflow at the specified time interval.</p>
+                                            </div>
+                                        </div>
+                                    </li>
+
+                                </ul>
                             </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="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="public_access" class="font-medium text-gray-900">
-                                                        Public access
-                                                    </label>
-                                                    <p id="public_access_description" class="text-gray-500">
-                                                        Everyone with the link will see this project
-                                                    </p>
-                                                </div>
-                                            </div>
-
-                                            <div class="relative flex items-start">
-                                                <div class="absolute flex items-center h-5">
-
-                                                    <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="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="private_access_description" class="text-gray-500">
-                                                        You are the only one able to access this project
-                                                    </p>
-                                                </div>
-                                            </div>
+                            <div>
+                                <h2>Primitives</h2>
 
+                                <ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
+                                    <li class="relative col-span-1 flex shadow-sm rounded-md">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
+                                            <svg class="h-10 w-10 text-white" 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>
                                         </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>
+                                        <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                                            <div class="flex-1 px-4 py-2 text-sm leading-5">
+                                                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
+                                                    Timer
                                                 </a>
+                                                <p class="text-gray-500">Trigger the workflow at the specified time
+                                                    interval.</p>
                                             </div>
                                         </div>
-                                    </div>
-                                </div>
-                            </fieldset>
+                                    </li>
+
+                                </ul>
+                            </div>
                         </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>
         </section>
@@ -1453,7 +1317,12 @@
         jsPlumbInstance.batch(function () {
 
             jsPlumbInstance.connect({
-                source: "activity-1",
+                source: "start-button",
+                target: "start-button-plus"
+            });
+
+            jsPlumbInstance.connect({
+                source: "start-button-plus",
                 target: "activity-2"
             });
 
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/partials/flyoutpanel.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/partials/flyoutpanel.html
index a83a47cdf..c173e30cc 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/partials/flyoutpanel.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/partials/flyoutpanel.html
@@ -1,22 +1,22 @@
-<div x-show="open" x-data="{ open: true }" x-on: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 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">
+        <section x-on:click.away="open = false" class="absolute inset-y-0 right-0 pl-10 max-w-md md: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">
                         <!-- Header -->
-                        <header class="px-4 py-6 bg-gray-50 sm:px-6">
+                        <header class="p-6">
                             <div class="flex items-start justify-between space-x-3">
-                                <div class="space-y-1">
-                                    <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>
+                                <h2 class="text-lg leading-7 font-medium text-gray-900">
+                                    Activities
+                                </h2>
                                 <div class="h-7 flex items-center">
-                                    <button x-on:click="open = false;" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
+                                    <button @click="open = false; setTimeout(() => open = true, 1000);" 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>
@@ -25,177 +25,89 @@
                             </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>
-                                <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 class="p-6">
+                            <div class="relative rounded-md shadow-sm">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <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="10" cy="10" r="7"/>
+                                        <line x1="21" y1="21" x2="15" y2="15"/>
+                                    </svg>
                                 </div>
+                                <input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5" placeholder="Search activities">
                             </div>
+                        </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>
-                                <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="border-b border-gray-200">
+                            <div class="px-6">
+                                <nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" aria-current="page">All</a>
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Actions</a>
+                                    <a href="#" class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">Triggers</a>
+                                </nav>
                             </div>
+                        </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="sm:col-span-2">
-                                    <div class="flex space-x-2">
+                        <div class="p-6 space-y-6 overflow-y-auto">
 
-                                        <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>
+                            <div>
+                                <h2>Primitives</h2>
 
-                                        <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>
+                                <ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
+                                    <li class="relative col-span-1 flex shadow-sm rounded-md">
+                                        <div
+                                            class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
+                                            <svg class="h-10 w-10 text-white" 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"/>
                                             </svg>
-                                        </button>
-                                    </div>
-                                </div>
+                                        </div>
+                                        <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                                            <div class="flex-1 px-4 py-2 text-sm leading-5">
+                                                <a href="#" class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
+                                                    Timer
+                                                </a>
+                                                <p class="text-gray-500">Trigger the workflow at the specified time interval.</p>
+                                            </div>
+                                        </div>
+                                    </li>
+
+                                </ul>
                             </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="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="public_access" class="font-medium text-gray-900">
-                                                        Public access
-                                                    </label>
-                                                    <p id="public_access_description" class="text-gray-500">
-                                                        Everyone with the link will see this project
-                                                    </p>
-                                                </div>
-                                            </div>
-
-                                            <div class="relative flex items-start">
-                                                <div class="absolute flex items-center h-5">
-
-                                                    <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="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="private_access_description" class="text-gray-500">
-                                                        You are the only one able to access this project
-                                                    </p>
-                                                </div>
-                                            </div>
+                            <div>
+                                <h2>Primitives</h2>
 
+                                <ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
+                                    <li class="relative col-span-1 flex shadow-sm rounded-md">
+                                        <div
+                                            class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
+                                            <svg class="h-10 w-10 text-white" 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"/>
+                                            </svg>
                                         </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>
+                                        <div
+                                            class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                                            <div class="flex-1 px-4 py-2 text-sm leading-5">
+                                                <a href="#"
+                                                   class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
+                                                    Timer
                                                 </a>
+                                                <p class="text-gray-500">Trigger the workflow at the specified time
+                                                    interval.</p>
                                             </div>
                                         </div>
-                                    </div>
-                                </div>
-                            </fieldset>
+                                    </li>
+
+                                </ul>
+                            </div>
                         </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>
         </section>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/workflow-designer.html
index f341baa39..0a58d4c0b 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/workflow-designer.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/ClientApp/src/workflow-designer.html
@@ -1,4 +1,6 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.0/js/jsplumb.min.js" integrity="sha512-vVRd/8cnj1FEVrL2EPkHJ+om6q7hlTFgoq7Wixfby4hNneUomS+G5zkwE1IIc+Ru8HZ1hxDfH8lcIsXpydfVmw==" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.0/js/jsplumb.min.js"
+        integrity="sha512-vVRd/8cnj1FEVrL2EPkHJ+om6q7hlTFgoq7Wixfby4hNneUomS+G5zkwE1IIc+Ru8HZ1hxDfH8lcIsXpydfVmw=="
+        crossorigin="anonymous"></script>
 
 <module href="./src/partials/layout.html">
     <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">
@@ -9,7 +11,8 @@
         </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">
+            <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>
@@ -24,13 +27,27 @@
                         <div class="tree">
                             <ul>
                                 <li>
-                                    <module href="./src/partials/activity.html" locals='{ "id": "activity-1" }'></module>
+                                    <div class="inline-flex flex flex-col items-center">
+                                        <button id="start-button" type="button"
+                                                class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150">
+                                            Start
+                                        </button>
+                                        <div id="start-button-plus" class="mt-6">
+                                            <svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24"
+                                                 stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                            </svg>
+                                        </div>
+                                    </div>
                                     <ul>
                                         <li>
-                                            <module href="./src/partials/activity.html" locals='{ "id": "activity-2" }'></module>
+                                            <module href="./src/partials/activity.html"
+                                                    locals='{ "id": "activity-2" }'></module>
                                             <ul>
                                                 <li>
-                                                    <module href="./src/partials/activity.html" locals='{ "id": "activity-3" }'></module>
+                                                    <module href="./src/partials/activity.html"
+                                                            locals='{ "id": "activity-3" }'></module>
                                                     <ul>
                                                         <li>
                                                             <div class="blockcondition blockyes ">
@@ -38,36 +55,47 @@
                                                             </div>
                                                             <ul>
                                                                 <li>
-                                                                    <module href="./src/partials/activity.html" locals='{ "id": "activity-4a" }'></module>
+                                                                    <module href="./src/partials/activity.html"
+                                                                            locals='{ "id": "activity-4a" }'></module>
                                                                     <ul>
                                                                         <li>
-                                                                            <module href="./src/partials/activity.html" locals='{ "id": "activity-5" }'></module>
+                                                                            <module href="./src/partials/activity.html"
+                                                                                    locals='{ "id": "activity-5" }'></module>
                                                                             <ul>
                                                                                 <li>
-                                                                                    <div class="blockcondition blockno ">
-                                                                                        <span style="padding: 6px;">No</span>
+                                                                                    <div
+                                                                                        class="blockcondition blockno ">
+                                                                                        <span
+                                                                                            style="padding: 6px;">No</span>
                                                                                     </div>
                                                                                     <ul>
                                                                                         <li>
-                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                            <module
+                                                                                                href="./src/partials/activity.html"></module>
                                                                                         </li>
                                                                                     </ul>
                                                                                 </li>
                                                                                 <li>
-                                                                                    <div class="blockcondition blockyes ">
-                                                                                        <span style="padding: 6px;">Yes</span>
+                                                                                    <div
+                                                                                        class="blockcondition blockyes ">
+                                                                                        <span
+                                                                                            style="padding: 6px;">Yes</span>
                                                                                     </div>
                                                                                     <ul>
                                                                                         <li>
-                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                            <module
+                                                                                                href="./src/partials/activity.html"></module>
                                                                                             <ul>
                                                                                                 <li>
-                                                                                                    <div class="blockcondition blockyes ">
-                                                                                                        <span style="padding: 6px;">Yes</span>
+                                                                                                    <div
+                                                                                                        class="blockcondition blockyes ">
+                                                                                                        <span
+                                                                                                            style="padding: 6px;">Yes</span>
                                                                                                     </div>
                                                                                                     <ul>
                                                                                                         <li>
-                                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                                            <module
+                                                                                                                href="./src/partials/activity.html"></module>
                                                                                                         </li>
                                                                                                     </ul>
                                                                                                 </li>
@@ -87,29 +115,38 @@
                                                             </div>
                                                             <ul>
                                                                 <li>
-                                                                    <module href="./src/partials/activity.html" locals='{ "id": "activity-4b" }'></module>
+                                                                    <module href="./src/partials/activity.html"
+                                                                            locals='{ "id": "activity-4b" }'></module>
                                                                     <ul>
                                                                         <li>
-                                                                            <module href="./src/partials/activity.html"></module>
+                                                                            <module
+                                                                                href="./src/partials/activity.html"></module>
                                                                             <ul>
                                                                                 <li>
-                                                                                    <div class="blockcondition blockno ">
-                                                                                        <span style="padding: 6px;">No</span>
+                                                                                    <div
+                                                                                        class="blockcondition blockno ">
+                                                                                        <span
+                                                                                            style="padding: 6px;">No</span>
                                                                                     </div>
                                                                                     <ul>
                                                                                         <li>
-                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                            <module
+                                                                                                href="./src/partials/activity.html"></module>
                                                                                             <ul>
                                                                                                 <li>
-                                                                                                    <div class="blockcondition blockyes ">
-                                                                                                        <span style="padding: 6px;">Yes</span>
+                                                                                                    <div
+                                                                                                        class="blockcondition blockyes ">
+                                                                                                        <span
+                                                                                                            style="padding: 6px;">Yes</span>
                                                                                                     </div>
                                                                                                     <ul>
                                                                                                         <li>
-                                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                                            <module
+                                                                                                                href="./src/partials/activity.html"></module>
                                                                                                             <ul>
                                                                                                                 <li>
-                                                                                                                    <module href="./src/partials/activity.html"></module>
+                                                                                                                    <module
+                                                                                                                        href="./src/partials/activity.html"></module>
                                                                                                                 </li>
                                                                                                             </ul>
                                                                                                         </li>
@@ -120,34 +157,45 @@
                                                                                     </ul>
                                                                                 </li>
                                                                                 <li>
-                                                                                    <div class="blockcondition blockyes ">
-                                                                                        <span style="padding: 6px;">Yes</span>
+                                                                                    <div
+                                                                                        class="blockcondition blockyes ">
+                                                                                        <span
+                                                                                            style="padding: 6px;">Yes</span>
                                                                                     </div>
                                                                                     <ul>
                                                                                         <li>
-                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                            <module
+                                                                                                href="./src/partials/activity.html"></module>
                                                                                             <ul>
                                                                                                 <li>
-                                                                                                    <div class="blockcondition blockyes ">
-                                                                                                        <span style="padding: 6px;">Yes</span>
+                                                                                                    <div
+                                                                                                        class="blockcondition blockyes ">
+                                                                                                        <span
+                                                                                                            style="padding: 6px;">Yes</span>
                                                                                                     </div>
                                                                                                     <ul>
                                                                                                         <li>
-                                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                                            <module
+                                                                                                                href="./src/partials/activity.html"></module>
                                                                                                             <ul>
                                                                                                                 <li>
-                                                                                                                    <div class="blockcondition blockyes ">
-                                                                                                                        <span style="padding: 6px;">+</span>
+                                                                                                                    <div
+                                                                                                                        class="blockcondition blockyes ">
+                                                                                                                        <span
+                                                                                                                            style="padding: 6px;">+</span>
                                                                                                                     </div>
                                                                                                                     <ul>
                                                                                                                         <li>
-                                                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                                                            <module
+                                                                                                                                href="./src/partials/activity.html"></module>
                                                                                                                             <ul>
                                                                                                                                 <li>
-                                                                                                                                    <module href="./src/partials/activity.html"></module>
+                                                                                                                                    <module
+                                                                                                                                        href="./src/partials/activity.html"></module>
                                                                                                                                     <ul>
                                                                                                                                         <li>
-                                                                                                                                            <module href="./src/partials/activity.html"></module>
+                                                                                                                                            <module
+                                                                                                                                                href="./src/partials/activity.html"></module>
                                                                                                                                         </li>
                                                                                                                                     </ul>
                                                                                                                                 </li>
@@ -202,7 +250,12 @@
         jsPlumbInstance.batch(function () {
 
             jsPlumbInstance.connect({
-                source: "activity-1",
+                source: "start-button",
+                target: "start-button-plus"
+            });
+
+            jsPlumbInstance.connect({
+                source: "start-button-plus",
                 target: "activity-2"
             });
 
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor
index 65119946f..7ab3cb2a4 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor
@@ -23,13 +23,26 @@
                     <div class="tree">
                         <ul>
                             <li>
-                                <Activity ActivityId="activity-1" OnClick="@(async e => await OnActivityClick(e))" />
+                                <div class="inline-flex flex flex-col items-center">
+                                    <button id="start-button" type="button"
+                                            class="px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-600 hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition ease-in-out duration-150"
+                                            @onclick="@(async e => await OnStartClick(e))">
+                                        Start
+                                    </button>
+                                    <div id="start-button-plus" class="mt-6">
+                                        <svg class="h-8 w-8 text-gray-400 hover:text-blue-500 cursor-pointer" fill="none" viewBox="0 0 24 24"
+                                             stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                        </svg>
+                                    </div>
+                                </div>
                                 <ul>
                                     <li>
-                                        <Activity ActivityId="activity-2" />
+                                        <Activity ActivityId="activity-2" OnClick="@(async e => await OnActivityClick(e))"/>
                                         <ul>
                                             <li>
-                                                <Activity ActivityId="activity-3" />
+                                                <Activity ActivityId="activity-3"/>
                                                 <ul>
                                                     <li>
                                                         <div class="blockcondition blockyes ">
@@ -37,10 +50,10 @@
                                                         </div>
                                                         <ul>
                                                             <li>
-                                                                <Activity ActivityId="activity-4a" />
+                                                                <Activity ActivityId="activity-4a"/>
                                                                 <ul>
                                                                     <li>
-                                                                        <Activity ActivityId="activity-5" />
+                                                                        <Activity ActivityId="activity-5"/>
                                                                         <ul>
                                                                             <li>
                                                                                 <div class="blockcondition blockno ">
@@ -48,7 +61,7 @@
                                                                                 </div>
                                                                                 <ul>
                                                                                     <li>
-                                                                                        <Activity ActivityId="activity-6" />
+                                                                                        <Activity ActivityId="activity-6"/>
                                                                                     </li>
                                                                                 </ul>
                                                                             </li>
@@ -58,7 +71,7 @@
                                                                                 </div>
                                                                                 <ul>
                                                                                     <li>
-                                                                                        <Activity ActivityId="activity-7" />
+                                                                                        <Activity ActivityId="activity-7"/>
                                                                                         <ul>
                                                                                             <li>
                                                                                                 <div class="blockcondition blockyes ">
@@ -66,7 +79,7 @@
                                                                                                 </div>
                                                                                                 <ul>
                                                                                                     <li>
-                                                                                                        <Activity ActivityId="activity-8" />
+                                                                                                        <Activity ActivityId="activity-8"/>
                                                                                                     </li>
                                                                                                 </ul>
                                                                                             </li>
@@ -86,7 +99,7 @@
                                                         </div>
                                                         <ul>
                                                             <li>
-                                                                <Activity ActivityId="activity-4b" />
+                                                                <Activity ActivityId="activity-4b"/>
                                                                 <ul>
                                                                     <li>
                                                                         <module href="./src/partials/activity.html"></module>
@@ -97,7 +110,7 @@
                                                                                 </div>
                                                                                 <ul>
                                                                                     <li>
-                                                                                        <Activity ActivityId="activity-9" />
+                                                                                        <Activity ActivityId="activity-9"/>
                                                                                         <ul>
                                                                                             <li>
                                                                                                 <div class="blockcondition blockyes ">
@@ -105,10 +118,10 @@
                                                                                                 </div>
                                                                                                 <ul>
                                                                                                     <li>
-                                                                                                        <Activity ActivityId="activity-10" />
+                                                                                                        <Activity ActivityId="activity-10"/>
                                                                                                         <ul>
                                                                                                             <li>
-                                                                                                                <Activity ActivityId="activity-11" />
+                                                                                                                <Activity ActivityId="activity-11"/>
                                                                                                             </li>
                                                                                                         </ul>
                                                                                                     </li>
@@ -124,7 +137,7 @@
                                                                                 </div>
                                                                                 <ul>
                                                                                     <li>
-                                                                                        <Activity ActivityId="activity-12" />
+                                                                                        <Activity ActivityId="activity-12"/>
                                                                                         <ul>
                                                                                             <li>
                                                                                                 <div class="blockcondition blockyes ">
@@ -132,7 +145,7 @@
                                                                                                 </div>
                                                                                                 <ul>
                                                                                                     <li>
-                                                                                                        <Activity ActivityId="activity-13" />
+                                                                                                        <Activity ActivityId="activity-13"/>
                                                                                                         <ul>
                                                                                                             <li>
                                                                                                                 <div class="blockcondition blockyes ">
@@ -140,13 +153,13 @@
                                                                                                                 </div>
                                                                                                                 <ul>
                                                                                                                     <li>
-                                                                                                                        <Activity ActivityId="activity-14" />
+                                                                                                                        <Activity ActivityId="activity-14"/>
                                                                                                                         <ul>
                                                                                                                             <li>
-                                                                                                                                <Activity ActivityId="activity-15" />
+                                                                                                                                <Activity ActivityId="activity-15"/>
                                                                                                                                 <ul>
                                                                                                                                     <li>
-                                                                                                                                        <Activity ActivityId="activity-16" />
+                                                                                                                                        <Activity ActivityId="activity-16"/>
                                                                                                                                     </li>
                                                                                                                                 </ul>
                                                                                                                             </li>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor.cs b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor.cs
index 7179700f8..d090bfe80 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor.cs
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Pages/Designer/Designer.razor.cs
@@ -16,7 +16,7 @@ namespace ElsaDashboard.Blazor.Application.Pages.Designer
         {
             if (firstRender)
             {
-                _designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Shared/workflowDesigner.js");
+                _designerModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/ElsaDashboard.Blazor.Application/workflowDesigner.js");
             }
         }
 
@@ -26,6 +26,11 @@ namespace ElsaDashboard.Blazor.Application.Pages.Designer
                 await _designerModule.DisposeAsync();
         }
 
+        private async ValueTask OnStartClick(MouseEventArgs e)
+        {
+            await FlyoutPanelService.ShowAsync();
+        }
+
         private async ValueTask OnActivityClick(MouseEventArgs e)
         {
             await FlyoutPanelService.ShowAsync();
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Shared/FlyoutPanel.razor b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Shared/FlyoutPanel.razor
index b47e1b1f7..a09780a6b 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Shared/FlyoutPanel.razor
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Application/Shared/FlyoutPanel.razor
@@ -1,201 +1,107 @@
 <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">
+        <section x-on:click.away="$store.flyoutPanel.show = false" class="absolute inset-y-0 right-0 pl-10 max-w-md md: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">
+                        <header class="p-6">
                             <div class="flex items-start justify-between space-x-3">
-                                <div class="space-y-1">
-                                    <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>
+                                <h2 class="text-lg leading-7 font-medium text-gray-900">
+                                    Activities
+                                </h2>
                                 <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>
+                                    <button @click="open = false; setTimeout(() => open = true, 1000);"
+                                             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>
-                                <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 class="p-6">
+                            <div class="relative rounded-md shadow-sm">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <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="10" cy="10" r="7"/>
+                                        <line x1="21" y1="21" x2="15" y2="15"/>
+                                    </svg>
                                 </div>
+                                <input id="email" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
+                                       placeholder="Search activities">
                             </div>
+                        </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>
-                                <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="border-b border-gray-200">
+                            <div class="px-6">
+                                <nav class="-mb-px flex space-x-6" x-descriptions="Tab component">
+                                    <a href="#"
+                                       class="whitespace-no-wrap pb-4 px-1 border-b-2 border-blue-500 font-medium text-sm leading-5 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700"
+                                       aria-current="page">
+                                        All
+                                    </a>
+                                    <a href="#"
+                                       class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
+                                        Actions
+                                    </a>
+                                    <a href="#"
+                                       class="whitespace-no-wrap pb-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
+                                        Triggers
+                                    </a>
+                                </nav>
                             </div>
+                        </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 class="p-6 space-y-6 overflow-y-auto">
+
+                            @for (var category = 0; category < 3; category++)
+                            {
                                 <div>
-                                    <h3 class="text-sm font-medium leading-5 text-gray-900">
-                                        Team Members
-                                    </h3>
-                                </div>
-                                <div class="sm:col-span-2">
-                                    <div class="flex space-x-2">
+                                    <h2>Primitives</h2>
 
-                                        <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>
-                            </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="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="public_access" class="font-medium text-gray-900">
-                                                        Public access
-                                                    </label>
-                                                    <p id="public_access_description" class="text-gray-500">
-                                                        Everyone with the link will see this project
-                                                    </p>
-                                                </div>
-                                            </div>
-
-                                            <div class="relative flex items-start">
-                                                <div class="absolute flex items-center h-5">
-
-                                                    <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="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="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>
+                                    <ul class="grid grid-cols-1 gap-4 mt-3" x-max="1">
+                                        @for (var i = 0; i < 8; i++)
+                                        {
+                                            <li class="relative col-span-1 flex shadow-sm rounded-md">
+                                                <div
+                                                    class="flex-shrink-0 flex items-center justify-center w-16 bg-blue-600 text-white text-sm leading-5 font-medium rounded-l-md">
+                                                    <svg class="h-10 w-10 text-white" 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"/>
                                                     </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>
+                                                </div>
+                                                <div
+                                                    class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                                                    <div class="flex-1 px-4 py-2 text-sm leading-5">
+                                                        <a href="#"
+                                                           class="text-gray-900 font-medium hover:text-gray-600 transition ease-in-out duration-150">
+                                                            Timer
+                                                        </a>
+                                                        <p class="text-gray-500">
+                                                            Trigger the workflow at the specified time
+                                                            interval.
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </li>
+                                        }
+                                    </ul>
                                 </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>
         </section>