diff --git a/src/main/resources/css/dialogs/KeyBindingDialog.css b/src/main/resources/css/dialogs/KeyBindingDialog.css
index e69de29b..e5cdc773 100644
--- a/src/main/resources/css/dialogs/KeyBindingDialog.css
+++ b/src/main/resources/css/dialogs/KeyBindingDialog.css
@@ -0,0 +1,28 @@
+#keyBindingDialogHeader {
+    -fx-font-size: 30px;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+JFXButton {
+    -fx-background-color: -fx-pp-light-text-color;
+    -fx-text-fill: -fx-pp-theme-color;
+    -fx-font-size: 17px;
+    -fx-effect: -fx-pp-dropshadow-dark;
+}
+
+Label {
+    -fx-font-size: 25px;
+    -fx-text-fill: -fx-pp-theme-color;
+    /*-fx-effect: -fx-pp-dropshadow-dark;*/
+}
+
+JFXButton:hover {
+    -fx-font-size: 20px;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+JFXButton:focused {
+    -fx-font-size: 20px;
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
\ No newline at end of file
diff --git a/src/main/resources/views/dialogs/KeyBindingDialog.fxml b/src/main/resources/views/dialogs/KeyBindingDialog.fxml
index 34340b05..fec643fb 100644
--- a/src/main/resources/views/dialogs/KeyBindingDialog.fxml
+++ b/src/main/resources/views/dialogs/KeyBindingDialog.fxml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.*?>
 <?import java.net.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@@ -25,21 +26,42 @@
             <RowConstraints maxHeight="60.0" minHeight="60.0" prefHeight="60.0" vgrow="SOMETIMES" />
         </rowConstraints>
          <children>
-            <Label text="Custom Keybind" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <Label text="Zoom in" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <Label text="Zoom out" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="CENTER" />
-            <Label text="VMG" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
-            <Label text="Sails in/out" GridPane.halignment="CENTER" GridPane.rowIndex="4" GridPane.valignment="CENTER" />
-            <Label text="Tack/Gybe" GridPane.halignment="CENTER" GridPane.rowIndex="5" GridPane.valignment="CENTER" />
-            <Label text="Upwind" GridPane.halignment="CENTER" GridPane.rowIndex="6" GridPane.valignment="CENTER" />
-            <Label text="Downwind" GridPane.halignment="CENTER" GridPane.rowIndex="7" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="Z" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="X" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="SPACE" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="SHIFT" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="4" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="ENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="5" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="PAGE_UP" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="6" GridPane.valignment="CENTER" />
-            <JFXButton buttonType="RAISED" text="PAGE_DOWN" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="7" GridPane.valignment="CENTER" />
+            <Label fx:id="keyBindingDialogHeader" text="CUSTOM KEYBIND" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+            <Label text="ZOOM IN" GridPane.halignment="LEFT" GridPane.rowIndex="1" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="ZOOM OUT" GridPane.halignment="LEFT" GridPane.rowIndex="2" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="VMG" GridPane.halignment="LEFT" GridPane.rowIndex="3" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="SAILS IN/OUT" GridPane.halignment="LEFT" GridPane.rowIndex="4" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="TACK/GYBE" GridPane.halignment="LEFT" GridPane.rowIndex="5" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="UPWIND" GridPane.halignment="LEFT" GridPane.rowIndex="6" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <Label text="DOWNWIND" GridPane.halignment="LEFT" GridPane.rowIndex="7" GridPane.valignment="CENTER">
+               <GridPane.margin>
+                  <Insets left="40.0" />
+               </GridPane.margin></Label>
+            <JFXButton fx:id="zoomInbtn" buttonType="RAISED" prefWidth="150.0" text="Z" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="zoomOutBtn" buttonType="RAISED" prefWidth="150.0" text="X" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="vmgBtn" buttonType="RAISED" prefWidth="150.0" text="SPACE" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="sailInOutBtn" buttonType="RAISED" prefWidth="150.0" text="SHIFT" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="4" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="tackGybeBtn" buttonType="RAISED" prefWidth="150.0" text="ENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="5" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="upwindBtn" buttonType="RAISED" prefWidth="150.0" text="PAGE_UP" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="6" GridPane.valignment="CENTER" />
+            <JFXButton fx:id="downwindBtn" buttonType="RAISED" prefWidth="150.0" text="PAGE_DOWN" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="7" GridPane.valignment="CENTER" />
          </children>
       </GridPane>
    </children>