diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fa7dabf..1a3ba178 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
     * Fixed issue with some elements overflowing closed list items [#2146](https://github.com/getgrav/grav-plugin-admin/issues/2146)
     * Fixed configuration not fully updating on save [#2149](https://github.com/getgrav/grav-plugin-admin/issues/2149)
     * Fixed display issue with "+ Add Page" and picking a different route [#2136](https://github.com/getgrav/grav-plugin-admin/issues/2136), [#2145](https://github.com/getgrav/grav-plugin-admin/issues/2145) 
+    * Treat WebP as image when inserting / drag & dropping [#2150](https://github.com/getgrav/grav-plugin-admin/issues/2150)
 
 # v1.10.15
 ## 05/19/2021
diff --git a/themes/grav/app/forms/fields/filepicker.js b/themes/grav/app/forms/fields/filepicker.js
index e0fbcb0f..b012c1d4 100644
--- a/themes/grav/app/forms/fields/filepicker.js
+++ b/themes/grav/app/forms/fields/filepicker.js
@@ -80,7 +80,7 @@ export default class FilePickerField {
 
         let renderOption = function renderOption(item, escape) {
             let image = '';
-            if (imagesPreview && folder && (!item.status || item.status === 'available') && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
+            if (imagesPreview && folder && (!item.status || item.status === 'available') && item.name.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
                 // const fallback2x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@2x');
                 // const fallback3x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@3x');
                 const source = thumbs[item.name] || `${config.base_url_relative}/../${folder}/${item.name}`;
diff --git a/themes/grav/app/forms/fields/files.js b/themes/grav/app/forms/fields/files.js
index 00052c1d..a927968e 100644
--- a/themes/grav/app/forms/fields/files.js
+++ b/themes/grav/app/forms/fields/files.js
@@ -337,7 +337,7 @@ export function UriToMarkdown(uri) {
 
     const title = uri.split('.').slice(0, -1).join('.');
 
-    return uri.match(/\.(jpe?g|png|gif|svg|mp4|webm|ogv|mov)$/i) ? `![${title}](${uri} "${title}")` : `[${decodeURI(uri)}](${uri})`;
+    return uri.match(/\.(jpe?g|png|gif|svg|webp|mp4|webm|ogv|mov)$/i) ? `![${title}](${uri} "${title}")` : `[${decodeURI(uri)}](${uri})`;
 }
 
 let instances = [];
diff --git a/themes/grav/app/utils/finderjs.js b/themes/grav/app/utils/finderjs.js
index 29778313..12ab422e 100644
--- a/themes/grav/app/utils/finderjs.js
+++ b/themes/grav/app/utils/finderjs.js
@@ -302,7 +302,7 @@ class Finder {
             this.pathBar.append(`
                 <span class="breadcrumb-node breadcrumb-node-${item.type}" ${item.type === 'dir' ? `data-breadcrumb-node="${itemKeys}"` : ''}>
                     <i class="fa fa-fw ${this.getIcon(item.type)}"></i>
-                    <span class="breadcrumb-node-name">${$('<div />').text(item[this.config.labelKey]).html()}</span>
+                    <span class="breadcrumb-node-name">${$('<div />').html(item[this.config.labelKey]).html()}</span>
                     ${!isLast ? '<i class="fa fa-fw fa-chevron-right"></i>' : ''}
                 </span>
             `);
diff --git a/themes/grav/js/admin.min.js b/themes/grav/js/admin.min.js
index f07b4bc0..c372f786 100644
--- a/themes/grav/js/admin.min.js
+++ b/themes/grav/js/admin.min.js
@@ -3035,7 +3035,7 @@ function UriToMarkdown(uri) {
   uri = uri.replace(/\(/g, '%28');
   uri = uri.replace(/\)/g, '%29');
   var title = uri.split('.').slice(0, -1).join('.');
-  return uri.match(/\.(jpe?g|png|gif|svg|mp4|webm|ogv|mov)$/i) ? "![".concat(title, "](").concat(uri, " \"").concat(title, "\")") : "[".concat(decodeURI(uri), "](").concat(uri, ")");
+  return uri.match(/\.(jpe?g|png|gif|svg|webp|mp4|webm|ogv|mov)$/i) ? "![".concat(title, "](").concat(uri, " \"").concat(title, "\")") : "[".concat(decodeURI(uri), "](").concat(uri, ")");
 }
 var instances = [];
 var cache = external_jQuery_default()();
@@ -4917,7 +4917,7 @@ var FilePickerField = /*#__PURE__*/function () {
       var renderOption = function renderOption(item, escape) {
         var image = '';
 
-        if (imagesPreview && folder && (!item.status || item.status === 'available') && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
+        if (imagesPreview && folder && (!item.status || item.status === 'available') && item.name.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
           // const fallback2x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@2x');
           // const fallback3x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@3x');
           var source = thumbs[item.name] || "".concat(external_GravAdmin_namespaceObject.config.base_url_relative, "/../").concat(folder, "/").concat(item.name); // onerror="if(this.src==='${fallback2x}'){this.src='${fallback3x}';}else{this.src='${fallback2x}'}"
@@ -8614,7 +8614,7 @@ var Finder = /*#__PURE__*/function () {
         var isLast = index + 1 === activeItems.length;
         itemKeys += "/".concat(item[_this6.config.itemKey]);
 
-        _this6.pathBar.append("\n                <span class=\"breadcrumb-node breadcrumb-node-".concat(item.type, "\" ").concat(item.type === 'dir' ? "data-breadcrumb-node=\"".concat(itemKeys, "\"") : '', ">\n                    <i class=\"fa fa-fw ").concat(_this6.getIcon(item.type), "\"></i>\n                    <span class=\"breadcrumb-node-name\">").concat(external_jQuery_default()('<div />').text(item[_this6.config.labelKey]).html(), "</span>\n                    ").concat(!isLast ? '<i class="fa fa-fw fa-chevron-right"></i>' : '', "\n                </span>\n            "));
+        _this6.pathBar.append("\n                <span class=\"breadcrumb-node breadcrumb-node-".concat(item.type, "\" ").concat(item.type === 'dir' ? "data-breadcrumb-node=\"".concat(itemKeys, "\"") : '', ">\n                    <i class=\"fa fa-fw ").concat(_this6.getIcon(item.type), "\"></i>\n                    <span class=\"breadcrumb-node-name\">").concat(external_jQuery_default()('<div />').html(item[_this6.config.labelKey]).html(), "</span>\n                    ").concat(!isLast ? '<i class="fa fa-fw fa-chevron-right"></i>' : '', "\n                </span>\n            "));
       });
     }
   }, {