diff --git a/packages/docs/modules/page-config/blocks/change-log/index.ts b/packages/docs/modules/page-config/blocks/change-log/index.ts
index a1b40694c8..62fffe15b1 100644
--- a/packages/docs/modules/page-config/blocks/change-log/index.ts
+++ b/packages/docs/modules/page-config/blocks/change-log/index.ts
@@ -2,13 +2,15 @@ import { definePageConfigBlock } from '../../types'
 import Component from './index.vue'
 import { ChangeLog } from './types'
 
+const setup = (changeLog: ChangeLog) => {
+  return {
+    type: 'change-log' as const,
+    changeLog,
+  }
+}
+
 export default definePageConfigBlock({
-  setup: (log: ChangeLog) => {
-    return {
-      type: 'change-log' as const,
-      log
-    }
-  },
+  setup: setup as unknown as () => ReturnType<typeof setup>,
   component: Component,
 })
 
diff --git a/packages/docs/modules/page-config/blocks/change-log/index.vue b/packages/docs/modules/page-config/blocks/change-log/index.vue
index 7cc7e956cf..4947c5fdbf 100644
--- a/packages/docs/modules/page-config/blocks/change-log/index.vue
+++ b/packages/docs/modules/page-config/blocks/change-log/index.vue
@@ -5,41 +5,54 @@ import { ChangeLog } from "./types";
 import { PropType, computed } from "vue";
 
 const props = defineProps({
-  log: { type: Object as PropType<ChangeLog>, required: true },
+  changeLog: { type: Object as PropType<ChangeLog>, required: true },
 });
 
-const versions = computed(() => Object.keys(props.log));
+const versions = computed(() => Object.keys(props.changeLog));
 </script>
 
 <template>
-  <VaCollapse
-    class="page-config-change-log"
-    flat
+  <div
+    v-for="version in versions"
+    :key="version"
+    class="page-config-change-log__block"
   >
-    <template #header>
-      <div class="page-config-change-log__title">
-        <h2 class="va-h5">
-          Change log
-          <Anchor text="Change log" />
-        </h2>
-        <VaIcon name="va-arrow-down" />
-      </div>
-    </template>
+    <VaCollapse>
+      <template #header-content>
+        <div class="flex items-center">
+          <VaIcon
+            name="rocket_launch"
+            class="mr-1"
+            size="18px"
+            color="secondary"
+          />
+          <h1 class="va-h6 va-link">
+            <a :href="`https://github.com/epicmaxco/vuestic-ui/releases/tag/v${version}`">
+              v{{ version }}
+            </a>
+          </h1>
+        </div>
+      </template>
 
-    <div
-      v-for="version in versions"
-      :key="version"
-      class="page-config-change-log__block"
-    >
-      <h3 class="va-h6 page-config-change-log__version">
-        v{{ version }}
-      </h3>
-      <ul class="va-unordered">
+      <ul
+        v-for="componentChanges, componentName in changeLog[version]"
+        :key="componentName"
+        class="va-unordered mb-8"
+        style="--va-li-background: var(--va-background-border)"
+      >
+        <h2
+          class="va-h6 mb-2"
+          style="font-weight: 600;"
+        >
+          {{ componentName }}
+        </h2>
         <li
-          v-for="logs in log[version]"
-          :key="logs"
+          v-for="change in componentChanges"
+          :key="change"
+          class="my-1"
         >
-          <MarkdownView :content="logs" />
+          <!-- <div class="page-config-api-change-log__circle" /> -->
+          <MarkdownView :content="change.slice(2)" />
         </li>
       </ul>
       <VaButton
@@ -48,8 +61,8 @@ const versions = computed(() => Object.keys(props.log));
       >
         View full release change log
       </VaButton>
