diff --git a/docs/UserGuide.adoc b/docs/UserGuide.adoc
index 0f181c759f65..9efe3843c6e7 100644
--- a/docs/UserGuide.adoc
+++ b/docs/UserGuide.adoc
@@ -3,6 +3,7 @@
 :toc:
 :toc-title:
 :toc-placement: preamble
+:toclevels: 3
 :sectnums:
 :imagesDir: images
 :stylesDir: stylesheets
@@ -19,30 +20,102 @@ By: `Team T09-1`      Since: `Feb 2019`      Licence: `MIT`
 
 == Introduction
 
-PlanWithEase (PWE) is an application designed to help National University of Singapore (NUS) Information Security freshmen in creating a comprehensive degree plan according to the degree requirements.
+*PlanWithEase* (PWE) is an application designed to help National University of Singapore (NUS) Information Security freshmen in creating a comprehensive degree plan according to the degree requirements.
 
 PWE is optimized for those who prefer using a Command Line Interface (CLI). The commands used to interact with PWE
 are designed to be simple and intuitive, so even those who are unfamiliar with CLI can use PWE with ease.
 
 PWE also comes with a clean Graphical User Interface (GUI) that presents information in an organized manner.
 
-Interested in using PWE to plan your degree easily? Jump to <<Quick Start>> to get started!
+Interested in using *PWE* to plan your degree easily? Jump to <<Quick Start>> to get started!
+
+== About This User Guide
+
+=== Basic Information
+This user guide provides a quick start guide for you to easily setup and install *PlanWithEase*.
+
+You can find all the details of *PlanWithEase*'s features, tips, frequently asked questions and a summary of the
+available commands.
+
+To navigate between the different sections easily, you can use the <<toc, Table of Contents>> above.
+
+The following symbols are used throughout this user guide:
+[NOTE]
+====
+This symbol denotes information that you may want to take note of.
+====
+[TIP]
+====
+This symbol denotes a tip which you may find useful when using our application.
+====
+[WARNING]
+====
+This symbol denotes a warning message which you need to be careful of when using our application.
+====
+
+Additionally, you may also encounter the following text styles:
+====
+* Commands or parameters will be in this `format`.
+* Important messages will be *bold*.
+* Undoable command will be in _italics_.
+* Buttons on your keyboard will be referred as such: kbd:[F1].
+====
+
+=== Navigating Around Our Application
+*PlanWithEase* comes with a very clean and easy to use Graphical User Interface, so don't worry even if you are a new
+ user! You can expect to navigate around our application with ease!
+
+[[GUI]]
+.PlanWithEase's Graphical User Interface
+ifdef::env-github[]
+image::UiLabelled.png[width="800"]
+endif::[]
+
+ifndef::env-github[]
+image::UiLabelled.png[width="970"]
+endif::[]
+
+
+*PlanWithEase* has five main sections that you'll need to know before you get started!. +
+The five main sections are explained below.
+
+[cols="<20%,25%,40%"]
+|====
+|*Section*| *Name* | *Description*
+| 1 | Command Box | This is where you can enter and run commands.
+| 2 | Result Box | This provides you with information on whether a command is successful. If there are errors when
+running the command, information on how to rectify the errors will also be displayed in here.
+| 3 | Module List | This is where you can view the details of all the modules. You can use the commands in <<Module Management>>
+to make changes to the *Module List*.
+| 4 | Requirement Categories | This is where you can view your degree progress. You can use the commands in
+<<Requirement Tracker>> to make changes to the *Requirement Categories*.
+| 5 | Degree Plan | This is where you can view your degree plan. You can use the commands in <<Planner Management>>
+to make changes to the *Degree Plan*.
+|====
+
 
 == Quick Start
 
 .  Ensure you have Java version `9` installed in your Computer.
 .  Download the latest `PWE.jar` link:{repoURL}/releases[here].
-.  Copy the file to the folder you want to use as the home folder for PlanWithEase.
+.  Copy the file to the folder you want to use as the home folder for *PlanWithEase*.
 .  Double-click the file to start the app. The GUI should appear in a few seconds.
 +
+.Successful start up of *PlanWithEase*
+ifdef::env-github[]
 image::Ui.png[width="800"]
