diff --git a/src/designer/elsa-workflows-designer/package.json b/src/designer/elsa-workflows-designer/package.json
index f86ae266c..661b26d9c 100644
--- a/src/designer/elsa-workflows-designer/package.json
+++ b/src/designer/elsa-workflows-designer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsa-workflows/elsa-workflows-designer",
-  "version": "3.0.2-preview.9",
+  "version": "3.0.2-preview.10",
   "description": "A workflow designer for Elsa 3",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
diff --git a/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/assets/logo.png b/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/assets/logo.png
new file mode 100644
index 000000000..47e1cadea
Binary files /dev/null and b/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/assets/logo.png differ
diff --git a/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx b/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx
index a2874a2e4..66151ce78 100644
--- a/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/toolbar/workflow-toolbar/workflow-toolbar.tsx
@@ -1,4 +1,4 @@
-import {Component, h} from '@stencil/core';
+import {Component, getAssetPath, h} from '@stencil/core';
 import Container from 'typedi';
 import {NotificationEventTypes} from '../../../modules/notifications/event-types';
 import {EventBus} from '../../../services';
@@ -6,6 +6,7 @@ import toolbarComponentStore from "../../../data/toolbar-component-store";
 
 @Component({
   tag: 'elsa-workflow-toolbar',
+  assetsDirs: ['assets']
 })
 export class WorkflowToolbar {
   private readonly eventBus: EventBus;
@@ -20,36 +21,51 @@ export class WorkflowToolbar {
   };
 
   render() {
+    const logoPath = getAssetPath('./assets/logo.png');
+
     return (
       <nav class="bg-gray-800">
         <div class="mx-auto px-2 sm:px-6 lg:px-6">
-          <div class="relative flex items-center justify-end h-16">
-            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 z-40">
-              {/* Notifications*/}
-              <button
-                onClick={e => this.onNotificationClick(e)}
-                type="button"
-                class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white mr-4"
-              >
-                <span class="sr-only">View notifications</span>
-                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-                  />
-                </svg>
-              </button>
-
-              {toolbarComponentStore.components.map(component => (
-                <div class="flex-shrink-0 mr-4">
-                  {component()}
+          <div class="flex items-center h-16">
+            <div class="flex-shrink-0">
+              <div class="flex items-end space-x-1">
+                <div>
+                  <a href="#"><img class="h-6 w-6" src={logoPath} alt="Workflow"/></a>
                 </div>
-              ))}
+                <div>
+                  <span class="text-gray-300 text-sm">elsa 3.0.0</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex-grow"></div>
+            <div class="relative flex items-center justify-end h-16">
+              <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 z-40">
+                {/* Notifications*/}
+                <button
+                  onClick={e => this.onNotificationClick(e)}
+                  type="button"
+                  class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white mr-4"
+                >
+                  <span class="sr-only">View notifications</span>
+                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                    />
+                  </svg>
+                </button>
 
-              {/* Menu */}
-              <elsa-workflow-toolbar-menu/>
+                {toolbarComponentStore.components.map(component => (
+                  <div class="flex-shrink-0 mr-4">
+                    {component()}
+                  </div>
+                ))}
+
+                {/* Menu */}
+                <elsa-workflow-toolbar-menu/>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/designer/elsa-workflows-designer/src/modules/home/components/assets/elsa-breaking-barriers-undraw.svg b/src/designer/elsa-workflows-designer/src/modules/home/components/assets/elsa-breaking-barriers-undraw.svg
new file mode 100644
index 000000000..6caeb5a01
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/modules/home/components/assets/elsa-breaking-barriers-undraw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="934.21868" height="782.34673" viewBox="0 0 934.21868 782.34673" xmlns:xlink="http://www.w3.org/1999/xlink"><title>breaking obstacles</title><path d="M754.71482,579.47676c39.87314,381.5223,192.9013,330.19373,306.92-209.08594C1091.635,228.49792,995.04,90.4869,852.54891,63.47077s-279.90391,66.59483-306.92,209.086S739.63978,435.23273,754.71482,579.47676Z" transform="translate(-132.89066 -58.82664)" fill="#f2f2f2"/><path d="M261.087,699.2305c0,48.27332-28.69772,65.12856-64.09816,65.12856s-64.09815-16.85524-64.09815-65.12856,64.09815-109.68458,64.09815-109.68458S261.087,650.95719,261.087,699.2305Z" transform="translate(-132.89066 -58.82664)" fill="#f2f2f2"/><polygon points="61.763 698.148 62.42 657.748 89.74 607.767 62.522 651.41 62.818 633.244 81.647 597.084 62.896 628.437 62.896 628.437 63.426 595.765 83.589 566.977 63.51 590.628 63.842 530.719 61.757 610.027 61.929 606.756 41.429 575.378 61.6 613.036 59.69 649.525 59.633 648.556 36.001 615.536 59.561 651.978 59.323 656.541 59.28 656.61 59.299 656.984 54.453 749.559 60.928 749.559 61.705 701.743 85.208 665.39 61.763 698.148" fill="#f2f2f2"/><path d="M261.087,699.2305c0,48.27332-28.69772,65.12856-64.09816,65.12856s-64.09815-16.85524-64.09815-65.12856,64.09815-109.68458,64.09815-109.68458S261.087,650.95719,261.087,699.2305Z" transform="translate(-132.89066 -58.82664)" fill="#f2f2f2"/><polygon points="61.763 698.148 62.42 657.748 89.74 607.767 62.522 651.41 62.818 633.244 81.647 597.084 62.896 628.437 62.896 628.437 63.426 595.765 83.589 566.977 63.51 590.628 63.842 530.719 61.757 610.027 61.929 606.756 41.429 575.378 61.6 613.036 59.69 649.525 59.633 648.556 36.001 615.536 59.561 651.978 59.323 656.541 59.28 656.61 59.299 656.984 54.453 749.559 60.928 749.559 61.705 701.743 85.208 665.39 61.763 698.148" fill="#3f3d56"/><ellipse cx="467.1963" cy="751.84673" rx="464" ry="30.5" fill="#3f3d56"/><ellipse cx="216.1963" cy="748.03477" rx="116" ry="20.31196" opacity="0.1"/><ellipse cx="702.1963" cy="752.84673" rx="116" ry="17.5" opacity="0.1"/><path d="M368.92923,446.72334l34.33541,1.32059s30.37363,14.52652,30.37363,26.41185-35.656-13.20592-35.656-13.20592l-29.053-1.3206Z" transform="translate(-132.89066 -58.82664)" fill="#ffb9b9"/><path d="M368.92923,446.72334l34.33541,1.32059s30.37363,14.52652,30.37363,26.41185-35.656-13.20592-35.656-13.20592l-29.053-1.3206Z" transform="translate(-132.89066 -58.82664)" opacity="0.1"/><path d="M370.24983,436.1586s6.603,15.84711,5.28237,23.77066-51.50312,5.28237-51.50312,5.28237l7.92356-23.77066Z" transform="translate(-132.89066 -58.82664)" fill="#ffb9b9"/><polygon points="189.818 663.901 187.177 699.557 209.627 700.877 213.588 666.542 189.818 663.901" fill="#ffb9b9"/><path d="M322.70849,457.28808,317.42612,470.494s-11.88533,11.88533-9.24415,40.93837,3.96178,30.37363,3.96178,30.37363S301.579,725.36838,310.82316,726.689s60.74726,26.41186,66.02963-2.64118S384.77634,577.462,384.77634,577.462L324.02908,467.85282Z" transform="translate(-132.89066 -58.82664)" fill="#2f2e41"/><path d="M322.70849,457.28808,317.42612,470.494s-11.88533,11.88533-9.24415,40.93837,3.96178,30.37363,3.96178,30.37363S301.579,725.36838,310.82316,726.689s60.74726,26.41186,66.02963-2.64118S384.77634,577.462,384.77634,577.462L324.02908,467.85282Z" transform="translate(-132.89066 -58.82664)" opacity="0.1"/><polygon points="249.244 642.771 237.359 659.939 257.168 667.862 274.336 640.13 249.244 642.771" fill="#ffb9b9"/><circle cx="237.35916" cy="245.2727" r="30.37363" fill="#ffb9b9"/><path d="M346.47916,293.53459s-26.41185,27.73245-34.33541,29.053,27.73244,23.77067,27.73244,23.77067v-7.92356s11.88534-11.88533,18.4883-13.20592S346.47916,293.53459,346.47916,293.53459Z" transform="translate(-132.89066 -58.82664)" fill="#ffb9b9"/><path d="M325.34968,450.68512,317.42612,470.494s-15.84711,39.61777,6.603,60.74726S411.1882,618.40038,408.547,632.9269s-41.78532,65.87365-29.47651,72.5546,147.00925-17.08971,148.32985-32.93682c.49522-5.94267-4.3951-17.45659-10.70145-29.52763a310.74249,310.74249,0,0,0-43.6237-62.73024L383.45575,479.73815s-9.24415-19.80889-6.603-23.77066c0,0-10.56474-10.56474-42.259-2.64119Z" transform="translate(-132.89066 -58.82664)" fill="#2f2e41"/><path d="M318.74671,754.42142s-6.603,21.12948-9.24415,22.45007-5.28237,15.84711-2.64118,18.4883,3.96178,14.52652,3.96178,14.52652h2.64118l1.3206-13.20593s27.35954,16.518,31.69422,18.4883c7.26326,3.30148,39.61778,2.64118,38.29718-3.96178s-39.61777-27.73244-38.29718-33.01481S343.838,757.0626,343.838,757.0626Z" transform="translate(-132.89066 -58.82664)" fill="#2f2e41"/><path d="M394.02049,725.36838l-26.41185-10.56474s-6.603,10.56474-14.52652,10.56474S338.99929,734.973,339.43774,735.453s-11.44688,16.32719-11.44688,16.32719l2.13393,3.83888,15.03378-9.12125,4.21336,17.69614a67.516,67.516,0,0,0,13.34925,27.291c5.18092,6.30407,11.63716,11.65165,18.09339,10.47779,0,0,2.64118,0,0-18.48829s2.64118-38.29719,2.64118-38.29719Z" transform="translate(-132.89066 -58.82664)" fill="#2f2e41"/><path d="M325.34968,321.267s2.64118,6.603,5.28237,7.92356,10.56474,6.603,11.88533,11.88533,7.92356,21.12948,7.92356,21.12948,14.52651,7.92356,13.20592,22.45008-2.64118,26.41185,0,27.73244,5.28237,1.32059,3.96178,5.28237,2.64119,7.92356,3.96178,9.24415,3.96178-1.32059,1.32059,2.64118-1.32059,5.28237,0,6.603,2.64119,1.32059,1.32059,3.96178-50.18252,19.80888-52.8237,19.80888-2.64119-2.64118-1.32059-6.603,6.603-7.92355,1.32059-9.24415-6.603-1.32059-6.603-7.92355-22.45008-46.22074-22.45008-46.22074-9.24415-30.37363,0-43.57956S308.182,323.90822,313.46434,321.267,325.34968,321.267,325.34968,321.267Z" transform="translate(-132.89066 -58.82664)" fill="#3b82f6"/><path d="M281.77012,383.33489,265.923,426.91445l-31.69422,93.76207S201.214,566.89727,223.664,564.25608s25.09126-43.57956,25.09126-43.57956l30.37363-72.63259L306.86138,392.579Z" transform="translate(-132.89066 -58.82664)" fill="#ffb9b9"/><path d="M297.61723,345.03771l-5.28237,1.32059s-18.4883,36.97659-14.52652,40.93837,25.09126,14.52652,29.053,13.20593,9.24415-39.61778,9.24415-39.61778Z" transform="translate(-132.89066 -58.82664)" fill="#3b82f6"/><path d="M299.17333,292.56815c10.24585-4.505,22.64425-14.36773,34.41752-22.50641,3.81561-2.63766,7.53132-5.4058,11.22812-8.20755,7.451-5.647,25.38188-7.60565,40.8577,2.31751,17.68837,11.34186,26.32007,29.43747,21.5313,36.90588-3.95923,6.17468-17.10159,5.0917-31.532-1.87634-2.02892,13.51907-6.6678,26.99191-11.73576,34.89572-11.46787,17.88489-21.11578,1.02346-39.00067-10.44441S279.7246,301.11969,299.17333,292.56815Z" transform="translate(-132.89066 -58.82664)" fill="#2f2e41"/><circle cx="406.1963" cy="476.34673" r="61" fill="#3b82f6"/><path d="M835.087,217.17336V329.88168l5-2.70832v13l6,16s6,0,6,3-6,8-6,8h-11v53.17322l7-16.17322h13l9,18s-6,2-6,6,7,12,6,17-5,13-8,16l-13,13h-8v349h58v-606Z" transform="translate(-132.89066 -58.82664)" fill="#3f3d56"/><path d="M802.087,479.17336l15-8s4,15,0,18-23,11-23,11l12,12h-19Z" transform="translate(-132.89066 -58.82664)" fill="#3f3d56"/><path d="M764.71675,814.09976l4.79145,2.63236s-6.39122,3.15849-8.05686,2.58079-6.77992-4.2179-6.77992-4.2179l-4.40275,4.744-1.53345-4.78721Z" transform="translate(-132.89066 -58.82664)" fill="#3f3d56"/><path d="M778.60861,807.63744s-16.18275-10.15474-2.07226-7.72695a109.90685,109.90685,0,0,0,26.219,1.25114l2.07226,7.727Z" transform="translate(-132.89066 -58.82664)" fill="#3f3d56"/><path d="M799.034,822.93951s-15.01682-3.35781-3.36589-5.25752a96.31392,96.31392,0,0,0,20.91688-5.97871l3.36588,5.25751Z" transform="translate(-132.89066 -58.82664)" fill="#3f3d56"/><polygon points="670.196 496.347 670.196 490.347 686.196 490.347 686.196 509.347 670.196 496.347" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/src/designer/elsa-workflows-designer/src/modules/home/components/home-page.tsx b/src/designer/elsa-workflows-designer/src/modules/home/components/home-page.tsx
index 469537162..cae93db0f 100644
--- a/src/designer/elsa-workflows-designer/src/modules/home/components/home-page.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/home/components/home-page.tsx
@@ -16,24 +16,32 @@ export class HomePage {
 
   render() {
     const imageUrl = getAssetPath('./assets/elsa-anim.gif');
+    const visualPath = getAssetPath('./assets/elsa-breaking-barriers-undraw.svg');
     return (
-      <div class="default-background h-full">
-        <div class="flex max-w-5xl mx-auto">
-          <div class="flex-grow">
-            <div class="ml-10 lg:py-24">
-              <h1 class="mt-4 text-4xl tracking-tight font-extrabold sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
-                <span class="block main-title-color">Elsa Workflows</span>
-                <span class="pb-3 block sm:pb-5 sub-title-color">3.0</span>
-              </h1>
-              <p class="text-base text-gray-800 sm:text-xl lg:text-lg xl:text-xl">
-                Decoding the future.
-              </p>
+      <div class="home-wrapper relative bg-gray-800 overflow-hidden h-screen">
+        <main class="mt-16 sm:mt-24">
+          <div class="mx-auto max-w-7xl">
+            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+              <div class="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+                <div class="home-caption-wrapper">
+                  <h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
+                    <span class="md:block"> Welcome to <span class='text-blue-500 md:block'>Elsa Workflows</span> <span>3.0</span></span>
+                  </h1>
+                  <p class="tagline mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                    Use the dashboard to manage all the things.
+                  </p>
+                </div>
+              </div>
+              <div class="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
+                <div class="sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden">
+                  <div class="px-4 py-8 sm:px-10">
+                    <img class="home-visual" src={visualPath} alt="" width={400}/>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="flex-shrink">
-            <img src={imageUrl} alt="Elsa Workflows - Decoding the future" width={750}/>
-          </div>
-        </div>
+        </main>
       </div>
     );
   }
diff --git a/src/designer/elsa-workflows-designer/src/modules/login/components/login-page.tsx b/src/designer/elsa-workflows-designer/src/modules/login/components/login-page.tsx
index eb70072b3..892cedb55 100644
--- a/src/designer/elsa-workflows-designer/src/modules/login/components/login-page.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/login/components/login-page.tsx
@@ -73,7 +73,7 @@ export class LoginPage {
 
   render() {
     return <div>
-      <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div class="flex min-h-full flex-col pt-20 bg-gray-800 h-screen">
 
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
           <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">