diff --git a/src/main/webapp/event-logger/index.xhtml b/src/main/webapp/event-logger/index.xhtml
index fdb936785..9b7aec0b5 100644
--- a/src/main/webapp/event-logger/index.xhtml
+++ b/src/main/webapp/event-logger/index.xhtml
@@ -6,7 +6,6 @@
   <title>Event Logger</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <h:outputStylesheet name="css/app.css" />
   <link rel="stylesheet"
     href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
 </h:head>
@@ -19,66 +18,56 @@
       <p:tab id="trackingIdTab" title="Tracking ID">
         <p:panel header="Tracking ID">
           <p:messages />
-          <p:panelGrid columns="1">
             <p:selectOneMenu id="trackingId" value="#{eventLogger.trackingId}"
               required="true" requiredMessage="Tracking ID missing">
               <f:selectItem itemLabel="Tracking ID" itemValue=""
                 noSelectionOption="true" />
               <f:selectItems value="#{eventLogger.trackingIds}" />
             </p:selectOneMenu>
-          </p:panelGrid>
         </p:panel>
       </p:tab>
       <p:tab id="locationTab" title="Location">
         <p:panel header="Location">
           <p:messages />
-          <p:panelGrid columns="1">
             <p:selectOneMenu id="locationId" value="#{eventLogger.location}"
               required="true" requiredMessage="Location missing">
               <f:selectItem itemLabel="Location" itemValue=""
                 noSelectionOption="true" />
               <f:selectItems value="#{eventLogger.locations}" />
             </p:selectOneMenu>
-          </p:panelGrid>
         </p:panel>
       </p:tab>
       <p:tab id="eventTypeTab" title="Event Type">
         <p:panel header="Event Type">
           <p:messages />
-          <p:panelGrid columns="1">
             <p:selectOneMenu id="eventType" value="#{eventLogger.eventType}"
               requiredMessage="Event type missing" required="true">
               <f:selectItem itemLabel="Event Type" itemValue=""
                 noSelectionOption="true" />
               <f:selectItems value="#{eventLogger.eventTypes}" />
             </p:selectOneMenu>
-          </p:panelGrid>
         </p:panel>
       </p:tab>
 
       <p:tab id="voyageTab" title="Voyage">
         <p:panel header="Voyage">
           <p:messages />
-          <p:panelGrid columns="1">
             <p:selectOneMenu id="voyage" value="#{eventLogger.voyageNumber}"
               required="false">
               <f:selectItem itemLabel="Voyage" itemValue=""
                 noSelectionOption="true" />
               <f:selectItems value="#{eventLogger.voyages}" />
             </p:selectOneMenu>
-          </p:panelGrid>
         </p:panel>
       </p:tab>
       <p:tab id="dateTab" title="Completion Date">
         <p:panel header="Completion Date">
           <p:messages />
-          <p:panelGrid columns="1">
             <p:calendar id="completionDate"
               value="#{eventLogger.completionTime}"
               pattern="#{eventLogger.completionTimePattern}"
               requiredMessage="A date is needed" required="true">
             </p:calendar>
-          </p:panelGrid>
         </p:panel>
       </p:tab>
       <p:tab id="confirm" title="Confirmation">
@@ -121,5 +110,6 @@
 						"display", "none");
 			}
 		</script>
+    <h:outputStylesheet name="css/app.css" />
 </h:body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/resources/css/app.css b/src/main/webapp/resources/css/app.css
index c9d438b1f..6adc96f4a 100644
--- a/src/main/webapp/resources/css/app.css
+++ b/src/main/webapp/resources/css/app.css
@@ -220,14 +220,22 @@ body .ui-menu {
   border: 1px solid #3b3e40;
 }
 
-/* [TO DO] find a way to not use !important */
 body .ui-datepicker .ui-datepicker-header {
-  padding: 0.5rem !important;
+  padding: 0.5rem;
 }
 
-/* [TO DO] find a way to not use !important */
 body .ui-datepicker .ui-datepicker-calendar td {
-  padding: 0.01rem !important;
+  padding: 0.01rem;
+}
+
+body .ui-datepicker .ui-datepicker-calendar td>a {
+  width: 2rem;
+  height: 2.2rem;
+  line-height: 2.2rem;
+}
+
+body .ui-datepicker.ui-input-overlay {
+  margin-top: 30%;
 }
 
 .ui-datepicker th {