diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js
index 96b1b72db..125994b8e 100644
--- a/src/public/app/layouts/desktop_main_window_layout.js
+++ b/src/public/app/layouts/desktop_main_window_layout.js
@@ -136,7 +136,6 @@ export default class DesktopMainWindowLayout {
                         .child(new NoteActionsWidget().hideInZenMode())
                     )
                     .child(new TabCachingWidget(() => new AttributeListWidget()))
-                    .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
                     .child(new TabCachingWidget(() => new NoteDetailWidget()))
                     .child(...this.customWidgets.get('center-pane'))
                 )
diff --git a/src/public/app/widgets/attribute_list.js b/src/public/app/widgets/attribute_list.js
index 8a09f7ac0..fbdc54f48 100644
--- a/src/public/app/widgets/attribute_list.js
+++ b/src/public/app/widgets/attribute_list.js
@@ -3,90 +3,102 @@ import AttributeDetailWidget from "./attribute_detail.js";
 import attributeRenderer from "../services/attribute_renderer.js";
 import AttributeEditorWidget from "./attribute_editor.js";
 import options from '../services/options.js';
+import PromotedAttributesWidget from "./promoted_attributes.js";
 
 const TPL = `
 <div class="attribute-list">
-<style>
-    .attribute-list {
-        margin-left: 7px;
-        margin-right: 7px;
-    }
+    <style>
+        .attribute-list {
+            margin-left: 7px;
+            margin-right: 7px;
+        }
+        
+        .inherited-attributes {
+            color: var(--muted-text-color);
+            max-height: 200px;
+            overflow: auto;
+            padding-bottom: 5px;
+            padding-left: 7px;
+        }
+        
+        .attribute-list-editor p {
+            margin: 0 !important;
+        }
+        
+        .attribute-list.error .attribute-list-editor {
+            border-color: red !important;
+        }
+        
+        .attr-expander {
+            display: flex; 
+            flex-direction: row; 
+            color: var(--muted-text-color); 
+            font-size: small;
+        }
+        
+        .attribute-list hr {
+            height: 1px;
+            border-color: var(--main-border-color);
+            position: relative;
+            top: 4px;
+            margin-top: 5px;
+            margin-bottom: 0;
+        }
+        
+        .attr-expander-text {
+            padding-left: 20px;
+            padding-right: 20px;
+            white-space: nowrap;
+        }
+        
+        .attr-expander:hover {
+            cursor: pointer;
+        }
+        
+        .attr-expander:not(.error):hover hr {
+            border-color: black;
+        }
+        
+        .attr-expander:not(.error):hover .attr-expander-text {
+            color: black;
+        }
+    </style>
     
-    .inherited-attributes {
-        color: var(--muted-text-color);
-        max-height: 200px;
-        overflow: auto;
-        padding-bottom: 5px;
-        padding-left: 7px;
-    }
-    
-    .attribute-list-editor p {
-        margin: 0 !important;
-    }
-    
-    .attribute-list.error .attribute-list-editor {
-        border-color: red !important;
-    }
-    
-    .attr-expander {
-        display: flex; 
-        flex-direction: row; 
-        color: var(--muted-text-color); 
-        font-size: small;
-    }
-    
-    .attribute-list hr {
-        height: 1px;
-        border-color: var(--main-border-color);
-        position: relative;
-        top: 4px;
-        margin-top: 5px;
-        margin-bottom: 0;
-    }
-    
-    .attr-expander-text {
-        padding-left: 20px;
-        padding-right: 20px;
-        white-space: nowrap;
-    }
-    
-    .attr-expander:hover {
-        cursor: pointer;
-    }
-    
-    .attr-expander:not(.error):hover hr {
-        border-color: black;
-    }
-    
-    .attr-expander:not(.error):hover .attr-expander-text {
-        color: black;
-    }
-</style>
-
-<div class="attr-expander attr-owned-expander">
-    <hr class="w-100">
-    
-    <div class="attr-expander-text"></div>
-    
-    <hr class="w-100">
-</div>
-
-<div class="attr-display">
-    <div class="attr-editor-placeholder"></div>
-    
-    <hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
-    
-    <div class="attr-expander attr-inherited-expander">
+    <div class="attr-expander attr-promoted-expander">
         <hr class="w-100">
         
-        <div class="attr-expander-text"></div>
+        <div class="attr-expander-text">Promoted attributes</div>
         
         <hr class="w-100">
     </div>
     
-    <div class="inherited-attributes"></div>
-</div>
-
+    <div class="all-attr-wrapper">
+        <div class="promoted-attributes-placeholder"></div>
+    
+        <div class="attr-expander attr-owned-and-inherited-expander">
+            <hr class="w-100">
+            
+            <div class="attr-expander-text"></div>
+            
+            <hr class="w-100">
+        </div>
+        
+        <div class="owned-and-inherited-wrapper">
+            <div class="attr-editor-placeholder"></div>
+            
+            <hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
+            
+            <div class="attr-expander attr-inherited-expander">
+                <hr class="w-100">
+                
+                <div class="attr-expander-text"></div>
+                
+                <hr class="w-100">
+            </div>
+            
+            <div class="inherited-attributes"></div>
+        </div>
+    </div>
 </div>
 `;
 
