diff --git a/app.vue b/app.vue
index 644ea42f7e..16c72fe1a9 100644
--- a/app.vue
+++ b/app.vue
@@ -8,6 +8,10 @@
     import DefaultLayout from "~/layouts/default.vue";
     import "@kestra-io/ui-libs/style.css";
 
+    String.prototype.capitalize = function () {
+        return this.charAt(0).toUpperCase() + this.slice(1)
+    }
+
     useHead({
         htmlAttrs: {
             lang: "en",
diff --git a/assets/styles/docs.scss b/assets/styles/docs.scss
index addce9f188..8d5d31d4c1 100644
--- a/assets/styles/docs.scss
+++ b/assets/styles/docs.scss
@@ -84,6 +84,7 @@ $bd-gutter-x: 3rem;
 
     h4 {
         padding-top: 1rem;
+        color: $white;
         font-size: $h5-font-size;
     }
 
diff --git a/assets/styles/theme.scss b/assets/styles/theme.scss
index f57400db92..17ba8296cc 100644
--- a/assets/styles/theme.scss
+++ b/assets/styles/theme.scss
@@ -2,6 +2,7 @@
     #{--kestra-io-token-color-background-primary}: #111113;
     #{--kestra-io-token-color-background-hover-primary}: #404559;
     #{--kestra-io-token-color-background-secondary}: #161617;
+    #{--tokens-border-border-active}: #8405FF;
     #{--kestra-io-token-color-border-primary}: #3D3D3F;
     #{--kestra-io-token-color-border-secondary}: #252526;
     #{--kestra-io-token-color-white}: #FFFFFF;
diff --git a/components/plugins/PluginCard.vue b/components/plugins/PluginCard.vue
index 3717b574eb..e4e321cd8e 100644
--- a/components/plugins/PluginCard.vue
+++ b/components/plugins/PluginCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :href="`/plugins/${plugin.name}`">
+    <NuxtLink :href="href">
         <div class="plugin d-flex align-items-center gap-2 bg-dark-2" ref="root" data-bs-toogle="tooltip"
              data-bs-html="true" data-bs-custom-class="plugin-tooltip" :data-bs-original-title="plugin.tooltipContent">
             <div class="icon-content">
@@ -26,6 +26,8 @@
 
     const root = ref(null);
 
+    const href = `/plugins/${props.plugin.name}${props.plugin.subGroup === undefined ? '' : ('/' + slugify(props.plugin.title))}`
+
     onMounted(() => {
       if (process.client) {
         new $bootstrap.Tooltip(root.value, {
diff --git a/components/plugins/PluginIndex.vue b/components/plugins/PluginIndex.vue
new file mode 100644
index 0000000000..5fd9119bba
--- /dev/null
+++ b/components/plugins/PluginIndex.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="d-flex flex-column gap-4">
+        <slot v-if="description !== undefined" name="markdown" :content="description"/>
+        <!-- Root plugin page with subgroups -->
+        <template v-if="subGroup === undefined && plugins.length > 1">
+            <div class="d-flex flex-column">
+                <RowLink v-for="subGroupWrapper in subGroupsWrappers"
+                         :id="`group-${slugify(subGroupName(subGroupWrapper))}`"
+                         :iconB64Svg="'data:image/svg+xml;base64,' + icons[subGroupWrapper.subGroup]"
+                         :text="subGroupName(subGroupWrapper)"
+                         :href="subGroupHref(subGroupName(subGroupWrapper))"
+                         @click="$emit('goTo', {targetSubGroup: subGroupWrapper.subGroup})"
+                />
+            </div>
+        </template>
+        <template v-else>
+            <div class="d-flex flex-column elements-section" v-for="(elements, elementType) in elementsByType">
+                <h4 :id="`section-${slugify(elementType)}`">{{ elementType }}</h4>
+                <div class="d-flex flex-column">
+                    <RowLink v-for="element in elements"
+                             :id="slugify(element)"
+                             :iconB64Svg="'data:image/svg+xml;base64,' + icons[element]"
+                             :text="elementName(element)"
+                             :href="elementHref(element)"
+                             @click="$emit('goTo', {targetElement: element})"
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+    import RowLink from "./RowLink.vue";
+    import type {Plugin} from "~/utils/plugins";
+    import {isEntryAPluginElementPredicate, subGroupName} from "~/utils/plugins";
+    import {slugify} from "~/utils/url.js";
+
+    const props = defineProps<{
+        plugins: Plugin[],
+        pluginName: string,
+        subGroup?: string | undefined,
+        icons: Record<string, string>
+    }>();
+
+    const plugin = computed(() => props.plugins.find(p => props.subGroup === undefined ? true : (slugify(subGroupName(p)) === props.subGroup)));
+
+    const description = computed(() => plugin.value?.longDescription ?? plugin.value?.description);
+
+    const subGroupsWrappers = computed(() => {
+        return props.plugins
+            .filter(p => p.name.toLowerCase() === props.pluginName.toLowerCase() && p.subGroup !== undefined);
+    });
+
+    const elementName = (qualifiedName) => {
+        let split = qualifiedName.split(".");
+        return split?.[split.length - 1]?.capitalize();
+    }
+
+    const {path} = useRoute();
+
+    const subGroupHref = (targetSubGroup) => `${path}/${slugify(targetSubGroup)}`;
+
+    const elementHref = (element) => `${path}/${element}`;
+
+    const extractPluginElements: Record<string, string[]> = (plugin: Plugin) => {
+        return Object.fromEntries(
+            Object.entries(plugin).filter(([key, value]) => isEntryAPluginElementPredicate(key, value))
+                .map(([key, value]) => [key.replaceAll(/[A-Z]/g, match => ` ${match}`).capitalize(), value])
+        );
+    };
+
+    const elementsByType = computed(() => extractPluginElements(plugin.value));
+
+    defineEmits<{
+        goTo: [targetElement: string, targetSubGroup?: string]
+    }>()
+</script>
\ No newline at end of file
diff --git a/components/plugins/RowLink.vue b/components/plugins/RowLink.vue
new file mode 100644
index 0000000000..1298e9a952
--- /dev/null
+++ b/components/plugins/RowLink.vue
@@ -0,0 +1,20 @@
+<template>
+    <a :href="hrefWithDefault" class="row-link d-flex flex-grow-1 align-items-center gap-7 rounded">
+        <img :src="iconB64Svg" :alt="`${text} icon`"/>{{ text }}
+        <ChevronRight class="ms-auto"/>
+    </a>
+</template>
+<script setup lang="ts">
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+    import {slugify} from "~/utils/url";
+
+    const props = defineProps<{ iconB64Svg: string, text: string, href?: string | undefined }>();
+
+    const {path} = useRoute();
+    const hrefWithDefault = computed(() => props.href === undefined ? `${path}/${slugify(props.text)}` : props.href);
+</script>
+<style lang="scss" scoped>
+    .row-link {
+        border-width: 1px;
+    }
+</style>
\ No newline at end of file
diff --git a/middleware/redirect.global.js b/middleware/redirect.global.js
index a3d4ac9fdc..0b029259bf 100644
--- a/middleware/redirect.global.js
+++ b/middleware/redirect.global.js
@@ -8,8 +8,8 @@ export default function ({ route, redirect }) {
 
     plugins.forEach(plugin => {
         plugin.taskRunners.forEach(taskRunner => {
-            const standardPath = `/plugins/plugin-${plugin.base}/task-runners/io.kestra.plugin.${plugin.base}.runner.${taskRunner}`;
-            const eePath = `/plugins/plugin-ee-${plugin.base}/task-runners/io.kestra.plugin.ee.${plugin.base}.runner.${taskRunner}`;
+            const standardPath = `/plugins/plugin-${plugin.base}/io.kestra.plugin.${plugin.base}.runner.${taskRunner}`;
+            const eePath = `/plugins/plugin-ee-${plugin.base}/io.kestra.plugin.ee.${plugin.base}.runner.${taskRunner}`;
 
             if (route?.path === standardPath) {
                 return redirect(eePath);
diff --git a/package-lock.json b/package-lock.json
index d54714c15c..cd6517fdcc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@kestra-io/ui-libs": "^0.0.136",
+        "@kestra-io/ui-libs": "^0.0.137",
         "@popperjs/core": "^2.11.8",
         "@rive-app/canvas": "^2.26.1",
         "@vue-flow/background": "^1.3.2",
@@ -2582,9 +2582,9 @@
       }
     },
     "node_modules/@kestra-io/ui-libs": {
-      "version": "0.0.136",
-      "resolved": "https://registry.npmjs.org/@kestra-io/ui-libs/-/ui-libs-0.0.136.tgz",
-      "integrity": "sha512-7WA25PIwTLygLOSjBfq4jFtk5ZnRHoXYKc0do1POsvQ0gibp3z5iOe8yulfLhXAMwYKDK1V7+se4y46k/dVpwA==",
+      "version": "0.0.137",
+      "resolved": "https://registry.npmjs.org/@kestra-io/ui-libs/-/ui-libs-0.0.137.tgz",
+      "integrity": "sha512-65VEgUSY0rcQXsgYnE6+BLidAPfs1nwPk6z8RxF9QIEkF1IfJvnxFkdavVIiii7ey0Wz7A6lXZeintfM9Pbcjw==",
       "dependencies": {
         "@nuxtjs/mdc": "^0.12.1",
         "@popperjs/core": "^2.11.8",
diff --git a/package.json b/package.json
index 56ecf6e60f..c571a2f66d 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "analyze": "nuxt analyze"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.136",
+    "@kestra-io/ui-libs": "^0.0.137",
     "@popperjs/core": "^2.11.8",
     "@rive-app/canvas": "^2.26.1",
     "@vue-flow/background": "^1.3.2",
diff --git a/pages/plugins/[...slug].vue b/pages/plugins/[...slug].vue
index f8065b4e38..03d64c9516 100644
--- a/pages/plugins/[...slug].vue
+++ b/pages/plugins/[...slug].vue
@@ -4,25 +4,44 @@
         <article class="bd-main order-1" :class="{'full': page?.rightBar === false }">
             <div class="bd-title">
                 <Breadcrumb :slug="slug" :pageList="pageList" :pageNames="pageNames"/>
-                <h1 v-if="page && getPageTitle()" class="py-0 title">
+                <h1 v-if="page && pageName" class="py-0 title">
                     <NuxtImg
                         v-if="pageIcon"
                         :src="pageIcon"
-                        :alt="getPageTitle()"
+                        :alt="pageName"
                         width="40"
                         height="40"
                         loading="lazy"
+                        format="webp"
+                        quality="80"
+                        densities="x1 x2"
                         class="me-3 page-icon"
                     />
-                    <span v-html="transformTitle(getPageTitle())"></span>
+                    <span v-html="transformTitle(pageName)"></span>
                 </h1>
             </div>
             <NavToc :rate-helpful="true" :page="page" class="my-md-0 my-4 right-menu"/>
 
-            <div class="bd-content">
-                <DocsFeatureScopeMarker v-if="page.editions || page.version || page.deprecated || page.release" :page="page" />
-                <Suspense v-if="page.pluginType === 'definitions'">
-                    <SchemaToHtml class="plugin-schema" :schema="page.body.jsonSchema" :plugin-type="getPageName()" :props-initially-expanded="true">
+            <div class="bd-content" v-if="page">
+                <DocsFeatureScopeMarker v-if="page.editions || page.version || page.deprecated || page.release"
+                                        :page="page"/>
+                <PluginIndex v-if="pluginType === undefined"
+                             class="plugin-index"
+                             :icons="icons"
+                             :plugins="page.body.plugins"
+                             :plugin-name="pluginName"
+                             :sub-group="subGroup">
+                    <template v-slot:markdown="{ content }">
+                        <MDC :value="content">
+                            <template #default="{body}">
+                                <ContentRenderer :value="body"/>
+                            </template>
+                        </MDC>
+                    </template>
+                </PluginIndex>
+                <Suspense v-else>
+                    <SchemaToHtml class="plugin-schema" :schema="page.body.jsonSchema" :plugin-type="pluginType"
+                                  :props-initially-expanded="true">
                         <template #markdown="{ content }">
                             <MDC :value="content">
                                 <template #default="{body}">
@@ -32,29 +51,27 @@
                         </template>
                     </SchemaToHtml>
                 </Suspense>
-                <ContentRenderer
-                    class="bd-markdown"
-                    :value="page"
-                    data-bs-spy="scroll"
-                    data-bs-target="#nav-toc"
-                    v-else
-                />
             </div>
         </article>
     </div>
 </template>
 
-<script setup>
-    import {hash} from "ohash";
+<script setup lang="ts">
     import {SchemaToHtml} from '@kestra-io/ui-libs'
     import NavSideBar from "~/components/docs/NavSideBar.vue";
     import Breadcrumb from "~/components/layout/Breadcrumb.vue";
     import NavToc from "~/components/docs/NavToc.vue";
-    import {recursivePages, generatePageNames} from "~/utils/navigation.js";
+    import {generatePageNames, recursivePages} from "~/utils/navigation.js";
+    import PluginIndex from "~/components/plugins/PluginIndex.vue";
+    import type {Plugin} from "~/utils/plugins.js";
+    import {isEntryAPluginElementPredicate, subGroupName} from "~/utils/plugins.js";
+    import {slugify} from "~/utils/url.js";
 
     const route = useRoute()
-    const slug = computed(() => `/plugins/${route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug}`);
-    let page;
+    const routeSlug = route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug;
+    const slug = computed(() => `/plugins/${routeSlug}`);
+    const splitRouteSlug = routeSlug.split("/");
+    const pluginName = computed(() => splitRouteSlug?.[0]);
 
     const fetchNavigation = async () => {
         const navigationFetch = await useFetch(`/api/plugins?type=navigation`);
@@ -66,76 +83,130 @@
         return {navigation, pageList, pageNames};
     }
 
+    function pluginToc(subGroupsWrappers: Plugin[]) {
+        return subGroupsWrappers.filter(subGroupWrapper => subGroupWrapper.subGroup !== undefined)
+            .map(subGroupWrapper => {
+                let subGroup = subGroupName(subGroupWrapper);
+                return ({
+                    id: `group-${slugify(subGroup)}`,
+                    depth: 2,
+                    text: subGroup
+                });
+            });
+    }
+
+    function pluginSubGroupToc(subGroupWrapper: Plugin) {
+        return Object.entries(subGroupWrapper).filter(([key, value]) => isEntryAPluginElementPredicate(key, value))
+            .map(([key, value]) => {
+                return {
+                    id: `section-${slugify(key)}`,
+                    depth: 2,
+                    text: key.capitalize(),
+                    children: value.map((element) => ({
+                        id: slugify(element),
+                        depth: 3,
+                        text: element.substring(element.lastIndexOf('.') + 1)
+                    }))
+                };
+            });
+    }
+
     const transformTitle = (text) => {
         return text
             .replace(/([A-Z])/g, '&#x200B;$1')
             .replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '');
     }
 
-    const parts = slug.value.split('/');
-    let pageUrl;
-    if (parts?.length > 3) {
-        pageUrl = `/api/plugins?page=${parts[parts?.length - 1].replace(/.md$/, "")}&type=definitions`
-    } else {
-        pageUrl = `/api/plugins?page=${parts[2]}&type=plugin`
-    }
+    const pluginType = computed(() => splitRouteSlug[splitRouteSlug.length - 1].includes(".") ? splitRouteSlug[splitRouteSlug?.length - 1].replace(/.md$/, "") : undefined);
+    const subGroup = computed(() => {
+        const maybeSubGroup = splitRouteSlug?.[1];
+        return maybeSubGroup?.includes(".") ? undefined : maybeSubGroup;
+    });
+
+    const pageUrl = computed(() => pluginType.value === undefined ? `/api/plugins?page=${splitRouteSlug[0]}&type=plugin` : `/api/plugins?page=${pluginType.value}&type=definitions`);
+    const dataKey = computed(() => pluginType.value === undefined ? splitRouteSlug[0] : pluginType.value);
 
-    const {data: pluginInformation} = await useAsyncData(`Container-${hash(pageUrl)}`, () => {
-        return $fetch(pageUrl)
+    const {data: page} = await useAsyncData(`Container-${dataKey.value}`, () => {
+        return $fetch(pageUrl.value)
     });
 
-    if (pluginInformation?.value?.error) {
-        throw createError({statusCode: 404, message: pluginInformation?.value?.message, fatal: true})
+    if (page?.value?.error) {
+        throw createError({statusCode: 404, message: page?.value?.message, fatal: true})
     }
-    page = pluginInformation?.value;
 
-    const {navigation, pageList, pageNames} = await fetchNavigation();
+    if (page.value.body.toc === undefined) {
+        let links;
+        if (subGroup.value !== undefined) {
+            links = pluginSubGroupToc(page.value.body.plugins.find(p => slugify(subGroupName(p)) === subGroup.value));
+        } else if (page?.value.body.plugins.length === 1) {
+            links = pluginSubGroupToc(page.value.body.plugins[0]);
+        } else {
+            links = pluginToc(page.value.body.plugins)
+        }
+        page.value.body.toc = {
+            links
+        }
+    }
 
-    const {origin} = useRequestURL();
+    const pluginWrapper = computed(() => page.value.body.plugins.find(p => p.subGroup === undefined));
+    const subGroupWrapper = computed(() => subGroup.value === undefined || pluginType.value !== undefined ? undefined : page.value.body.plugins.find(p => slugify(subGroupName(p)) === subGroup.value));
 
-    if(pluginInformation?.value){
-        pluginInformation.value.image = `${origin}/landing/home/header-bg.png`
-        await useContentHead(pluginInformation);
-    }
+    if (pluginType.value === undefined) {
+        page.value.title = pluginWrapper.value.title.capitalize().concat(
+            subGroup.value === undefined ? "" : ` - ${subGroupName({title: subGroup.value})}`
+        );
 
 
-    const getPageType = () => {
-        const paths = route.path.split('/');
-        return paths[paths?.length - 1];
+        page.value.description = subGroup.value === undefined ? pluginWrapper.value.description : subGroupWrapper.value.description;
     }
 
-    const getPageName = () => {
-        const pageType = getPageType().split('.');
-        pageType[pageType?.length - 1] = pageNames[getPageType()];
-        return pageType.join('.');
-    }
+    const {navigation, pageList, pageNames} = await fetchNavigation();
 
-    let pageIcon = page.icon;
-    if (page.pluginType === 'definitions') {
-        const iconB64 = await $fetch(`/api/plugins?page=${getPageName()}&type=icon`);
-        pageIcon = `data:image/svg+xml;base64,${iconB64}`;
-    } else {
-        const iconB64 = pageIcon.substring(26)
-        const coloredIcon = atob(iconB64).replace(/currentColor/g, '#CAC5DA');
-        pageIcon = `data:image/svg+xml;base64,${btoa(coloredIcon)}`;
-    }
+    const {origin} = useRequestURL();
 
-    const getPageTitle = () => {
-        return pageNames[getPageType()];
+    if (page?.value){
+        page.value.image = `${origin}/landing/home/header-bg.png`
+        await useContentHead(page);
     }
 
-    const {description, title} = page;
-
-    useHead({
-        meta: [
-            {name: 'twitter:card', content: 'summary_large_image'},
-            {name: 'twitter:site', content: '@kestra_io'},
-            {name: 'twitter:title', content: title},
-            {name: 'twitter:description', content: description},
-            {name: 'twitter:image', content: `${origin}/landing/home/header-bg.png`},
-            {name: 'twitter:image:alt', content: title}
-        ]
-    })
+    const pageName = computed(() => pageNames[route.path]);
+
+    let {data: icons} = await useAsyncData(`PluginSubgroupsIcon-${pluginName.value}`, () => {
+        try {
+            return $fetch(`/api/plugins?page=${pluginName.value}&type=subGroupsIcons`);
+        } catch (error) {
+            throw createError({statusCode: 404, message: error.toString(), data: error, fatal: true})
+        }
+    });
+
+    const {data: elementsIcons} = await useAsyncData(`PluginElementsIcon-${pluginName.value}`, () => {
+        try {
+            return $fetch(`/api/plugins?page=${pluginName.value}&type=elementsIcons`);
+        } catch (error) {
+            throw createError({statusCode: 404, message: error.toString(), data: error, fatal: true})
+        }
+    });
+    icons = ref({
+        ...icons.value,
+        ...elementsIcons.value
+    });
+
+    const pageIcon = computed(() => {
+        let icon;
+        if (pluginType.value !== undefined) {
+            icon = icons.value[pluginType.value];
+            if (icon === undefined) {
+                icon = Object.entries(icons.value).filter(([key]) => pluginType.value.includes(key))
+                    .sort(([key1], [key2]) => key2.length - key1.length)?.[0]?.[1];
+            }
+        } else if (subGroup.value === undefined) {
+            icon = icons.value[page.value.body.group];
+        } else {
+            icon = icons.value[subGroupWrapper.value.subGroup]
+        }
+
+        return `data:image/svg+xml;base64,${icon}`;
+    });
 </script>
 <style lang="scss" scoped>
     @import "../../assets/styles/variable";
@@ -171,7 +242,7 @@
         .bd-content {
             margin: 0 auto 2em auto;
             @media only screen and (min-width: 1920px) {
-                max-width:71.25rem
+                max-width: 71.25rem
             }
         }
 
@@ -322,7 +393,7 @@
         }
 
         :deep(.plugin-section) {
-            & .material-design-icon {
+            .material-design-icon {
                 &, & * {
                     bottom: 0;
                 }
@@ -401,7 +472,7 @@
                 }
             }
 
-            .type-box{
+            .type-box {
                 color: var(--kestra-io-token-color-white);
 
                 .ref-type {
@@ -422,4 +493,46 @@
     :deep(.bd-markdown > h2 > a > span ) {
         display: inline !important;
     }
+
+    .plugin-index {
+        :deep(div):has(> .row-link) {
+            gap: var(--spacer);
+        }
+
+        :deep(.elements-section) {
+            gap: calc(2 * var(--spacer));
+        }
+
+        :deep(.row-link) {
+            padding: calc(.5 * var(--spacer)) calc(2 * var(--spacer));
+            background: var(--kestra-io-token-color-background-secondary);
+            color: var(--kestra-io-token-color-white);
+            border: 1px solid var(--kestra-io-token-color-border-secondary);
+
+            &:hover, &:focus {
+                outline: none;
+                background: var(--kestra-io-neutral-gray300);
+                border: 1px solid var(--tokens-border-border-active);
+
+                .material-design-icon {
+                    color: var(--kestra-io-neutral-white);
+                }
+            }
+
+            img {
+                width: 3.375rem;
+                height: 3.375rem;
+            }
+
+            .material-design-icon {
+                color: var(--kestra-io-neutral-gray700);
+
+                &, & * {
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    bottom: 0;
+                }
+            }
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/server/api/plugins.js b/server/api/plugins.js
deleted file mode 100644
index f7dfb000d4..0000000000
--- a/server/api/plugins.js
+++ /dev/null
@@ -1,262 +0,0 @@
-import {parseMarkdown} from '@nuxtjs/mdc/runtime'
-import url from "node:url";
-import {camelToKebabCase} from "~/utils/url.js";
-
-function toNuxtContent(parsedMarkdown, type) {
-    return {
-        body: {
-            toc: parsedMarkdown.toc,
-            ...parsedMarkdown.body
-        },
-        pluginType: type,
-        description: parsedMarkdown.data.description,
-        title: parsedMarkdown.data.title,
-        icon: `data:image/svg+xml;base64,${parsedMarkdown.data.icon}` ?? null
-    };
-}
-
-function toNuxtBlocks(data, type) {
-    return {
-        body: {
-            jsonSchema: data,
-            toc: {
-                links: navTocData(data)
-            },
-        },
-        pluginType: type,
-        description: data.properties.description,
-        title: data.properties.title
-    };
-}
-
-const generateNavTocChildren = (hrefPrefix = "", properties) => {
-    const children = [];
-
-    const sortedKeys = Object.keys(properties).sort((a, b) => {
-        return (properties[b].$required || false) - (properties[a].$required || false);
-    });
-
-    for (const key of sortedKeys) {
-        children.push({
-            id: hrefPrefix + key,
-            depth: 3,
-            text: key,
-        });
-    }
-
-    return children;
-}
-
-const navTocData = (schema) => {
-    const links = [];
-
-    if (schema.properties?.["$examples"]) {
-        links.push({
-            id: 'examples',
-            depth: 2,
-            text: 'Examples'
-        });
-    }
-
-    if (schema.properties?.properties) {
-        links.push({
-            id: 'properties',
-            depth: 2,
-            text: 'Properties',
-            children: generateNavTocChildren("properties_", schema.properties.properties)
-        });
-    }
-
-    if (schema.outputs?.properties) {
-        links.push({
-            id: 'outputs',
-            depth: 2,
-            text: 'Outputs',
-            children: generateNavTocChildren("outputs_", schema.outputs.properties)
-        });
-    }
-
-    if (schema.definitions) {
-        links.push({
-            id: 'definitions',
-            depth: 2,
-            text: 'Definitions',
-            children: generateNavTocChildren(undefined, schema.definitions)
-        });
-    }
-
-    return links;
-};
-
-function generateSubMenu(baseUrl, group, items) {
-    return generateSubMenuWithGroupProvider(baseUrl, () => group, items);
-}
-
-function generateSubMenuWithGroupProvider(baseUrl, groupProviderFromItem, items) {
-    let itemsBySubmenu = items.reduce((m, item) => {
-        const subMenuSplitter = item.lastIndexOf(".");
-        if (subMenuSplitter === -1) {
-            m[item] = {
-                title: toNavTitle(item),
-                path: `${baseUrl}/${groupProviderFromItem(item)}.${item}`.toLowerCase(),
-                isPage: true,
-            }
-        } else {
-            let subMenuName = item.substring(0, subMenuSplitter);
-            if (!m[subMenuName]) {
-                const subGroup = `${groupProviderFromItem(item)}.${subMenuName}`;
-                m[subMenuName] = generateSubMenu(
-                    `${baseUrl}/${subMenuName}`,
-                    subGroup,
-                    items.filter(i => i.startsWith(subMenuName + "."))
-                        .map(i => i.substring(subMenuName.length + 1))
-                );
-            }
-        }
-        return m;
-    }, {});
-
-    return Object.entries(itemsBySubmenu).map(([key, value]) => {
-        if (Array.isArray(value)) {
-            return {
-                title: toNavTitle(key),
-                path: `${baseUrl}/${key}`.toLowerCase(),
-                isPage: false,
-                children: value
-            }
-        }
-        return value;
-    });
-}
-
-function toNavTitle(title) {
-    let startCaseTitle = title;
-    if (title.match(/^[a-z]+[A-Z][a-z]/)) {
-        startCaseTitle = title.replace(/[A-Z][a-z]/, match => " " + match);
-    }
-    return startCaseTitle.split(".")
-        .map(string => string.charAt(0).toUpperCase() + string.slice(1))
-        .join("");
-}
-
-const pluginCategories = ['tasks', 'triggers', 'conditions', 'controllers', 'storages', 'secrets', 'guides', 'taskRunners'];
-
-export default defineEventHandler(async (event) => {
-    try {
-        const requestUrl = new url.URL("http://localhost" + event.node.req.url);
-        const page = requestUrl.searchParams.get("page");
-        const type = requestUrl.searchParams.get("type");
-        const config = useRuntimeConfig();
-        if (type === 'icon') {
-            let icon = await (await $fetch(`${config.public.apiUrl}/plugins/icons/${page}`)).text();
-            return Buffer.from(icon.replaceAll("currentColor", "#CAC5DA")).toString('base64');
-        }
-        if (type === 'definitions') {
-            let pageData = await $fetch(`${config.public.apiUrl}/plugins/definitions/${page}`);
-
-            return toNuxtBlocks(pageData.schema, type);
-        }
-        if (type === 'plugin') {
-            let pageData = await $fetch(`${config.public.apiUrl}/plugins/${page}`);
-
-            const parsedMarkdown = await parseMarkdown(pageData.body);
-
-            return toNuxtContent(parsedMarkdown, type);
-        }
-        if (type === 'navigation') {
-            const plugins = await $fetch(`${config.public.apiUrl}/plugins`);
-            let sortedPluginsHierarchy = plugins.map(plugin => {
-                let rootPluginUrl = '/plugins/' + plugin.name;
-                const children = pluginCategories
-                    .flatMap(category => {
-                        let children;
-                        let kebabCasedCategory = camelToKebabCase(category);
-                        const taskList = (plugin[category] || []);
-                        if (plugin.name === "core") {
-                            if (category === "tasks") {
-                                children = generateSubMenu(
-                                    `${rootPluginUrl}/${kebabCasedCategory}`,
-                                    plugin.group,
-                                    taskList.map(item => item.split(".").slice(-2).join("."))
-                                );
-                            } else {
-                                const fqnByClassName = {};
-                                children = generateSubMenuWithGroupProvider(
-                                    `${rootPluginUrl}/${kebabCasedCategory}`,
-                                    (item) => {
-                                        const fqn = fqnByClassName[item];
-
-                                        return fqn.substring(0, fqn.lastIndexOf("."));
-                                    },
-                                    taskList.map(item => {
-                                        const className = item.substring(item.lastIndexOf(".") + 1);
-                                        fqnByClassName[className] = item;
-                                        return className;
-                                    })
-                                );
-                            }
-                        } else {
-                            const coreTaskByFqn = {};
-                            const coreTaskQualifier = "io.kestra.core.tasks";
-                            children = generateSubMenuWithGroupProvider(
-                                `${rootPluginUrl}/${kebabCasedCategory}`,
-                                (item) => {
-                                    let fqnTask = coreTaskByFqn[item];
-                                    if (fqnTask !== undefined) {
-                                        return coreTaskQualifier;
-                                    }
-                                    return plugin.group;
-                                },
-                                taskList.map(item => {
-                                    if (item.startsWith(coreTaskQualifier)) {
-                                        let relativeItem = item.substring(coreTaskQualifier.length + 1);
-                                        coreTaskByFqn[relativeItem] = item;
-                                        return relativeItem;
-                                    }
-                                    return item.substring(plugin.group.length + 1);
-                                })
-                            );
-                        }
-
-                        if (children.length === 0) {
-                            return [];
-                        }
-
-                        return {
-                            title: toNavTitle(category),
-                            path: `${rootPluginUrl}/${kebabCasedCategory}`.toLowerCase(),
-                            isPage: false,
-                            children
-                        }
-                    });
-                return {
-                    title: toNavTitle(plugin.title),
-                    path: rootPluginUrl.toLowerCase(),
-                    children
-                };
-            }).sort((a, b) => {
-                const nameA = a.title.toLowerCase(),
-                    nameB = b.title.toLowerCase();
-
-                if (nameA === "core") {
-                    return -1;
-                }
-                if (nameB === "core") {
-                    return 1;
-                }
-
-                return nameA === nameB ? 0 : nameA < nameB ? -1 : 1;
-            });
-            return [{
-                title: "Plugins",
-                path: "/plugins",
-                children: sortedPluginsHierarchy
-            }];
-        }
-    } catch (error) {
-        return {
-            message: 'Failed to fetch or parse data',
-            error: error,
-        };
-    }
-});
\ No newline at end of file
diff --git a/server/api/plugins.ts b/server/api/plugins.ts
new file mode 100644
index 0000000000..5836cf95e1
--- /dev/null
+++ b/server/api/plugins.ts
@@ -0,0 +1,214 @@
+import url from "node:url";
+import type {JSONProperty, JSONSchema} from "@kestra-io/ui-libs";
+import {type Plugin, subGroupName} from "~/utils/plugins";
+import {isEntryAPluginElementPredicate} from "~/utils/plugins";
+import {slugify} from "~/utils/url";
+import type {RuntimeConfig} from "nuxt/schema";
+import type {NitroRuntimeConfig} from "nitropack/types";
+
+type PageType = "subGroupsIcons" | "elementsIcons" | "definitions" | "plugin" | "navigation";
+
+function nuxtBlocksFromJsonSchema(jsonSchema: JSONSchema) {
+    return {
+        body: {
+            jsonSchema,
+            toc: {
+                links: tocFromJsonSchema(jsonSchema)
+            },
+        },
+        description: jsonSchema.properties.description,
+        title: jsonSchema.properties.title
+    };
+}
+
+function nuxtBlocksFromSubGroupsWrappers(subGroupsWrappers: Plugin[]) {
+    return {
+        body: {
+            plugins: subGroupsWrappers,
+            group: subGroupsWrappers?.[0]?.group,
+        }
+    };
+}
+
+const jsonSchemaPropertiesChildrenToc = (hrefPrefix = "", properties: Record<string, JSONProperty>) => {
+    const children = [];
+
+    const sortedKeys = Object.keys(properties).sort((a, b) => {
+        return (properties[b].$required || false) - (properties[a].$required || false);
+    });
+
+    for (const key of sortedKeys) {
+        children.push({
+            id: hrefPrefix + key,
+            depth: 3,
+            text: key,
+        });
+    }
+
+    return children;
+}
+
+const tocFromJsonSchema = (schema: JSONSchema) => {
+    const links = [];
+
+    if (schema.properties?.["$examples"]) {
+        links.push({
+            id: 'examples',
+            depth: 2,
+            text: 'Examples'
+        });
+    }
+
+    if (schema.properties?.properties) {
+        links.push({
+            id: 'properties',
+            depth: 2,
+            text: 'Properties',
+            children: jsonSchemaPropertiesChildrenToc("properties_", schema.properties.properties)
+        });
+    }
+
+    if (schema.outputs?.properties) {
+        links.push({
+            id: 'outputs',
+            depth: 2,
+            text: 'Outputs',
+            children: jsonSchemaPropertiesChildrenToc("outputs_", schema.outputs.properties)
+        });
+    }
+
+    if (schema.definitions) {
+        links.push({
+            id: 'definitions',
+            depth: 2,
+            text: 'Definitions',
+            children: jsonSchemaPropertiesChildrenToc(undefined, schema.definitions)
+        });
+    }
+
+    return links;
+};
+
+function toNavTitle(title: string) {
+    let startCaseTitle = title;
+    if (title.match(/^[a-z]+[A-Z][a-z]/)) {
+        startCaseTitle = title.replace(/[A-Z][a-z]/, match => " " + match);
+    }
+    return startCaseTitle.split(".")
+        .map(string => string.charAt(0).toUpperCase() + string.slice(1))
+        .join("");
+}
+
+function subGroupWrapperNav(subGroupWrapper: Plugin, parentUrl: string) {
+    return Object.entries(subGroupWrapper).filter(([key, value]) => isEntryAPluginElementPredicate(key, value))
+        .map(([key, value]) => {
+            return ({
+                title: toNavTitle(key),
+                isPage: false,
+                path: parentUrl + "#" + slugify(key),
+                children: value.map(item => ({
+                    title: toNavTitle(item.substring(item.lastIndexOf('.') + 1)),
+                    path: `${parentUrl}/${slugify(item)}`
+                }))
+            });
+        });
+}
+
+async function generateNavigation(config: RuntimeConfig | NitroRuntimeConfig) {
+    const pluginsSubGroups = await $fetch<Plugin[]>(`${config.public.apiUrl}/plugins/subgroups`);
+    const subGroupsByGroup = pluginsSubGroups.reduce(
+        (result, subGroupWrapper) => {
+            if (!result[subGroupWrapper.group]) {
+                result[subGroupWrapper.group] = [];
+            }
+            result[subGroupWrapper.group].push(subGroupWrapper);
+            return result;
+        }, {} as Record<string, Plugin[]>);
+    let sortedPluginsHierarchy = Object.entries(subGroupsByGroup).map(([group, subGroupsWrappers]) => {
+        let plugin = subGroupsWrappers.find(subGroupWrapper => subGroupWrapper.subGroup === undefined);
+        let rootPluginUrl = "/plugins/" + slugify(plugin.name);
+        let pluginChildren;
+        if (subGroupsWrappers.length > 1) {
+            pluginChildren = subGroupsWrappers.filter(subGroupWrapper => subGroupWrapper.subGroup !== undefined).map(subGroupWrapper => {
+                const subGroupUrl = `${rootPluginUrl}/${slugify(subGroupName(subGroupWrapper))}`;
+                return {
+                    title: toNavTitle(subGroupWrapper.title),
+                    path: subGroupUrl,
+                    children: subGroupWrapperNav(subGroupWrapper, subGroupUrl)
+                }
+            });
+        }
+        // There is no subgroups, we skip that part and directly put plugin elements below
+        else {
+            pluginChildren = subGroupWrapperNav(subGroupsWrappers[0], rootPluginUrl);
+        }
+        return {
+            title: toNavTitle(plugin.title),
+            path: rootPluginUrl,
+            children: pluginChildren
+        }
+    }).sort((a, b) => {
+        const nameA = a.title.toLowerCase(),
+            nameB = b.title.toLowerCase();
+
+        if (nameA === "core") {
+            return -1;
+        }
+        if (nameB === "core") {
+            return 1;
+        }
+
+        return nameA === nameB ? 0 : nameA < nameB ? -1 : 1;
+    });
+    return [{
+        title: "Plugins",
+        path: "/plugins",
+        children: sortedPluginsHierarchy
+    }];
+}
+
+export default defineEventHandler(async (event) => {
+    try {
+        const requestUrl = new url.URL("http://localhost" + event.node.req.url);
+        const page = requestUrl.searchParams.get("page");
+        const type = requestUrl.searchParams.get("type") as PageType;
+        const config = useRuntimeConfig();
+
+        const colorFixedB64Icon = (b64Icon: string) => {
+            return Buffer.from(Buffer.from(b64Icon, 'base64').toString('utf-8').replaceAll("currentColor", "#CAC5DA")).toString('base64');
+        }
+
+        switch (type) {
+            case "subGroupsIcons": {
+                return Object.fromEntries(Object.entries(
+                    await $fetch(`${config.public.apiUrl}/plugins/${page}/icons/subgroups`)
+                ).map(([subGroup, {icon}]) => [subGroup, colorFixedB64Icon(icon)]));
+            }
+            case "elementsIcons": {
+                return Object.fromEntries(Object.entries(
+                    await $fetch(`${config.public.apiUrl}/plugins/${page}/icons`)
+                ).map(([pluginElement, {icon}]) => {
+                    return [pluginElement, colorFixedB64Icon(icon)]
+                }));
+            }
+            case "definitions": {
+                let pageData = await $fetch(`${config.public.apiUrl}/plugins/definitions/${page}`);
+
+                return nuxtBlocksFromJsonSchema(pageData.schema);
+            }
+            case "plugin": {
+                let subgroups = await $fetch(`${config.public.apiUrl}/plugins/${page}/subgroups`);
+
+                return nuxtBlocksFromSubGroupsWrappers(subgroups);
+            }
+            case "navigation": {
+                return await generateNavigation(config);
+            }
+        }
+    } catch (error) {
+        return {
+            message: 'Failed to fetch or parse data',
+            error: error,
+        };
+    }
+});
\ No newline at end of file
diff --git a/utils/plugins.ts b/utils/plugins.ts
new file mode 100644
index 0000000000..e4a52314d1
--- /dev/null
+++ b/utils/plugins.ts
@@ -0,0 +1,23 @@
+export interface Plugin {
+    name: string;
+    title: string;
+    group: string;
+    subGroup?: string;
+    categories?: string[];
+    controllers?: string[];
+    storages?: string[];
+    aliases?: string[];
+    guides?: string[];
+    [pluginElement: string]: string[];
+}
+
+export function isEntryAPluginElementPredicate(key: string, value: any) {
+    return Array.isArray(value) &&
+        !["categories", "controllers", "storages", "aliases", "guides"].includes(key) &&
+        ((value as any[]).length === 0 ||
+        typeof value[0] === "string");
+}
+
+export function subGroupName(subGroupWrapper: Plugin) {
+    return (subGroupWrapper.title ?? subGroupWrapper.subGroup.split(subGroupWrapper.group)[1]).replaceAll(/\.([a-zA-Z])/g, (_, capture) => ` ${capture.toUpperCase()}`).capitalize();
+}
\ No newline at end of file