diff --git a/Code-Flow.md b/Code-Flow.md
new file mode 100644
index 0000000..acbbd88
--- /dev/null
+++ b/Code-Flow.md
@@ -0,0 +1,39 @@
+> **CONTENT**
+
+- [Overview](#overview)
+- [Code Flow](#Code-Flow)
+    - [User Registration](#User-Registration)
+    - [User Login](#grpc)
+    - [Add Item To Cart](#api-gateways)
+    - [Order Creation](#internal-architectural-patterns)
+
+## Overview
+
+This page covers the interaction between different components in  `eShopOnContainers`. Set up the code base in your local if you haven't done already :
+
+- Setup your development system for [Windows](Windows-setup) or [Mac](Mac-setup)
+
+Different functionalities of **eShopOnContainers** application has been captured in the following diagrams.
+
+## Code Flow
+
+>**IMPORTANT:** All the following interaction has been captured taking **Web.MVC** as reference. It may subject to change for **Web.SPA**
+
+### User Registration
+
+![](images/Code-Flow/user-registration.png)
+
+
+### User Login
+
+![](images/Code-Flow/user-login.png)
+
+
+### Add Item To Cart
+
+![](images/Code-Flow/add-item-to-cart.png)
+
+
+### Order Creation
+
+![](images/Code-Flow/order-creation.png)
diff --git a/_Sidebar.md b/_Sidebar.md
index 0aeebd8..ec56f59 100644
--- a/_Sidebar.md
+++ b/_Sidebar.md
@@ -21,6 +21,7 @@
 
 - [Architecture](Architecture)
   - [BFF implementation](BFF-implementation)
+  - [Code Flow](Code-Flow)
 - [Application](Explore-the-application)
 - [Code](Explore-the-code)
   - [Simplified CQRS & DDD](Simplified-CQRS-and-DDD)
@@ -28,7 +29,7 @@
   - [API gateways](API-gateways)
   - [Webhooks](Webhooks)
   - [Azure Key Vault](Azure-Key-Vault)
-  - [Asynchronous messaging](Asynchronous-messaging)
+  - [Asynchronous messaging](Asynchronous-messaging)  
 - Logging and Monitoring
   - [Serilog & Seq](Serilog-and-Seq)
   - [Using HealthChecks](Using-HealthChecks)
diff --git a/images/Code-Flow/add-item-to-cart.png b/images/Code-Flow/add-item-to-cart.png
new file mode 100644
index 0000000..cc927ef
Binary files /dev/null and b/images/Code-Flow/add-item-to-cart.png differ
diff --git a/images/Code-Flow/order-creation.png b/images/Code-Flow/order-creation.png
new file mode 100644
index 0000000..609ecca
Binary files /dev/null and b/images/Code-Flow/order-creation.png differ
diff --git a/images/Code-Flow/user-login.png b/images/Code-Flow/user-login.png
new file mode 100644
index 0000000..263602f
Binary files /dev/null and b/images/Code-Flow/user-login.png differ
diff --git a/images/Code-Flow/user-registration.png b/images/Code-Flow/user-registration.png
new file mode 100644
index 0000000..2b0f534
Binary files /dev/null and b/images/Code-Flow/user-registration.png differ