diff --git a/index.css b/index.css
index 8025f287..0e29c19f 100644
--- a/index.css
+++ b/index.css
@@ -470,17 +470,17 @@ input[type="color"] {
   border: 1px solid #a9a9a9;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
+input[type='color']::-webkit-color-swatch-wrapper {
   padding: 0;
 }
 
-#options input[type="color"] {
+#options input[type='color'] {
   width: 4.5em;
   height: 1em;
   border: 0;
 }
 
-#convertImageDialog input[type="color"] {
+#convertImageDialog input[type='color'] {
   width: 38px;
   padding: 0;
   border: 0;
@@ -495,7 +495,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
-#options input[type="range"] {
+#options input[type='range'] {
   height: 8px;
   background: 0;
   appearance: none;
@@ -504,7 +504,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
 }
 
-#options input[type="range"]::-webkit-slider-thumb {
+#options input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   border-radius: 15%;
   width: 0.91em;
@@ -516,7 +516,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
-#options input[type="range"]::-moz-range-thumb {
+#options input[type='range']::-moz-range-thumb {
   -moz-appearance: none;
   border-radius: 15%;
   width: 0.73em;
@@ -527,22 +527,22 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
-#options input[type="range"]::-webkit-slider-runnable-track {
+#options input[type='range']::-webkit-slider-runnable-track {
   height: 2px;
   background: #ffffff;
 }
 
-#options input[type="range"]::-moz-range-track {
+#options input[type='range']::-moz-range-track {
   -moz-appearance: none;
   background-color: #ffffff;
   height: 2px;
 }
 
-#options input[type="number"] {
+#options input[type='number'] {
   font-size: 0.8em;
 }
 
-#options input[type="text"] {
+#options input[type='text'] {
   border: 0px;
   width: 62%;
   font-size: smaller;
@@ -553,7 +553,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
-#optionsContent input[type="number"] {
+#optionsContent input[type='number'] {
   border: 0;
   text-align: right;
   background-color: transparent;
@@ -561,8 +561,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   -moz-appearance: textfield;
 }
 
-#optionsContent input[type="number"]::-webkit-inner-spin-button,
-#optionsContent input[type="number"]::-webkit-outer-spin-button {
+#optionsContent input[type='number']::-webkit-inner-spin-button,
+#optionsContent input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -582,7 +582,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   text-align: left;
 }
 
-#optionsContent input[type="range"] {
+#optionsContent input[type='range'] {
   width: 100%;
 }
 
@@ -606,7 +606,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   transform: translate(0px, 1px);
 }
 
-#styleElements input[type="range"] {
+#styleElements input[type='range'] {
   width: 64%;
 }
 
@@ -1216,7 +1216,7 @@ i.resetButton:active {
   border-radius: 10%;
 }
 
