diff --git a/src/main/java/seedu/address/ui/UiManager.java b/src/main/java/seedu/address/ui/UiManager.java
index fdf02413..0b083606 100644
--- a/src/main/java/seedu/address/ui/UiManager.java
+++ b/src/main/java/seedu/address/ui/UiManager.java
@@ -6,6 +6,7 @@
 import javafx.scene.control.Alert;
 import javafx.scene.control.Alert.AlertType;
 import javafx.scene.image.Image;
+import javafx.scene.text.Font;
 import javafx.stage.Stage;
 import seedu.address.MainApp;
 import seedu.address.commons.core.LogsCenter;
@@ -38,6 +39,7 @@ public void start(Stage primaryStage) {
 
         //Set the application icon.
         primaryStage.getIcons().add(getImage(ICON_APPLICATION));
+        Font.loadFont(getClass().getResourceAsStream("/styles/ArialMonoMTProRegular.ttf"), 16);
 
         try {
             mainWindow = new MainWindow(primaryStage, logic);
diff --git a/src/main/resources/styles/Arial.ttf b/src/main/resources/styles/Arial.ttf
new file mode 100644
index 00000000..8682d946
Binary files /dev/null and b/src/main/resources/styles/Arial.ttf differ
diff --git a/src/main/resources/styles/ArialMonoMTProRegular.TTF b/src/main/resources/styles/ArialMonoMTProRegular.TTF
new file mode 100644
index 00000000..b87be9ae
Binary files /dev/null and b/src/main/resources/styles/ArialMonoMTProRegular.TTF differ
diff --git a/src/main/resources/styles/JetBrainsMono-SemiBold.ttf b/src/main/resources/styles/JetBrainsMono-SemiBold.ttf
new file mode 100644
index 00000000..a70e69bd
Binary files /dev/null and b/src/main/resources/styles/JetBrainsMono-SemiBold.ttf differ
diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
index 36e6b001..820a49da 100644
--- a/src/main/resources/view/DarkTheme.css
+++ b/src/main/resources/view/DarkTheme.css
@@ -120,7 +120,13 @@
     -fx-text-fill: white;
 }
 
-.cell_big_label {
+.cell_big_index {
+    -fx-font-family: "Arial Mono MT Pro";
+    -fx-font-size: 16.65px;
+    -fx-text-fill: #010504;
+}
+
+.cell_big_name {
     -fx-font-family: "Segoe UI Semibold";
     -fx-font-size: 16px;
     -fx-text-fill: #010504;
diff --git a/src/main/resources/view/PersonListCard.fxml b/src/main/resources/view/PersonListCard.fxml
index 84e09833..851fec6a 100644
--- a/src/main/resources/view/PersonListCard.fxml
+++ b/src/main/resources/view/PersonListCard.fxml
@@ -18,14 +18,14 @@
       <padding>
         <Insets top="5" right="5" bottom="5" left="15" />
       </padding>
-      <HBox spacing="0.5" alignment="CENTER_LEFT">
-        <Label fx:id="id" styleClass="cell_big_label">
+      <HBox spacing="-9" alignment="CENTER_LEFT">
+        <Label fx:id="id" styleClass="cell_big_index">
           <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" />
+        <Label fx:id="name" text="\$first" styleClass="cell_big_name" />
       </HBox>
       <FlowPane fx:id="tags" />
       <Label fx:id="phone" styleClass="cell_small_label" text="\$phone" />