diff --git a/app/assets/images/remove-med.svg b/app/assets/images/remove-med.svg
new file mode 100644
index 000000000..c15d589ec
--- /dev/null
+++ b/app/assets/images/remove-med.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.5 20.5c.7.7 1.8.7 2.5 0l5.9-5.9 5.9 5.9c.7.7 1.8.7 2.5 0s.7-1.8 0-2.5l-5.9-5.9 5.9-5.9c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0l-5.9 5.9-5.8-6.1c-.7-.7-1.8-.7-2.5 0s-.7 1.8 0 2.5l5.9 5.9-5.9 5.9c-.7.7-.7 1.8 0 2.5z"/></svg>
\ No newline at end of file
diff --git a/app/views/accounts/users/index.html.erb b/app/views/accounts/users/index.html.erb
index d77d1e11e..5d93666d8 100644
--- a/app/views/accounts/users/index.html.erb
+++ b/app/views/accounts/users/index.html.erb
@@ -7,7 +7,14 @@
       <span class="for-screen-reader">Go back</span>
     <% end %>
 
-    <%= button_to session_path, method: :delete, class: "btn", form_class: "flex-item-justify-end" do %>
+    <h1 class="txt-large"><%= @page_title %></h1>
+
+    <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
+      <%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Workflows</span>
+    <% end %>
+
+    <%= button_to session_path, method: :delete, class: "btn" do %>
       <%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Sign out</span>
     <% end %>
@@ -21,8 +28,3 @@
 <div class="panel borderless center pad fill-none flex flex-column gap">
   <%= render partial: "accounts/users/user", collection: @users %>
 </div>
-
-<div class="panel borderless center pad fill-none flex flex-column gap">
-  <h2>Workflows</h2>
-  <%= turbo_frame_tag :workflows, src: workflows_path %>
-</div>
diff --git a/app/views/workflows/_workflow.html.erb b/app/views/workflows/_workflow.html.erb
index be235aa4f..b6307822a 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -1,27 +1,20 @@
 <%= turbo_frame_tag workflow do %>
-  <article>
-    <div class="flex pad gap align-center justify-space-between">
+  <article class="panel" style="--panel-size: 40ch;">
+    <div class="flex gap-half align-center justify-starts">
       <%= turbo_frame_tag dom_id(workflow, :header) do %>
-        <%= link_to edit_workflow_path(workflow), class: "btn btn--small" do %>
-          <%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
-          <span class="for-screen-reader">Edit <%= workflow.name %></span>
-        <% end %>
-
-        <h3 class="txt-nowrap margin-none"><%= workflow.name %></h3>
-
-        <%= button_to workflow_path(workflow), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
-          <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
-          <span class="for-screen-reader">Delete <%= workflow.name %></span>
+        <%= link_to edit_workflow_path(workflow) do %>
+          <h3 class="txt-large txt-nowrap margin-none overflow-ellipsis"><%= workflow.name %></h3>
         <% end %>
       <% end %>
     </div>
 
-    <hr class="separator--horizontal flex-item-grow" aria-hidden="true" style="--border-color: var(--color-bg)">
+    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
 
-    <div class="flex flex-column pad gap">
+    <div class="flex flex-column gap margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>
         <%= render partial: "workflows/stages/stage", collection: workflow.stages %>
-        <%= link_to new_workflow_stage_path(workflow), class: "btn btn--positive btn--small" do %>
+
+        <%= link_to new_workflow_stage_path(workflow), class: "btn btn--small" do %>
           <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
           <span class="for-screen-reader">New stage</span>
         <% end %>
diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb
index ce2f4e027..6414e9347 100644
--- a/app/views/workflows/edit.html.erb
+++ b/app/views/workflows/edit.html.erb
@@ -1,17 +1,24 @@
 <%= turbo_frame_tag dom_id(@workflow, :header) do %>
-  <%= form_with model: @workflow, url: workflow_path(@workflow) do |form| %>
-    <div class="flex pad gap justify-space-between">
-      <%= form.text_field :name, required: true, autofocus: true %>
+  <div class="flex align-center gap-half">
+    <%= form_with model: @workflow, url: workflow_path(@workflow), id: dom_id(@workflow, :form), class: "full-width" do |form| %>
+      <h3 class="txt-large margin-none">
+        <%= form.text_field :name, required: true, autofocus: true, class: "input full-width", style: "--input-padding: 0.2em 0.5em;" %>
+      </h3>
+    <% end %>
 
-      <div class="flex gap">
-        <%= form.button type: :submit, class: "btn btn--small" do %>
-          <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
-        <% end %>
+    <%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@workflow, :form) do %>
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    <% end %>
 
-        <%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
-          <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
+    <%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
+      <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Cancel</span>
+    <% end %>
+
+    <%= button_to workflow_path(@workflow), method: :delete, class: "btn btn--small btn--negative", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
+      <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Delete <%= @workflow.name %></span>
+    <% end %>
+  </div>
 <% end %>
diff --git a/app/views/workflows/index.html.erb b/app/views/workflows/index.html.erb
index 17ab2b158..bd8cc5c2a 100644
--- a/app/views/workflows/index.html.erb
+++ b/app/views/workflows/index.html.erb
@@ -1,7 +1,29 @@
+<% @page_title = "Workflows" %>
+
+<% content_for :header do %>
+  <nav>
+    <%= link_to account_users_path, class: "btn flex-item-justify-start" do %>
+      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Go back</span>
+    <% end %>
+    <span class="btn btn--placeholder"></span>
+
+    <h1 class="txt-large"><%= @page_title %></h1>
+
+    <%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
+      <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Create a new workflow</span>
+    <% end %>
+
+    <%= button_to session_path, method: :delete, class: "btn" do %>
+      <%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Sign out</span>
+    <% end %>
+  </nav>
+<% end %>
+
 <%= turbo_frame_tag :workflows do %>
