diff --git a/src/public/app/services/link_map.js b/src/public/app/services/link_map.js
index 98808cf75..ec696cc15 100644
--- a/src/public/app/services/link_map.js
+++ b/src/public/app/services/link_map.js
@@ -117,7 +117,8 @@ export default class LinkMap {
 
             const $noteBox = $("<div>")
                 .addClass("note-box")
-                .prop("id", noteBoxId);
+                .prop("id", noteBoxId)
+                .addClass(note.getCssClass());
 
             const $link = $linkTitles[noteId];
 
diff --git a/src/public/app/widgets/type_widgets/relation_map.js b/src/public/app/widgets/type_widgets/relation_map.js
index cf652e90c..0c94cf844 100644
--- a/src/public/app/widgets/type_widgets/relation_map.js
+++ b/src/public/app/widgets/type_widgets/relation_map.js
@@ -7,6 +7,7 @@ import attributeAutocompleteService from "../../services/attribute_autocomplete.
 import TypeWidget from "./type_widget.js";
 import appContext from "../../services/app_context.js";
 import utils from "../../services/utils.js";
+import treeCache from "../../services/tree_cache.js";
 
 const uniDirectionalOverlays = [
     [ "Arrow", {
@@ -531,8 +532,11 @@ export default class RelationMapTypeWidget extends TypeWidget {
             linkService.goToLink(e);
         });
 
+        const note = await treeCache.getNote(noteId);
+
         const $noteBox = $("<div>")
             .addClass("note-box")
+            .addClass(note.getCssClass())
             .prop("id", this.noteIdToId(noteId))
             .append($("<span>").addClass("title").append($link))
             .append($("<div>").addClass("endpoint").attr("title", "Start dragging relations from here and drop them on another note."))