diff --git a/src/components/CodeHighlight.vue b/src/components/CodeHighlight.vue
index 8abfb97..e170987 100644
--- a/src/components/CodeHighlight.vue
+++ b/src/components/CodeHighlight.vue
@@ -23,9 +23,9 @@ pre[class*="language-"] {
   word-wrap: normal;
   color: #c3cee3;
   background: #263238;
-  font-family: Roboto Mono, monospace;
-  font-size: 1em;
-  line-height: 1.5em;
+  font-family: Jetbrains Mono, Roboto Mono, monospace;
+  font-size: 0.9em;
+  line-height: 1.8em;
   -moz-tab-size: 2;
   -o-tab-size: 2;
   tab-size: 2;
@@ -33,7 +33,7 @@ pre[class*="language-"] {
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  @apply rounded-md h-full;
+  @apply rounded-md;
 }
 
 code[class*="language-"]::-moz-selection,
@@ -59,8 +59,8 @@ pre[class*="language-"] ::selection {
 pre[class*="language-"] {
   overflow: auto;
   position: relative;
-  margin: 0.5em 0;
-  padding: 0 1em;
+  padding: 0 1em 1.8rem;
+  margin: 0;
 }
 
 .language-css > code,
diff --git a/src/components/CollapseDemo.vue b/src/components/CollapseDemo.vue
index f1f4137..307e071 100644
--- a/src/components/CollapseDemo.vue
+++ b/src/components/CollapseDemo.vue
@@ -1,12 +1,20 @@
 <template>
   <div class="flex space-x-5">
-    <div class="w-2/5">
+    <div class="w-1/2">
       <Collapse
         :items="collapseHighlighting"
         @handleChange="handleChange" />
     </div>
-    <div class="w-3/5">
-      <CodeHighlight v-if="renderComponent" :code="currentFrame" />
+    <div class="flex w-1/2 bg-[#263238] rounded-lg overflow-hidden">
+      <transition
+        enter-active-class="transition ease-out duration-300"
+        enter-from-class="transform opacity-0"
+        enter-to-class="transform opacity-100"
+        leave-active-class="transition ease-in duration-300"
+        leave-from-class="transform opacity-100"
+        leave-to-class="transform opacity-0">
+        <CodeHighlight class="h-full" v-if="renderComponent" :code="currentFrame" />
+      </transition>
     </div>
   </div>
 </template>
@@ -15,7 +23,7 @@
 import Collapse from './Collapse.vue'
 import CodeHighlight from './CodeHighlight.vue'
 import { ref, computed, nextTick } from 'vue'
-import { command, event, slashCommand } from '../utils/CodeHighlignt'
+import { command, event, middleware, slashCommand } from '../utils/CodeHighlignt'
 
 let activeFrame = ref(0)
 let renderComponent = ref(true);
@@ -46,6 +54,11 @@ const collapseHighlighting = [
     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,
-  }
+  },
+  {
+    label: 'Middlewares',
+    description: 'Middlewares are fragments of code that intervene upstream of one or several commands in order to authorise or not the execution. These fragments are governed by a regex that will allow you to create a single business logic applicable to the associated commands.',
+    code: middleware,
+  },
 ]
 </script>
\ No newline at end of file
diff --git a/src/utils/CodeHighlignt.ts b/src/utils/CodeHighlignt.ts
index c20d031..ba6db56 100644
--- a/src/utils/CodeHighlignt.ts
+++ b/src/utils/CodeHighlignt.ts
@@ -33,8 +33,8 @@ import { Message, CommandInteraction } from 'discord.js'
 scope: ['guild id'], // or 'GLOBAL'
 roles: ['role id'],
   options: {
-    name: 'send-ticket',
-    description: 'SendEmbed ticket description',
+    name: 'foo',
+    description: 'Foo description',
     options: [],
   },
 })
@@ -42,4 +42,19 @@ export default class FooSlashCommand implements BaseSlashCommand {
   public async run(interaction: CommandInteraction): Promise<void> {
     // Your code here
   }
-}`
\ No newline at end of file
+}`
+
+export const middleware = `
+import {
+  Middleware,
+  BaseMiddleware,
+  MiddlewareContext 
+} from '@discord-factory/core'
+
+@Middleware({ pattern: '(?<count>\\\\d+)-args')}
+export default class FooMiddleware implements BaseMiddleware {
+  public async run(context: MiddlewareContext): Promise<void> {
+    // Your code here
+  }
+}
+`