-    </div>
-  </VaCollapse>
+    </VaCollapse>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/packages/docs/modules/page-config/blocks/change-log/transform.ts b/packages/docs/modules/page-config/blocks/change-log/transform.ts
new file mode 100644
index 0000000000..6599244b9b
--- /dev/null
+++ b/packages/docs/modules/page-config/blocks/change-log/transform.ts
@@ -0,0 +1,47 @@
+import { readFile } from 'fs/promises';
+import { defineBlockTransform } from "../../compiler/define-block-transform";
+import glob from 'fast-glob'
+import { resolve, join } from 'pathe'
+
+const changelogs = glob(join(resolve(''), '..', 'ui/src/**/CHANGELOG.md'))
+
+export const render = async () => {
+  const logs = await changelogs
+  const logEnteries = await Promise.all((logs)
+    .map(async (path) => {
+      return [
+        path,
+        await readFile(path, 'utf-8')
+      ]
+    }))
+
+  const mergedChangelog = logEnteries
+    .reduce((acc, [path, changelog]) => {
+      const componentName = path.match(/components\/(.*)\/CHANGELOG.md/)?.[1]
+
+      const spilledByVersion = changelog.split(/# ([0-9]*\.[0-9]*\.[0-9]*)/).filter(Boolean)
+
+      for (let i = 0; i < spilledByVersion.length; i += 2) {
+        const version = spilledByVersion[i]
+        const content = spilledByVersion[i + 1]
+
+        acc[version] = acc[version] || {}
+
+        if (componentName) {
+          acc[version][componentName] = content.split('\n').filter(Boolean)
+        }
+      }
+      return acc
+    }, {} as Record<string, Record<string, string[]>>)
+
+    return mergedChangelog
+}
+
+export default defineBlockTransform(async function (block) {
+  if (block.type !== 'changeLog') { return }
+
+  const changelog = await render()
+
+  const newblock = block.replaceArgCode(0, JSON.stringify(changelog))
+  return newblock
+})
diff --git a/packages/docs/modules/page-config/blocks/change-log/types.ts b/packages/docs/modules/page-config/blocks/change-log/types.ts
index d6cb9dc192..1947f2c470 100644
--- a/packages/docs/modules/page-config/blocks/change-log/types.ts
+++ b/packages/docs/modules/page-config/blocks/change-log/types.ts
@@ -1 +1,3 @@
-export type ChangeLog = Record<`${number}.${number}.${number}`, string[]>
\ No newline at end of file
+import { type render } from './transform'
+
+export type ChangeLog = Awaited<ReturnType<typeof render>>
diff --git a/packages/docs/modules/page-config/compiler/parse.ts b/packages/docs/modules/page-config/compiler/parse.ts
index ac7823160a..9401d2da59 100644
--- a/packages/docs/modules/page-config/compiler/parse.ts
+++ b/packages/docs/modules/page-config/compiler/parse.ts
@@ -47,6 +47,16 @@ export const parseCode = (code: string) => {
           args,
           argNodes: n.arguments as unknown as Node[],
           replaceArgCode: (index: number, value: string) => {
+            // In case there is not arguments at this index, add to the end
+            if (n.arguments.length == 0) {
+              code = code.replace(blockCode, blockCode.replace(')', `${value})`))
+              return code
+            }
+            if (index > n.arguments.length - 1) {
+              code = code.replace(blockCode, blockCode.replace(')', `, ${value})`))
+              return code
+            }
+
             const argStartInSlice = (n.arguments[index] as any).start - node.start
             const argEndInSlice = (n.arguments[index] as any).end - node.start
 
diff --git a/packages/docs/modules/page-config/compiler/transform.ts b/packages/docs/modules/page-config/compiler/transform.ts
index 5959d29730..415e5dd901 100644
--- a/packages/docs/modules/page-config/compiler/transform.ts
+++ b/packages/docs/modules/page-config/compiler/transform.ts
@@ -5,6 +5,7 @@ import code from '../blocks/code/transform'
 import component from '../blocks/component/transform'
 import example from '../blocks/example/transform'
 import file from '../blocks/file/transform'
+import changeLog from '../blocks/change-log/transform';
 
 
 const transformers = [
@@ -13,6 +14,7 @@ const transformers = [
   component,
   example,
   file,
+  changeLog,
 ]
 
 export const transform = async (code: string, importer: Importer) => {
diff --git a/packages/docs/page-config/introduction/change-log/index.ts b/packages/docs/page-config/introduction/change-log/index.ts
index 49ad09c644..ef6efb5dfd 100644
--- a/packages/docs/page-config/introduction/change-log/index.ts
+++ b/packages/docs/page-config/introduction/change-log/index.ts
@@ -1,42 +1,6 @@
-const changelogs = import.meta.glob('@/../ui/**/CHANGELOG.md', { as: 'raw' }) as Record<string, () => Promise<string>>
-
-
-const render = async () => {
-  const logEnteries = await Promise.all(Object.entries(changelogs)
-    .map(async ([path, changelog]) => {
-      return [
-        path,
-        await changelog()
-      ]
-    }))
-
-  const mergedChangelog = logEnteries
-    .reduce((acc, [path, changelog]) => {
-      const componentName = path.match(/components\/(.*)\/CHANGELOG.md/)?.[1]
-
-      const spilledByVersion = changelog.split(/# ([0-9]*\.[0-9]*\.[0-9]*)/).filter(Boolean)
-
-      for (let i = 0; i < spilledByVersion.length; i += 2) {
-        const version = spilledByVersion[i]
-        const content = spilledByVersion[i + 1]
-
-        acc[version] = acc[version] || {}
-
-        if (componentName) {
-          acc[version][componentName] = content.split('\n').filter(Boolean)
-        }
-      }
-      return acc
-    }, {} as Record<string, Record<string, string[]>>)
-
-  return [
-    block.component("ChangeLog", { changelog: mergedChangelog })
-  ]
-}
-
 export default definePageConfig({
   blocks: [
     block.title('Change Log'),
-    block.async(render())
+    block.changeLog(),
   ],
 });
diff --git a/packages/docs/page-config/ui-elements/time-input/index.ts b/packages/docs/page-config/ui-elements/time-input/index.ts
index 2d0ddf6a2d..d07313d0b8 100644
--- a/packages/docs/page-config/ui-elements/time-input/index.ts
+++ b/packages/docs/page-config/ui-elements/time-input/index.ts
@@ -42,12 +42,5 @@ export default definePageConfig({
 
 
     block.api("VaTimeInput", apiDescription, apiOptions),
-
-    block.changeLog({
-      '1.8.0': [
-        'Date input have outlined style by default',
-        '`solid` and `bordered` props moved to `preset="solid"` and `preset="bordered"`',
-      ],
-    })
   ],
 });