diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
index c5c1226a94..c798ba9d25 100644
--- a/docs/DeveloperGuide.md
+++ b/docs/DeveloperGuide.md
@@ -84,14 +84,23 @@ The bulk of the app's work is done by the following five components:
- **Storage Interaction with Data:**
- The Storage component access the Data to store/read to file.
+Below is a simplified class diagram of the system:
+
+
+
+### UI Component
+
+
-**UI Component**
The `ui` packages consists of the `Ui` class and the `Messages` class.
-The UI component prompts and reads commands from the user and sends the command to `Parser` package to be executed.
-The UI component is also responsible for printing output to the user.
+The `UI` component prompts and reads commands from the user.
+
+The `UI` component is also responsible for printing output to the user.
-**Data Component**
+`TransactionList`, `Storage`, `Nuscents`, and `Command` use `Ui` to print output (including errors) to the user.
+
+### Data Component
@@ -99,7 +108,7 @@ The Data component stores the transaction data i.e., all `Transaction` objects i
Each `Transaction` object stores the information for an `Allowance` or an `Expense`.
-**Command Component**
+### Command Component
@@ -111,6 +120,25 @@ If it is not valid, an object of class `InvalidCommand` will be constructed. The
`InvalidCommand` class simply raises an exception that an invalid command has been entered, which will be shown
to the user.
+### Parser component
+
+
+
+The `Parser` component creates various `Command` and `Transaction` objects based on the user's input.
+For example, if the user input is to add an expense, an `Expense` and `AddCommand` object will be created.
+
+`Parser` also uses `ExpenseCategory`, `AllowanceCategory`, and `TransactionCategory` for creating expenses,
+creating allowances, and filtering transactions respectively.
+
+### Storage component
+
+
+
+The `Storage` component reads/writes from/to the ArrayList in `TransactionList` depending on if the application is
+starting or if a command has just been executed.
+
+`Storage` also uses `Parser` to parse data from the storage file when the application starts up.
+
## **Implementation**
### `add` Transaction Feature
diff --git a/docs/diagrams/ParserClassDiagram.puml b/docs/diagrams/ParserClassDiagram.puml
new file mode 100644
index 0000000000..d3a2343600
--- /dev/null
+++ b/docs/diagrams/ParserClassDiagram.puml
@@ -0,0 +1,33 @@
+@startuml
+!import style.puml
+hide members
+hide circle
+
+enum ExpenseCategory <>
+enum AllowanceCategory <>
+interface TransactionCategory <>
+
+abstract class Command {
+ +abstract void execute(TransactionList)
+}
+
+
+class Parser {
+}
+
+class Transaction {
+}
+
+Parser ..> Command : creates
+Parser ..> Transaction : creates
+
+Command ..> Transaction : uses
+
+Parser ..> TransactionCategory : uses
+Parser ..> AllowanceCategory : uses
+Parser ..> ExpenseCategory : uses
+
+ExpenseCategory ..|> TransactionCategory
+AllowanceCategory ..|> TransactionCategory
+
+@enduml
diff --git a/docs/diagrams/SimpleClassDiagram.puml b/docs/diagrams/SimpleClassDiagram.puml
new file mode 100644
index 0000000000..c3ffb17cb7
--- /dev/null
+++ b/docs/diagrams/SimpleClassDiagram.puml
@@ -0,0 +1,36 @@
+@startuml
+hide members
+hide circle
+
+class Transaction
+class Expense
+class Allowance
+enum ExpenseCategory <> implements TransactionCategory
+enum AllowanceCategory <> implements TransactionCategory
+class Storage
+interface TransactionCategory <>
+class Parser
+class Nuscents
+class TransactionList
+abstract class Command
+
+TransactionList *-- Transaction : contains
+Transaction <|-- Expense
+Transaction <|-- Allowance
+Transaction "*"--> "1" TransactionCategory
+
+Nuscents "1" --> "1" Storage
+Nuscents "1" --> "1" TransactionList
+Nuscents "1" ..> "1" Parser
+Nuscents "1" ..> "1" Command
+
+Storage ..> TransactionList : uses
+
+Parser ..> Command : creates
+Parser ..> Transaction : creates
+Parser ..> TransactionCategory : uses
+
+Command ..> TransactionList : uses
+
+
+@enduml
\ No newline at end of file
diff --git a/docs/diagrams/StorageClassDiagram.puml b/docs/diagrams/StorageClassDiagram.puml
new file mode 100644
index 0000000000..dcf70f3c5f
--- /dev/null
+++ b/docs/diagrams/StorageClassDiagram.puml
@@ -0,0 +1,11 @@
+@startuml
+!import style.puml
+hide members
+hide circle
+
+Storage ..> "1" TransactionList : read/write
+Storage ..> Parser : uses >
+
+TransactionList *-- Transaction : contains >
+
+@enduml
diff --git a/docs/diagrams/UiClassDiagram.puml b/docs/diagrams/UiClassDiagram.puml
new file mode 100644
index 0000000000..016b0ced27
--- /dev/null
+++ b/docs/diagrams/UiClassDiagram.puml
@@ -0,0 +1,39 @@
+@startuml
+!import style.puml
+hide members
+hide circle
+skinparam classAttributeIconSize 0
+package Ui as UI{
+class Ui {
+- Scanner input
++ String getUserCommand()
++ {static} void showLine()
++ {static} void showWelcomeMessage()
++ {static} void showGoodbyeMessage()
++ {static} void showException(Exception)
++ {static} void showTransactionCount()
++ {static} void showTransactionAddedMessage(Transaction)
++ {static} void showTransactionRemovedMessage(Transaction)
++ {static} void showTransactionList(TransactionList)
+- {static} String getNote(String)
+- {static} String getDescription(Transaction)
++ {static} void showReadDataError()
++ {static} void showTransactionViewMessage(Transaction)
++ {static} void showFilterMessage(ArrayList,TransactionCategory)
++ {static} void showFilterNotFoundMessage(TransactionCategory)
++ {static} void showBudgetSet(TransactionList)
++ {static} void showBudgetExpense(TransactionList)
++ {static} void showHelpMenu()
++ {static} void showFileAccessErrorMessage()
++ {static} void showFatalErrorMessage()
++ {static} void showDataCorruptedError()
+}
+class Messages
+}
+
+TransactionList ..> Ui
+Storage ..> Ui
+Nuscents --> Ui
+Command ..> Ui
+Ui ..> Messages
+@enduml
\ No newline at end of file
diff --git a/docs/images/ParserClassDiagram.png b/docs/images/ParserClassDiagram.png
new file mode 100644
index 0000000000..0f397a9aed
Binary files /dev/null and b/docs/images/ParserClassDiagram.png differ
diff --git a/docs/images/SimpleClassDiagram.png b/docs/images/SimpleClassDiagram.png
new file mode 100644
index 0000000000..7219cc831a
Binary files /dev/null and b/docs/images/SimpleClassDiagram.png differ
diff --git a/docs/images/StorageClassDiagram.png b/docs/images/StorageClassDiagram.png
new file mode 100644
index 0000000000..87173b051e
Binary files /dev/null and b/docs/images/StorageClassDiagram.png differ
diff --git a/docs/images/UiClassDiagram.png b/docs/images/UiClassDiagram.png
new file mode 100644
index 0000000000..70220bab51
Binary files /dev/null and b/docs/images/UiClassDiagram.png differ