diff --git a/static/admin/index.html b/static/admin/index.html
index bb1b432..17915c8 100644
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -16,7 +16,75 @@
   <!-- 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 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;">
+            <strong>Image Carousel</strong><br>
+            Images: ${obj.images}<br>
+            Aspect Ratio: ${obj.aspectRatio || "16-9"}<br>
+            Interval: ${obj.interval || "2000"} ms
+          </div>`;
+      }
+    });
+  </script>
 </body>
 
 </html>
\ No newline at end of file