diff --git a/build.gradle b/build.gradle
index 9e36aec33d..aae5bda226 100644
--- a/build.gradle
+++ b/build.gradle
@@ -54,7 +54,7 @@ checkstyle {
 }
 
 javafx {
-    version = "11"
+    version = "11.0.2"
     modules = [ 'javafx.controls', 'javafx.fxml' ]
 }
 
diff --git a/docs/Ui.png b/docs/Ui.png
new file mode 100644
index 0000000000..33f5f53a3c
Binary files /dev/null and b/docs/Ui.png differ
diff --git a/src/main/java/duke/ui/DialogBox.java b/src/main/java/duke/ui/DialogBox.java
index a0d6f38338..8489f0a218 100644
--- a/src/main/java/duke/ui/DialogBox.java
+++ b/src/main/java/duke/ui/DialogBox.java
@@ -28,7 +28,7 @@ public class DialogBox extends HBox {
     /**
      * Creates a new dialog box ui that contains the message in l and the profile picture in image.
      *
-     * @param l  the message to be displayed
+     * @param l     the message to be displayed
      * @param image the profile picture to be displayed
      */
     public DialogBox(String l, Image image) {
@@ -41,13 +41,13 @@ public DialogBox(String l, Image image) {
             e.printStackTrace();
         }
 
-        dialog.setText(l);
+        dialog.setText(l + "\r"); // Adds a new line to resolve truncation issues with javafx.
 
         dialog.setWrapText(true);
         circleDisplayPicture.setImage(image);
         resizeAndClip(circleDisplayPicture);
     }
-    
+
     private static void resizeAndClip(ImageView iv) {
         iv.setPreserveRatio(true);
         double aspectRatio = iv.getImage().getWidth() / iv.getImage().getHeight();
@@ -65,7 +65,7 @@ private static void resizeAndClip(ImageView iv) {
     /**
      * Gets the user dialog box with the user input and their profile picture.
      *
-     * @param userInput the user input
+     * @param userInput  the user input
      * @param profilePic the profile picture
      * @return the user dialog box
      */
diff --git a/src/main/resources/view/DialogBox.fxml b/src/main/resources/view/DialogBox.fxml
index 53ef23e058..03a25f34d2 100644
--- a/src/main/resources/view/DialogBox.fxml
+++ b/src/main/resources/view/DialogBox.fxml
@@ -17,6 +17,7 @@
              -fx-background-radius: 5px;
               -fx-background-insets: 0,1;
                -fx-font-family: 'Consolas', 'monospace';"
-           textFill="#e1e0e0"/>
+           textFill="#e1e0e0"
+    ellipsisString=""/>
     <ImageView fx:id="circleDisplayPicture"/>
 </fx:root>
\ No newline at end of file