diff --git a/apps/client/src/widgets/PromotedAttributes.tsx b/apps/client/src/widgets/PromotedAttributes.tsx
index 49b4c33ef..a0b1699a7 100644
--- a/apps/client/src/widgets/PromotedAttributes.tsx
+++ b/apps/client/src/widgets/PromotedAttributes.tsx
@@ -3,9 +3,13 @@ import "./PromotedAttributes.css";
 import { useNoteContext } from "./react/hooks";
 import { Attribute } from "../services/attribute_parser";
 import FAttribute from "../entities/fattribute";
+import clsx from "clsx";
+import { t } from "../services/i18n";
+import { DefinitionObject } from "../services/promoted_attribute_definition_parser";
 
 interface Cell {
     definitionAttr: FAttribute;
+    definition: DefinitionObject;
     valueAttr: Attribute;
     valueName: string;
 }
@@ -44,7 +48,8 @@ export default function PromotedAttributes() {
             }
 
             for (const valueAttr of valueAttrs) {
-                cells.push({  definitionAttr, valueAttr, valueName });
+                const definition = definitionAttr.getDefinition();
+                cells.push({  definitionAttr, definition, valueAttr, valueName });
             }
         }
         setCells(cells);
@@ -60,17 +65,49 @@ export default function PromotedAttributes() {
 }
 
 function PromotedAttributeCell({ cell }: { cell: Cell }) {
-    const { valueName, valueAttr, definitionAttr } = cell;
+    const { valueName, valueAttr, definition, definitionAttr } = cell;
     const inputId = `value-${valueAttr.attributeId}`;
-    const definition = definitionAttr.getDefinition();
 
     return (
         <div className="promoted-attribute-cell">
             <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
-            <input
-                tabIndex={200 + definitionAttr.position}
-                id={inputId}
-            />
+            <div className="input-group">
+                <input
+                    tabIndex={200 + definitionAttr.position}
+                    id={inputId}
+                />
+            </div>
+            <ActionCell cell={cell} />
+            <MultiplicityCell cell={cell} />
         </div>
     )
 }
+
+function ActionCell({ cell  }: { cell: Cell }) {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+function MultiplicityCell({ cell }: { cell: Cell }) {
+    return (cell.definition.multiplicity === "multi" &&
+        <td className="multiplicity">
+            <PromotedActionButton icon="bx bx-plus" title={t("promoted_attributes.add_new_attribute")} />{' '}
+            <PromotedActionButton icon="bx bx-trash" title={t("promoted_attributes.remove_this_attribute")} />
+        </td>
+    )
+}
+
+function PromotedActionButton({ icon, title }: {
+    icon: string,
+    title: string })
+{
+    return (
+        <span
+            className={clsx("tn-tool-button pointer", icon)}
+            title={title}
+        />
+    )
+}
diff --git a/apps/client/src/widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
index 4ddcb7d7e..b89d8ea7f 100644
--- a/apps/client/src/widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -62,18 +62,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
             .addClass("promoted-attribute-input")
             .on("change", (event) => this.promotedAttributeChanged(event));
 
-        const $actionCell = $("<div>");
-        const $multiplicityCell = $("<td>").addClass("multiplicity").attr("nowrap", "true");
-
-        const $wrapper = $('<div class="promoted-attribute-cell">')
-            .append(
-                $("<label>")
-                    .text(definition.promotedAlias ?? valueName)
-            )
-            .append($("<div>").addClass("input-group").append($input))
-            .append($actionCell)
-            .append($multiplicityCell);
-
         if (valueAttr.type === "label") {
             $wrapper.addClass(`promoted-attribute-label-${definition.labelType}`);
             if (definition.labelType === "text") {
@@ -207,8 +195,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
         if (definition.multiplicity === "multi") {
             const $addButton = $("<span>")
-                .addClass("bx bx-plus pointer tn-tool-button")
-                .prop("title", t("promoted_attributes.add_new_attribute"))
                 .on("click", async () => {
                     const $new = await this.createPromotedAttributeCell(
                         definitionAttr,
@@ -229,8 +215,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                 });
 
             const $removeButton = $("<span>")
-                .addClass("bx bx-trash pointer tn-tool-button")
-                .prop("title", t("promoted_attributes.remove_this_attribute"))
                 .on("click", async () => {
                     const attributeId = $input.attr("data-attribute-id");
 
@@ -260,8 +244,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
                     $wrapper.remove();
                 });
-
-            $multiplicityCell.append(" &nbsp;").append($addButton).append(" &nbsp;").append($removeButton);
         }
 
         return $wrapper;