diff --git a/docs/UserGuide.md b/docs/UserGuide.md
index c51d05bdf3c..b13a0eb9b4b 100644
--- a/docs/UserGuide.md
+++ b/docs/UserGuide.md
@@ -160,6 +160,30 @@ If Java 11 is not installed, follow the instructions [here](https://www3.ntu.edu
 
 ## Navigating the GUI
 
+**Main Window**:
+<br>
+  <div style="display:flex; justify-content: center; align-items:center;">
+    <img src="images/marked_ui" alt="marked-ui" style="height: 300px; width: 550px; margin-bottom: 16px;">
+  </div>
+<br>
+
+Here are the components of the Graphical User Interface (GUI), and their details.
+
+<details open style="border: 1px solid grey; padding: 10px; border-radius: 5px;">
+<summary style="font-size: 20px; cursor: pointer;">GUI Components</summary>
+
+| Component Name      | Details                                                                                                                                  |
+|---------------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| Menu Bar            | Contains the drop down menus: **File** and **Help**.                                                                                     |
+| Command Input Box   | Text box for users to input commands.                                                                                                    |
+| Message Display Box | Box that displays result of command. Error messages will be displayed here as well.                                                      |
+| Animal Entries      | Contains information about individual animals currently at the shelter, including: Name, ID, Sex, Species and Breed of animal.           |
+| Selected Animal     | Animal that is selected either by left-clicking on the animal entry, or selected by a command. Selected animal is highlighted in orange. |
+| Detailed View       | Box that contains more details about the currently selected animal.                                                                      |
+
+</details>
+<br>
+
 [Back to Table of Contents](#table-of-contents)
 
 ---
diff --git a/docs/images/marked_ui.png b/docs/images/marked_ui.png
new file mode 100644
index 00000000000..488973b9dfa
Binary files /dev/null and b/docs/images/marked_ui.png differ