diff --git a/cmd/web-app/static/assets/css/sb-admin-2.css b/cmd/web-app/static/assets/css/sb-admin-2.css
index 6fce59a..0c62825 100755
--- a/cmd/web-app/static/assets/css/sb-admin-2.css
+++ b/cmd/web-app/static/assets/css/sb-admin-2.css
@@ -3243,6 +3243,28 @@ input[type="button"].btn-block {
   width: 100%;
 }
 
+.text-blue {
+    color: #4e73df;
+}
+.text-green {
+    color: #1cc88a;
+}
+.text-aqua {
+    color: #36b9cc;
+}
+.text-orange {
+    color: #f6c23e;
+}
+.text-red {
+    color: #e74a3b;
+}
+.text-purple {
+    color: #52489C;
+}
+.text-pink {
+    color: #D741A7;
+}
+
 .fade {
   -webkit-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
@@ -10606,7 +10628,7 @@ a:focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding-top: 70px;
+  padding-top: 0px;
 }
 
 #wrapper #content-wrapper {
@@ -10621,6 +10643,14 @@ a:focus {
   flex: 1 0 auto;
 }
 
+#wrapper.website {
+  padding-top: 70px;
+}
+
+#page-content {
+    padding-bottom: 5em;
+}
+
 .container,
 .container-fluid {
   padding-left: 1.5rem;
@@ -10970,7 +11000,7 @@ a:focus {
   border: 0;
   font-weight: 900;
   content: '\f105';
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'FontAwesome';
 }
 
 .sidebar .nav-item.dropdown.show .dropdown-toggle::after,
@@ -11247,7 +11277,7 @@ a:focus {
 .sidebar #sidebarToggle::after {
   font-weight: 900;
   content: '\f104';
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'FontAwesome';
   margin-right: 0.1rem;
 }
 
@@ -11266,7 +11296,7 @@ a:focus {
 
 .sidebar.toggled #sidebarToggle::after {
   content: '\f105';
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'FontAwesome';
   margin-left: 0.25rem;
 }
 
@@ -11350,7 +11380,7 @@ a:focus {
     border: 0;
     font-weight: 900;
     content: '\f107';
-    font-family: 'Font Awesome 5 Free';
+    font-family: 'FontAwesome';
   }
   .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
     content: '\f105';
@@ -11531,6 +11561,11 @@ a:focus {
   color: rgba(255, 255, 255, 0.5);
 }
 
+#buildinfo {
+    margin-top: 2em;
+    font-size: 12px;
+}
+
 .btn-circle {
   border-radius: 100%;
   height: 2.5rem;
@@ -11622,7 +11657,7 @@ a:focus {
   line-height: 51px;
   font-weight: 900;
   content: '\f107';
-  font-family: 'Font Awesome 5 Free';
+  font-family: 'FontAwesome';
   color: #d1d3e2;
 }
 
diff --git a/cmd/web-app/static/images/example-image-resize-galaxy-3000x1600.png b/cmd/web-app/static/images/example-image-resize-galaxy-3000x1600.png
new file mode 100644
index 0000000..d8d1851
Binary files /dev/null and b/cmd/web-app/static/images/example-image-resize-galaxy-3000x1600.png differ
diff --git a/cmd/web-app/templates/content/account-update.gohtml b/cmd/web-app/templates/content/account-update.gohtml
index ddcaaba..0b27332 100644
--- a/cmd/web-app/templates/content/account-update.gohtml
+++ b/cmd/web-app/templates/content/account-update.gohtml
@@ -3,134 +3,156 @@
 
 {{end}}
 {{define "content"}}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Update Account Settings</h1>
+    </div>
+
     <form class="user" method="post" novalidate>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col">
 
-                <h3>Account Details</h3>
-                <div class="spacer-15"></div>
+                <div class="card shadow mb-4">
+                    <div class="card-body">
 
-                <div class="form-group row">
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Name" }}" name="Name" value="{{ $.form.Name }}" placeholder="Company Name" required>
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Address1" }}" name="Address1" value="{{ $.form.Address1 }}" placeholder="Address Line 1" required>
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Address1" }}
-                    </div>
-                    <div class="col-sm-6">
-                        <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Address2" }}" name="Address2" value="{{ $.form.Address2 }}" placeholder="Address Line 2">
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Address2" }}
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <div class="form-control-select-wrapper">
-                            <select class="form-control form-control-select-box {{ ValidationFieldClass $.validationErrors "Country" }}" id="selectAccountCountry" name="Country" placeholder="Country" required>
-                                {{ range $i := $.countries }}
-                                    {{ $hasGeonames := false }}
-                                    {{ range $c := $.geonameCountries }}
-                                        {{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
+                        <div class="form-group row">
+                            <div class="col-sm-6">
+                                <label for="AccountName">Account Name</label>
+                                <input type="text" id="AccountName" class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}" name="Name" value="{{ $.form.Name }}" placeholder="Company Name" required>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <div class="col-sm-6 mb-sm-0">
+                                <label for="AccountAddress1">Address</label>
+                                <input type="text" id="AccountAddress1" class="form-control  {{ ValidationFieldClass $.validationErrors "Address1" }}" name="Address1" value="{{ $.form.Address1 }}" placeholder="Address Line 1" required>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Address1" }}
+                            </div>
+                            <div class="col-sm-6">
+                                <label for="AccountAddress2">&nbsp;</label>
+                                <input type="text" id="AccountAddress2" class="form-control  {{ ValidationFieldClass $.validationErrors "Address2" }}" name="Address2" value="{{ $.form.Address2 }}" placeholder="Address Line 2">
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Address2" }}
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <div class="col-sm-6">
+                                <label for="selectAccountCountry">Country</label>
+                                <div class="">
+                                    <select class="form-control {{ ValidationFieldClass $.validationErrors "Country" }}" id="selectAccountCountry" name="Country" placeholder="Country" required>
+                                        {{ range $i := $.countries }}
+                                            {{ $hasGeonames := false }}
+                                            {{ range $c := $.geonameCountries }}
+                                                {{ if eq $c $i.Code }}{{ $hasGeonames = true }}{{ end }}
+                                            {{ end }}
+                                            <option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames  }}1{{ else }}0{{ end }}" {{ if CmpString $.form.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
+                                        {{ end }}
+                                    </select>
+                                    {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Country" }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <div class="col-sm-4">
+                                <div id="divAccountZipcode"></div>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Zipcode" }}
+                            </div>
+                            <div class="col-sm-4">
+                                <div id="divAccountRegion"></div>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Region" }}
+                            </div>
+                            <div class="col-sm-4">
+                                <label for="inputAccountCity">City</label>
+                                <input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Account.City" }}" id="inputAccountCity" name="City" value="{{ $.form.City }}" placeholder="City" required>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "City" }}
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <div class="col-sm-6">
+                                <label for="inputTimezone">Timezone</label>
+                                <select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}" name="Timezone">
+                                    <option value="">Not set</option>
+                                    {{ range $idx, $t := .timezones }}
+                                        <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
                                     {{ end }}