+endif::[]
+
+ifndef::env-github[]
+image::Ui.png[width="970"]
+endif::[]
 +
 .  Type the command in the command box and press kbd:[Enter] to execute it. +
 e.g. typing *`help`* and pressing kbd:[Enter] will open the help window.
 .  Below are some example commands you can try:
 * *`list`* : lists all modules
-* **`add`**`name/Programming Methodology code/CS1010 credits/4` : adds a module named `Programming Methodology` with code `CS1010` into module list
-* **`delete`**`3` : deletes the 3rd module shown in the current list
+* **`add`**`name/Programming Methodology code/CS1010 credits/4` : adds a module named `Programming Methodology` with code `CS1010` that is assigned 4 modular credits into module list
+* **`delete`**`3` : deletes the 3^rd^ module shown in the current list
 * *`exit`* : exits the application
 
 .  Refer to <<Features>> for details of each command.
@@ -75,11 +148,159 @@ which can be used as `add name/Programming Methodology`.
 .. entering `name/NAME INDEX code/CODE` is not acceptable
 ====
 
-=== Viewing help : `help`
+=== General Commands
+
+==== Viewing help : `help`
+
+You can use the `help` command to access the *User Guide* in *PlanWithEase*.
 
 Format: `help`
 
-=== Adding a module: `add`
+[TIP]
+====
+Alternatively, you can access the `help` page via kbd:[F1] or from the menu bar, as shown in Figure...
+====
+
+
+==== Listing entered commands : `history`
+
+Lists all the commands that you have entered in reverse chronological order (from most recent to earliest). +
+Format: `history`
+
+[NOTE]
+====
+Pressing the kbd:[&uarr;] and kbd:[&darr;] arrows will display the previous and next input respectively in the command box.
+====
+
+// tag::undoredo[]
+==== Undoing previous command : `undo`
+
+Restores *PlanWithEase*'s data to the state before the previous _undoable_ command was executed. +
+Format: `undo`
+
+[NOTE]
+====
+Undoable commands: those commands that modify the contents of PlanWithEase's data (`add`, `delete`, `edit` and `clear`).
+====
+
+Examples:
+
+* `delete 1` (Delete first module in the displayed module list) +
+`list` (Displays all modules in the module list) +
+`undo` (reverses the `delete 1` command) +
+
+* `find name/Programming` (Find modules with name containing the word `Programming` and display them in the module
+list) +
+`list` (Displays all modules in the module list) +
+`undo` +
+The `undo` command fails as there are no undoable commands executed previously.
+
+* `delete 1` (Delete first module in the displayed module list) +
+`clear` (clear all application data) +
+`undo` (reverses the `clear` command) +
+`undo` (reverses the `delete 1` command) +
+
+==== Redoing the previously undone command : `redo`
+
+Reverses the most recent `undo` command. +
+Format: `redo`
+
+Examples:
+
+* `delete 1` (Delete first module in the displayed module list) +
+`undo` (reverses the `delete 1` command) +
+`redo` (reapplies the `delete 1` command) +
+
+* `delete 1`  (Delete first module in the displayed module list)+
+`redo` +
+The `redo` command fails as there are no `undo` commands executed previously.
+
+* `delete 1` (Delete first module in the displayed module list) +
+`clear` (Clear all modules from the application) +
+`undo` (reverses the `clear` command) +
+`undo` (reverses the `delete 1` command) +
+`redo` (reapplies the `delete 1` command) +
+`redo` (reapplies the `clear` command) +
+// end::undoredo[]
+
+==== Clearing modules : `clear`
+
+This command allows you to remove all modules from the section specified. +
+If no parameters are given, all modules will be removed from the *module list*, *requirement categories* and *degree
+plan*.
+
+Format: `clear [requirement] [planner]`
+
+[TIP]
+====
+If you want to remove all *requirement categories* or *degree plan* quickly, use this command instead!
+====
+
+Command Usage:
+|====
+|*Input* | *Behaviour* | *Expected Results*
+| `clear` | Clears all *modules* from the application  | The *module list* will be emptied. Additionally, all
+modules in the *requirement categories* and *degree plan* will be removed.
+| `clear requirement` | Clears all *modules* in all *requirement categories* | The *requirement categories* will be
+empty.
+|`clear planner`| Clears all *modules*  in all  *degree plan* | The *degree plan* will be empty.
+|====
+
+Here's an example of how *PlanWithEase* would look like after executing the `clear` command. +
+You can see the command executed successfully after you enter the `clear` command as shown by the images below.
+
+Before the `clear` command:
+[[beforeClear]]
+.Before executing the `clear` command.
+image::clearbefore.png[width=800]
+
+After entering `clear` and press kbd:[enter]
+
+
+[[afterClear]]
+.After executing the `clear` command.
+image::clearafter.png[width=800]
+
+==== Exiting the program : `exit`
+
+Exits the program. +
+Format: `exit`
+
+==== Saving the data
+
+*PlanWithEase* data are saved in the hard disk automatically after any command that changes the data. +
+There is no need to save manually.
+
+=== Module Management
+
+
+The following table describes the parameters you may use for commands in this section.
+|======
+|*Parameter*| *Description* | *Acceptable Range of Values*
+| `NAME` | Indicates the name of the module (e.g. `Effective Communication for Computing Professionals`). |
+`NAME` should only contain alphanumeric characters and spaces.
+  +
+`NAME` should not be blank.
+| `CODE` | Indicates the module code (e.g. `CS2101`). |
+`CODE` should begin with two or three alphabets, followed by four digits, and may optionally end with an alphabet.
+ +
+`CODE` should not be blank.
+| `CREDITS` | Indicates the modular credits assigned to the module (e.g. `4`). |
+`CREDITS` should be between 0 to 999.
+| `TAG` | Indicates the extra information to associate the module with (e.g. `Presentation`, `Email`). |
+`TAG` should only contain alphanumeric characters.
+ +
+`TAG` should not be blank unless otherwise specified.
+| `COREQUISITE` | indicates the module code that is a co-requisite of the module to be added. |
+`COREQUISITE` follow the same format as `CODE`
+ +
+`COREQUISITE` should not be blank unless otherwise specified.
+
+| `SEMESTER` | indicates the semesters which offers the module | `SEMESTERS` should be between 1 to 4.
+|======
+
+
+==== Adding a module: `add`
 
 Adds a module to the module list. +
 Format: `add code/CODE name/NAME credits/CREDITS [coreq/COREQUISITE]… [tag/TAG]…`