-  <section class="flex flex-column gap fill-shade border-radius">
+  <section class="center justify-center flex flex-wrap gap">
     <%= render partial: "workflows/workflow", collection: @workflows %>
   </section>
-
-  <%= link_to "New workflow", new_workflow_path, class: "btn" %>
 <% end %>
diff --git a/app/views/workflows/new.html.erb b/app/views/workflows/new.html.erb
index fa4a66828..aac4ac355 100644
--- a/app/views/workflows/new.html.erb
+++ b/app/views/workflows/new.html.erb
@@ -1,6 +1,24 @@
-<%= turbo_frame_tag :workflows do %>
-  <%= form_with model: @workflow, url: workflows_path do |form| %>
-    <%= form.text_field :name, required: true, autofocus: true %>
-    <%= form.submit %>
-  <% end %>
+<% @page_title = "Create a new Workflow" %>
+
+<% content_for :header do %>
+  <nav>
+    <%= link_to workflows_path, class: "btn flex-item-justify-start" do %>
+      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Go back</span>
+    <% end %>
+    <h1 class="txt-large center"><%= @page_title %></h1>
+    <span class="btn btn--placeholder flex-item-justify-end"></span>
+  </nav>
+<% end %>
+
+<%= turbo_frame_tag :workflows do %>
+  <article class="panel center margin-block-start flex flex-column gap" style="view-transition-name: <%= dom_id(@workflow) %>">
+    <%= form_with model: @workflow, url: workflows_path do |form| %>
+      <%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…" %>
+      <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-large" do %>
+        <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+        <span class="for-screen-reader">Create Workflow</span>
+      <% end %>
+    <% end %>
+  </article>
 <% end %>
diff --git a/app/views/workflows/stages/_stage.html.erb b/app/views/workflows/stages/_stage.html.erb
index 34680f8d9..21cf0cf0b 100644
--- a/app/views/workflows/stages/_stage.html.erb
+++ b/app/views/workflows/stages/_stage.html.erb
@@ -1,19 +1,7 @@
-<div class="flex gap align-center justify-space-between">
+<div class="flex gap-half align-center justify-space-between">
   <%= turbo_frame_tag stage do %>
-    <h4 class="txt-nowrap"><%= stage.name %></h4>
-
-    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
-
-    <%= link_to edit_workflow_stage_path(stage.workflow, stage), class: "btn btn--small" do %>
-      <%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
-      <span class="for-screen-reader">Edit <%= stage.name %></span>
-    <% end %>
-
-    <% if stage_counter >= 1 %>
-      <%= button_to workflow_stage_path(stage.workflow, stage), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: dom_id(stage.workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
-        <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
-        <span class="for-screen-reader">Delete <%= stage.name %></span>
-      <% end %>
+    <%= link_to edit_workflow_stage_path(stage.workflow, stage) do %>
+      <strong class="txt-nowrap overflow-ellipsis"><%= stage.name %></strong>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/workflows/stages/edit.html.erb b/app/views/workflows/stages/edit.html.erb
index f2eb8cb0e..bb3be76e8 100644
--- a/app/views/workflows/stages/edit.html.erb
+++ b/app/views/workflows/stages/edit.html.erb
@@ -1,17 +1,25 @@
 <%= turbo_frame_tag @stage do %>
-  <%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage) do |form| %>
-    <div class="flex pad gap justify-space-between">
-      <%= form.text_field :name, required: true, autofocus: true %>
-
-      <div class="flex gap">
-        <%= form.button type: :submit, class: "btn btn--small" do %>
-          <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
-        <% end %>
-
-        <%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
-          <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
-        <% end %>
-      </div>
-    </div>
+  <%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage), id: dom_id(@stage, :form), class: "full-width" do |form| %>
+    <%= form.text_field :name, required: true, autofocus: true, class: "input full-width" %>
   <% end %>
+
+  <div class="flex align-center gap-half">
+    <%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@stage, :form) do %>
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    <% end %>
+
+    <%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
+      <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Cancel</span>
+    <% end %>
+
+    <% if @stage.workflow.stages.many? %>
+      <%= button_to workflow_stage_path(@stage.workflow, @stage), method: :delete, class: "btn btn--negative btn--small",
+          data: { turbo_frame: dom_id(@workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
+        <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
+        <span class="for-screen-reader">Delete <%= @stage.name %></span>
+      <% end %>
+    <% end %>
+  </div>
 <% end %>
diff --git a/app/views/workflows/stages/new.html.erb b/app/views/workflows/stages/new.html.erb
index 86479ee19..ce9ef5fb8 100644
--- a/app/views/workflows/stages/new.html.erb
+++ b/app/views/workflows/stages/new.html.erb
@@ -1,6 +1,13 @@
 <%= turbo_frame_tag dom_id(@stage.workflow, :stages) do %>
-  <%= form_with model: @stage, url: workflow_stages_path(@stage.workflow) do |form| %>
-    <%= form.text_field :name, required: true, autofocus: true %>
-    <%= form.submit %>
+  <%= form_with model: @stage, url: workflow_stages_path(@stage.workflow), class: "flex align-center gap-half" do |form| %>
+    <%= form.text_field :name, required: true, autofocus: true, class: "input" %>
+    <%= form.button type: :submit, class: "btn btn--positive txt-small" do %>
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Add stage</span>
+    <% end %>
+    <%= link_to workflow_path(@workflow), class: "btn btn--small" do %>
+      <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Cancel</span>
+    <% end %>
   <% end %>
 <% end %>