diff --git a/static/admin/index.html b/static/admin/index.html
index 09abe14..5693dad 100644
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -1,85 +1,142 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css"> <!-- Unminfied -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css"> <!-- Untested, but Minified -->
-    <title>CMS for my privat page</title>
-  </head>
-  <body>
-    <!-- Include the script that builds the page and powers Decap CMS -->
-    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
-    <script src="prefixed-image-widget.js"></script>
-    <script>
-      // Register the OSM shortcode as an editor component
-      window.CMS.registerEditorComponent({
-        id: "osm",
-        label: "OpenStreetMap",
-        fields: [
-          { name: "lat", label: "Latitude", widget: "string" },
-          { name: "lon", label: "Longitude", widget: "string" },
-          { name: "zoom", label: "Zoom", widget: "number", default: 15, required: false },
-          { name: "height", label: "Height (e.g. 400px)", widget: "string", default: "400px", required: false }
-        ],
-        pattern: /{{<\s*osm\s+lat="([^"]+)"\s+lon="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
-        fromBlock: function(match) {
-          return {
-            lat: match[1],
-            lon: match[2],
-            zoom: match[3] || "15",
-            height: match[4] || "400px"
-          };
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css">
+  <!-- Unminfied -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css">
+  <!-- Untested, but Minified -->
+  <title>CMS for my privat page</title>
+</head>
+
+<body>
+  <!-- Include the script that builds the page and powers Decap CMS -->
+  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+  <script>
+    // Register the proper prefixed image widget
+    CMS.registerWidget("prefixed-image", {
+      // Control component (what editors interact with)
+      control: createClass({
+        handleChange: function(e) {
+          const file = e.target.files[0];
+          if (!file) return;
+          
+          // Add prefix to filename
+          const prefix = "feature-";
+          const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
+          const newFile = new File([file], fileName, { type: file.type });
+          
+          // Upload the file with the new name
+          this.props.mediaPersist([newFile]).then(urls => {
+            if (urls && urls.length > 0) {
+              this.props.onChange(urls[0]);
+            }
+          });
         },
-        toBlock: function(obj) {
-          let params = `lat="${obj.lat}" lon="${obj.lon}"`;
-          if (obj.zoom) params += ` zoom="${obj.zoom}"`;
-          if (obj.height) params += ` height="${obj.height}"`;
-          return `{{< osm ${params} >}}`;
-        },
-        toPreview: function(obj) {
-          // Simple preview (not interactive)
-          return `<div style="border:1px solid #ccc;padding:1em;">
+        
+        render: function() {
+          const value = this.props.value;
+          return h('div', {},
+            h('input', { 
+              type: 'file',
+              accept: 'image/*',
+              onChange: this.handleChange 
+            }),
+            value && h('img', { 
+              src: value, 
+              alt: '', 
+              style: { maxWidth: '200px', marginTop: '10px' } 
+            })
+          );
+        }
+      }),
+      
+      // Preview component (how it appears in the preview pane)
+      preview: createClass({
+        render: function() {
+          return this.props.value ? 
+            h('img', { 
+              src: this.props.value, 
+              alt: '', 
+              style: { maxWidth: '100%' } 
+            }) : null;
+        }
+      })
+    });
+  </script>
+
+  <script>
+    // Register the OSM shortcode as an editor component
+    window.CMS.registerEditorComponent({
+      id: "osm",
+      label: "OpenStreetMap",
+      fields: [
+        { name: "lat", label: "Latitude", widget: "string" },
+        { name: "lon", label: "Longitude", widget: "string" },
+        { name: "zoom", label: "Zoom", widget: "number", default: 15, required: false },
+        { name: "height", label: "Height (e.g. 400px)", widget: "string", default: "400px", required: false }
+      ],
+      pattern: /{{<\s*osm\s+lat="([^"]+)"\s+lon="([^"]+)"(?:\s+zoom="([^"]+)")?(?:\s+height="([^"]+)")?\s*>}}/,
+      fromBlock: function (match) {
+        return {
+          lat: match[1],
+          lon: match[2],
+          zoom: match[3] || "15",
+          height: match[4] || "400px"
+        };
+      },
+      toBlock: function (obj) {
+        let params = `lat="${obj.lat}" lon="${obj.lon}"`;
+        if (obj.zoom) params += ` zoom="${obj.zoom}"`;
+        if (obj.height) params += ` height="${obj.height}"`;
+        return `{{< osm ${params} >}}`;
+      },
+      toPreview: function (obj) {
+        // Simple preview (not interactive)
+        return `<div style="border:1px solid #ccc;padding:1em;">
             <strong>OpenStreetMap Widget</strong><br>
             Lat: ${obj.lat}, Lon: ${obj.lon}, Zoom: ${obj.zoom || 15}, Height: ${obj.height || "400px"}
           </div>`;
-        }
-      });
+      }
+    });
 
-      // Register the carousel shortcode as an editor component
-      window.CMS.registerEditorComponent({
-        id: "carousel",
-        label: "Image Carousel",
-        fields: [
-          { name: "images", label: "Images (comma-separated filenames or URLs)", widget: "string" },
-          { name: "aspectRatio", label: "Aspect Ratio (e.g. 16-9)", widget: "string", required: false },
-          { name: "interval", label: "Interval (ms)", widget: "number", required: false }
-        ],
-        pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
-        fromBlock: function(match) {
-          return {
-            images: match[1],
-            aspectRatio: match[2] || "",
-            interval: match[3] || ""
-          };
-        },
-        toBlock: function(obj) {
-          let params = `images="${obj.images}"`;
-          if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`;
-          if (obj.interval) params += ` interval="${obj.interval}"`;
-          return `{{< carousel ${params} >}}`;
-        },
-        toPreview: function(obj) {
-          // Simple preview (not interactive)
-          return `<div style="border:1px solid #ccc;padding:1em;">
+    // Register the carousel shortcode as an editor component
+    window.CMS.registerEditorComponent({
+      id: "carousel",
+      label: "Image Carousel",
+      fields: [
+        { name: "images", label: "Images (comma-separated filenames or URLs)", widget: "string" },
+        { name: "aspectRatio", label: "Aspect Ratio (e.g. 16-9)", widget: "string", required: false },
+        { name: "interval", label: "Interval (ms)", widget: "number", required: false }
+      ],
+      pattern: /{{<\s*carousel\s+images="([^"]+)"(?:\s+aspectRatio="([^"]+)")?(?:\s+interval="([^"]+)")?\s*>}}/,
+      fromBlock: function (match) {
+        return {
+          images: match[1],
+          aspectRatio: match[2] || "",
+          interval: match[3] || ""
+        };
+      },
+      toBlock: function (obj) {
+        let params = `images="${obj.images}"`;
+        if (obj.aspectRatio) params += ` aspectRatio="${obj.aspectRatio}"`;
+        if (obj.interval) params += ` interval="${obj.interval}"`;
+        return `{{< carousel ${params} >}}`;
+      },
+      toPreview: function (obj) {
+        // Simple preview (not interactive)
+        return `<div style="border:1px solid #ccc;padding:1em;">
             <strong>Image Carousel</strong><br>
             Images: ${obj.images}<br>
             Aspect Ratio: ${obj.aspectRatio || "16-9"}<br>
             Interval: ${obj.interval || "2000"} ms
           </div>`;
-        }
-      });
-    </script>
-  </body>
+      }
+    });
+  </script>
+</body>
+
 </html>
\ No newline at end of file