@@ -126,12 +347,12 @@ assigned `4` modular credits and has module code `CS2101` as a corequisite, to t
 the tags `sweng`, `java`. +
 Both `CS2113T` and `CS2101` will be updated to be co-requisites.
 
-=== Listing all modules : `list`
+==== Listing all modules : `list`
 
 Shows a list of all modules in the module list. +
 Format: `list`
 
-=== Editing a module : `edit`
+==== Editing a module : `edit`
 
 Edits an existing module in the module list. +
 Format: `edit INDEX [name/NAME] [code/CODE] [credits/CREDITS] [tag/TAG]… [coreq/COREQUISITE]…`
@@ -158,7 +379,7 @@ Edits the co-requisite of the 3rd module in the displayed module list to be `CS1
 * `edit 4 coreq/CS2105 coreq/CS2106 coreq/CS2107` +
 Edits the co-requisites of the 4rd module in the displayed module list to be `CS2105`, `CS2106` and `CS2107`. +
 
-=== Find modules with name/code/credit: `find`
+==== Find modules with name/code/credit: `find`
 
 Having trouble locating the modules you want?
 
@@ -213,8 +434,7 @@ in their names and `CODE2` in their codes.
 * The search is case insensitive. e.g `security` will match `Security`
 * Only full words will be matched. e.g. `CS` will not match `CS1231`
 * The order of the prefixes does not matter. e.g. `find code/CODE || name/NAME` returns the same result as
-`find name/NAME ||
-code/CODE`
+`find name/NAME || code/CODE`
 ****
 Examples:
 
@@ -243,7 +463,7 @@ you can do the following command. `find name/Information && name/Security` +
 This command will return you modules with both name keywords. (e.g. `Security in Information Privacy`)
 ====
 
-=== Deleting a module : `delete`
+==== Deleting a module : `delete`
 
 Deletes the specified module from the module list. +
 Format: `delete INDEX`
@@ -271,7 +491,7 @@ Deletes the 2nd module in the module list.
 `delete 1` +
 Deletes the 1st module in the results of the `find` command.
 
-=== Selecting a module : `select`
+==== Selecting a module : `select`
 
 Selects the module identified by the index number used in the displayed module list. +
 Format: `select INDEX`
@@ -291,72 +511,70 @@ Selects the 2nd module in the displayed module list.
 `select 1` +
 Selects the 1st module in the results of the `find` command.
 
-=== Listing entered commands : `history`
-
-Lists all the commands that you have entered in reverse chronological order. +
-Format: `history`
-
-[NOTE]
-====
-Pressing the kbd:[&uarr;] and kbd:[&darr;] arrows will display the previous and next input respectively in the command box.
-====
+=== Requirement Tracker
+
+The following table describes the parameters you may use for commands in this section.
+|======
+|*Parameter*| *Description* | *Acceptable range of values*
+| `NAME` | Indicates the degree requirement category (e.g. `IT Professionalism`). |
+`NAME` should only contain alphanumeric characters and spaces.
+  +
+`NAME` should not be blank.
+| `CODE` | Indicates the module code (e.g. `CS2101`). |
+`CODE` should begin with two or three alphabets, followed by four digits, and may optionally end with an alphabet.
+ +
+`CODE` should not be blank.
+|======
 
-// tag::undoredo[]
-=== Undoing previous command : `undo`
+==== Adding a module to the degree requirement category : `requirement_add`
 
-Restores PlanWithEase's data to the state before the previous _undoable_ command was executed. +
-Format: `undo`
+Adds a module to the degree requirement category in the application. +
+Format: `requirement_add name/NAME code/CODE [code/CODE]…`
 
-[NOTE]
-====
-Undoable commands: those commands that modify the contents of PlanWithEase's data (`add`, `delete`, `edit` and `clear`).
-====
+*  After adding, the updated requirement category will be displayed.
 
 Examples:
 
-* `delete 1` +
-`list` +
-`undo` (reverses the `delete 1` command) +
+* `requirement_add name/IT Professionalism code/IS4231` +
+Adds module `IS4231` into `IT Professionalism` degree requirement category.
 
-* `select 1` +
-`list` +
-`undo` +
-The `undo` command fails as there are no undoable commands executed previously.
+* `requirement_add name/Computing Foundation code/CS1231 code/CS2100` +
+Adds modules `CS1231` and `CS2100` into `Computing Foundation` degree requirement category.
 
-* `delete 1` +
-`clear` +
-`undo` (reverses the `clear` command) +
-`undo` (reverses the `delete 1` command) +
+==== Removing a module from the degree requirement category : `requirement_remove`
 
-=== Redoing the previously undone command : `redo`
+Removes the specified module from the degree requirement category. +
+Format: `requirement_remove name/NAME code/CODE [code/CODE]…`
 
-Reverses the most recent `undo` command. +
-Format: `redo`
+*  After removing, the updated requirement category will be displayed.
 
 Examples:
 
-* `delete 1` +
-`undo` (reverses the `delete 1` command) +
-`redo` (reapplies the `delete 1` command) +
+* `requirement_remove name/Professionalism code/IS4231` +
+Removes the module `IS4231` from the `IT Professionalism` degree requirement category.
 
-* `delete 1` +
-`redo` +
-The `redo` command fails as there are no `undo` commands executed previously.
+==== Listing all degree requirement categories : `requirement_list`
 
-* `delete 1` +
-`clear` +
-`undo` (reverses the `clear` command) +
-`undo` (reverses the `delete 1` command) +
-`redo` (reapplies the `delete 1` command) +
-`redo` (reapplies the `clear` command) +
-// end::undoredo[]
+Shows a list of all degree requirement categories in the application and the modules
+added into each degree requirement category. +
+Format: `requirement_list`
 
-=== Clearing all entries : `clear`
+=== Planner Management
 
-Clears all entries from the module list. +
-Format: `clear`
+The following table describes the parameters you may use for commands in this section.
+|======
+|*Parameter*| *Description* | *Acceptable range of values*
+| `CODE` | Indicates the module code (e.g. `CS2101`). |
+`CODE` should begin with two or three alphabets, followed by four digits, and may optionally end with an alphabet.
+ +
+`CODE` should not be blank.
+| `YEAR` | Indicates the year. |
+`YEAR` should be between 1 and 4
+| `SEMESTER` | Indicates the semester. |
+`SEMESTER` follow the same format as `YEAR`
+|======
 
-=== Adding module(s) to degree plan : `planner_add`
+==== Adding module(s) to degree plan : `planner_add`
 
 Adds module(s) to the degree plan. +
 Format: `planner_add year/YEAR sem/SEMESTER code/CODE [code/CODE]…`
@@ -380,23 +598,9 @@ Adds modules CS1231 and CS2040C to year 1 semester 4 (special term semester 2) o
 * `planner_add year/1 sem/2 code/CS2113T code/CS2107` +
 Adds modules CS2113T and CS2107 to year 1 semester 2 of the degree plan.
 
-=== Removing module(s) from degree plan : `planner_remove` `[coming in v2.0]`
-
-Removes module(s) from the degree plan. +
-Format: `planner_remove code/CODE [code/CODE]…`
-
-* All the module(s) to remove must exist in the degree plan.
-* After removing, the updated degree plan will be displayed.
-
-Examples:
-
-* `planner_remove code/CS1231` +
-Removes module CS1231 from the degree plan.
 
-* `planner_remove code/CS2100 code/CS2040C` +
-Removes modules CS2100 and CS2040C from the degree plan.
 
-=== Moving a module between academic semesters in the degree plan : `planner_move`
+==== Moving a module between academic semesters in the degree plan : `planner_move`
 
 Moves a module in the degree plan to another academic semester. +
 Format: `planner_move year/YEAR sem/SEMESTER code/CODE`
@@ -411,11 +615,30 @@ Moves module CS1231 to year 1 semester 2.
 * `planner_move year/1 sem/4 code/CS1231` +
 Moves module CS1231 to year 1 semester 4 (special term semester 2).
 
-=== Listing degree planners: `planner_list_all`
+==== Listing degree planners: `planner_list_all`
 
 Shows a list of all degree planners. +
 Format: `planner_list_all`
 
+
+== Future Enhancements
+
+=== Removing module(s) from degree plan : `planner_remove` `[coming in v2.0]`
+
+Coming in v2.0 you will be able to removes module(s) from the degree plan. +
+Format: `planner_remove code/CODE [code/CODE]…`
+
+* All the module(s) to remove must exist in the degree plan.
+* After removing, the updated degree plan will be displayed.
+
+Examples:
+
+* `planner_remove code/CS1231` +
+Removes module CS1231 from the degree plan.
+
+* `planner_remove code/CS2100 code/CS2040C` +
+Removes modules CS2100 and CS2040C from the degree plan.
+
 === Listing a degree planner: `planner_list` `[coming in v2.0]`
 
 Shows a list of a specific degree planner. +
@@ -432,33 +655,6 @@ Shows a degree planner for year 1 semester 2
 
 Displays a list of modules that can be added to the degree planner.
 
-=== Adding a module to the degree requirement category : `requirement_add`
-
-Adds a module to the degree requirement category in the application. +
-Format: `requirement_add name/NAME code/CODE [code/CODE]…`
-
-*  After adding, the updated requirement category will be displayed.
-
-Examples:
-
-* `requirement_add name/IT Professionalism code/IS4231` +
-Adds module `IS4231` into `IT Professionalism` degree requirement category.
-
-* `requirement_add name/Computing Foundation code/CS1231 code/CS2100` +
-Adds modules `CS1231` and `CS2100` into `Computing Foundation` degree requirement category.
-
-=== Removing a module from the degree requirement category : `requirement_remove`
-
-Removes the specified module from the degree requirement category. +
-Format: `requirement_remove name/NAME code/CODE [code/CODE]…`
-
-*  After removing, the updated requirement category will be displayed.
-
-Examples:
-
-* `requirement_remove name/Professionalism code/IS4231` +
-Removes the module `IS4231` from the `IT Professionalism` degree requirement category.
-
 === Moving a module between degree requirement categories : `requirement_move` `[coming in v2.0]`
 
 Moves the specified module to another degree requirement category. +
@@ -471,69 +667,82 @@ Examples:
 * `requirement_move IS4231 name/IT Professionalism` +
 Moves the module `IS4231` from to `IT Professionalism` degree requirement category.
 
-=== Listing all degree requirement categories : `requirement_list`
-
-Shows a list of all degree requirement categories in the application and the modules
-added into each degree requirement category. +
-Format: `requirement_list`
-
-=== Exiting the program : `exit`
-
-Exits the program. +
-Format: `exit`
-
-=== Saving the data
-
-PlanWithEase data are saved in the hard disk automatically after any command that changes the data. +
-There is no need to save manually.
-
 == FAQ
 
-*Q*: How am I able to import my data to the same application on another computer? +
-*A*: Install the application in the other computer and run the import command with the file path to
-the exported data.
-
 *Q*: How do I save my task data in the application? +
 *A*: The application saves your data automatically whenever you make any changes. You will not need to save the data
 manually. The application will save the data at the specified storage location.
 
-*Q*: Why did the application complain about an invalid file directory? +
-*A*: Check if the directory you wish to relocate to exists and if you have sufficient privileges to read the file.
-
 == Command Summary
+This section provides a quick references for all commands available in *PlanWithEase*.
+
+=== General Commands
+The table below shows a list of general commands.
+|====
+*Task* | *Purpose* | *Command* | *Example*
+| *Clear* | Clear the modules data | `clear` | `clear`
+|*Help* | Displays the User Guide | `help` | `help`
+| *History* | Get a list of command entered | `history` | `history`
+| *Undo* | Undo your previously action| `undo` | `undo`
+| *Redo* | Redo your previous action | `redo` | `redo`
+|====
+
+=== Module Management Commands
+The table below shows a list of commands which helps you to manage the module list.
+|====
+|*Task*  | *Purpose* |*Command* | *Example*
+|*Add module to module list* | Add a new module to the module list.
+a|`add name/NAME code/CODE credits/CREDITS [tag/TAG]… [coreq/COREQUISITE]…`
+a|`add code/CS2113T name/Software Engineering and Object-Oriented Programming credits/4 tag/sweng tag/java coreq/CS2101`
+| *Edit a module info* | Edit the module's details based on the index given.
+a| `edit INDEX [name/NAME] [code/CODE] [credits/CREDITS] [tag/TAG]… [coreq/COREQUISITE]…`
+a| `edit 1 name/Data Structures and Algorithms code/CS2040C`
+ | *Delete module from module list*| Remove the module
+entirely from the module list based on the index given.
+a| `delete INDEX` a| `delete 3`
+| *Find modules in the module list* | Display a list of modules based on your search criteria
+a| `find [name/NAME] OPERATOR [code/CODE] OPERATOR [credits/CREDITS]`
+a| `find credits/4 && (name/Programming \|\| name/Discrete)`
+| *List all modules* | List all modules available in the module list a| `list` a| `list`
+|====
 
-* *Add module to module list* : `add name/NAME code/CODE credits/CREDITS [tag/TAG]… [coreq/COREQUISITE]…` +
-e.g. `add code/CS2113T name/Software Engineering and Object-Oriented Programming credits/4 tag/sweng tag/java
-coreq/CS2101`
-* *Edit* : `edit INDEX [name/NAME] [code/CODE] [credits/CREDITS] [tag/TAG]… [coreq/COREQUISITE]…` +
-e.g. `edit 1 name/Data Structures and Algorithms code/CS2040C`
-* *Delete* : `delete INDEX` +
-e.g. `delete 3`
-* *Find* : `find [name/NAME NAME…] [code/CODE CODE…] [credits/CREDITS CREDITS…]` +
-e.g. `find name/Information Security`
-* *Clear* : `clear`
-* *List* : `list`
-* *Help* : `help`
-* *Select* : `select INDEX` +
-e.g.`select 2`
-* *History* : `history`
-* *Undo* : `undo`
-* *Redo* : `redo`
-* *Add module(s) to degree plan* : `planner_add year/YEAR sem/SEMESTER code/CODE [code/CODE]…` +
-e.g.  `planner_add year/1 sem/2 code/CS1010 code/CS2113T`
-* *Remove module(s) from degree plan* : `planner_remove code/CODE [code/CODE]…` +
-e.g.  `planner_remove code/CS1231 code/CS1010`
-* *Move module between academic semesters in the degree plan* : `planner_move year/YEAR sem/SEMESTER code/CODE` +
-e.g.  `planner_move year/1 sem/2 code/CS1231`
-* *List all degree planners* : `planner_list_all`
-* *List specific degree planner* : `planner_list y/YEAR s/SEMESTER` +
-e.g. `planner_list y/1 s/2`
-* *Using degree planner to suggest modules* : `planner_suggest`
-* *Add module to degree requirement category* : `requirement_add name/NAME code/CODE [code/CODE]…` +
-e.g. `requirement_add name/IT Professionalism code/IS4231`
-* *Remove module from degree requirement category* : `requirement_remove name/NAME code/CODE [code/CODE]…` +
-e.g. `requirement_remove name/IT Professionalism code/IS4231`
-* *Move module between degree requirement categories*  : `requirement_move CODE
-name/NAME` +
-e.g. `requirement_move IS4231 name/IT Professionalism`
-* *List all degree requirement categories* : `requirement_list`
+=== Degree Plan Commands
+The table below shows a list of commands which helps you to manage the degree plan.
+
+|====
+|*Task*  | *Purpose* |*Command* | *Example*
+|*Add module(s) to degree plan* | Add module(s) to degree plan based on module code and academic year
+a|  `planner_add year/YEAR sem/SEMESTER code/CODE [code/CODE]…`
+a| `planner_add year/1 sem/2 code/CS1010 code/CS2113T`
+|*Remove module(s) from degree plan*| Remove module(s) from degree plan based on the module code
+a| `planner_remove code/CODE [code/CODE]…`
+a| `planner_remove code/CS1231 code/CS1010`
+| *Move module between academic semesters in the degree plan* | Move module between the academic semesters based on
+module code and academic semesters.
+a| `planner_move year/YEAR sem/SEMESTER code/CODE`
+a| `planner_move year/1 sem/2 code/CS1231`
+|*List all degree plans* | List all degree plans a| `planner_list_all` a| `planner_list_all`
+|*List specific degree plans* | List specific degree plans based on your search term.
+a| `planner_show [year/YEAR] OPERATOR [sem/SEMESTER]`
+a| `planner_show sem/2 && ( year/1 \|\|year/2 )`
+| *Suggest available modules* | Suggest available modules from the module lists based on input argument.
+a| `planner_suggest...`
+a| `planner_suggest...`
+|====
+
+=== Requirement Categories Commands
+The table below shows a list of command which helps you to manage track your requirements
+
+|====
+|*Task*  | *Purpose* |*Command* | *Example*
+| *Add module(s) to degree requirement category* | Add module(s) based on the module code to the chosen category.
+a| `requirement_add name/NAME code/CODE [code/CODE]…`
+a| `requirement_add name/IT Professionalism code/IS4231`
+| *Remove module from degree requirement category* | Remove module from requirement category based on module code.
+a| `requirement_remove name/NAME code/CODE [code/CODE]…`
+a| `requirement_remove name/IT Professionalism code/IS4231`
+| *Move module(s) between degree requirement categories* | Move module(s) between the requirement categories from any
+requirement categories to a chosen requirement categories.
+a| `requirement_move code/CODE`
+a| `requirement_move code/IS4231 name/IT Professionalism`
+|====
diff --git a/docs/images/Ui.png b/docs/images/Ui.png
index 263c56e21c16..967bad7a4d9d 100644
Binary files a/docs/images/Ui.png and b/docs/images/Ui.png differ
diff --git a/docs/images/UiLabelled.png b/docs/images/UiLabelled.png
new file mode 100644
index 000000000000..f01af85364ed
Binary files /dev/null and b/docs/images/UiLabelled.png differ
diff --git a/docs/images/clearafter.png b/docs/images/clearafter.png
new file mode 100644
index 000000000000..9fbfe3a3b68b
Binary files /dev/null and b/docs/images/clearafter.png differ
diff --git a/docs/images/clearbefore.png b/docs/images/clearbefore.png
new file mode 100644
index 000000000000..db2b345a4c82
Binary files /dev/null and b/docs/images/clearbefore.png differ
diff --git a/docs/stylesheets/asciidoctor.css b/docs/stylesheets/asciidoctor.css
index 36590bf346cd..3811bb0010e8 100644
--- a/docs/stylesheets/asciidoctor.css
+++ b/docs/stylesheets/asciidoctor.css
@@ -295,7 +295,7 @@ td.hdlist1{font-weight:bold;padding-bottom:1.25em}
 .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
 .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
 .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
-.imageblock>.title{margin-bottom:0}
+.imageblock>.title{margin-bottom:0; font-size:0.8em}
 .imageblock.thumb,.imageblock.th{border-width:6px}
 .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
 .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}