-                                    <option value="{{ $i.Code }}" data-geonames="{{ if $hasGeonames  }}1{{ else }}0{{ end }}" {{ if CmpString $.form.Country $i.Code }}selected="selected"{{ end }}>{{ $i.Name }}</option>
-                                {{ end }}
-                            </select>
-                            {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Country" }}
+                                </select>
+                                {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div class="card shadow mb-4">
+
+                    <a href="#collapseCardDateTime" class="d-block card-header py-3 collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardDateTime">
+                        <h6 class="m-0 font-weight-bold text-primary">Date & Time Formatting</h6>
+                    </a>
+
+                    <div class="collapse" id="collapseCardDateTime" style="">
+                        <div class="card-body">
+
+                            <div class="form-group">
+                                <label for="inputDatetimeFormat">Datetime Format</label>
+                                <select class="form-control" style="display: none;" id="selectDatetimeFormat">
+                                    <option>2006-01-02 at 3:04PM MST</option>
+                                    <option>Mon Jan _2 15:04:05 2006</option>
+                                    <option>Mon Jan _2 15:04:05 MST 2006</option>
+                                    <option>Mon Jan 02 15:04:05 -0700 2006</option>
+                                    <option>02 Jan 06 15:04 MST</option>
+                                    <option>02 Jan 06 15:04 -0700</option>
+                                    <option>Monday, 02-Jan-06 15:04:05 MST</option>
+                                    <option>Mon, 02 Jan 2006 15:04:05 MST</option>
+                                    <option>Mon, 02 Jan 2006 15:04:05 -0700</option>
+                                    <option>Jan _2 15:04:05</option>
+                                    <option value="custom">Custom</option>
+                                </select>
+                                <input type="text" class="form-control" id="inputDatetimeFormat" placeholder="enter datetime format" name="PreferenceDatetimeFormat" value="{{ .form.PreferenceDatetimeFormat }}">
+                                <label class="form-check-label" for="inputDatetimeFormat"><small>Current Datetime {{ .exampleDisplayTime.Local }}</small></label>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputDateFormat">Date Format</label>
+                                <select class="form-control" style="display: none;" id="selectDateFormat">
+                                    <option>2006-01-02</option>
+                                    <option>Mon Jan _2 2006</option>
+                                    <option>Mon Jan 02 2006</option>
+                                    <option>02 Jan 06</option>
+                                    <option>02 Jan 06</option>
+                                    <option>Monday, 02-Jan-06</option>
+                                    <option>Mon, 02 Jan 2006</option>
+                                    <option>Mon, 02 Jan 2006</option>
+                                    <option>Jan _2</option>
+                                    <option value="custom">Custom</option>
+                                </select>
+                                <input type="text" class="form-control" id="inputDateFormat" placeholder="enter date format" name="PreferenceDateFormat" value="{{ .form.PreferenceDateFormat }}">
+                                <label class="form-check-label" for="inputDateFormat"><small>Current Date {{ .exampleDisplayTime.LocalDate }}</small></label>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputTimeFormat">Time Format</label>
+                                <select class="form-control" style="display: none;" id="selectTimeFormat">
+                                    <option>3:04PM</option>
+                                    <option>3:04PM MST</option>
+                                    <option>3:04PM -0700</option>
+                                    <option>15:04:05</option>
+                                    <option>15:04:05 MST</option>
+                                    <option>15:04:05 -0700</option>
+                                    <option value="custom">Custom</option>
+                                </select>
+                                <input type="text" class="form-control" id="inputTimeFormat" placeholder="enter time format" name="PreferenceTimeFormat" value="{{ .form.PreferenceTimeFormat }}">
+                                <label class="form-check-label" for="inputDatetimeFormat"><small>Current Time {{ .exampleDisplayTime.LocalTime }}</small></label>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="form-group row">
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <div id="divAccountZipcode"></div>
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Zipcode" }}
-                    </div>
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <div id="divAccountRegion"></div>
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Region" }}
-                    </div>
-                </div>
-                <div class="form-group row mb-4">
-                    <div class="col-sm-6 mb-3 mb-sm-0">
-                        <input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Account.City" }}" id="inputAccountCity" name="City" value="{{ $.form.City }}" placeholder="City" required>
-                        {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "City" }}
-                    </div>
+
                 </div>
             </div>
-            <div class="col-md-6">
 
-                <h3>Account Settings</h3>
-                <div class="spacer-15"></div>
-
-                <div class="form-group">
-                    <label for="inputTimezone">Timezone</label>
-                    <select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}" name="Timezone">
-                        <option value="">Not set</option>
-                        {{ range $idx, $t := .timezones }}
-                            <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
-                        {{ end }}
-                    </select>
-                    {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
-                </div>
-                <div class="form-group">
-                    <label for="inputDatetimeFormat">Datetime Format</label>
-                    <select style="display: none;" id="selectDatetimeFormat">
-                        <option>2006-01-02 at 3:04PM MST</option>
-                        <option>Mon Jan _2 15:04:05 2006</option>
-                        <option>Mon Jan _2 15:04:05 MST 2006</option>
-                        <option>Mon Jan 02 15:04:05 -0700 2006</option>
-                        <option>02 Jan 06 15:04 MST</option>
-                        <option>02 Jan 06 15:04 -0700</option>
-                        <option>Monday, 02-Jan-06 15:04:05 MST</option>
-                        <option>Mon, 02 Jan 2006 15:04:05 MST</option>
-                        <option>Mon, 02 Jan 2006 15:04:05 -0700</option>
-                        <option>Jan _2 15:04:05</option>
-                        <option value="custom">Custom</option>
-                    </select>
-                    <input type="text" class="form-control" id="inputDatetimeFormat" placeholder="enter datetime format" name="PreferenceDatetimeFormat" value="{{ .form.PreferenceDatetimeFormat }}">
-                    <label class="form-check-label" for="inputDatetimeFormat"><small>Current Datetime {{ .exampleDisplayTime.Local }}</small></label>
-                </div>
-                <div class="form-group">
-                    <label for="inputDateFormat">Date Format</label>
-                    <select style="display: none;" id="selectDateFormat">
-                        <option>2006-01-02</option>
-                        <option>Mon Jan _2 2006</option>
-                        <option>Mon Jan 02 2006</option>
-                        <option>02 Jan 06</option>
-                        <option>02 Jan 06</option>
-                        <option>Monday, 02-Jan-06</option>
-                        <option>Mon, 02 Jan 2006</option>
-                        <option>Mon, 02 Jan 2006</option>
-                        <option>Jan _2</option>
-                        <option value="custom">Custom</option>
-                    </select>
-                    <input type="text" class="form-control" id="inputDateFormat" placeholder="enter date format" name="PreferenceDateFormat" value="{{ .form.PreferenceDateFormat }}">
-                    <label class="form-check-label" for="inputDateFormat"><small>Current Date {{ .exampleDisplayTime.LocalDate }}</small></label>
-                </div>
-                <div class="form-group">
-                    <label for="inputTimeFormat">Time Format</label>
-                    <select style="display: none;" id="selectTimeFormat">
-                        <option>3:04PM</option>
-                        <option>3:04PM MST</option>
-                        <option>3:04PM -0700</option>
-                        <option>15:04:05</option>
-                        <option>15:04:05 MST</option>
-                        <option>15:04:05 -0700</option>
-                        <option value="custom">Custom</option>
-                    </select>
-                    <input type="text" class="form-control" id="inputTimeFormat" placeholder="enter time format" name="PreferenceTimeFormat" value="{{ .form.PreferenceTimeFormat }}">
-                    <label class="form-check-label" for="inputDatetimeFormat"><small>Current Time {{ .exampleDisplayTime.LocalTime }}</small></label>
-                </div>
-            </div>
         </div>
 
-
-        <div class="spacer-30"></div>
         <div class="row">
             <div class="col">
                 <input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
+                <a href="/account" class="ml-2 btn btn-secondary" >Cancel</a>
             </div>
         </div>
     </form>
@@ -149,7 +171,7 @@
                 if ($(this).find('option:selected').attr('data-geonames') == 1) {
 
                     // Replace the existing region with an empty dropdown.
-                    $('#divAccountRegion').html('<div class="form-control-select-wrapper"><select class="form-control form-control-select-box {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" placeholder="Region" required></select></div>');
+                    $('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><div class=""><select class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" placeholder="Region" required></select></div>');
 
                     // Query the API for a list of regions for the selected
                     // country and populate the region dropdown.
@@ -172,7 +194,7 @@
                     });
 
                     // Replace the existing zipcode text input with a new one that will supports autocomplete.
