diff --git a/tools/port-drayage-webservice/pom.xml b/tools/port-drayage-webservice/pom.xml
index f3df86964..e146696c0 100644
--- a/tools/port-drayage-webservice/pom.xml
+++ b/tools/port-drayage-webservice/pom.xml
@@ -92,7 +92,6 @@
                             <library>spring-boot</library>
                             <apiPackage>com.baeldung.openapi.api</apiPackage>
                             <modelPackage>com.baeldung.openapi.model</modelPackage>
-                            <skipValidateSpec>true</skipValidateSpec>
                             <supportingFilesToGenerate>
                                 ApiUtil.java
                             </supportingFilesToGenerate>
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/area/Area.java b/tools/port-drayage-webservice/src/main/java/com/leidos/area/Area.java
new file mode 100644
index 000000000..f1b6f2ed9
--- /dev/null
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/area/Area.java
@@ -0,0 +1,16 @@
+package com.leidos.area;
+
+public enum Area {
+    STAGING_AREA("STAGING_AREA"),
+    PORT_AREA("PORT_AREA");
+    private String name;
+
+    Area(String name){
+        this.name =name;
+    }
+    
+    public String getName(){
+        return name;
+    }
+
+}
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/area/AreaBean.java b/tools/port-drayage-webservice/src/main/java/com/leidos/area/AreaBean.java
new file mode 100644
index 000000000..6fcb09511
--- /dev/null
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/area/AreaBean.java
@@ -0,0 +1,28 @@
+package com.leidos.area;
+
+import org.springframework.stereotype.Component;
+
+@Component
+public class AreaBean {
+    
+    private Area area;
+
+    /**
+     * Empty Constructor.
+     */
+    public AreaBean() {
+
+    }
+
+    public void stagingArea() {
+        area = Area.STAGING_AREA;
+    }
+
+    public void portArea() {
+        area = Area.PORT_AREA;
+    }
+
+    public Area getArea() {
+        return area;
+    }
+}
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/controller/ResetController.java b/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UIActionController.java
similarity index 55%
rename from tools/port-drayage-webservice/src/main/java/com/leidos/controller/ResetController.java
rename to tools/port-drayage-webservice/src/main/java/com/leidos/controller/UIActionController.java
index f054d9f03..708ad8695 100644
--- a/tools/port-drayage-webservice/src/main/java/com/leidos/controller/ResetController.java
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UIActionController.java
@@ -1,6 +1,8 @@
 package com.leidos.controller;
 
-import com.baeldung.openapi.api.ResetApi;
+import com.baeldung.openapi.api.UiactionApi;
+import com.leidos.area.Area;
+import com.leidos.area.AreaBean;
 import com.leidos.inspection.InspectionActions;
 import com.leidos.loading.LoadingActions;
 import com.leidos.unloading.UnloadingActions;
@@ -14,9 +16,9 @@
 
 
 @RestController
