diff --git a/.gitignore b/.gitignore
index 3d3ba1e..185db8b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -73,3 +73,4 @@ examples/handlers/route.ts
 examples/handlers/route-map.ts
 .eslintcache
 TODO.md
+git-short.sh
\ No newline at end of file
diff --git a/README.md b/README.md
index 1e1f9d1..104aab7 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ Why `fast-maker`?
   - [Route options](#route-options)
   - [Route handler](#route-handler)
 - [Example using fastify.js](#example-using-fastifyjs)
+  - [Examples](#examples)
 - [Relate To](#relate-to)
 - [Roadmaps](#roadmaps)
 - [License](#license)
@@ -235,11 +236,19 @@ export async function handler(
 }
 ```
 
-You have to `named export` and variable name must be a `handler`. Also you can use arrow function and you can use any name under TypeScript function name rule, as well as type arguments perfectly applied on route configuration
+You have to `named export` and variable name must be a `handler`. Also you can use arrow function, as well as type arguments perfectly applied on route configuration.
 
 ## Example using fastify.js
 
-A complete example of using `fast-maker` can be found at [Ma-eum](https://github.com/maeumjs/maeum-pet-store).
+A complete example of using `fast-maker` can be found at [Ma-eum](https://github.com/maeumjs/maeum-pet-store) and [examples](https://github.com/imjuni/fast-maker/tree/master/examples)
+
+### Examples
+
+- [vanilla](examples/handlers/justice/%5Bdc-league%5D/hello/get.ts)
+- [variable map](examples/handlers/avengers/heroes/%5Bid%5D/%5B%24time%5D/post.ts)
+- [multiple methods](examples/handlers/avengers/heroes/get.ts)
+- [multiple variable](examples/handlers/justice/[kind]-[id]/get.ts)
+- [function option](examples/handlers/po-ke/world/get.ts)
 
 ## Relate To
 
diff --git a/assets/route-component-architecture.png b/assets/route-component-architecture.png
index cadb347..ceffc4e 100644
Binary files a/assets/route-component-architecture.png and b/assets/route-component-architecture.png differ
diff --git a/examples/handlers/avengers/heroes/[[id]]/get.ts b/examples/handlers/avengers/heroes/[[id]]/get.ts
index d33d57d..688e620 100644
--- a/examples/handlers/avengers/heroes/[[id]]/get.ts
+++ b/examples/handlers/avengers/heroes/[[id]]/get.ts
@@ -1,3 +1,10 @@
+/**
+ * Example of the nullable variable
+ *
+ * A nullable variable uses double square brackets.
+ *
+ * [[id]] replace to `:id?`
+ */
 import type { HTTPMethods } from 'fastify';
 
 export const methods: HTTPMethods = 'SEARCH';
diff --git a/examples/handlers/avengers/heroes/[id]/[$time]/post.ts b/examples/handlers/avengers/heroes/[id]/[$time]/post.ts
index 87aa00c..531fd94 100644
--- a/examples/handlers/avengers/heroes/[id]/[$time]/post.ts
+++ b/examples/handlers/avengers/heroes/[id]/[$time]/post.ts
@@ -1,6 +1,13 @@
+/**
+ * Example of the route path map.
+ *
+ * Regular expressions, wildcards, etc. cannot be directory created, so use variable maps.
+ */
 import type { FastifyRequest } from 'fastify';
 import type { IAbility } from '../../../../../interface/IAbility';
 
+// Route path map
+// [$time] replace to `:hour(^\\d{2})h:minute(^\\d{2})m`
 export const map: Map<string, string> = new Map<string, string>([['time', ':hour(^\\d{2})h:minute(^\\d{2})m']]);
 
 export async function handler(req: FastifyRequest<{ Body: IAbility }>) {
diff --git a/examples/handlers/avengers/heroes/get.ts b/examples/handlers/avengers/heroes/get.ts
index d33d57d..3fd59e4 100644
--- a/examples/handlers/avengers/heroes/get.ts
+++ b/examples/handlers/avengers/heroes/get.ts
@@ -1,6 +1,13 @@
+/**
+ * Example of the extra methods
+ *
+ * To apply more than one method to a single handler, use the `methods` variable.
+ */
 import type { HTTPMethods } from 'fastify';
 
-export const methods: HTTPMethods = 'SEARCH';
+// methods variable
+// methods variable replace to `fastify.route({ methods: ['get', 'search', 'options'] })`
+export const methods: HTTPMethods[] = ['SEARCH', 'OPTIONS'];
 
 export async function handler() {
   return 'hello';
diff --git a/examples/handlers/justice/[dc-league]/hello/get.ts b/examples/handlers/justice/[dc-league]/hello/get.ts
index 0f0a7e5..bf8da8d 100644
--- a/examples/handlers/justice/[dc-league]/hello/get.ts
+++ b/examples/handlers/justice/[dc-league]/hello/get.ts
@@ -1,4 +1,4 @@
-import type { FastifyInstance, FastifyReply, FastifyRequest, RouteShorthandOptions } from 'fastify';
+import type { FastifyReply, FastifyRequest, RouteShorthandOptions } from 'fastify';
 import type { Server } from 'http';
 import type { IReqPokeHello } from '../../../interfaces/IReqPokeHello';
 import schema from '../../../interfaces/JSC_IReqPokeHello';
@@ -7,12 +7,12 @@ export const map: string = 'test';
 
 export const methods: number = 1;
 
-export const option: (fastify: FastifyInstance) => RouteShorthandOptions = () => ({
+export const option: RouteShorthandOptions = {
   schema: {
     querystring: schema.properties?.Querystring,
     body: schema.properties?.Body,
   },
-});
+};
 
 export async function handler(req: FastifyRequest<IReqPokeHello, Server>, _reply: FastifyReply) {
   console.debug(req.query);
diff --git a/examples/handlers/justice/[kind]-[id]/get.ts b/examples/handlers/justice/[kind]-[id]/get.ts
index 4a46e80..f2952f3 100644
--- a/examples/handlers/justice/[kind]-[id]/get.ts
+++ b/examples/handlers/justice/[kind]-[id]/get.ts
@@ -1,3 +1,8 @@
+/**
+ * Example of the multiple variable in single route path element
+ *
+ * justice/[kind]-[id] replace to `justice/:kind-:id`
+ */
 import type { FastifyInstance, FastifyReply, FastifyRequest, RouteShorthandOptions } from 'fastify';
 import type { Server } from 'http';
 import type { IReqPokeHelloMultiParam } from '../../interfaces/IReqPokeHelloMultiParam';
diff --git a/examples/handlers/po-ke/world/get.ts b/examples/handlers/po-ke/world/get.ts
index e188eb0..2ead694 100644
--- a/examples/handlers/po-ke/world/get.ts
+++ b/examples/handlers/po-ke/world/get.ts
@@ -1,3 +1,11 @@
+/**
+ * Example of the function option
+ *
+ * If you need access to the fastify instance to use various hooks, including the preHandler,
+ * you can use the function option to get the fastify instance passed to you.
+ *
+ * @see https://github.com/fastify/fastify-bearer-auth?tab=readme-ov-file#integration-with-fastifyauth
+ */
 import type { FastifyInstance, FastifyReply, FastifyRequest, RouteShorthandOptions } from 'fastify';
 import type { Server } from 'http';
 import type { IReqPokeHello } from '../../interfaces/IReqPokeHello';
@@ -8,6 +16,8 @@ export const option: (fastify: FastifyInstance) => RouteShorthandOptions = () =>
     querystring: schema.properties?.Querystring,
     body: schema.properties?.Body,
   },
+  // preHandler hook using fastify instance
+  preHandler: fastify.auth([fastify.allowAnonymous, fastify.verifyBearerAuth]),
 });
 
 export const handler = async (