-                    $('#divAccountZipcode').html('<input class="form-control  form-control-user {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode"  name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
+                    $('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input class="form-control  {{ ValidationFieldClass $.validationErrors "Account.Zipcode" }}" id="inputAccountZipcode"  name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
                     $('#inputAccountZipcode').autoComplete({
                         minLength: 2,
                         events: {
@@ -210,10 +232,10 @@
                 } else {
 
                     // Replace the existing zipcode input with no autocomplete.
-                    $('#divAccountZipcode').html('<input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Zipcode" }}" id="inputAccountZipcode"  name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
+                    $('#divAccountZipcode').html('<label for="inputAccountZipcode">Zipcode</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Zipcode" }}" id="inputAccountZipcode"  name="Zipcode" value="{{ $.form.Zipcode }}" placeholder="Zipcode" required>');
 
                     // Replace the existing region select with a text input.
-                    $('#divAccountRegion').html('<input type="text" class="form-control form-control-user {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" value="{{ $.form.Region }}" placeholder="Region" required>');
+                    $('#divAccountRegion').html('<label for="inputAccountRegion">Region</label><input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Region" }}" id="inputAccountRegion" name="Region" value="{{ $.form.Region }}" placeholder="Region" required>');
 
                 }
 
diff --git a/cmd/web-app/templates/content/account-view.gohtml b/cmd/web-app/templates/content/account-view.gohtml
index 70c7dec..62f76ad 100644
--- a/cmd/web-app/templates/content/account-view.gohtml
+++ b/cmd/web-app/templates/content/account-view.gohtml
@@ -3,50 +3,81 @@
 
 {{end}}
 {{define "content"}}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Account</h1>
+        <!-- a href="/account/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->
+    </div>
+
     <div class="row">
-        <div class="col-auto">
-            <a href="/account/update" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
-        </div>
-    </div>
-    <div class="spacer-30"></div>
-    <div class="row">
-        <div class="col-md-6">
-            <p>
-                <small>Name</small><br/>
-                <b>{{ .account.Name }}</b>
-            </p>
-            {{ if .account.City }}
-                <p>
-                    <small>Address</small><br/>
-                    {{if .account.Address1 }}
-                        <b>{{ .account.Address1 }}{{ if  .account.Address2 }},{{  .account.Address2 }}{{ end }}</b>
-                        <br/>
-                    {{end}}
-                    <b>{{ .account.City }}, {{ .account.Region }}, {{ .account.Zipcode }}</b>
-                </p>
-            {{end}}
-            <p>
-                <small>Timezone</small><br/>
-                <b>{{.account.Timezone }}</b>
-            </p>
-        </div>
-        <div class="col-md-6">
-            <p>
-                <small>Status</small><br/>
-                <b>
-                    {{ if eq .account.Status.Value "active" }}
-                        <span class="text-green"><i class="fas fa-circle"></i>{{ .account.Status.Title }}</span>
-                    {{else}}
-                        <span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
-                    {{end}}
-                </b>
-            </p>
-            <p>
-                <small>ID</small><br/>
-                <b>{{ .account.ID }}</b>
-            </p>
+        <div class="col">
+
+            <div class="card shadow mb-4">
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">Account Details</h6>
+                    <div class="dropdown no-arrow show">
+                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink" x-placement="bottom-end" style="position: absolute; transform: translate3d(-156px, 19px, 0px); top: 0px; left: 0px; will-change: transform;">
+                            <div class="dropdown-header">Actions</div>
+                            <a class="dropdown-item" href="/account/update">Update Account Details</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body">
+
+                    <div class="row">
+                        <div class="col-md-6">
+                            <p>
+                                <small>Name</small><br/>
+                                <b>{{ .account.Name }}</b>
+                            </p>
+                            {{ if .account.City }}
+                                <p>
+                                    <small>Address</small><br/>
+                                    {{if .account.Address1 }}
+                                        <b>{{ .account.Address1 }}{{ if  .account.Address2 }},{{  .account.Address2 }}{{ end }}</b>
+                                        <br/>
+                                    {{end}}
+                                    <b>{{ .account.City }}, {{ .account.Region }}, {{ .account.Zipcode }}</b>
+                                    {{ if .account.Country }}
+                                        <br/><b>{{ .account.Country }}</b>
+                                    {{end}}
+                                </p>
+                            {{end}}
+                            <p>
+                                <small>Timezone</small><br/>
+                                <b>{{.account.Timezone }}</b>
+                            </p>
+                        </div>
+                        <div class="col-md-6">
+                            <p>
+                                <small>Status</small><br/>
+                                <b>
+                                    {{ if eq .account.Status.Value "active" }}
+                                        <span class="text-green"><i class="fas fa-circle"></i>{{ .account.Status.Title }}</span>
+                                    {{else}}
+                                        <span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
+                                    {{end}}
+                                </b>
+                            </p>
+                            <p>
+                                <small>ID</small><br/>
+                                <b>{{ .account.ID }}</b>
+                            </p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+
         </div>
     </div>
+
+
+
 {{end}}
 {{define "js"}}
 
diff --git a/cmd/web-app/templates/content/error-generic.gohtml b/cmd/web-app/templates/content/error-generic.gohtml
index c499ddd..04d1e00 100644
--- a/cmd/web-app/templates/content/error-generic.gohtml
+++ b/cmd/web-app/templates/content/error-generic.gohtml
@@ -2,7 +2,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container-fluid">
 
         <!-- Error Text -->
diff --git a/cmd/web-app/templates/content/examples-images.gohtml b/cmd/web-app/templates/content/examples-images.gohtml
index 38b02e2..057e019 100644
--- a/cmd/web-app/templates/content/examples-images.gohtml
+++ b/cmd/web-app/templates/content/examples-images.gohtml
@@ -4,37 +4,40 @@
 {{end}}
 {{define "content"}}
 
-    <p>S3ImgSrcLarge
-        <img {{ S3ImgSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <h3>S3ImgSrcLarge</h3>
+    <p>320, 480, 800</p>
+    <img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
 
-    <p>S3ImgThumbSrcLarge
-        <img {{ S3ImgThumbSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <h3>S3ImgThumbSrcLarge</h3>
+    <p>320, 480, 800</p>
+    <img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
 
-    <p>S3ImgSrcMedium
-        <img {{ S3ImgSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <h3>S3ImgSrcMedium</h3>
+    <p>320, 640</p>
+    <img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
 
-    <p>S3ImgThumbSrcMedium
-        <img {{ S3ImgThumbSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <h3>S3ImgThumbSrcMedium</h3>
+    <p>320, 640</p>
+    <img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
 
-    <p>S3ImgSrcSmall
-        <img {{ S3ImgSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
 
-    <p>S3ImgThumbSrcSmall
-        <img {{ S3ImgThumbSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <h3>S3ImgSrcSmall</h3>
+    <p>320</p>
+    <img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
 
-    <p>S3ImgSrc
-        <img {{ S3ImgSrc $._ctx "/assets/images/glacier-example-pic.jpg" $.imgSizes }}/>
-    </p>
 
-    <p>S3ImgUrl
-        <img src="{{ S3ImgUrl $._ctx "/assets/images/glacier-example-pic.jpg" 200 }}" />
-    </p>
+    <h3>S3ImgThumbSrcSmall</h3>
+    <p>320</p>
+    <img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
+
+    <h3>S3ImgSrc</h3>
+    <p>returns Src array</p>
+    <img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/>
+
+    <h3>S3ImgUrl</h3>
+    <p>Returns URL for file on S3</p>
+    <img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" />
+
 
 {{end}}
 {{define "js"}}
diff --git a/cmd/web-app/templates/content/root-dashboard.gohtml b/cmd/web-app/templates/content/root-dashboard.gohtml
index 57d4b88..427c4c9 100644
--- a/cmd/web-app/templates/content/root-dashboard.gohtml
+++ b/cmd/web-app/templates/content/root-dashboard.gohtml
@@ -3,39 +3,27 @@
 
 {{end}}
 {{define "content"}}
-    Welcome to the web app
 
-    <p>S3ImgSrcLarge
-        <img {{ S3ImgSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
 
-    <p>S3ImgThumbSrcLarge
-        <img {{ S3ImgThumbSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
+    </div>
 
-    <p>S3ImgSrcMedium
-        <img {{ S3ImgSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
 
-    <p>S3ImgThumbSrcMedium
-        <img {{ S3ImgThumbSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+    <div class="row">
+        <div class="col">
 
-    <p>S3ImgSrcSmall
-        <img {{ S3ImgSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+            <div class="card">
+                <div class="card-body">
 
-    <p>S3ImgThumbSrcSmall
-        <img {{ S3ImgThumbSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
-    </p>
+                    <p>Welcome to the web app</p>
 
-    <p>S3ImgSrc
-        <img {{ S3ImgSrc $._ctx "/assets/images/glacier-example-pic.jpg" $.imgSizes }}/>
-    </p>
+                </div>
+            </div>
+
+        </div>
+    </div>
 
-    <p>S3ImgUrl
-        <img src="{{ S3ImgUrl $._ctx "/assets/images/glacier-example-pic.jpg" 200 }}" />
-    </p>
 
 
 {{end}}
diff --git a/cmd/web-app/templates/content/signup-step1.gohtml b/cmd/web-app/templates/content/signup-step1.gohtml
index bb6b009..12a2c21 100644
--- a/cmd/web-app/templates/content/signup-step1.gohtml
+++ b/cmd/web-app/templates/content/signup-step1.gohtml
@@ -3,7 +3,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <div class="card o-hidden border-0 shadow-lg my-5">
diff --git a/cmd/web-app/templates/content/user-login.gohtml b/cmd/web-app/templates/content/user-login.gohtml
index e70fbf5..614a39b 100644
--- a/cmd/web-app/templates/content/user-login.gohtml
+++ b/cmd/web-app/templates/content/user-login.gohtml
@@ -3,7 +3,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <!-- Outer Row -->
diff --git a/cmd/web-app/templates/content/user-reset-confirm.gohtml b/cmd/web-app/templates/content/user-reset-confirm.gohtml
index 07f1f05..3d869df 100644
--- a/cmd/web-app/templates/content/user-reset-confirm.gohtml
+++ b/cmd/web-app/templates/content/user-reset-confirm.gohtml
@@ -3,7 +3,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <!-- Outer Row -->
diff --git a/cmd/web-app/templates/content/user-reset-password.gohtml b/cmd/web-app/templates/content/user-reset-password.gohtml
index 3867a7c..a1464e3 100644
--- a/cmd/web-app/templates/content/user-reset-password.gohtml
+++ b/cmd/web-app/templates/content/user-reset-password.gohtml
@@ -3,7 +3,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <!-- Outer Row -->
diff --git a/cmd/web-app/templates/content/user-switch-account.gohtml b/cmd/web-app/templates/content/user-switch-account.gohtml
index 460ab05..a2db167 100644
--- a/cmd/web-app/templates/content/user-switch-account.gohtml
+++ b/cmd/web-app/templates/content/user-switch-account.gohtml
@@ -2,7 +2,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <!-- Outer Row -->
diff --git a/cmd/web-app/templates/content/user-update.gohtml b/cmd/web-app/templates/content/user-update.gohtml
index 75a9eda..24f66c4 100644
--- a/cmd/web-app/templates/content/user-update.gohtml
+++ b/cmd/web-app/templates/content/user-update.gohtml
@@ -3,6 +3,11 @@
 
 {{end}}
 {{define "content"}}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Update My Profile</h1>
+    </div>
+
     <form class="user" method="post" novalidate>
         <div class="row">
             <div class="col-md-6">
@@ -29,19 +34,27 @@
                             <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
                         {{ end }}
                     </select>
-                    {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
+                    {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
                 </div>
             </div>
         </div>
+        <div class="row mt-2">
+            <div class="col">
+                <input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
+                <a href="/user" class="ml-2 btn btn-secondary" >Cancel</a>
+            </div>
+        </div>
+    </form>
 
-        <div class="row">
+    <form class="user" method="post" novalidate>
+        <div class="row mt-5">
             <div class="col-md-6">
                 <h4 class="card-title">Change Password</h4>
                 <p><small><b>Optional</b>. You can change your password by specifying a new one below. Otherwise leave the fields empty.</small></p>
                 <div class="form-group">
                     <label for="inputPassword">Password</label>
                     <input type="password" class="form-control" id="inputPassword" placeholder="" name="Password" value="">
-                    <span class="help-block "><small><a a href="javascript:void(0)" id="btnGeneratePassword"><i class="fal fa-random"></i>Generate random password </a></small></span>
+                    <span class="help-block "><small><a a href="javascript:void(0)" id="btnGeneratePassword"><i class="fas fa-random mr-1"></i>Generate random password </a></small></span>
                     {{template "invalid-feedback" dict "validationDefaults" $.passwordValidationDefaults "validationErrors" $.validationErrors "fieldName" "Password" }}
                 </div>
                 <div class="form-group">
@@ -51,10 +64,9 @@
                 </div>
             </div>
         </div>
-        <div class="spacer-30"></div>
-        <div class="row">
+        <div class="row mt-2">
             <div class="col">
-                <input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
+                <input id="btnSubmit2" type="submit" name="action" value="Change Password" class="btn btn-primary"/>
             </div>
         </div>
     </form>
diff --git a/cmd/web-app/templates/content/user-view.gohtml b/cmd/web-app/templates/content/user-view.gohtml
index 373eaf6..8d1022d 100644
--- a/cmd/web-app/templates/content/user-view.gohtml
+++ b/cmd/web-app/templates/content/user-view.gohtml
@@ -3,6 +3,13 @@
 
 {{end}}
 {{define "content"}}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">My Profile</h1>
+        <a href="/user/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a>
+    </div>
+
+
     <div class="row">
         <div class="col">
             <div class="row">
@@ -10,23 +17,15 @@
                     <img src="{{ .user.Gravatar.Medium }}" alt="gravatar image" class="rounded">
                 </div>
                 <div class="col">
-                    <h4>Name</h4>
-                    <p class="font-14">
-                        {{ .user.Name }}
-                    </p>
+                    <h4>{{ .user.Name }}</h4>
+                    <p><small><a href="https://gravatar.com" target="_blank">Update Avatar</a></small></p>
                 </div>
             </div>
-            <div class="spacer-10"></div>
-            <p class="font-10"><a href="https://gravatar.com" target="_blank">Update Avatar</a></p>
-        </div>
-        <div class="col-auto">
-            <a href="/user/update" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
         </div>
     </div>
 
-    <div class="spacer-30"></div>
 
-    <div class="row">
+    <div class="row mt-5">
         <div class="col-md-6">
             <p>
                 <small>Name</small><br/>
@@ -42,7 +41,6 @@
                     <b>{{.user.Timezone }}</b>
                 </p>
             {{end}}
-            <div class="spacer-15"></div>
         </div>
         <div class="col-md-6">
             <p>
@@ -51,9 +49,9 @@
                     <b>
                         {{ range $r := .userAccount.Roles }}
                             {{ if eq $r "admin" }}
-                                <span class="text-pink-dark"><i class="far fa-user-astronaut"></i>{{ $r }}</span>
+                                <span class="text-pink"><i class="far fa-kiss-wink-heart mr-1"></i>{{ $r }}</span>
                             {{else}}
-                                <span class="text-purple-dark"><i class="fal fa-user"></i>{{ $r }}</span>
+                                <span class="text-purple"><i class="far fa-user-circle mr-1"></i>{{ $r }}</span>
                             {{end}}
                         {{ end }}
                     </b>
@@ -64,11 +62,11 @@
                 {{ if .userAccount }}
                     <b>
                         {{ if eq .userAccount.Status.Value "active" }}
-                            <span class="text-green"><i class="fas fa-circle"></i>{{ .userAccount.Status.Title }}</span>
+                            <span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .userAccount.Status.Title }}</span>
                         {{ else if eq .userAccount.Status.Value "invited" }}
-                            <span class="text-blue"><i class="fas fa-unicorn"></i>{{ .userAccount.Status.Title }}</span>
+                            <span class="text-aqua"><i class="far fa-dot-circle mr-1"></i>{{ .userAccount.Status.Title }}</span>
                         {{else}}
-                            <span class="text-orange"><i class="far fa-circle"></i>{{.userAccount.Status.Title }}</span>
+                            <span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.userAccount.Status.Title }}</span>
                         {{end}}
                     </b>
                 {{ end }}
diff --git a/cmd/web-app/templates/content/user-virtual-login.gohtml b/cmd/web-app/templates/content/user-virtual-login.gohtml
index db24a4a..c73f183 100644
--- a/cmd/web-app/templates/content/user-virtual-login.gohtml
+++ b/cmd/web-app/templates/content/user-virtual-login.gohtml
@@ -2,7 +2,7 @@
 {{define "style"}}
 
 {{end}}
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <div class="container" id="page-content">
 
         <!-- Outer Row -->
diff --git a/cmd/web-app/templates/layouts/base.gohtml b/cmd/web-app/templates/layouts/base.gohtml
index af124f5..488c043 100644
--- a/cmd/web-app/templates/layouts/base.gohtml
+++ b/cmd/web-app/templates/layouts/base.gohtml
@@ -41,7 +41,7 @@
     </head>
     <body id="page-top">
 
-        {{ template "partials/page-wrapper" . }}
+        {{ template "partials/app-wrapper" . }}
 
         <!-- ============================================================== -->
         <!--  Logout Modal                                                  -->
diff --git a/cmd/web-app/templates/layouts/site.gohtml b/cmd/web-app/templates/layouts/site.gohtml
index a1f05bd..bb6d767 100644
--- a/cmd/web-app/templates/layouts/site.gohtml
+++ b/cmd/web-app/templates/layouts/site.gohtml
@@ -54,7 +54,7 @@
         <!-- ============================================================== -->
         <!-- Page Wrapper                                                   -->
         <!-- ============================================================== -->
-        <div id="wrapper">
+        <div id="wrapper" class="website">
 
             <!-- ============================================================== -->
             <!-- Content Wrapper                                                -->
diff --git a/cmd/web-app/templates/partials/sidebar.tmpl b/cmd/web-app/templates/partials/app-sidebar.tmpl
similarity index 99%
rename from cmd/web-app/templates/partials/sidebar.tmpl
rename to cmd/web-app/templates/partials/app-sidebar.tmpl
index c1bc627..0d0a295 100644
--- a/cmd/web-app/templates/partials/sidebar.tmpl
+++ b/cmd/web-app/templates/partials/app-sidebar.tmpl
@@ -1,4 +1,4 @@
-{{ define "partials/sidebar" }}
+{{ define "partials/app-sidebar" }}
     <!-- Sidebar -->
     <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
diff --git a/cmd/web-app/templates/partials/topbar.tmpl b/cmd/web-app/templates/partials/app-topbar.tmpl
similarity index 99%
rename from cmd/web-app/templates/partials/topbar.tmpl
rename to cmd/web-app/templates/partials/app-topbar.tmpl
index e27cc26..ad62963 100644
--- a/cmd/web-app/templates/partials/topbar.tmpl
+++ b/cmd/web-app/templates/partials/app-topbar.tmpl
@@ -1,4 +1,4 @@
-{{ define "partials/topbar" }}
+{{ define "partials/app-topbar" }}
     <!-- Topbar -->
     <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
 
@@ -192,7 +192,7 @@
                             </a>
                         {{ end }}
 
-                        <a class="dropdown-item" href="/support">
+                        <a class="dropdown-item" href="/support" target="_blank">
                             <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                             Support
                         </a>
diff --git a/cmd/web-app/templates/partials/page-wrapper.tmpl b/cmd/web-app/templates/partials/app-wrapper.tmpl
similarity index 83%
rename from cmd/web-app/templates/partials/page-wrapper.tmpl
rename to cmd/web-app/templates/partials/app-wrapper.tmpl
index 9f45e5f..09b9a66 100644
--- a/cmd/web-app/templates/partials/page-wrapper.tmpl
+++ b/cmd/web-app/templates/partials/app-wrapper.tmpl
@@ -1,9 +1,9 @@
-{{ define "partials/page-wrapper" }}
+{{ define "partials/app-wrapper" }}
     <!-- ============================================================== -->
     <!-- Page Wrapper                                                   -->
     <!-- ============================================================== -->
     <div id="wrapper">
-        {{ template "partials/sidebar" . }}
+        {{ template "partials/app-sidebar" . }}
 
         <!-- ============================================================== -->
         <!-- Content Wrapper                                                -->
@@ -18,7 +18,7 @@
                 <!-- ============================================================== -->
                 <!-- Topbar                                                         -->
                 <!-- ============================================================== -->
-                {{ template "partials/topbar" . }}
+                {{ template "partials/app-topbar" . }}
                 <!-- End of Topbar -->
 
                 <!-- ============================================================== -->
@@ -40,13 +40,13 @@
             <!-- Footer                                                         -->
             <!-- ============================================================== -->
             <footer class="sticky-footer bg-white">
-                <div class="container my-auto">
-                    <div class="copyright text-center my-auto">
-                            <span>
-                                &copy; Copyright 2019 Geeks Accelerator<br/>
-                                {{ template "partials/buildinfo" . }}
-                            </span>
+                <div class="container-fluid">
+                    <div class="copyright ">
+                            <span>&copy; Copyright 2019 Geeks Accelerator</span>
                     </div>
+
+                    {{ template "partials/buildinfo" . }}
+
                 </div>
             </footer>
             <!-- End of Footer -->
diff --git a/cmd/web-app/templates/partials/buildinfo.tmpl b/cmd/web-app/templates/partials/buildinfo.tmpl
index 62d318e..d96d9c6 100644
--- a/cmd/web-app/templates/partials/buildinfo.tmpl
+++ b/cmd/web-app/templates/partials/buildinfo.tmpl
@@ -1,5 +1,5 @@
 {{ define "partials/buildinfo" }}
-    <p style="font-size: 12px;{{if eq ._Service.ENV "prod"}}display: none;{{end}}">
+    <p id="buildinfo" style="{{if eq ._Service.ENV "prod"}}display: none;{{end}}">
         {{if ne ._Service.BuildInfo.CiCommitTag ""}}
             Tag: {{ ._Service.BuildInfo.CiCommitRefName }}@{{ ._Service.BuildInfo.CiCommitSha }}<br/>
         {{else}}