diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
index d6c609dba..85eb706fc 100644
--- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -359,36 +359,38 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                     disableNewlines disableSpellcheck
                 />
 
-                { needsSaving && <ActionButton
-                    icon="bx bx-save"
-                    className="save-attributes-button"
-                    text={escapeQuotes(t("attribute_editor.save_attributes"))}
-                    onClick={save}
-                /> }
+                <div className="attribute-editor-buttons">
+                    { needsSaving && <ActionButton
+                        icon="bx bx-save"
+                        className="save-attributes-button tn-tool-button"
+                        text={escapeQuotes(t("attribute_editor.save_attributes"))}
+                        onClick={save}
+                    /> }
 
-                <ActionButton 
-                    icon="bx bx-plus"
-                    className="add-new-attribute-button"
-                    text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
-                    onClick={(e) => {
-                        // Prevent automatic hiding of the context menu due to the button being clicked.
-                        e.stopPropagation();
+                    <ActionButton 
+                        icon="bx bx-plus"
+                        className="add-new-attribute-button tn-tool-button"
+                        text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
+                        onClick={(e) => {
+                            // Prevent automatic hiding of the context menu due to the button being clicked.
+                            e.stopPropagation();
 
-                        contextMenu.show<AttributeCommandNames>({
-                            x: e.pageX,
-                            y: e.pageY,
-                            orientation: "left",
-                            items: [
-                                { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
-                                { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
-                                { title: "----" },
-                                { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
-                                { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
-                            ],
-                            selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
-                        });
-                    }}
-                />
+                            contextMenu.show<AttributeCommandNames>({
+                                x: e.pageX,
+                                y: e.pageY,
+                                orientation: "left",
+                                items: [
+                                    { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
+                                    { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
+                                    { title: "----" },
+                                    { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
+                                    { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
+                                ],
+                                selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
+                            });
+                        }}
+                    />
+                </div>
 
                 { error && (
                     <div className="attribute-errors">
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 3c6df6ba8..02438d4e3 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -271,7 +271,7 @@
     border: 0 !important;
     outline: 0 !important;
     box-shadow: none !important;
-    padding: 0 0 0 5px !important;
+    padding: 0 100px 0 5px !important;
     margin: 0 !important;
     max-height: 100px;
     overflow: auto;
@@ -283,36 +283,19 @@
     background: transparent !important;
 }
 
-.save-attributes-button {
-    color: var(--muted-text-color);
+.attribute-editor-buttons {
+    display: flex;
     position: absolute;
-    bottom: 14px;
-    right: 25px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    font-size: 130%;
-}
-
-.add-new-attribute-button {
-    color: var(--muted-text-color);
-    position: absolute;
-    bottom: 13px;
+    top: 0;
     right: 0;
-    cursor: pointer;
-    border: 1px solid transparent;
-    font-size: 130%;
-}
-
-.add-new-attribute-button:hover, .save-attributes-button:hover {
-    border: 1px solid var(--button-border-color);
-    border-radius: var(--button-border-radius);
-    background: var(--button-background-color);
-    color: var(--button-text-color);
+    bottom: 0;
+    align-items: center;
+    gap: 10px;
 }
 
 .attribute-errors {
     color: red;
-    padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
+    padding: 5px 100px 0px 5px; /* large right padding to avoid buttons */
 }
 /* #endregion */