-.ui-dialog input[type="range"] {
+.ui-dialog input[type='range'] {
   padding: 0;
   height: 2px;
   background: #d4d4d4;
@@ -1226,7 +1226,7 @@ i.resetButton:active {
   -webkit-appearance: none;
 }
 
-.ui-dialog input[type="range"]::-webkit-slider-thumb {
+.ui-dialog input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   border-radius: 15%;
   width: 1em;
@@ -1236,7 +1236,7 @@ i.resetButton:active {
   cursor: pointer;
 }
 
-.ui-dialog input[type="range"]::-moz-range-thumb {
+.ui-dialog input[type='range']::-moz-range-thumb {
   appearance: none;
   border-radius: 15%;
   width: 1em;
@@ -1452,7 +1452,7 @@ div.states .icon-resize-vertical {
   font-size: 0.9em;
 }
 
-div.states > [class^="icon-"] {
+div.states > [class^='icon-'] {
   color: #6e5e66;
   padding: 0;
 }
@@ -1681,7 +1681,7 @@ div.states > div.resourceBonus > span.icon-male {
   width: 5em;
 }
 
-#regimentBody input[type="number"] {
+#regimentBody input[type='number'] {
   width: 5em;
 }
 
@@ -1892,7 +1892,7 @@ div.editorLine {
   width: 9em;
 }
 
-#unitsBody > div > input[type="range"] {
+#unitsBody > div > input[type='range'] {
   width: 7em;
 }
 
@@ -1950,7 +1950,7 @@ div.editorLine {
 }
 
 #ruler text {
-  font-family: "Georgia";
+  font-family: 'Georgia';
   fill: #3d3d3d;
   text-anchor: middle;
   text-shadow: 0 0 4px white;
@@ -1985,7 +1985,7 @@ div.editorLine {
   border: 1px solid #d4d4d4;
 }
 
-#militaryOptionsTable input[type="number"] {
+#militaryOptionsTable input[type='number'] {
   width: 4em;
 }
 
@@ -2022,7 +2022,7 @@ ul.share-buttons img {
   width: 2em;
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
   display: none;
 }
 
@@ -2032,7 +2032,7 @@ input[type="checkbox"] {
 }
 
 .checkbox + .checkbox-label:before {
-  content: "";
+  content: '';
   display: inline-block;
   vertical-align: middle;
   width: 0.6em;
@@ -2047,7 +2047,7 @@ input[type="checkbox"] {
 .checkbox:checked + .checkbox-label:before {
   line-height: 0.8em;
   font-weight: bold;
-  content: "✓";
+  content: '✓';
   color: #333333;
 }
 
@@ -2156,7 +2156,7 @@ svg.button {
   width: 4em;
 }
 
-#reliefEditor input[type="range"] {
+#reliefEditor input[type='range'] {
   width: 16em;
 }
 
@@ -2238,7 +2238,7 @@ svg.button {
   padding: 2px 0;
 }
 
-#worldControls input[type="number"] {
+#worldControls input[type='number'] {
   border: 1px solid #e5e5e5;
   padding: 0px;
   width: 3.2em;
diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js
index dbc262bb..761e79e0 100644
--- a/modules/ui/resources-editor.js
+++ b/modules/ui/resources-editor.js
@@ -71,6 +71,7 @@ function editResources() {
     const resource = Resources.get(+line.dataset.id);
     if (cl.contains('resourceCategory')) return changeCategory(resource, line, el);
     if (cl.contains('resourceModel')) return changeModel(resource, line, el);
+    if (cl.contains('resourceBonus')) return changeBonus(resource, line, el);
   });
 
   body.addEventListener('change', function (ev) {
@@ -84,14 +85,14 @@ function editResources() {
   });
 
   function getBonusIcon(bonus) {
-    if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"/>`;
-    if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"/>`;
-    if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"/>`;
-    if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"/>`;
-    if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"/>`;
-    if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"/>`;
-    if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"/>`;
-    if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"/>`;
+    if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"></span>`;
+    if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"></span>`;
+    if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"></span>`;
+    if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"></span>`;
+    if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"></span>`;
+    if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"></span>`;
+    if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"></span>`;
+    if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"></span>`;
   }
 
   // add line for each resource
@@ -603,6 +604,7 @@ function editResources() {
         }
 
         resource.model = line.dataset.model = el.innerHTML = customName;
+        el.setAttribute('title', customName.length > 7 ? customName : '');
         resource.custom = customFn;
         $(dialog).dialog('close');
         return;
@@ -612,10 +614,55 @@ function editResources() {
       if (!model) return (message.innerHTML = 'Error. Model is not set');
 
       resource.model = line.dataset.model = el.innerHTML = model;
+      el.setAttribute('title', model.length > 7 ? model : '');
       $(dialog).dialog('close');
     }
   }
 
+  function changeBonus(resource, line, el) {
+    const bonuses = [...new Set(pack.resources.map((r) => Object.keys(r.bonus)).flat())].sort();
+    const inputs = bonuses.map(
+      (bonus) => `<div style="margin-bottom:.2em">
+        <div style="display: inline-block; width: 7em">${capitalize(bonus)}</div>
+        <input id="resourceBonus_${bonus}" style="width: 4em" type="number" step="1" min="0" max="9" value="${resource.bonus[bonus] || 0}" />
+      </div>`
+    );
+
+    alertMessage.innerHTML = inputs.join('');
+    $('#alert').dialog({
+      resizable: false,
+      title: 'Change bonus',
+      buttons: {
+        Cancel: function () {
+          $(this).dialog('close');
+        },
+        Apply: function () {
+          applyChanges();
+          $(this).dialog('close');
+        }
+      }
+    });
+
+    function applyChanges() {
+      const bonusObj = {};
+      bonuses.forEach((bonus) => {
+        const el = document.getElementById('resourceBonus_' + bonus);
+        const value = parseInt(el.value);
+        if (isNaN(value) || !value) return;
+        bonusObj[bonus] = value;
+      });
+
+      const bonusArray = Object.entries(bonusObj).map(e => Array(e[1]).fill(e[0])).flat(); //prettier-ignore
+      const bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join('');
+      const bonusString = Object.entries(bonusObj).map((e) => e.join(': ')).join('; '); //prettier-ignore
+
+      resource.bonus = bonusObj;
+      el.innerHTML = bonusHTML;
+      line.dataset.bonus = bonusString;
+      el.setAttribute('title', bonusString);
+    }
+  }
+
   function changeName(resource, name, line) {
     resource.name = line.dataset.name = name;
   }