diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 6c964c84a9..0517fe1034 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -104,13 +104,19 @@
   }
 </script>
 
-<div class={`block ${block.type} hoverable`} class:selected on:click={() => {}}>
+<div
+  class={`block ${block.type} hoverable`}
+  class:selected
+  on:keydown={() => {}}
+  on:click={() => {}}
+>
   {#if loopBlock}
     <div class="blockSection">
       <div
         on:click={() => {
           showLooping = !showLooping
         }}
+        on:keydown={() => {}}
         class="splitHeader"
       >
         <div class="center-items">
@@ -129,7 +135,11 @@
         </div>
 
         <div class="blockTitle">
-          <div style="margin-left: 10px;" on:click={() => {}}>
+          <div
+            style="margin-left: 10px;"
+            on:keydown={() => {}}
+            on:click={() => {}}
+          >
             <Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} />
           </div>
         </div>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index c09474a370..0bbd2d2318 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { automationStore } from "builderStore"
-  import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
+  import { automationStore, selectedAutomation } from "builderStore"
+  import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui"
   import { externalActions } from "./ExternalActions"
   import { createEventDispatcher } from "svelte"
 
@@ -11,6 +11,13 @@
   export let isTrigger
   export let idx
 
+  $: console.log($selectedAutomation)
+  let validRegex = /^[A-Za-z0-9_\s]+$/
+  let typing = false
+  let automationName = block?.name || ""
+
+  $: automationNameError = getAutomationNameError(automationName)
+
   const dispatch = createEventDispatcher()
 
   $: {
@@ -21,6 +28,7 @@
     }
   }
   $: isTrigger = isTrigger || block.type === "TRIGGER"
+
   $: status = updateStatus(testResult, isTrigger)
 
   async function onSelect(block) {
@@ -43,10 +51,26 @@
       return { negative: true, message: "Error" }
     }
   }
+
+  const getAutomationNameError = name => {
+    let invalidRoleName = !validRegex.test(name)
+    if (invalidRoleName) {
+      return "Please enter a role name consisting of only alphanumeric symbols and underscores"
+    }
+    return null
+  }
+
+  const startTyping = async () => {
+    typing = true
+  }
 </script>
 
-<div class="blockSection">
-  <div on:click={() => dispatch("toggle")} class="splitHeader">
+<div
+  class:typing={typing && !automationNameError}
+  class:typing-error={automationNameError}
+  class="blockSection"
+>
+  <div class="splitHeader">
     <div class="center-items">
       {#if externalActions[block.stepId]}
         <img
@@ -69,12 +93,29 @@
       <div class="iconAlign">
         {#if isTrigger}
           <Body size="XS"><b>Trigger</b></Body>
-          <Body size="XS">When this happens:</Body>
         {:else}
           <Body size="XS"><b>Step {idx}</b></Body>
-          <Body size="XS">Do this:</Body>
         {/if}
-        <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
+        <input
+          placeholder="Enter some text"
+          name="name"
+          on:input={e => {
+            automationNameError = getAutomationNameError(e.target.value)
+            automationName = e.target.value
+            if (!automationNameError) {
+              automationNameError = false // Reset the error when input is valid
+            }
+          }}
+          value={automationName}
+          on:click={startTyping}
+          on:blur={() => {
+            typing = false
+            if (automationNameError) {
+              automationName = block?.name
+              automationNameError = null
+            }
+          }}
+        />
       </div>
     </div>
     <div class="blockTitle">
@@ -89,18 +130,46 @@
         </div>
       {/if}
       <div
-        style="margin-left: 10px; margin-bottom: var(--spacing-xs);"
+        class="context-actions"
+        class:hide-context-actions={typing}
         on:click={() => {
           onSelect(block)
         }}
       >
-        <Icon hoverable name={open ? "ChevronUp" : "ChevronDown"} />
+        {#if !showTestStatus}
+          <AbsTooltip type="info" text="Add looping">
+            <Icon hoverable name="RotateCW" />
+          </AbsTooltip>
+          <AbsTooltip type="negative" text="Delete step">
+            <Icon hoverable name="DeleteOutline" />
+          </AbsTooltip>
+        {/if}
+        <Icon
+          on:click={() => dispatch("toggle")}
+          hoverable
+          name={open ? "ChevronUp" : "ChevronDown"}
+        />
       </div>
+      {#if automationNameError}
+        <div class="error-container">
+          <AbsTooltip type="negative" text={automationNameError}>
+            <div class="error-icon">
+              <Icon size="S" name="Alert" />
+            </div>
+          </AbsTooltip>
+        </div>
+      {/if}
     </div>
   </div>
 </div>
 
 <style>
+  .context-actions {
+    display: flex;
+    gap: var(--spacing-l);
+    margin-left: 10px;
+    margin-bottom: var(--spacing-xs);
+  }
   .center-items {
     display: flex;
     align-items: center;
@@ -123,4 +192,47 @@
     display: flex;
     align-items: center;
   }
+
+  .hide-context-actions {
+    display: none;
+  }
+  input {
+    font-family: var(--font-sans);
+    color: var(--ink);
+    background-color: transparent;
+    border: none;
+    font-size: var(--spectrum-alias-font-size-default);
+    width: 260px;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  /* Hide arrows for number fields */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .typing {
+    border: 0.5px solid var(--spectrum-global-color-static-blue-500);
+  }
+
+  .typing-error {
+    border: 0.5px solid var(--spectrum-global-color-static-red-500);
+  }
+
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+
+  .error-container {
+    padding-top: var(--spacing-xl);
+  }
 </style>
