diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb
index f1dde7b18..ae60f5f7a 100644
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@@ -1127,7 +1127,7 @@ function updateModuleHtml(module, id, name, gridDistX, gridDistY) {
 
   module.find(".panel-title").html(name);
 
-  module.find(".ep").html($("#drag-connections-placeholder").text().trim());
+  module.find(".ep").html($("#drag-connections-placeholder").html());
 
   // Add dropdown
   var dropdown = document.createElement("div");
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 25b6bae4b..5fe80a266 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -192,12 +192,24 @@ path, ._jsPlumb_endpoint {
       left: 0;
     }
   }
+
   .panel-body {
     height: 90px;
   }
 
   .ep {
     font-style: italic;
+
+    .task-card-code {
+      color: $color-volcano;
+      font-style: normal;
+      font-weight: 400;
+      margin-bottom: 4px;
+
+      .new-my-module-canvas {
+        color: $color-silver-chalice;
+      }
+    }
   }
 
   .dropdown {
diff --git a/app/views/canvas/_edit.html.erb b/app/views/canvas/_edit.html.erb
index 8475cd812..16a8df05e 100644
--- a/app/views/canvas/_edit.html.erb
+++ b/app/views/canvas/_edit.html.erb
@@ -67,6 +67,9 @@
     <%=t "experiments.canvas.edit.delete_module_group" %>
   </span>
   <span style="display: none;" id="drag-connections-placeholder">
+    <div class="task-card-code">
+        <%=t "experiments.canvas.edit.id" %> <span class="new-my-module-canvas"><%=t "experiments.canvas.edit.no_module_id" %></span>
+    </div>
     <%=t "experiments.canvas.edit.drag_connections" %>
   </span>
 </div>
diff --git a/app/views/canvas/edit/_my_module.html.erb b/app/views/canvas/edit/_my_module.html.erb
index f00f84390..9cac7f5dc 100644
--- a/app/views/canvas/edit/_my_module.html.erb
+++ b/app/views/canvas/edit/_my_module.html.erb
@@ -21,6 +21,9 @@
   </div>
 
   <div class="panel-body ep">
+    <div class="task-card-code">
+        <%=t "experiments.canvas.edit.id" %> <%= my_module.code %>
+    </div>
     <%= t('experiments.canvas.edit.drag_connections') %>
   </div>
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 579c28631..ac9c8a21a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1316,6 +1316,7 @@ en:
         create: "Add"
         create_new: "New"
       edit:
+        id: "ID:"
         new_module: "New task"
         new_module_hover: "Drag me onto canvas"
         save: "Save workflow"
@@ -1323,6 +1324,7 @@ en:
         cancel: "Cancel"
         unsaved_work: "Are you sure you want to leave this page? All unsaved data will be lost."
         drag_connections: "Drag connection/s from here"
+        no_module_id: "to be assigned after saving"
         options_header: "Options"
         edit_module: "Rename task"
         task_access: "Task access"