diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
index a4d66045f7..388d49eed2 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
@@ -331,54 +331,14 @@
     <!-- /.row -->
 </div>
 <!-- /#container-main.container-fluid -->
-<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">
-    <h1>🚧 Static Page with Vue Components 🚧</h1>
-
-    <hello-islands message="This is an attribute on the web component, that's bound to a prop in the Vue component. Cool, right?" color="dodgerblue"></hello-islands>
-</div>
-<!-- /.row -->
-<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
-    <p>
-        <span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br />
-        <span class="font-monospace text-danger">-&lt;!-- &lt;hello-world&gt;&lt;/hello-world&gt; --&gt;</span><br />
-        <span class="font-monospace text-success">+&lt;hello-world&gt;&lt;/hello-world&gt;</span>
-    </p>
-    <!-- <hello-world></hello-world> -->
-</div>
-<!-- /.row -->
-
-<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
-    <dialog-island id="surprise"></dialog-island>
-    <button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button>
-</div>
-
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
-    [% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %]
-    <!--
-    [% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %]
-    <script src="[% islands %]" type="module">
-</script>
-    <script type="module">
-        import { hydrate } from "[% islands %]";
-        hydrate();
-    </script>
-    -->
     <script>
         var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
         $(document).ready(function () {
             $(".news_delete").on("click", function () {
                 return confirmDelete(MSG_CONFIRM_DELETE);
             });
-
-            setTimeout(() => {
-                const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
-                firstHelloIslandsElement.message = "This is a delayed update to the message attribute of the web commponent.";
-            }, 2000);
-
-            $("#surprise-button").on("click", () => {
-                $("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`);
-            });
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
deleted file mode 100644
index dd9a5da0a6..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <Dialog />
-</template>
-
-<script>
-import { inject, watch } from "vue";
-import Dialog from "../Dialog.vue";
-
-export default {
-    props: {
-        message: {
-            type: String,
-            default: null,
-        },
-        error: {
-            type: String,
-            default: null,
-        },
-        warning: {
-            type: String,
-            default: null,
-        },
-        confirmation: {
-            type: Object,
-            default: () => null,
-        },
-        isSubmitting: {
-            type: Boolean,
-            default: false,
-        },
-        isLoading: {
-            type: Boolean,
-            default: false,
-        },
-        acceptCallback: {
-            type: Function,
-            default: null,
-        },
-    },
-    setup(props) {
-        const mainStore = inject("mainStore");
-        const {
-            setMessage,
-            setError,
-            setWarning,
-            setConfirmation,
-            setSubmitting,
-            setLoading,
-            setAcceptCallback,
-        } = mainStore;
-
-        watch(
-            () => props.message,
-            newVal => {
-                setMessage(newVal);
-            }
-        );
-
-        watch(
-            () => props.error,
-            newVal => {
-                setError(newVal);
-            }
-        );
-
-        watch(
-            () => props.warning,
-            newVal => {
-                setWarning(newVal);
-            }
-        );
-
-        watch(
-            () => props.confirmation,
-            newVal => {
-                setConfirmation(newVal);
-            }
-        );
-
-        watch(
-            () => props.isSubmitting,
-            newVal => {
-                setSubmitting(newVal);
-            }
-        );
-
-        watch(
-            () => props.isLoading,
-            newVal => {
-                setLoading(newVal);
-            }
-        );
-
-        watch(
-            () => props.acceptCallback,
-            newVal => {
-                setAcceptCallback(newVal);
-            }
-        );
-
-        return {};
-    },
-    components: {
-        Dialog,
-    },
-};
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
deleted file mode 100644
index db824ba6d7..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <h2 :style="{ color }">Hello from Islands!</h2>
-    <p>This component is rendered as an island in a static HTML page.</p>
-
-    <!-- Display message prop -->
-    <p v-if="message">{{ message }}</p>
-
-    <!-- Display store data -->
-    <p v-if="stringFromStore">{{ stringFromStore }}</p>
-    <p v-if="anotherStoreString">{{ anotherStoreString }}</p>
-
-    <!-- Reactive counter example -->
-    <p>Counter: {{ count }}</p>
-    <!-- Koha's bootstrap works in here! -->
-    <button @click="incrementCounter" class="btn btn-primary">
-        Increment Counter
-    </button>
-</template>
-
-<script>
-import { ref } from "vue";
-import { inject } from "vue";
-
-export default {
-    props: {
-        message: {
-            type: String,
-            default: "No content",
-        },
-        color: {
-            type: String,
-            default: "crimson",
-        },
-    },
-    setup() {
-        const mainStore = inject("mainStore");
-        const { stringFromStore } = mainStore;
-        const navigationStore = inject("navigationStore");
-        const { anotherStoreString } = navigationStore;
-        return {
-            stringFromStore,
-            anotherStoreString,
-        };
-    },
-    data() {
-        return {
-            count: 0,
-        };
-    },
-    methods: {
-        incrementCounter() {
-            this.count++;
-        },
-    },
-};
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
deleted file mode 100644
index 91494fb47e..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-Say Hello World with Vue!
--->
-
-<script setup>
-import { ref } from "vue";
-
-// A "ref" is a reactive data source that stores a value.
-// Technically, we don't need to wrap the string with ref()
-// in order to display it, but we will see in the next
-// example why it is needed if we ever intend to change
-// the value.
-const message = ref("Hello World!");
-</script>
-
-<template>
-    <h1>{{ message }}</h1>
-</template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
index 9a96915af8..af004592a2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
@@ -19,52 +19,28 @@ type WebComponentDynamicImport = {
 /**
  * A registry for Vue components.
  * @type {Map<string, WebComponentDynamicImport>}
+ * @property {string} key - The name of the component.
+ * @property {WebComponentDynamicImport} value - The configuration for the component. Includes the import function and optional configuration.
+ * @example
+ * //
+ * [
+ *     "hello-islands",
+ *     {
+ *         importFn: async () => {
+ *             const module = await import(
+ *                 /* webpackChunkName: "hello-islands" */
+/**                "../components/Islands/HelloIslands.vue"
+ *             );
+ *             return module.default;
+ *         },
+ *         config: {
+ *             stores: ["mainStore", "navigationStore"],
+ *         },
+ *     },
+ * ],
  */
 export const componentRegistry: Map<string, WebComponentDynamicImport> =
-    new Map([
-        [
-            "hello-islands",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "hello-islands" */
-                        "../components/Islands/HelloIslands.vue"
-                    );
-                    return module.default;
-                },
-                config: {
-                    stores: ["mainStore", "navigationStore"],
-                },
-            },
-        ],
-        [
-            "hello-world",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "hello-world" */
-                        "../components/Islands/HelloWorld.vue"
-                    );
-                    return module.default;
-                },
-            },
-        ],
-        [
-            "dialog-island",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "vue-dialog" */
-                        "../components/Islands/DialogIsland.vue"
-                    );
-                    return module.default;
-                },
-                config: {
-                    stores: ["mainStore"],
-                },
-            },
-        ],
-    ]);
+    new Map([]);
 
 /**
  * Hydrates custom elements by scanning the document and loading only necessary components.
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index faceee6291..5734266b3f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -13,7 +13,6 @@ export const useMainStore = defineStore("main", () => {
         displayed_already: false,
         is_submitting: false,
         is_loading: false,
-        stringFromStore: "Hello from main store",
     });
 
     const actions = {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
index 7c6fc27e56..d6da86988f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
@@ -12,7 +12,6 @@ export const useNavigationStore = defineStore("navigation", () => {
         },
         current: null,
         params: {},
-        anotherStoreString: "Hello from nav store",
     });
     const actions = {
         setRoutes(routesDef) {