@@ -94,21 +106,33 @@ export default class AttributeListWidget extends TabAwareWidget {
     constructor() {
         super();
 
+        this.promotedAttributesWidget = new PromotedAttributesWidget().setParent(this);
         this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
         this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
 
-        this.child(this.attributeEditorWidget, this.attributeDetailWidget);
+        this.child(this.promotedAttributesWidget, this.attributeEditorWidget, this.attributeDetailWidget);
     }
 
     doRender() {
         this.$widget = $(TPL);
 
-        this.$attrDisplay = this.$widget.find('.attr-display');
-        this.$attrDisplay.toggle(options.is('attributeListExpanded'));
+        this.$promotedExpander = this.$widget.find('.attr-promoted-expander');
+        this.$allAttrWrapper = this.$widget.find('.all-attr-wrapper');
 
-        this.$ownedExpander = this.$widget.find('.attr-owned-expander');
+        this.$promotedExpander.on('click', async () => {
+            if (this.$allAttrWrapper.is(":visible")) {
+                this.$allAttrWrapper.slideUp(200);
+            } else {
+                this.$allAttrWrapper.slideDown(200);
+            }
+        });
+
+        this.$ownedAndInheritedWrapper = this.$widget.find('.owned-and-inherited-wrapper');
+        this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded'));
+
+        this.$ownedExpander = this.$widget.find('.attr-owned-and-inherited-expander');
         this.$ownedExpander.on('click', async () => {
-            const collapse = this.$attrDisplay.is(":visible");
+            const collapse = this.$ownedAndInheritedWrapper.is(":visible");
 
             await options.save('attributeListExpanded', !collapse);
 
@@ -133,6 +157,7 @@ export default class AttributeListWidget extends TabAwareWidget {
 
         this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
 
+        this.$widget.find('.promoted-attributes-placeholder').replaceWith(this.promotedAttributesWidget.render());
         this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
         this.$widget.append(this.attributeDetailWidget.render());
     }
@@ -199,10 +224,9 @@ export default class AttributeListWidget extends TabAwareWidget {
      */
     attributeListCollapsedStateChangedEvent({collapse}) {
         if (collapse) {
-            this.$attrDisplay.slideUp(200);
-        }
-        else {
-            this.$attrDisplay.slideDown(200);
+            this.$ownedAndInheritedWrapper.slideUp(200);
+        } else {
+            this.$ownedAndInheritedWrapper.slideDown(200);
         }
     }
 }
diff --git a/src/public/app/widgets/promoted_attributes.js b/src/public/app/widgets/promoted_attributes.js
index e4e2babca..42c0bb306 100644
--- a/src/public/app/widgets/promoted_attributes.js
+++ b/src/public/app/widgets/promoted_attributes.js
@@ -5,34 +5,39 @@ import noteAutocompleteService from "../services/note_autocomplete.js";
 import TabAwareWidget from "./tab_aware_widget.js";
 
 const TPL = `
-<div class="promoted-attributes-wrapper">
+<div>
     <style>
-    .promoted-attributes-wrapper {
+    .promoted-attributes-container {
         margin: auto;
-        /* setting the display to block since "table" doesn't support scrolling */
-        display: block;
-        /** flex-basis: content; - use once "content" is implemented by chrome */
+        display: flex;
+        flex-direction: row;
         flex-shrink: 0;
         flex-grow: 0;
+        justify-content: space-evenly;
         overflow: auto;
         max-height: 400px;
+        flex-wrap: wrap;
     }
     
-    .promoted-attributes td, .promoted-attributes th {
-        padding: 5px;
-        min-width: 50px; /* otherwise checkboxes can collapse into 0 width (if there are only checkboxes) */
+    .promoted-attribute-cell {
+        display: flex;
+        align-items: center;
+        margin: 10px;
+    }
+    
+    .promoted-attribute-cell div.input-group {
+        margin-left: 10px;
     }
     </style>
     
-    <table class="promoted-attributes"></table>
+    <div class="promoted-attributes-container"></div>
 </div>
 `;
 
 export default class PromotedAttributesWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-
-        this.$container = this.$widget.find(".promoted-attributes");
+        this.$container = this.$widget.find(".promoted-attributes-container");
     }
 
     async refreshWithNote(note) {
@@ -48,9 +53,9 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
                 return def && def.isPromoted;
             });
 
-        if (promoted.length > 0 && !note.hasLabel('hidePromotedAttributes')) {
-            const $tbody = $("<tbody>");
+        const cells = [];
 
+        if (promoted.length > 0 && !note.hasLabel('hidePromotedAttributes')) {
             for (const definitionAttr of promoted) {
                 const definitionType = definitionAttr.name.startsWith('label:') ? 'label' : 'relation';
                 const valueName = definitionAttr.name.substr(definitionType.length + 1);
@@ -71,15 +76,15 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
                 }
 
                 for (const valueAttr of valueAttrs) {
-                    const $tr = await this.createPromotedAttributeRow(definitionAttr, valueAttr, valueName);
+                    const $cell = await this.createPromotedAttributeCell(definitionAttr, valueAttr, valueName);
 
-                    $tbody.append($tr);
+                    cells.push($cell);
                 }
             }
 
             // we replace the whole content in one step so there can't be any race conditions
             // (previously we saw promoted attributes doubling)
-            this.$container.empty().append($tbody);
+            this.$container.empty().append(...cells);
             this.toggleInt(true);
         }
         else {
@@ -89,10 +94,9 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
         return attributes;
     }
 
-    async createPromotedAttributeRow(definitionAttr, valueAttr, valueName) {
+    async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) {
         const definition = definitionAttr.getDefinition();
-        const $tr = $("<tr>");
-        const $labelCell = $("<th>").append(valueName);
+
         const $input = $("<input>")
             .prop("tabindex", 200 + definitionAttr.position)
             .prop("attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId : '') // if not owned, we'll force creation of a new attribute instead of updating the inherited one
@@ -103,16 +107,14 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
             .addClass("promoted-attribute-input")
             .on('change', event => this.promotedAttributeChanged(event));
 
-        const $inputCell = $("<td>").append($("<div>").addClass("input-group").append($input));
-
-        const $actionCell = $("<td>");
+        const $actionCell = $("<div>");
         const $multiplicityCell = $("<td>")
             .addClass("multiplicity")
             .attr("nowrap", true);
 
-        $tr
-            .append($labelCell)
-            .append($inputCell)
+        const $wrapper = $('<div class="promoted-attribute-cell">')
+            .append($("<strong>").text(valueName))
+            .append($("<div>").addClass("input-group").append($input))
             .append($actionCell)
             .append($multiplicityCell);
 
@@ -210,14 +212,14 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
                 .addClass("bx bx-plus pointer")
                 .prop("title", "Add new attribute")
                 .on('click', async () => {
-                    const $new = await this.createPromotedAttributeRow(definitionAttr, {
+                    const $new = await this.createPromotedAttributeCell(definitionAttr, {
                         attributeId: "",
                         type: valueAttr.type,
                         name: definitionAttr.name,
                         value: ""
                     });
 
-                    $tr.after($new);
+                    $wrapper.after($new);
 
                     $new.find('input').trigger('focus');
                 });
@@ -230,13 +232,13 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
                         await server.remove("notes/" + this.noteId + "/attributes/" + valueAttr.attributeId, this.componentId);
                     }
 
-                    $tr.remove();
+                    $wrapper.remove();
                 });
 
             $multiplicityCell.append(addButton).append(" &nbsp;").append(removeButton);
         }
 
-        return $tr;
+        return $wrapper;
     }
 
     async promotedAttributeChanged(event) {