-public class ResetController implements ResetApi {
+public class UIActionController implements UiactionApi {
 
-    private static Logger logger = LoggerFactory.getLogger(ResetController.class);
+    private static Logger logger = LoggerFactory.getLogger(UIActionController.class);
 
     /**
      * Injected {@link LoadingActions} Spring Bean
@@ -35,16 +37,41 @@ public class ResetController implements ResetApi {
      */
     @Autowired
     private InspectionActions inspectionActions;
+
+    /**
+     * 
+     */
+    @Autowired
+    private AreaBean areaBean;
     
     /**
      * {@inheritDoc}
      */
     @Override
-    public ResponseEntity<Void> resetPost() {
+    public ResponseEntity<Void> uiactionResetPost() {
         inspectionActions.clear();
         unloadingActions.clear();
         loadingActions.clear();
         logger.warn("Web Service Actions were cleared!");
         return new ResponseEntity<Void>(HttpStatus.OK);
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public ResponseEntity<Void> uiactionAreaAreaPost(String area) {
+        if ( area.equals(Area.STAGING_AREA.getName())) {
+            areaBean.stagingArea();
+            return new ResponseEntity<>(HttpStatus.CREATED);
+        }
+        else if ( area.equals(Area.PORT_AREA.getName())) {
+            areaBean.portArea();
+            return new ResponseEntity<>(HttpStatus.CREATED);
+        }
+        else {
+            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
+        }
+    }
+
 }
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UserInterfaceController.java b/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UserInterfaceController.java
index daa9b4ddd..cf276d3a6 100644
--- a/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UserInterfaceController.java
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/controller/UserInterfaceController.java
@@ -1,6 +1,10 @@
 package com.leidos.controller;
 
 
+import com.leidos.area.Area;
+import com.leidos.area.AreaBean;
+
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -8,11 +12,18 @@
 @Controller
 public class UserInterfaceController {
     
+    @Autowired
+    public AreaBean areaBean;
+
 
     @GetMapping("/")
     public String main( Model model) {
-        return "index";
-    }
+        if ( areaBean.getArea() != null )
+            return "index";
+        else {
+            return "landing";
+        }
+    }   
 
     @GetMapping("/loading")
     public String loading() {
@@ -29,4 +40,15 @@ public String inspection() {
         return "_inspection";
         
     }
+
+    /**
+     * Keeping access to landing page under this URL for testing purposes.
+     * @return
+     */
+    @GetMapping("/debug/landing")
+    public String main() {
+        return "landing";
+        
+    }
+
 }
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/inspection/InspectionActions.java b/tools/port-drayage-webservice/src/main/java/com/leidos/inspection/InspectionActions.java
index fb7c90140..b3c8c2896 100644
--- a/tools/port-drayage-webservice/src/main/java/com/leidos/inspection/InspectionActions.java
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/inspection/InspectionActions.java
@@ -202,4 +202,20 @@ public void clear() {
         currentInspection = null;
     }
 
+    /**
+     * Method to return the number of waiting actions for UI tab notification
+     */
+    public int waitingActions() {
+        if ( pendingInspections.getInspections() != null && !pendingInspections.getInspections().isEmpty()) {
+            // plus one for current action
+            return pendingInspections.getInspections().size() + 1;
+        }
+        else if ( currentInspection != null ) {
+            return 1;
+        }
+        else {
+            return 0;
+        } 
+    } 
+
 }
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/loading/LoadingActions.java b/tools/port-drayage-webservice/src/main/java/com/leidos/loading/LoadingActions.java
index 97c3683ac..fce9f187c 100644
--- a/tools/port-drayage-webservice/src/main/java/com/leidos/loading/LoadingActions.java
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/loading/LoadingActions.java
@@ -182,4 +182,20 @@ public void clear() {
         currentAction = null;
     }
 
+    /**
+     * Method to return the number of waiting actions for UI tab notification
+     */
+    public int waitingActions() {
+        if ( pendingActions.getActions() != null && !pendingActions.getActions().isEmpty() ) {
+            // plus one for current action
+            return pendingActions.getActions().size() + 1;
+        }
+        else if ( currentAction != null ) {
+            return 1;
+        }
+        else {
+            return 0;
+        } 
+    } 
+
 }
diff --git a/tools/port-drayage-webservice/src/main/java/com/leidos/unloading/UnloadingActions.java b/tools/port-drayage-webservice/src/main/java/com/leidos/unloading/UnloadingActions.java
index 29692e0e1..23255a828 100644
--- a/tools/port-drayage-webservice/src/main/java/com/leidos/unloading/UnloadingActions.java
+++ b/tools/port-drayage-webservice/src/main/java/com/leidos/unloading/UnloadingActions.java
@@ -177,4 +177,20 @@ public void clear() {
             completedActions.getActions().clear();
         currentAction = null;
     }
+
+    /**
+     * Method to return the number of waiting actions for UI tab notification
+     */
+    public int waitingActions() {
+        if ( pendingActions.getActions() != null && !pendingActions.getActions().isEmpty() ) {
+            // plus one for current action
+            return pendingActions.getActions().size() + 1;
+        }
+        else if ( currentAction != null ) {
+            return 1;
+        }
+        else {
+            return 0;
+        } 
+    } 
 }
diff --git a/tools/port-drayage-webservice/src/main/resources/port-drayage-webservice.yml b/tools/port-drayage-webservice/src/main/resources/port-drayage-webservice.yml
index c8a30edfe..403b87d28 100755
--- a/tools/port-drayage-webservice/src/main/resources/port-drayage-webservice.yml
+++ b/tools/port-drayage-webservice/src/main/resources/port-drayage-webservice.yml
@@ -9,7 +9,7 @@ servers:
   - url: https://127.0.0.1:8443
     description: Secured hosting for deployment
 paths:
-  /reset:
+  /uiaction/reset:
     post:
       summary: Clear Web Service Actions
       description:
@@ -17,6 +17,23 @@ paths:
       responses:
         "201":
           description: Created
+  /uiaction/area/{area}:
+    post:
+      parameters:
+        - in: path
+          name: area
+          schema:
+            type: string
+          required: true
+          description: Area Enumeration indicating where web service is deployed.
+      summary: Select Area Of Operations.
+      description: Indicates where the web service is deployed. Possible valid area of operations include PORT_AREA and STAGING_AREA
+      responses:
+        "201":
+          description: Created
+        "400":
+          description: Invalid Request
+
   /loading:
     post:
       summary: Request a container is loaded on to freight vehicle.
