diff --git a/docs/DeveloperGuide.adoc b/docs/DeveloperGuide.adoc
index cf4b06105a06..f10f3226bbf2 100644
--- a/docs/DeveloperGuide.adoc
+++ b/docs/DeveloperGuide.adoc
@@ -426,11 +426,15 @@ The reading and writing of images is done using the `ImageIO` class.
 
 The sequence diagram for adding a display picture is shown below: +
 
-image::SDforDisplayPicture.png[width="800"]
+image::SDforDisplayPicture.PNG[width="800"]
+_Figure 1: Sequence Diagram for Display Picture Command._
+
 
 The wireframe used to display the image for each person is shown below:
 
-image::WireFramePersonCard.png[width="800"]
+image::WireFramePersonCard.PNG[width="800"]
+_Figure 2: Wireframe for the UI._
+
 
 
 The binder for refreshing the image every time the picture is updated is implemented by the following function
diff --git a/docs/UserGuide.adoc b/docs/UserGuide.adoc
index 6c42836218b7..83a7af39351f 100644
--- a/docs/UserGuide.adoc
+++ b/docs/UserGuide.adoc
@@ -183,7 +183,7 @@ Examples:
 * `direction 2`
 Returns direction to the address of person at `INDEX` 2
 
-image::directon.png[width="790"]
+image::directon.PNG[width="790"]
 
 
 === Email directly to a group of people having a particular tag: `email` [Since V1.2]
@@ -202,7 +202,7 @@ Examples:
 * `email cs2103`
 Allows to send email after drafting message to everyone with the tag `cs2103`
 
-image::email.png[width="790"]
+image::email.PNG[width="790"]
 
 
 === Locating persons by name: `find`
@@ -246,7 +246,7 @@ Returns all people who have the tag `cs2103` associated with them
 * `viewtag friends` +
 Returns `Alex` and `Bernice1 as they are having the tag `friends`
 
-image::viewtag.png[width="790"]
+image::viewtag.PNG[width="790"]
 
 // tag::filter[]
 === Finding all people by name and associated with one or more tags: `filter`
diff --git a/docs/images/Ui.png b/docs/images/Ui.png
index 787dfe085e4e..8f49d5fd4f1e 100644
Binary files a/docs/images/Ui.png and b/docs/images/Ui.png differ