diff --git a/cms/static/coffee/src/views/module_edit.coffee b/cms/static/coffee/src/views/module_edit.coffee
index 04d99299d2..1d1ff936be 100644
--- a/cms/static/coffee/src/views/module_edit.coffee
+++ b/cms/static/coffee/src/views/module_edit.coffee
@@ -34,6 +34,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
         @selectMode(@editorMode)
       else
         @hideDataEditor()
+      @$el.find('.component-name').html('<em>Editing:</em> ' + @metadataEditor.getDisplayName())
 
   changedMetadata: ->
     return @metadataEditor.getModifiedMetadataValues()
diff --git a/cms/static/js/views/metadata_editor_view.js b/cms/static/js/views/metadata_editor_view.js
index b4378bbbc7..633c766923 100644
--- a/cms/static/js/views/metadata_editor_view.js
+++ b/cms/static/js/views/metadata_editor_view.js
@@ -54,6 +54,12 @@ CMS.Views.Metadata.Editor = Backbone.View.extend({
             }
         );
         return modified_values;
+    },
+
+    getDisplayName: function () {
+        // It is possible that there is no display name set. In that case, return empty string.
+        var displayNameValue = this.model.get('display_name').value;
+        return displayNameValue ? displayNameValue : '';
     }
 });
 
diff --git a/cms/templates/component.html b/cms/templates/component.html
index cfdd40403d..54c62dcba9 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -1,7 +1,7 @@
 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
 		<div class="component-edit-header">
-  			<span class="component-name"><em>Editing:</em> Component</span>
+  			<span class="component-name"></span>
   	  		<ul class="nav-edit-modes">
   	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" role="tab">
   	  				<a href="#">Editor</a>