diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md
index 210161e..2986580 100644
--- a/docs/content/getting-started.md
+++ b/docs/content/getting-started.md
@@ -39,7 +39,7 @@ Not sure what modules are? Catch up by reading about them in [NestJS](https://do
:::
-```typescript title="discord.module.ts"
+```typescript title="src/discord.module.ts"
import { Module } from '@nestjs/common';
import { AppService } from './app.service';
import { IntentsBitField } from 'discord.js';
@@ -95,7 +95,7 @@ Slash commands allow you to create commands with precise arguments and choices,
To create a command with NestCord, you can use the `SlashCommand` decorator.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
import { Injectable } from '@nestjs/common';
import { Context, SlashCommand, SlashCommandContext } from '@globalart/nestcord';
diff --git a/docs/content/interactions/context-menus.md b/docs/content/interactions/context-menus.md
index e8d7882..930f3b3 100644
--- a/docs/content/interactions/context-menus.md
+++ b/docs/content/interactions/context-menus.md
@@ -12,7 +12,7 @@ sidebar_position: 2
**User commands** are application commands that appear on the context menu (right click or tap) of users. They're a great way to surface quick actions for your app that target users.
-```typescript title="app.commands.ts"
+```typescript title="src/app.commands.ts"
import { Injectable } from '@nestjs/common';
import { Context, UserCommand, UserCommandContext, TargetUser } from '@globalart/nestcord';
import { User } from 'discord.js';
@@ -43,7 +43,7 @@ If all goes well, you should see something like this:
**Message commands** are application commands that appear on the context menu (right click or tap) of messages. They're a great way to surface quick actions for your app that target messages.
-```typescript title="app.commands.ts"
+```typescript title="src/app.commands.ts"
import { Injectable } from '@nestjs/common';
import { Context, MessageCommand, MessageCommandContext, TargetMessage } from '@globalart/nestcord';
import { Message } from 'discord.js';
diff --git a/docs/content/interactions/message-components.md b/docs/content/interactions/message-components.md
index c08ac9f..513f3cc 100644
--- a/docs/content/interactions/message-components.md
+++ b/docs/content/interactions/message-components.md
@@ -16,7 +16,7 @@ There are several different types of components; this documentation will outline
-```typescript title="app.components.ts"
+```typescript title="src/app.components.ts"
import { Injectable } from '@nestjs/common';
import { Context, Button, ButtonContext } from '@globalart/nestcord';
diff --git a/docs/content/interactions/modals.md b/docs/content/interactions/modals.md
index 2b4ed8c..2330b63 100644
--- a/docs/content/interactions/modals.md
+++ b/docs/content/interactions/modals.md
@@ -10,7 +10,7 @@ With modals you can create pop-up forms that allow users to provide you with for
-```typescript title="app.modals.ts"
+```typescript title="src/app.modals.ts"
import { Injectable } from '@nestjs/common';
import { Context, Modal, ModalContext } from '@globalart/nestcord';
@@ -46,7 +46,7 @@ new ModalBuilder()
```
To receive a Dynamic modal
-```typescript title="app.modals.ts"
+```typescript title="src/app.modals.ts"
import { Injectable } from '@nestjs/common';
import { Context, Modal, ModalContext,ModalParam } from '@globalart/nestcord';
diff --git a/docs/content/interactions/slash-commands.md b/docs/content/interactions/slash-commands.md
index 3578090..4037fb5 100644
--- a/docs/content/interactions/slash-commands.md
+++ b/docs/content/interactions/slash-commands.md
@@ -25,7 +25,7 @@ global commands when they're ready for public use.
Create `app.commands.ts` file and add method with `SlashCommand` decorator.
-```typescript title="app.commands.ts"
+```typescript title="src/app.commands.ts"
import { Injectable } from '@nestjs/common';
import { Context, SlashCommand, SlashCommandContext } from '@globalart/nestcord';
@@ -45,7 +45,7 @@ export class AppCommands {
If you want to have guild specific commands, use the `guilds` property on the `SlashCommand` decorator
-```typescript title="app.commands.ts"
+```typescript title="src/app.commands.ts"
import { Injectable } from '@nestjs/common';
import { Context, SlashCommand, SlashCommandContext } from '@globalart/nestcord';
diff --git a/docs/content/interceptors/defer-interceptor.md b/docs/content/interceptors/defer-interceptor.md
index 317d577..1d0e452 100644
--- a/docs/content/interceptors/defer-interceptor.md
+++ b/docs/content/interceptors/defer-interceptor.md
@@ -10,7 +10,7 @@ Interceptor added `interaction.deferReply()` to the beiginning of the code
## Usage
-```typescript
+```typescript title="src/app.service.ts"
import {
Context,
SlashCommand,
diff --git a/docs/content/listeners.md b/docs/content/listeners.md
index 0180f28..1a588aa 100644
--- a/docs/content/listeners.md
+++ b/docs/content/listeners.md
@@ -15,7 +15,7 @@ and `@Once` decorator.
While the best practice is to use the more specific decorators when possible, this is useful if you wish to use features NestCord doesn't
support via custom decorators, to interact with the raw requests, or to listen to all events using a decorator such as `interactionCreate`.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
import {Injectable, Logger} from '@nestjs/common';
import {Once, On, Context, ContextOf} from '@globalart/nestcord';
@@ -51,7 +51,7 @@ As there are many type of events, its type must be inferred from the `ContextOf<
You can access the context variables by using the `@Context()` decorator within your function, which will populate the variable with an
array of arguments.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
@On('messageCreate')
public onMessageCreate(@Context() [message]: ContextOf<'messageCreate'>) {
console.log(message.content);
@@ -62,7 +62,7 @@ public onMessageCreate(@Context() [message]: ContextOf<'messageCreate'>) {
NestCord out of the box supports all the events provided by discord.js. You can also create custom events using the `@CustomListenerHandler` and `@CustomListener` decorators.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
import { Injectable } from '@nestjs/common';
import { CustomListener, CustomListenerHandler, BaseHandler, ContextOf } from '@globalart/nestcord';
import { User, UserFlagsBitField } from 'discord.js';
@@ -95,7 +95,7 @@ export class UserUpdateHandler extends BaseHandler {
And then you can listen to the custom event using the `@On` decorator.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
@On('userAvatarUpdate')
public onUserAvatarUpdate(
@Context() [user, oldAvatar, newAvatar]: ContextOfCustomUserUpdate<'userAvatarUpdate'>
diff --git a/docs/content/techniques/client-providers.md b/docs/content/techniques/client-providers.md
index fac34e6..e75ee2d 100644
--- a/docs/content/techniques/client-providers.md
+++ b/docs/content/techniques/client-providers.md
@@ -9,7 +9,7 @@ sidebar_position: 4
NestCord have snippets to access the client and its properties in your application.
You can inject managers and utils of discord.js client using constructor.
-```typescript title="app.service.ts"
+```typescript title="src/app.service.ts"
import { Injectable } from '@nestjs/common';
import { Client, ChannelManager, GuildManager, UserManager, ShardClientUtil, ClientVoiceManager, WebSocketManager, REST } from 'discord.js';