diff --git a/config/autoload/local.php.dist b/config/autoload/local.php.dist
index d24e0b3..ae7079a 100644
--- a/config/autoload/local.php.dist
+++ b/config/autoload/local.php.dist
@@ -17,9 +17,9 @@ return [
     ],
     'routes'      => [
         'page' => [
-            'flowMiddlewares'    => 'flow-middlewares',
-            'flowLibraries'      => 'flow-libraries',
-            'flowLibrariesEmail' => 'flow-libraries-email',
+            'flow-middleware'      => 'flow-middleware',
+            'flow-libraries'       => 'flow-libraries',
+            'flow-libraries-email' => 'flow-libraries-email',
         ],
     ],
 ];
diff --git a/src/App/templates/app/index.html.twig b/src/App/templates/app/index.html.twig
index bd8e02e..4b5f4c3 100644
--- a/src/App/templates/app/index.html.twig
+++ b/src/App/templates/app/index.html.twig
@@ -272,14 +272,14 @@
                 <div class="row">
                     <h2>Middleware Flow</h2>
                 </div>
-                <p>The graph below demonstrates a default flow between Dotkernel's middlewares.</p>
+                <p>The graph below demonstrates a default flow between Dotkernel's middleware.</p>
             </div>
         </div>
 
         <div class="flow-graphs middlewares hide-mobile">
             <div class="flow-container">
                 <div class="box-big">
-                    <div class="title">ErrorHandlerInterface</div>
+                    <div class="title">ProblemDetailsMiddleware</div>
                     <div class="box-small request">
                         <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                         <div class="text">Request</div>
@@ -295,10 +295,45 @@
                 </div>
 
                 <div class="box-big">
-                    <div class="title">Other Middlewares (Optional)</div>
+                    <div class="title">MalformedRequestBodyMiddleware</div>
                     <div class="box-small request">
                         <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                         <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
+                <div class="box-big">
+                    <div class="title">BodyParamsMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
+                <div class="box-big">
+                    <div class="title">ServerUrlMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
                     </div>
                     <div class="box-small response">
                         <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
@@ -315,6 +350,7 @@
                     <div class="box-small request">
                         <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                         <div class="text">Request</div>
+                        <div class="button">Route</div>
                     </div>
                     <div class="box-small response">
                         <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
@@ -344,7 +380,41 @@
                 </div>
 
                 <div class="box-big">
-                    <div class="title">Other Middlewares (Optional)</div>
+                    <div class="title">ImplicitHeadMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
+                <div class="box-big">
+                    <div class="title">ImplicitOptionsMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
+                <div class="box-big">
+                    <div class="title">MethodNotAllowedMiddleware</div>
                     <div class="box-small request">
                         <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                         <div class="text">Request</div>
@@ -377,6 +447,23 @@
                     <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
 
+                <div class="box-big">
+                    <div class="title">DeprecationMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
                 <div class="box-big">
                     <div class="title">ResponseHeaderMiddleware</div>
                     <div class="box-small request">
@@ -445,6 +532,23 @@
                     <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
 
+                <div class="box-big">
+                    <div class="title">ResourceProviderMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
                 <div class="box-big">
                     <div class="title">DispatchMiddleware</div>
                     <div class="box-small request">
@@ -463,7 +567,24 @@
                 </div>
 
                 <div class="box-big">
-                    <div class="title">NotFoundHandler (Fallback)</div>
+                    <div class="title">ProblemDetailsNotFoundHandler</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+                </div>
+
+                <div class="box-big">
+                    <div class="title">GetNotFoundResourceHandler</div>
                     <div class="box-small request">
                         <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                         <div class="text">Request</div>
@@ -492,7 +613,10 @@
                     <div class="box black">Request</div>
                 </div>
                 <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-                <div class="row">
+                <div class="row" style="display: flex">
+                    <div class="box blue">mezzio/mezzio-problem-details</div>
+                    <div class="arrow-right"
+                         style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                     <div class="box white">dotkernel/dot-errorhandler</div>
                 </div>
                 <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
@@ -568,7 +692,10 @@
                     <div class="box black">Request</div>
                 </div>
                 <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-                <div class="row">
+                <div class="row" style="display: flex">
+                    <div class="box blue">mezzio/mezzio-problem-details</div>
+                    <div class="arrow-right"
+                         style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                     <div class="box white">dotkernel/dot-errorhandler</div>
                 </div>
                 <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
diff --git a/src/App/templates/layout/default.html.twig b/src/App/templates/layout/default.html.twig
index 14d9ccb..500555c 100644
--- a/src/App/templates/layout/default.html.twig
+++ b/src/App/templates/layout/default.html.twig
@@ -148,19 +148,19 @@
                                     </a>
                                 </p>
                                 <p class="footer-item-link margin-small">
-                                    <a href="/page/flowMiddlewares">
+                                    <a href="{{ path('page::flow-middleware') }}">
                                         <img src="{{ asset('images/app/icon/hand.svg') }}">
                                         Middleware Flow
                                     </a>
                                 </p>
                                 <p class="footer-item-link margin-small">
-                                    <a href="/page/flowLibraries">
+                                    <a href="{{ path('page::flow-libraries') }}">
                                         <img src="{{ asset('images/app/icon/hand.svg') }}">
                                         Default Library Flow
                                     </a>
                                 </p>
                                 <p class="footer-item-link margin-large">
-                                    <a href="/page/flowLibrariesEmail">
+                                    <a href="{{ path('page::flow-libraries-email') }}">
                                         <img src="{{ asset('images/app/icon/hand.svg') }}">
                                         Library Flow for Email
                                     </a>
