diff --git a/src/templates/modules/documentation/Routes.ts b/src/templates/modules/documentation/Routes.ts
index 45901c1..a0d9fe6 100644
--- a/src/templates/modules/documentation/Routes.ts
+++ b/src/templates/modules/documentation/Routes.ts
@@ -6,6 +6,7 @@ import Structure from './base/Structure.vue'
 import Command from './base/Command.vue'
 import Event from './base/Event.vue'
 import Middleware from './base/Middleware.vue'
+import Hook from './base/Hook.vue'
 
 const routes: RouteRecordRaw[] = [
   { path: '/documentation/getting-started', component: GettingStarted },
@@ -15,6 +16,7 @@ const routes: RouteRecordRaw[] = [
   { path: '/documentation/commands', component: Command },
   { path: '/documentation/events', component: Event },
   { path: '/documentation/middlewares', component: Middleware },
+  { path: '/documentation/hooks', component: Hook },
 ]
 
 export default routes
\ No newline at end of file
diff --git a/src/templates/modules/documentation/base/Hook.vue b/src/templates/modules/documentation/base/Hook.vue
new file mode 100644
index 0000000..292e221
--- /dev/null
+++ b/src/templates/modules/documentation/base/Hook.vue
@@ -0,0 +1,50 @@
+<template>
+  <Documentation title="Hooks">
+    <p>
+      Hooks are hooks at certain points in the application's life cycle. You can add specific behaviours to them according to your needs, such as a filter that allows you to delete any message that contains an insult.
+
+      Creating a command with the framework is very simple.
+    </p>
+
+    <div class="space-y-5">
+      <h2>Create new command from CLI</h2>
+      <p>
+        Open a new terminal in your project and write the following command :
+      </p>
+      <CodeHighlight class="w-min" code="$ factory make:file" />
+      <AlertInfo>
+        <template v-slot:label>
+          Info
+        </template>
+        <template v-slot:message>
+          Choose to create a hook and then answer the questions you will be asked. It is important to note that when you define the file name, you can "place" the file in folders by specifying a path directory in addition to the file name as in the following example :
+        </template>
+      </AlertInfo>
+    </div>
+
+    <div class="space-y-5">
+      <h2>Default command file</h2>
+      <p>
+        A file will be created in the specified location otherwise in the root of your project with the following structure :
+      </p>
+      <CodeHighlight class="w-min" :code="file" />
+    </div>
+  </Documentation>
+</template>
+
+<script setup lang="ts">
+import Documentation from '../../../../components/Documentation.vue'
+import CodeHighlight from '../../../../components/CodeHighlight.vue'
+import Divider from '../../../../components/Divider.vue'
+import LinkExternal from '../../../../components/LinkExternal.vue'
+import AlertInfo from '../../../../components/AlertInfo.vue'
+const file = `
+import { Hook, BaseHook, HookContext } from '@discord-factory/core'
+
+@Hook('app::command::received')
+export default class FooHook implements BaseHook {
+  public async run(context: HookContext): Promise<void> {
+    // Your code here
+  }
+}`
+</script>
diff --git a/src/utils/Navigation.ts b/src/utils/Navigation.ts
index 9674f90..00a3e1f 100644
--- a/src/utils/Navigation.ts
+++ b/src/utils/Navigation.ts
@@ -25,6 +25,7 @@ export const documentation = [
       { label: 'Commands', href: '/documentation/commands', isMenu: false },
       { label: 'Events', href: '/documentation/events', isMenu: false },
       { label: 'Middlewares', href: '/documentation/middlewares', isMenu: false },
+      { label: 'Hooks', href: '/documentation/hooks', isMenu: false },
     ]
   },
 ]