diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
index 21d79230..5c9985cb 100644
--- a/docs/DeveloperGuide.md
+++ b/docs/DeveloperGuide.md
@@ -21,17 +21,20 @@ Refer to the guide [_Setting up and getting started_](SettingUp.md).
## **Design**
-### Architecture
+
-
+:bulb: **Tip:** The `.puml` files used to create diagrams in this document can be found in the [diagrams](https://github.com/se-edu/addressbook-level3/tree/master/docs/diagrams/) folder. Refer to the [_PlantUML Tutorial_ at se-edu/guides](https://se-education.org/guides/tutorials/plantUml.html) to learn how to create and edit diagrams.
+
-The ***Architecture Diagram*** given above explains the high-level design of the App. Given below is a quick overview of each component.
+### Architecture
-
+
-:bulb: **Tip:** The `.puml` files used to create diagrams in this document can be found in the [diagrams](https://github.com/se-edu/addressbook-level3/tree/master/docs/diagrams/) folder. Refer to the [_PlantUML Tutorial_ at se-edu/guides](https://se-education.org/guides/tutorials/plantUml.html) to learn how to create and edit diagrams.
+The ***Architecture Diagram*** given above explains the high-level design of the App.
-
+Given below is a quick overview of main components and how they interact with each other.
+
+**Main components of the architecture**
**`Main`** has two classes called [`Main`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/java/seedu/address/Main.java) and [`MainApp`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/java/seedu/address/MainApp.java). It is responsible for,
* At app launch: Initializes the components in the correct sequence, and connects them up with each other.
@@ -46,14 +49,6 @@ The rest of the App consists of four components.
* [**`Model`**](#model-component): Holds the data of the App in memory.
* [**`Storage`**](#storage-component): Reads data from, and writes data to, the hard disk.
-Each of the four components,
-
-* defines its *API* in an `interface` with the same name as the Component.
-* exposes its functionality using a concrete `{Component Name}Manager` class (which implements the corresponding API `interface` mentioned in the previous point.
-
-For example, the `Logic` component (see the class diagram given below) defines its API in the `Logic.java` interface and exposes its functionality using the `LogicManager.java` class which implements the `Logic` interface.
-
-![Class Diagram of the Logic Component](images/LogicClassDiagram.png)
**How the architecture components interact with each other**
@@ -61,6 +56,15 @@ The *Sequence Diagram* below shows how the components interact with each other f
+Each of the four main components (also shown in the diagram above),
+
+* defines its *API* in an `interface` with the same name as the Component.
+* implements its functionality using a concrete `{Component Name}Manager` class (which follows the corresponding API `interface` mentioned in the previous point.
+
+For example, the `Logic` component defines its API in the `Logic.java` interface and implements its functionality using the `LogicManager.java` class which follows the `Logic` interface. Other components interact with a given component through its interface rather than the concrete class (reason: to prevent outside component's being coupled to the implementation of a component), as illustrated in the (partial) class diagram below.
+
+
+
The sections below give more details of each component.
### UI component
diff --git a/docs/diagrams/ArchitectureDiagram.puml b/docs/diagrams/ArchitectureDiagram.puml
index 9374e167..4c5cf582 100644
--- a/docs/diagrams/ArchitectureDiagram.puml
+++ b/docs/diagrams/ArchitectureDiagram.puml
@@ -25,6 +25,7 @@ Main -[#grey]-> UI
Main -[#grey]-> Logic
Main -[#grey]-> Storage
Main -up[#grey]-> Model
+Main -down[hidden]-> Commons
Storage -up[STORAGE_COLOR].> Model
Storage .right[STORAGE_COLOR].>File
diff --git a/docs/diagrams/ComponentManagers.puml b/docs/diagrams/ComponentManagers.puml
new file mode 100644
index 00000000..f40828cb
--- /dev/null
+++ b/docs/diagrams/ComponentManagers.puml
@@ -0,0 +1,31 @@
+@startuml
+!include style.puml
+skinparam arrowThickness 1.1
+skinparam arrowColor LOGIC_COLOR_T4
+skinparam classBackgroundColor LOGIC_COLOR
+
+package Logic {
+Interface Logic <>
+Class LogicManager
+}
+
+package Model{
+Interface Model <>
+Class ModelManager
+}
+
+package Storage{
+Interface Storage <>
+Class StorageManager
+}
+
+Class HiddenOutside #FFFFFF
+HiddenOutside ..> Logic
+
+LogicManager .up.|> Logic
+ModelManager .up.|> Model
+StorageManager .up.|> Storage
+
+LogicManager --> Model
+LogicManager --> Storage
+@enduml
diff --git a/docs/images/ArchitectureDiagram.png b/docs/images/ArchitectureDiagram.png
index 094ae4ce..86c60246 100644
Binary files a/docs/images/ArchitectureDiagram.png and b/docs/images/ArchitectureDiagram.png differ
diff --git a/docs/images/ComponentManagers.png b/docs/images/ComponentManagers.png
new file mode 100644
index 00000000..40f20323
Binary files /dev/null and b/docs/images/ComponentManagers.png differ