diff --git a/tools/port-drayage-webservice/src/main/resources/static/css/index.css b/tools/port-drayage-webservice/src/main/resources/static/css/index.css
new file mode 100644
index 000000000..dba98161e
--- /dev/null
+++ b/tools/port-drayage-webservice/src/main/resources/static/css/index.css
@@ -0,0 +1,99 @@
+/* Index Page Style Sheet */
+
+/* Navigation bar holds tabs and CARMA-Streets logo*/
+.navigation-bar{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+/*Overwrite bootstrap nav-tabs class stop tabs from wrapping when screen is resized*/
+.nav-tabs{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+.carma-streets-logo{
+    width: auto;
+    max-height: 90px;
+}
+/* Align icons to bottom of tab */
+.icons{
+    max-height:40px;
+    max-width: 60px;
+    align-self: flex-end;
+}
+/* Style individual tabs */
+.tabs{
+    display: flex;
+    clear: both;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-self: center;
+    width: 100%;
+    height: 100%;
+    /* overwrite some of the nav-link styling */
+    border: 2px black solid !important;
+    border-bottom: none !important;
+    color: lightgray !important;
+}
+/* Overwrite active tab styling for green backgrould */
+.nav-link.active{
+    /* Override bootstrap styling */
+    background-color: hsla(120, 100%, 25%, 0.4) !important;
+    border: 2px black solid !important;
+    border-bottom: none !important;
+    color: black !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+/* Set tab label styling */
+.tab-label{
+    align-self: flex-end;
+    margin-left: 7px;
+    margin-bottom: 0 !important;
+}
+/* Overwrite bootstrap badge style for notification badges for tabs */
+.badge {
+    height: fit-content;
+    color: black;
+}
+
+/* Styling for Tab Content */
+
+/* Add border to bootstrap tab content styling*/
+.tab-content{
+    border: 2px black solid;
+    padding: 10px;
+}
+/* Overwrite bootstrap jumbotron styling for dialog popup */
+.jumbotron{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 1rem 1rem !important;
+}
+/* Left part of dialog popup*/
+.action-dialog-left{
+    width: 60%;
+    height: 100%;
+}
+/* Right part of dialog popup*/
+.action-dialog-right{
+    width: 40%;
+    color: darkblue;
+    border: 2px black dashed ;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: xxx-large;
+}
+/* Clear Actions button styling  */
+.clear-button{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/tools/port-drayage-webservice/src/main/resources/static/css/landing.css b/tools/port-drayage-webservice/src/main/resources/static/css/landing.css
new file mode 100644
index 000000000..1d163e918
--- /dev/null
+++ b/tools/port-drayage-webservice/src/main/resources/static/css/landing.css
@@ -0,0 +1,31 @@
+/* Landing Page Style Sheet */
+/* */
+.main-splash{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+/* Style CARMA-Streets Description */
+.main-splash-description{
+    width: 80%;
+}
+
+/* Style CARMA-Streets Logo */
+.splash-logo{
+    width: 60%;
+    max-height: 45%;
+    margin-top: 20px;
+}
+
+/* Style container holding area selection buttons */
+.area-select{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+/* Style buttons to be the same size */
+.area-select-btn{
+    width: 190px;
+}
\ No newline at end of file
diff --git a/tools/port-drayage-webservice/src/main/resources/static/css/main.css b/tools/port-drayage-webservice/src/main/resources/static/css/main.css
index e69de29bb..ba236d8aa 100644
--- a/tools/port-drayage-webservice/src/main/resources/static/css/main.css
+++ b/tools/port-drayage-webservice/src/main/resources/static/css/main.css
@@ -0,0 +1,77 @@
+/* Main Style Sheet */
+
+/*Overwrite container class from bootstrap to occupy 100% of vertical
+ and horizontal space. Container contains all page content including 
+ footer.*/
+.container{
+    position: relative;
+    min-height: 100vh;
+    min-width: 100%;
+}
+
+/*Contains all context except footer. Padding at the bottom to make room 
+for footer.*/
+.content-wrap {
+    padding-bottom: 2.5rem;
+}
+
+/*Styling for footer panel. Split into thirds for logos, version, and copyright.
+ Positioned at absolute bottom. Using flex-box space around to make footer 
+ elements be left, center and right justified.*/
+.footerPanel{
+    width: 100%;
+    clear: both;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+/*Footer element styling*/
+.marad-logo{
+    max-height: 40px;
+    align-self: center;
+    margin-left: 10px;
+}
+/*Marad logo has approximately twice as much white space as FHWA logo */
+.fhwa-logo{
+    max-height:80px;
+    align-self: center;
+    margin-right: 10px;
+}
+/* Container holding both FHWA and MARAD logos */
+.logos{
+    display:flex;
+    width: 33%;
+}
+/* Copyright right aligned */
+.copyright{
+    width: 33%;
+    text-align: right !important;
+    padding: 0px 10px;
+    font-family: Roboto;
+    font-weight: normal;
+    font-size: 80%;
+    color: #000000;
+    display: block;
+}
+/* Version text center aligned */
+.version {
+    width: 33%;
+    text-align: center !important;
+    padding: 0px 10px;
+    font-family: Roboto;
+    font-weight: normal;
+    font-size: 80%;
+    color: #000000;
+    display: block;
+
+}
+
+
+
+
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/icons/inspection.png b/tools/port-drayage-webservice/src/main/resources/static/images/icons/inspection.png
new file mode 100755
index 000000000..e2353d83b
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/icons/inspection.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/icons/loading.png b/tools/port-drayage-webservice/src/main/resources/static/images/icons/loading.png
new file mode 100755
index 000000000..be53ffa13
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/icons/loading.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/icons/unloading.png b/tools/port-drayage-webservice/src/main/resources/static/images/icons/unloading.png
new file mode 100755
index 000000000..d0ebd94b3
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/icons/unloading.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/logos/CARMA_Streets.png b/tools/port-drayage-webservice/src/main/resources/static/images/logos/CARMA_Streets.png
new file mode 100644
index 000000000..a9e003b2e
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/logos/CARMA_Streets.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/logos/FHWALogo_2.png b/tools/port-drayage-webservice/src/main/resources/static/images/logos/FHWALogo_2.png
new file mode 100644
index 000000000..376ada9f1
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/logos/FHWALogo_2.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/static/images/logos/marad.png b/tools/port-drayage-webservice/src/main/resources/static/images/logos/marad.png
new file mode 100644
index 000000000..b6b326313
Binary files /dev/null and b/tools/port-drayage-webservice/src/main/resources/static/images/logos/marad.png differ
diff --git a/tools/port-drayage-webservice/src/main/resources/templates/_inspection.html b/tools/port-drayage-webservice/src/main/resources/templates/_inspection.html
index b92f5ad73..74aefae9e 100644
--- a/tools/port-drayage-webservice/src/main/resources/templates/_inspection.html
+++ b/tools/port-drayage-webservice/src/main/resources/templates/_inspection.html
@@ -1,25 +1,41 @@
+<h3 class="font-weight-bold">Port Drayage Inspection Area </h3>
+<br>
 <div class="jumbotron" th:if="${@inspectionActions.getCurrentInspection() != null}">
-    <h1 class="display-4">Requested Inspection</h1>
-    <h1 class="h4">
-        Inspection for vehicle : 
-            <strong th:text="${@inspectionActions.getCurrentInspection().getVehicleId()}"></strong> 
-        with container : 
-            <strong th:text="${@inspectionActions.getCurrentInspection().getContainerId()}"></strong>
-    </h1>
-    <hr class="my-4">
-    <p class="lead" th:value="${@inspectionActions.getCurrentInspection().getStatus()}"
-        th:text="|Status : ${@inspectionActions.getCurrentInspection().getStatus()}|"></p>
-    <p class="lead">
-        <button class="btn btn-primary btn-lg btn-block" th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PENDING')}"
-            id="hold-inspection">Request Further Inspection</button>
+    <div class="action-dialog-left">
+        <h4>
+            Vehicle : 
+                <strong th:text="${@inspectionActions.getCurrentInspection().getVehicleId()}"></strong> 
+            with cargo : 
+                <strong th:text="${@inspectionActions.getCurrentInspection().getContainerId()}"></strong>
+        </h4>
+        <h4 class="font-weight-bold" th:text="|Status : ${@inspectionActions.getCurrentInspection().getStatus()}|"></h4>
+        <br>
+        <button 
+            class="btn btn-info btn-lg pl-10 pr-10" to
+            th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PENDING')}"
+            id="hold-inspection">
+            REQUEST FURTHER INSPECTION
+        </button>
 
-        <button class="btn btn-success btn-lg btn-block" 
-        th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PENDING') || @inspectionActions.getCurrentInspection().getStatus().getValue().equals('HOLDING') }"
-            id="complete-inspection">Complete Inspection</button>
-        <div th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PROCEED_TO_HOLDING')}" class="h4 d-flex justify-content-center">Vehicle is proceeding to Holding Area.</div>
-    </p>
+        <button 
+            class="btn btn-success btn-lg pl-10 pr-10" 
+            th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PENDING') 
+                    || @inspectionActions.getCurrentInspection().getStatus().getValue().equals('HOLDING') }"
+            id="complete-inspection">
+            COMPLETE INSPECTION
+        </button>
+        <h4
+            th:if="${@inspectionActions.getCurrentInspection().getStatus().getValue().equals('PROCEED_TO_HOLDING')}" 
+            class="font-italic">
+            Vehicle is proceeding to Holding Area.
+        </h4>
+    </div>
+    <div class="action-dialog-right">
+        <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('STAGING_AREA')}">Staging Area</strong>
+        <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('PORT_AREA')}">Port Area</strong>
+    </div>
 </div>
-<h1 class="display-4">Pending Inspections</h1>
+<h4 class="font-weight-bold" >Pending Inspections</h4>
 <table class="table">
     <thead>
         <tr>
@@ -43,7 +59,7 @@ <h1 class="display-4">Pending Inspections</h1>
     </tbody>
 </table>
 
-<h1 class="display-4">Completed Inspections</h1>
+<h4 class="font-weight-bold">Completed Inspections</h4>
 <table class="table">
     <thead>
         <tr>
@@ -57,7 +73,7 @@ <h1 class="display-4">Completed Inspections</h1>
     <tbody>
         <tr
             th:if="${@inspectionActions.getCompletedInspections().getInspections() == null || @inspectionActions.getCompletedInspections().getInspections().isEmpty() }">
-            <td colspan="3"> No Completed Actions</td>
+            <td colspan="3"> No Completed Inspection</td>
         </tr>
         <tr th:each="action : ${@inspectionActions.getCompletedInspections().getInspections()}">
             <td><span th:text="${action.getVehicleId()}"> </span></td>
@@ -69,6 +85,12 @@ <h1 class="display-4">Completed Inspections</h1>
         </tr>
     </tbody>
 </table>
+<div class="clear-button">
+    <!-- Button trigger clear modal -->
+    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#clearModal">
+        Clear Actions
+    </button>
+</div>
 
 <script  th:inline="javascript">
     /*<![CDATA[*/
diff --git a/tools/port-drayage-webservice/src/main/resources/templates/_loading.html b/tools/port-drayage-webservice/src/main/resources/templates/_loading.html
index cfa8f880e..95247b20e 100644
--- a/tools/port-drayage-webservice/src/main/resources/templates/_loading.html
+++ b/tools/port-drayage-webservice/src/main/resources/templates/_loading.html
@@ -1,23 +1,28 @@
+    <h3 class="font-weight-bold">Port Drayage Loading Area </h3>
+    <br>
     <div class="jumbotron" th:if="${@loadingActions.getCurrentAction() != null}">
-        <h1 class="display-4">Requested Loading Action</h1>
-        <h1 class="h4">
-            Load vehicle : 
-                <strong th:text="${@loadingActions.getCurrentAction().getVehicleId()}"></strong> 
-            with container : 
-                <strong th:text="${@loadingActions.getCurrentAction().getContainerId()}"></strong>
-        </h1>
-        <hr class="my-4">
-        <p class="lead" th:value="${@loadingActions.getCurrentAction().getStatus()}"
-            th:text="|Status : ${@loadingActions.getCurrentAction().getStatus()}|"></p>
-        <p class="lead">
-            <button class="btn btn-primary btn-lg btn-block" th:if="${@loadingActions.getCurrentAction().getStatus().getValue().equals('PENDING')}"
-                id="start-loading">Start Loading</button>
+        <div class="action-dialog-left">
+            <h4>
+                Vehicle : 
+                    <strong th:text="${@loadingActions.getCurrentAction().getVehicleId()}"></strong> 
+                with cargo : 
+                    <strong th:text="${@loadingActions.getCurrentAction().getContainerId()}"></strong>
+            </h4>
+            <h4 class="font-weight-bold" th:text="|Status : ${@loadingActions.getCurrentAction().getStatus()}|"></h4>
+            <br>
+            <button class="btn btn-info btn-lg pl-10 pr-10" th:if="${@loadingActions.getCurrentAction().getStatus().getValue().equals('PENDING')}"
+                id="start-loading">START LOADING</button>
 
-            <button class="btn btn-success btn-lg btn-block" th:if="${@loadingActions.getCurrentAction().getStatus().getValue().equals('LOADING')}"
-                id="complete-loading">Complete Loading</button>
-        </p>
+            <button class="btn btn-success btn-lg pl-10 pr-10" th:if="${@loadingActions.getCurrentAction().getStatus().getValue().equals('LOADING')}"
+                id="complete-loading">COMPLETE LOADING</button>
+        </div>
+        <div class="action-dialog-right">
+            <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('STAGING_AREA')}">Staging Area</strong>
+            <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('PORT_AREA')}">Port Area</strong>
+        </div>
+        
     </div>
-    <h1 class="display-4">Pending Loading Actions</h1>
+    <h4 class="font-weight-bold">Pending Loading Actions</h4>
     <table class="table">
         <thead>
             <tr>
@@ -41,7 +46,7 @@ <h1 class="display-4">Pending Loading Actions</h1>
         </tbody>
     </table>
 
-    <h1 class="display-4">Completed Loading Actions</h1>
+    <h4 class="font-weight-bold">Completed Loading Actions</h4>
     <table class="table">
         <thead>
             <tr>
@@ -67,6 +72,12 @@ <h1 class="display-4">Completed Loading Actions</h1>
             </tr>
         </tbody>
     </table>
+    <div class="clear-button">
+        <!-- Button trigger clear modal -->
+        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#clearModal">
+            Clear Actions
+        </button>
+    </div>
 
 <script th:inline="javascript">
     /*<![CDATA[*/
diff --git a/tools/port-drayage-webservice/src/main/resources/templates/_unloading.html b/tools/port-drayage-webservice/src/main/resources/templates/_unloading.html
index 6bc7f9b21..516ac3815 100644
--- a/tools/port-drayage-webservice/src/main/resources/templates/_unloading.html
+++ b/tools/port-drayage-webservice/src/main/resources/templates/_unloading.html
@@ -1,24 +1,27 @@
-    <div class="jumbotron" th:if="${@unloadingActions.getCurrentAction() != null}">
-        <h1 class="display-4">Requested Unloading Action</h1>
-        <h1 class="h4">
-            Unload vehicle : 
-                <strong th:text="${@unloadingActions.getCurrentAction().getVehicleId()}"></strong> 
-            with container : 
-                <strong th:text="${@unloadingActions.getCurrentAction().getContainerId()}"></strong>
-        </h1>
-        <hr class="my-4">
-        <p class="lead" th:value="${@unloadingActions.getCurrentAction().getStatus()}"
-            th:text="|Status : ${@unloadingActions.getCurrentAction().getStatus()}|"></p>
-        <p class="lead">
-            <button class="btn btn-primary btn-lg btn-block" th:if="${@unloadingActions.getCurrentAction().getStatus().getValue().equals('PENDING')}"
-                id="start-unloading">Start Unloading</button>
+<h3 class="font-weight-bold">Port Drayage Unloading Area </h3>
+<br>
+   <div class="jumbotron" th:if="${@unloadingActions.getCurrentAction() != null}">
+        <div class="action-dialog-left">
+            <h4>
+                Vehicle : 
+                    <strong th:text="${@unloadingActions.getCurrentAction().getVehicleId()}"></strong> 
+                with cargo : 
+                    <strong th:text="${@unloadingActions.getCurrentAction().getContainerId()}"></strong>
+            </h4>
+            <h4 class="font-weight-bold" th:text="|Status : ${@unloadingActions.getCurrentAction().getStatus()}|"></h4>
+            <br>
+            <button class="btn btn-info btn-lg pl-10 pr-10" th:if="${@unloadingActions.getCurrentAction().getStatus().getValue().equals('PENDING')}"
+                id="start-unloading">START UNLOADING</button>
 
-            <button class="btn btn-success btn-lg btn-block" th:if="${@unloadingActions.getCurrentAction().getStatus().getValue().equals('UNLOADING')}"
-                id="complete-unloading">Complete Unloading</button>
-
-        </p>
+            <button class="btn btn-success btn-lg pl-10 pr-10" th:if="${@unloadingActions.getCurrentAction().getStatus().getValue().equals('UNLOADING')}"
+                id="complete-unloading">COMPLETE UNLOADING</button>
+        </div>
+        <div class="action-dialog-right">
+            <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('STAGING_AREA')}">Staging Area</strong>
+            <strong class="font-italic text-info" th:if="${@areaBean.getArea().getName().equals('PORT_AREA')}">Port Area</strong>
+        </div>
     </div>
-    <h1 class="display-4">Pending Unloading Actions</h1>
+    <h4 class="font-weight-bold">Pending Unloading Actions</h4>
     <table class="table">
         <thead>
             <tr>
@@ -42,7 +45,7 @@ <h1 class="display-4">Pending Unloading Actions</h1>
         </tbody>
     </table>
 
-    <h1 class="display-4">Completed Unloading Actions</h1>
+    <h4 class="font-weight-bold" >Completed Unloading Actions</h4>
     <table class="table">
         <thead>
             <tr>
@@ -68,6 +71,12 @@ <h1 class="display-4">Completed Unloading Actions</h1>
             </tr>
         </tbody>
     </table>
+    <div class="clear-button">
+        <!-- Button trigger clear modal -->
+        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#clearModal">
+            Clear Actions
+        </button>
+    </div>
 
 <script th:inline="javascript">
     /*<![CDATA[*/
diff --git a/tools/port-drayage-webservice/src/main/resources/templates/index.html b/tools/port-drayage-webservice/src/main/resources/templates/index.html
index bc02e3020..d18e632b2 100644
--- a/tools/port-drayage-webservice/src/main/resources/templates/index.html
+++ b/tools/port-drayage-webservice/src/main/resources/templates/index.html
@@ -1,115 +1,159 @@
 <!DOCTYPE HTML>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <title>CARMA Freight Web Service</title>
+        <title>CARMA Freight Web Service</title>
+        
+        <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
+        <link th:rel="stylesheet" th:href="@{/css/main.css}"/>
+        <link th:rel="stylesheet" th:href="@{/css/index.css}"/>
+    </head>
 
-    <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
-    <link rel="stylesheet" th:href="@{static/css/main.css}"/>
+    <body>
+        <main role="main" class="container">
+            <div class="container">
+                <div class="content-wrap">
+                    <div class="navigation-bar">
+                        <ul class="nav nav-tabs mt-5 header-left" id="myTabs">
+                            <li class="nav-item">
+                                <a id="loadingNotif" href="#loading" data-url="/loading" class="nav-link tabs active btn" role="button">
+                                    <img th:src="@{/images/icons/loading.png}" class="icons"/>
+                                    <h4 class="tab-label">LOADING</h4>
+                                    <span
+                                            
+                                        th:if="${@loadingActions.waitingActions()} > 0 " 
+                                        th:text="${@loadingActions.waitingActions()}" 
+                                        class="badge rounded-circle bg-warning">
+                                    </span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a  id="unloadingNotif"  href="#unloading" data-url="/unloading" class="nav-link tabs btn" role="button">
+                                    <img th:src="@{/images/icons/unloading.png}" class="icons"/>
+                                    <h4 class="tab-label">UNLOADING</h4>
+                                    <span
+                                        
+                                        th:if="${@unloadingActions.waitingActions()} > 0 " 
+                                        th:text="${@unloadingActions.waitingActions()}" 
+                                        class="badge rounded-circle bg-warning">
+                                    </span>
 
-</head>
-
-<body>
-
-<main role="main" class="container">
-    <div class="container">
+                                </a>
+                            </li>
+                            <li class="nav-item" th:if="${@areaBean.getArea().getName().equals('PORT_AREA')}">
+                                <a   id="inspectionNotif" href="#inspection" data-url="/inspection" class="nav-link tabs btn" role="button">
+                                    <img th:src="@{/images/icons/inspection.png}" class="icons"/>
+                                    <h4 class="tab-label">INSPECTION</h4>
+                                    <span
+                                        th:if="${@inspectionActions.waitingActions()} > 0 " 
+                                        th:text="${@inspectionActions.waitingActions()}" 
+                                        class="badge rounded-circle bg-warning">
+                                    </span>
+                                </a>
+                            </li>   
+                        </ul>
+                        <div class="header-right mt2 mb1">
+                            <img th:src="@{/images/logos/CARMA_Streets.png}" class="logos carma-streets-logo"/>
+                        </div>
+                    </div>
+        
+                    <div class="tab-content pt-3">
+                        <div class="tab-pane active" id="loading"></div>
+                        <div class="tab-pane" id="unloading"></div>
+                        <div class="tab-pane" id="inspection"></div>
+                    </div>
 
-        <div class="row">
-            <div class="col">
-                <ul class="nav nav-tabs mt-5" id="myTabs">
-                    <li class="nav-item"><a href="#loading" data-url="/loading" class="nav-link active">Loading</a></li>
-                    <li class="nav-item"><a href="#unloading" data-url="/unloading" class="nav-link">Unloading</a></li>
-                    <li class="nav-item"><a href="#inspection" data-url="/inspection" class="nav-link">Inspection</a></li>
-                </ul>
-    
-                <div class="tab-content pt-3">
-                    <div class="tab-pane active" id="loading"></div>
-                    <div class="tab-pane" id="unloading"></div>
-                    <div class="tab-pane" id="inspection"></div>
-                </div>
-                <!-- Button trigger modal -->
-                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#clearModal">
-                    Clear Web Service Actions
-                </button>
-                
-                <!-- Modal -->
-                <div class="modal fade" id="clearModal" tabindex="-1" role="dialog" aria-labelledby="clearModalLabel" aria-hidden="true">
-                    <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="clearModalLabel">Caution</h5>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </div>
-                            <div class="modal-body">
-                            Clearing the Web Service Actions will remove all pending, in-progress and completed actions!
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                                <button id="clear-actions"type="button" class="btn btn-warning" data-dismiss="modal">Clear Actions</button>
+                    <br>
+                    
+                    <!-- Clear Modal -->
+                    <div class="modal fade" id="clearModal" tabindex="-1" role="dialog" aria-labelledby="clearModalLabel" aria-hidden="true">
+                        <div class="modal-dialog" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="clearModalLabel">Caution</h5>
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                Clearing the actions will remove all pending, in-progress and completed actions!
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                    <button id="clear-actions"type="button" class="btn btn-warning" data-dismiss="modal">Clear Actions</button>
+                                </div>
                             </div>
                         </div>
                     </div>
-                 </div>
+                </div>
+                <br>
+                <div class="footerPanel">
+                    <div class="logos">
+                        <img th:src="@{/images/logos/FHWALogo_2.png}" class="fhwa-logo"/>
+                        <img th:src="@{/images/logos/marad.png}" class="marad-logo"/>
+                    </div>
+                    <div class="version" >V2X-Hub 6.2</div>
+                    <div class="copyright">Copyright &copy LEIDOS <script>document.write( new Date().getFullYear() );</script> </div>
+                </div>
             </div>
-        </div>
-    
-    </div>
-    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
-    <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
-    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
-    <script>
-        window.setInterval('refresh()', 5000); 	// Call a function every 5000 milliseconds (OR 5 seconds).
-        // Refresh or reload page.
-        function refresh() {
-            $('#loading').load("loading/")
-            $('#unloading').load("unloading/")
-            $('#inspection').load("inspection/")
-
-        }
-
-    </script>
-    <script>
-        $('#myTabs a').click(function (e) {
-            e.preventDefault();
-    
-            var url = $(this).attr("data-url");
-            var href = this.hash;
-            var pane = $(this);
-    
-            // ajax load from data-url
-            $(href).load(url, function (result) {
-                pane.tab('show');
-            });
-        });
-    
-        // load first tab content
-        $('#loading').load($('.nav-link.active').attr("data-url"), function (result) {
-        });
-
-    </script>
-    <script >
-        // Clear Web Service Actions
-        $('#clear-actions').on('click', function (e) {
-            console.log(e)    
-            e.preventDefault();
-            $.ajax({
-                type: 'post',
-                url: 'reset/',
-                success: function () {
+            <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
+            <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
+            <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
+            <script>
+                window.setInterval('refresh()', 2000); 	// Call a function every 5000 milliseconds (OR 5 seconds).
+                // Refresh or reload page.
+                function refresh() {
                     $('#loading').load("loading/")
                     $('#unloading').load("unloading/")
                     $('#inspection').load("inspection/")
+                    $("#loadingNotif").load(" #loadingNotif > *");
+                    $("#unloadingNotif").load(" #unloadingNotif > *");
+                    $("#inspectionNotif").load(" #inspectionNotif > *");
                 }
-            });
-        });
-    </script>
-</main>
-<!-- /.container -->
 
+            </script>
+            <script>
+                $('#myTabs a').click(function (e) {
+                    e.preventDefault();
+            
+                    var url = $(this).attr("data-url");
+                    var href = this.hash;
+                    var pane = $(this);
+            
+                    // ajax load from data-url
+                    $(href).load(url, function (result) {
+                        pane.tab('show');
+                    });
+                });
+            
+                // load first tab content
+                $('#loading').load($('.nav-link.active').attr("data-url"), function (result) {
+                });
+
+            </script>
+            <script>
+                // Clear Web Service Actions
+                $('#clear-actions').on('click', function (e) {
+                    console.log(e)    
+                    e.preventDefault();
+                    $.ajax({
+                        type: 'post',
+                        url: 'uiaction/reset/',
+                        success: function () {
+                            $('#loading').load("loading/")
+                            $('#unloading').load("unloading/")
+                            $('#inspection').load("inspection/")
+                            $("#loadingNotif").load(" #loadingNotif > *");
+                            $("#unloadingNotif").load(" #unloadingNotif > *");
+                            $("#inspectionNotif").load(" #inspectionNotif > *");
+                        }
+                    });
+                });
+            </script>
+        </main>
+        
 
-</body>
+    </body>
 </html>
\ No newline at end of file
diff --git a/tools/port-drayage-webservice/src/main/resources/templates/landing.html b/tools/port-drayage-webservice/src/main/resources/templates/landing.html
new file mode 100644
index 000000000..c51e651de
--- /dev/null
+++ b/tools/port-drayage-webservice/src/main/resources/templates/landing.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <title>CARMA Freight Web Service</title>
+        
+        <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css} "/>
+        <link th:rel="stylesheet" th:href="@{/css/main.css}"/>
+        <link th:rel="stylesheet" th:href="@{/css/landing.css}"/>
+
+    </head>
+
+    <body>
+
+        <main role="main" class="container">
+            <div class="container">
+                <div class="content-wrap">
+                    <div class="main-splash">
+                        <img th:src="@{/images/logos/CARMA_Streets.png}" class="splash-logo"/>
+                    </div>
+                    <br>
+                    <div class="main-splash">
+                        <div  class="alert alert-success alert-custom-splash main-splash-description" role="alertdialog" >
+                            CARMA Streets is a component of CARMA ecosystem, which enables coordination among different transportation users. 
+                            This component provides an interface for Cooperative Driving Automation (CDA) participants to interact with the road and 
+                            port infrastructure. CARMA Streets is also an edge-computing unit that improves the efficiency and performance of the 
+                            Transportation Systems Management and Operations (TSMO) strategies and Port Drayage Operations.
+                        </div>
+                    </div>
+                    <br>
+                    <div class="area-select">
+                        <button id="staging-area" class="btn btn-success btn-lg mr-5 area-select-btn" >STAGING AREA</button>
+                        <button id="port-area" class="btn btn-success btn-lg ml-5 area-select-btn" >PORT AREA</button>
+                    </div>
+                </div>
+                <br>
+                <div class="footerPanel">
+                    <div class="logos">
+                        <img th:src="@{/images/logos/FHWALogo_2.png}" class="fhwa-logo"/>
+                        <img th:src="@{/images/logos/marad.png}" class="marad-logo"/>
+                    </div>
+                    <div class="version" >V2X-Hub 6.2</div>
+                    <div class="copyright">Copyright &copy LEIDOS <script>document.write( new Date().getFullYear() );</script> </div>
+                </div>
+            </div>
+            <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
+            <script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
+            <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
+            <script >
+                // Select Area
+                $('#staging-area').on('click', function (e) {
+                    console.log(e)    
+                    e.preventDefault();
+                    $.ajax({
+                        type: 'post',
+                        url: 'uiaction/area/STAGING_AREA',
+                        success: function () {
+                            window.location.reload()
+                        }
+                    });
+                });
+                // Select Area
+                $('#port-area').on('click', function (e) {
+                    console.log(e)    
+                    e.preventDefault();
+                    $.ajax({
+                        type: 'post',
+                        url: 'uiaction/area/PORT_AREA',
+                        success: function () {
+                           window.location.reload()
+                        }
+                    });
+                });
+            </script>
+
+        </main>
+    </body>
+</html>
\ No newline at end of file