diff --git a/src/components/CollapseDemo.vue b/src/components/CollapseDemo.vue
new file mode 100644
index 0000000..f1f4137
--- /dev/null
+++ b/src/components/CollapseDemo.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex space-x-5">
+    <div class="w-2/5">
+      <Collapse
+        :items="collapseHighlighting"
+        @handleChange="handleChange" />
+    </div>
+    <div class="w-3/5">
+      <CodeHighlight v-if="renderComponent" :code="currentFrame" />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import Collapse from './Collapse.vue'
+import CodeHighlight from './CodeHighlight.vue'
+import { ref, computed, nextTick } from 'vue'
+import { command, event, slashCommand } from '../utils/CodeHighlignt'
+
+let activeFrame = ref(0)
+let renderComponent = ref(true);
+
+function handleChange (key: number) {
+  activeFrame.value = key
+  renderComponent.value = false
+
+  nextTick(() => {
+    renderComponent.value = true;
+  });
+}
+
+const currentFrame = computed(() => collapseHighlighting[activeFrame.value].code)
+
+const collapseHighlighting = [
+  {
+    label: 'Events',
+    description: 'The use of events is the basis when developing a robot for discord. It is important to be able to create your own events quickly and efficiently. Discord Factory provides a command in the CLI that allows you to easily generate ready-to-use event files.',
+    code: event,
+  },
+  {
+    label: 'Commands',
+    description: 'The use of commands has become commonplace in the world of discord robots, it is important to be able to create your own commands quickly and efficiently. Discord Factory provides you with a command that allows you to easily generate ready-to-use command files.',
+    code: command,
+  },
+  {
+    label: 'Slash commands',
+    description: 'The use of commands has become commonplace in the world of discord robots, it is important to be able to create your own commands quickly and efficiently. Discord Factory provides you with a command that allows you to easily generate ready-to-use command files.',
+    code: slashCommand,
+  }
+]
+</script>
\ No newline at end of file
diff --git a/src/utils/CodeHighlignt.ts b/src/utils/CodeHighlignt.ts
new file mode 100644
index 0000000..c20d031
--- /dev/null
+++ b/src/utils/CodeHighlignt.ts
@@ -0,0 +1,45 @@
+export const event = `
+import { Event, BaseEvent } from '@discord-factory/core'
+import { GuildMember } from 'discord.js'
+
+@Event('guildMemberAdd')
+export default class FooEvent implements BaseEvent {
+  public async run(member: GuildMember): Promise<void> {
+    // Your code here
+  }
+}
+`
+
+export const command = `
+import { BaseCommand, Command } from '@discord-factory/core'
+import { Message } from 'discord.js'
+
+@Command({
+  label: 'MyCommand',
+  description: 'MyCommand description',
+  tag: 'mycommand'
+})
+export default class FooCommand implements BaseCommand {
+  public async run(message: Message, args: string[]): Promise<void> {
+    // Your code here
+  }
+}`
+
+export const slashCommand = `
+import { BaseSlashCommand, SlashCommand } from '@discord-factory/core'
+import { Message, CommandInteraction } from 'discord.js'
+
+@SlashCommand({
+scope: ['guild id'], // or 'GLOBAL'
+roles: ['role id'],
+  options: {
+    name: 'send-ticket',
+    description: 'SendEmbed ticket description',
+    options: [],
+  },
+})
+export default class FooSlashCommand implements BaseSlashCommand {
+  public async run(interaction: CommandInteraction): Promise<void> {
+    // Your code here
+  }
+}`
\ No newline at end of file