diff --git a/config.json b/config.json
index 2cc0115..1845853 100644
--- a/config.json
+++ b/config.json
@@ -16,7 +16,17 @@
 			"enableDynamicBackgrounds" : true
 		},
 		"items" : {
-			"iconRoot": "assets/",
+			"default_highlight_colors" : {
+				"Rosso": "#ff000015",
+				"Arancione": "#ff880022",
+				"Giallo": "#ffdd0030",
+				"Verde": "#00dd0015",
+				"Azzurro": "#00bbff20",
+				"Blu": "#0000ff10",
+				"Viola": "#aa00aa15",
+				"Nessuno": "inherit"
+			},
+			"iconRoot" : "assets/",
 			"types" : {
 				"csITEMTYPE:commission" : {
 					"names" : { "singular" : "commissione", "plural" : "commissioni", "section_title" : "commissione" },
diff --git a/js/sheet.js b/js/sheet.js
index 3c0cc59..3177723 100644
--- a/js/sheet.js
+++ b/js/sheet.js
@@ -151,6 +151,13 @@ function appendItem(type, content) {
     const btnWrapper = document.createElement("div")
     btnWrapper.className = "csItem-btn-wrapper"
 
+    const colorBtn = document.createElement("button")
+    colorBtn.onclick = _ => selectColor(itemID)
+    const colorIcon = document.createElement("img")
+    colorIcon.className = "icon-mono display-mode-dynamic-icon"
+    colorIcon.src = "assets/palette.png"
+    colorBtn.appendChild(colorIcon)
+
     const editBtn = document.createElement("button")
     editBtn.onclick = _ => editItem(itemID)
     const editIcon = document.createElement("img")
@@ -165,6 +172,7 @@ function appendItem(type, content) {
     xIcon.src = "assets/x.png"
     xBtn.appendChild(xIcon)
 
+    btnWrapper.appendChild(colorBtn)
     btnWrapper.appendChild(editBtn)
     btnWrapper.appendChild(xBtn)
 
diff --git a/style/dialog.css b/style/dialog.css
index 19d1026..75c6cff 100644
--- a/style/dialog.css
+++ b/style/dialog.css
@@ -42,7 +42,9 @@
   flex-direction: column;
   gap: min(10px, 1vh);
 }
-.flex-hor {
+.flex-hor,
+.cs-item-color-selector-list,
+.cs-item-color-selector-item {
   display: flex;
   flex-direction: row;
   gap: min(10px, 1vh);
@@ -52,7 +54,8 @@
 .dialog-wrapper,
 .dialog-input-field,
 .scrollbar-visible::-webkit-scrollbar-thumb,
-.dialog-wrapper {
+.dialog-wrapper,
+.cs-item-color-selector-item {
   border-radius: 20px;
 }
 .backdrop-blur {
@@ -64,7 +67,8 @@
 }
 .material,
 .scrollbar-visible::-webkit-scrollbar-thumb,
-.dialog-wrapper {
+.dialog-wrapper,
+.cs-item-color-selector-item {
   background-color: var(--color-layer);
   padding: min(10px, 1vh);
   gap: calc(min(10px, 1vh) + 2px);
@@ -140,4 +144,8 @@
   display: inline;
   margin-inline-end: min(10px, 1vh);
 }
+.cs-item-color-selector-list {
+  gap: min(10px, 1vh);
+  padding-inline-start: 0;
+}
 /*# sourceMappingURL=dialog.css.map */
\ No newline at end of file
diff --git a/style/dialog.less b/style/dialog.less
index 7e0dbbe..9452a1f 100644
--- a/style/dialog.less
+++ b/style/dialog.less
@@ -50,3 +50,15 @@
 	margin-inline-end: @padding;
 }
 .dialog-input-description {}
+
+.cs-item-color-selector-list {
+	&:extend(.flex-hor);
+	gap: @padding;
+	padding-inline-start: 0;
+}
+.cs-item-color-selector-item {
+	&:extend(.material);
+	&:extend(.flex-hor);
+}
+.cs-item-color-selector-item-input {}
+.cs-item-color-selector-item-label {}