diff --git a/src/Page/templates/page/flow-libraries-email.html.twig b/src/Page/templates/page/flow-libraries-email.html.twig
index 7ac4659..b610b88 100644
--- a/src/Page/templates/page/flow-libraries-email.html.twig
+++ b/src/Page/templates/page/flow-libraries-email.html.twig
@@ -18,7 +18,10 @@
                 <div class="box black">Request</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
+            <div class="row" style="display: flex">
+                <div class="box blue">mezzio/mezzio-problem-details</div>
+                <div class="arrow-right"
+                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                 <div class="box white">dotkernel/dot-errorhandler</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
@@ -35,20 +38,21 @@
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-authentication</div>
+                <div class="box blue">mezzio/mezzio-helpers</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-authorization</div>
+                <div class="box blue">mezzio/mezzio-authentication</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-helpers</div>
+                <div class="box blue">mezzio/mezzio-authorization</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row" style="display: flex">
                 <div class="box blue">mezzio/mezzio-router</div>
-                <div class="arrow-right" style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
+                <div class="arrow-right"
+                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                 <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
diff --git a/src/Page/templates/page/flow-libraries.html.twig b/src/Page/templates/page/flow-libraries.html.twig
index 048bbba..1ba4709 100644
--- a/src/Page/templates/page/flow-libraries.html.twig
+++ b/src/Page/templates/page/flow-libraries.html.twig
@@ -18,7 +18,10 @@
                 <div class="box black">Request</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
+            <div class="row" style="display: flex">
+                <div class="box blue">mezzio/mezzio-problem-details</div>
+                <div class="arrow-right"
+                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                 <div class="box white">dotkernel/dot-errorhandler</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
@@ -35,20 +38,21 @@
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-authentication</div>
+                <div class="box blue">mezzio/mezzio-helpers</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-authorization</div>
+                <div class="box blue">mezzio/mezzio-authentication</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row">
-                <div class="box blue">mezzio/mezzio-helpers</div>
+                <div class="box blue">mezzio/mezzio-authorization</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
             <div class="row" style="display: flex">
                 <div class="box blue">mezzio/mezzio-router</div>
-                <div class="arrow-right" style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
+                <div class="arrow-right"
+                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
                 <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
             </div>
             <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
diff --git a/src/Page/templates/page/flow-middlewares.html.twig b/src/Page/templates/page/flow-middleware.html.twig
similarity index 51%
rename from src/Page/templates/page/flow-middlewares.html.twig
rename to src/Page/templates/page/flow-middleware.html.twig
index 98f166f..0912c88 100644
--- a/src/Page/templates/page/flow-middlewares.html.twig
+++ b/src/Page/templates/page/flow-middleware.html.twig
@@ -8,14 +8,14 @@
     <div class="page-intro">
         <div class="container">
             <h2>Middleware Flow</h2>
-            <p>The graph below demonstrates a default flow between Dotkernel's middlewares.</p>
+            <p>The graph below demonstrates a default flow between Dotkernel's middleware.</p>
         </div>
     </div>
 
     <div class="flow-graphs middlewares">
         <div class="flow-container">
-            <div class="box-big gray-gradient">
-                <div class="title">ErrorHandlerInterface</div>
+            <div class="box-big">
+                <div class="title">ProblemDetailsMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
@@ -30,11 +30,29 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">Other Middlewares (Optional)</div>
+            <div class="box-big">
+                <div class="title">BodyParamsMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">ServerUrlMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
                 </div>
                 <div class="box-small response">
                     <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
@@ -46,11 +64,12 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
+            <div class="box-big">
                 <div class="title">CorsMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
+                    <div class="button">Route</div>
                 </div>
                 <div class="box-small response">
                     <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
@@ -62,7 +81,7 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
+            <div class="box-big">
                 <div class="title">RouteMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
@@ -79,8 +98,8 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">AuthenticationMiddleware</div>
+            <div class="box-big">
+                <div class="title">ImplicitHeadMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
@@ -96,8 +115,59 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">AuthorizationMiddleware</div>
+            <div class="box-big">
+                <div class="title">ImplicitOptionsMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">MethodNotAllowedMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">ContentNegotiationMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">DeprecationMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
@@ -113,8 +183,8 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">Other Middlewares (Optional)</div>
+            <div class="box-big">
+                <div class="title">ResponseHeaderMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>
@@ -130,7 +200,7 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
+            <div class="box-big">
                 <div class="title">UrlHelperMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
@@ -147,7 +217,58 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big blue-gradient">
+            <div class="box-big">
+                <div class="title">AuthenticationMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">AuthorizationMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">ResourceProviderMiddleware</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
                 <div class="title">DispatchMiddleware</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
@@ -164,8 +285,25 @@
                 <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
             </div>
 
-            <div class="box-big gray-gradient">
-                <div class="title">NotFoundHandler (Fallback)</div>
+            <div class="box-big">
+                <div class="title">ProblemDetailsNotFoundHandler</div>
+                <div class="box-small request">
+                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                    <div class="text">Request</div>
+                    <div class="button">Route</div>
+                </div>
+                <div class="box-small response">
+                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                    Response
+                </div>
+            </div>
+            <div class="two-arrows">
+                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
+            </div>
+
+            <div class="box-big">
+                <div class="title">GetNotFoundResourceHandler</div>
                 <div class="box-small request">
                     <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
                     <div class="text">Request</div>