diff --git a/src/main/java/seedu/address/ui/TaskCard.java b/src/main/java/seedu/address/ui/TaskCard.java
index 98b24597235f..bebdd1029e7a 100644
--- a/src/main/java/seedu/address/ui/TaskCard.java
+++ b/src/main/java/seedu/address/ui/TaskCard.java
@@ -41,7 +41,7 @@ public TaskCard(Task task, int displayedIndex) {
         this.task = task;
         id.setText(displayedIndex + ". ");
         name.setText(task.getName().toString());
-        endDateTime.setText(task.getEndDateTime().getDate() + ", " + task.getEndDateTime().getTime());
+        endDateTime.setText("Due by: " + task.getEndDateTime().getDate() + ", " + task.getEndDateTime().getTime());
         task.getTags().forEach(tag -> tags.getChildren().add(new Label(tag.tagName)));
     }
 
diff --git a/src/main/java/seedu/address/ui/TaskDetailsPane.java b/src/main/java/seedu/address/ui/TaskDetailsPane.java
index 71205a82e822..0ec4c6f12613 100644
--- a/src/main/java/seedu/address/ui/TaskDetailsPane.java
+++ b/src/main/java/seedu/address/ui/TaskDetailsPane.java
@@ -48,8 +48,9 @@ private void handleTaskPanelSelectionChangedEvent(TaskPanelSelectionChangedEvent
         logger.info(LogsCenter.getEventHandlingLogMessage(event));
         Task task = event.getNewSelection();
         name.setText(task.getName().toString());
-        startDateTime.setText(task.getStartDateTime().getDate() + ", " + task.getStartDateTime().getTime());
-        endDateTime.setText(task.getEndDateTime().getDate() + ", " + task.getEndDateTime().getTime());
+        startDateTime.setText("Starting from: "
+                + task.getStartDateTime().getDate() + ", " + task.getStartDateTime().getTime());
+        endDateTime.setText("Due by: " + task.getEndDateTime().getDate() + ", " + task.getEndDateTime().getTime());
         // Clear existing list of tags before populating with new tags
         tags.getChildren().clear();
         task.getTags().forEach(tag -> tags.getChildren().add(new Label(tag.tagName)));
diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
index 039b5ba976f8..f2fb79c621bf 100644
--- a/src/main/resources/view/DarkTheme.css
+++ b/src/main/resources/view/DarkTheme.css
@@ -120,13 +120,13 @@
 .cell_big_label {
   -fx-font-family: "Segoe UI Semibold";
   -fx-font-size: 16px;
-  -fx-text-fill: #010504;
+  -fx-text-fill: #FFFFFF;
 }
 
 .cell_small_label {
   -fx-font-family: "Segoe UI";
   -fx-font-size: 13px;
-  -fx-text-fill: #010504;
+  -fx-text-fill: #FFFFFF;
 }
 
 .stack-pane {
diff --git a/src/main/resources/view/TaskListCard.fxml b/src/main/resources/view/TaskListCard.fxml
index a55e15e37528..fe666915b645 100644
--- a/src/main/resources/view/TaskListCard.fxml
+++ b/src/main/resources/view/TaskListCard.fxml
@@ -7,28 +7,39 @@
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.VBox?>
 
-<HBox id="taskCardPane" fx:id="taskCardPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+<HBox id="taskCardPane" fx:id="taskCardPane" xmlns="http://javafx.com/javafx/10.0.1"
+      xmlns:fx="http://javafx.com/fxml/1">
   <GridPane HBox.hgrow="ALWAYS">
     <columnConstraints>
       <ColumnConstraints hgrow="SOMETIMES" minWidth="10" prefWidth="150" />
     </columnConstraints>
-    <VBox alignment="CENTER_LEFT" minHeight="105" GridPane.columnIndex="0">
+    <HBox alignment="CENTER_LEFT" minHeight="105" spacing="5">
       <padding>
-        <Insets top="5" right="5" bottom="5" left="15" />
+        <Insets bottom="5" left="15" right="5" top="5" />
       </padding>
-      <HBox spacing="5" alignment="CENTER_LEFT">
-        <Label fx:id="id" styleClass="cell_big_label">
-          <minWidth>
-            <!-- Ensures that the label text is never truncated -->
-            <Region fx:constant="USE_PREF_SIZE" />
-          </minWidth>
-        </Label>
-        <Label fx:id="name" text="\$first" styleClass="cell_big_label" />
-      </HBox>
-      <FlowPane fx:id="tags" />
-      <Label fx:id="endDateTime" styleClass="cell_small_label" text="\$endDateTime" />
-    </VBox>
+      <Label fx:id="id" styleClass="cell_big_label">
+        <minWidth>
+          <!-- Ensures that the label text is never truncated -->
+          <Region fx:constant="USE_PREF_SIZE" />
+        </minWidth>
+      </Label>
+      <VBox alignment="CENTER_LEFT" GridPane.columnIndex="0">
+        <Label fx:id="name" styleClass="cell_big_label" text="\$first" />
+
+        <FlowPane fx:id="tags" />
+      </VBox>
+      <Label fx:id="endDateTime" styleClass="cell_big_label" text="\$endDateTime">
+        <minWidth>
+          <!-- Ensures that the label text is never truncated -->
+          <Region fx:constant="USE_PREF_SIZE" />
+        </minWidth>
+      </Label>
+    </HBox>
+    <rowConstraints>
+      <RowConstraints />
+    </rowConstraints>
   </GridPane>
 </HBox>