diff --git a/package-lock.json b/package-lock.json
index 9b02767..4003883 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "bootstrap": "^5.2.0-beta1",
         "bootswatch": "^5.1.3",
         "core-js": "^3.8.3",
+        "izitoast": "^1.4.0",
         "moment": "^2.29.3",
         "momentjs": "^2.0.0",
         "vue": "^3.2.13",
@@ -8776,6 +8777,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -22888,6 +22894,11 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
diff --git a/package.json b/package.json
index 85aa112..55f6ed0 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "bootstrap": "^5.2.0-beta1",
     "bootswatch": "^5.1.3",
     "core-js": "^3.8.3",
+    "izitoast": "^1.4.0",
     "moment": "^2.29.3",
     "momentjs": "^2.0.0",
     "vue": "^3.2.13",
diff --git a/public/assets/gui/border_blue.png b/public/assets/gui/border_blue.png
new file mode 100644
index 0000000..6d258d4
Binary files /dev/null and b/public/assets/gui/border_blue.png differ
diff --git a/public/assets/gui/border_green.png b/public/assets/gui/border_green.png
new file mode 100644
index 0000000..16d2acc
Binary files /dev/null and b/public/assets/gui/border_green.png differ
diff --git a/public/assets/gui/border_magenta.png b/public/assets/gui/border_magenta.png
new file mode 100644
index 0000000..7446e7a
Binary files /dev/null and b/public/assets/gui/border_magenta.png differ
diff --git a/public/assets/gui/border_red.png b/public/assets/gui/border_red.png
new file mode 100644
index 0000000..7b92c7a
Binary files /dev/null and b/public/assets/gui/border_red.png differ
diff --git a/src/components/CropField.vue b/src/components/CropField.vue
index c40243f..e8b8ced 100644
--- a/src/components/CropField.vue
+++ b/src/components/CropField.vue
@@ -133,6 +133,7 @@ export default {
 .percent-bar-wrapper {
     z-index: 300;
     margin-top: -0.2em;
+    background-color: rgba(5,5,5,0.3);
 }
 
 .percent-bar {