diff --git a/cmd/web-app/static/assets/css/custom.css b/cmd/web-app/static/assets/css/custom.css
index a387a4b..4086a26 100644
--- a/cmd/web-app/static/assets/css/custom.css
+++ b/cmd/web-app/static/assets/css/custom.css
@@ -23,6 +23,18 @@ div.dataTables_wrapper div.dataTables_filter label {
     margin-bottom: 0px;
 }
 
+
+div.dataTables_wrapper div.dataTables_filter input {
+    font-size: .8rem;
+    font-weight: 400;
+    border-radius: 0.35rem;
+    font-weight: normal;
+    border: 1px solid rgb(166, 166, 166);
+    color: #858796;
+}
+
+
+
 div.dataTables_wrapper div.dataTables_info {
     flex: 0 0 50%;
     max-width: 50%;
@@ -93,3 +105,7 @@ div.dataTable_card a.paginate_button.current {
     background-color: #007bff;
 }
 
+
+.alert p:last-child {
+    margin-bottom: 0;
+}
diff --git a/cmd/web-app/templates/content/account-view.gohtml b/cmd/web-app/templates/content/account-view.gohtml
index 31ed6f9..a627afa 100644
--- a/cmd/web-app/templates/content/account-view.gohtml
+++ b/cmd/web-app/templates/content/account-view.gohtml
@@ -56,9 +56,9 @@
                                 <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>
+                                        <span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .account.Status.Title }}</span>
                                     {{else}}
-                                        <span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
+                                        <span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.account.Status.Title }}</span>
                                     {{end}}
                                 </b>
                             </p>
diff --git a/cmd/web-app/templates/content/examples-images.gohtml b/cmd/web-app/templates/content/examples-images.gohtml
index 783b192..4fec005 100644
--- a/cmd/web-app/templates/content/examples-images.gohtml
+++ b/cmd/web-app/templates/content/examples-images.gohtml
@@ -5,20 +5,32 @@
 {{define "content"}}
 
     {{ if .imgResizeDisabled }}
-        <h3>Image Resize Not enabled</h3>
 
-        AWS credentials must be set and then the following configs be set as well.
+        <h1 class="h3 text-red">Image Resize Not enabled</h1>
+
+        <p>AWS credentials must be set and then the following configs be set as well.</p>
         <pre>
             export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
             export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
         </pre>
 
     {{ else }}
-        <h3>S3ImgSrcLarge</h3>
-        <p>320, 480, 800</p>
+
+        <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">Responsive Images</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>
+
+        <p>This SaaS Starter Kit includes functions to resize images automatically and render the src of an image tag with an array of source URLs. The functions are custom functions that are rendered with the GO templates.</p>
+
+            <pre class="mb-4">&#x7B;&#x7B; FUNCTION_NAME $._ctx "RELATIVE_PATH_TO_IMAGE_HERE" &#x7D;&#x7D;</pre>
+
+        <h5>S3ImgSrcLarge</h5>
+        <p>Generates an array of three images from the source file with widths of 320, 480 and 800.</p>
         <img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
-        HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
-        Result: <pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
+
+        <p class="mb-0 mt-2">HTML:</p><pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
+        <p class="mb-0">Result:</p><pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre></p>
 
         <h3>S3ImgThumbSrcLarge</h3>
         <p>320, 480, 800</p>
diff --git a/cmd/web-app/templates/content/projects-create.gohtml b/cmd/web-app/templates/content/projects-create.gohtml
index f089585..333a222 100644
--- a/cmd/web-app/templates/content/projects-create.gohtml
+++ b/cmd/web-app/templates/content/projects-create.gohtml
@@ -3,23 +3,36 @@
 
 {{end}}
 {{define "content"}}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Create Project</h1>
+    </div>
+
     <form class="user" method="post" novalidate>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="inputName">Name</label>
-                    <input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
-                           placeholder="enter name" name="Name" id="inputName" value="{{ .form.Name }}" required>
-                    {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
+
+        <div class="card shadow">
+            <div class="card-body">
+
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="inputName">Project Name</label>
+                            <input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
+                                   placeholder="Enter name for your project" name="Name" id="inputName" value="{{ .form.Name }}" required>
+                            {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="spacer-30"></div>
-        <div class="row">
+
+        <div class="row mt-4">
             <div class="col">
                 <input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
+                <a href="/projects" class="ml-2 btn btn-secondary" >Cancel</a>
             </div>
         </div>
+
     </form>
 {{end}}
 {{define "js"}}
diff --git a/cmd/web-app/templates/content/projects-index.gohtml b/cmd/web-app/templates/content/projects-index.gohtml
index 899bd4b..0c8cb76 100644
--- a/cmd/web-app/templates/content/projects-index.gohtml
+++ b/cmd/web-app/templates/content/projects-index.gohtml
@@ -1,12 +1,17 @@
 {{define "title"}}Projects{{end}}
 {{define "content"}}
-    {{ if HasRole $._Ctx "admin" }}
-        <a href="{{ .urlProjectsCreate }}">Create Project</a>
-    {{ end }}
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Projects</h1>
+        {{ if HasRole $._Ctx "admin" }}
+            <a href="{{ .urlProjectsCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-folder-plus fa-sm text-white-50 mr-1"></i>Create Project</a>
+        {{ end }}
+    </div>
+
     <div class="row">
         <div class="col">
             <form method="post">
-                <div class="card">
+                <div class="card shadow">
                     <div class="table-responsive dataTable_card">
                         {{ template "partials/datatable/html" . }}
                     </div>
diff --git a/cmd/web-app/templates/content/projects-update.gohtml b/cmd/web-app/templates/content/projects-update.gohtml
index 0a2325f..7c8c921 100644
--- a/cmd/web-app/templates/content/projects-update.gohtml
+++ b/cmd/web-app/templates/content/projects-update.gohtml
@@ -3,8 +3,25 @@
 
 {{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 Project</h1>
+    </div>
+
     <form class="user" method="post" novalidate>
-        <div class="row">
+
+        <div class="card shadow mb-4">
+            <div class="card-body">
+
+                <div class="row mb-2">
+                    <div class="col-12">
+
+                        <h4 class="card-title">Project Details</h4>
+                    </div>
+                </div>
+
+
+                <div class="row">
             <div class="col-md-6">
                 <div class="form-group">
                     <label for="inputName">Name</label>
@@ -24,7 +41,10 @@
                 </div>
             </div>
         </div>
-        <div class="spacer-30"></div>
+
+            </div>
+        </div>
+
         <div class="row">
             <div class="col">
                 <input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
diff --git a/cmd/web-app/templates/content/projects-view.gohtml b/cmd/web-app/templates/content/projects-view.gohtml
index d24be75..f1ba213 100644
--- a/cmd/web-app/templates/content/projects-view.gohtml
+++ b/cmd/web-app/templates/content/projects-view.gohtml
@@ -3,54 +3,61 @@
 
 {{end}}
 {{define "content"}}
-    <div class="row">
-        <div class="col">
-            <div class="row">
-                <div class="col">
-                    <h4>Name</h4>
-                    <p class="font-14">
-                        {{ .project.Name }}
-                    </p>
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">{{ .project.Name }}</h1>
+        <!-- a href="{{ .urlProjectsUpdate }}" 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="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-dark">Project 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="{{ .urlProjectsUpdate }}">Update Details</a>
+                    {{ if HasRole $._Ctx "admin" }}
+                        <form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive Project" class="dropdown-item"></form>
+                    {{ end }}
                 </div>
             </div>
         </div>
-        <div class="col-auto">
-            <a href="{{ .urlProjectsUpdate }}" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
-            {{ if HasRole $._Ctx "admin" }}
-                <form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive"></form>
-            {{ end }}
+        <div class="card-body">
+
+            <div class="row">
+                <div class="col-md-6">
+                    <p>
+                        <small>Name</small><br/>
+                        <b>{{ .project.Name }}</b>
+                    </p>
+                    <p>
+                        <small>Status</small><br/>
+                        {{ if .project }}
+                            <b>
+                                {{ if eq .project.Status.Value "active" }}
+                                    <span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .project.Status.Title }}</span>
+                                {{else}}
+                                    <span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.project.Status.Title }}</span>
+                                {{end}}
+                            </b>
+                        {{ end }}
+                    </p>
+                </div>
+                <div class="col-md-6">
+
+                    <p>
+                        <small>ID</small><br/>
+                        <b>{{ .project.ID }}</b>
+                    </p>
+                </div>
+            </div>
+
         </div>
     </div>
 
-    <div class="spacer-30"></div>
-
-    <div class="row">
-        <div class="col-md-6">
-            <p>
-                <small>Name</small><br/>
-                <b>{{ .project.Name }}</b>
-            </p>
-            <div class="spacer-15"></div>
-        </div>
-        <div class="col-md-6">
-            <p>
-                <small>Status</small><br/>
-                {{ if .project }}
-                    <b>
-                        {{ if eq .project.Status.Value "active" }}
-                            <span class="text-green"><i class="fas fa-circle"></i>{{ .project.Status.Title }}</span>
-                        {{else}}
-                            <span class="text-orange"><i class="far fa-circle"></i>{{.project.Status.Title }}</span>
-                        {{end}}
-                    </b>
-                {{ end }}
-            </p>
-            <p>
-                <small>ID</small><br/>
-                <b>{{ .project.ID }}</b>
-            </p>
-        </div>
-    </div>
 {{end}}
 {{define "js"}}
 
diff --git a/cmd/web-app/templates/content/users-create.gohtml b/cmd/web-app/templates/content/users-create.gohtml
index 9ceb2f9..298866b 100644
--- a/cmd/web-app/templates/content/users-create.gohtml
+++ b/cmd/web-app/templates/content/users-create.gohtml
@@ -13,7 +13,6 @@
         <div class="card shadow">
             <div class="card-body">
 
-
                 <div class="row">
                     <div class="col-md-6">
                         <div class="form-group">
@@ -55,6 +54,24 @@
 
                         <div class="form-group">
                             <label for="inputRoles">Roles</label>
+                            <span class="help-block "><small>- Select at least one role.</small></span>
+
+                            {{ range $r := .roles.Options }}
+                                {{ $selectRole := false }}
+                                {{ range $fr := $.form.Roles }}
+                                    {{ if eq $r.Value $fr }}{{ $selectRole = true }}{{ end }}
+                                {{ end }}
+
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" value="{{ $r.Value }}" id="defaultCheck1" {{ if $selectRole  }}checked="checked"{{ end }}>
+                                    <label class="form-check-label" for="defaultCheck1">
+                                        {{ $r.Title }}
+                                    </label>
+                                </div>
+                            {{ end }}
+
+
+
                             <select class="form-control {{ ValidationFieldClass $.validationErrors "Roles" }}" id="inputRoles" name="Roles" multiple="multiple">
                                 {{ range $r := .roles.Options }}
                                     {{ $selectRole := false }}
diff --git a/cmd/web-app/templates/content/users-update.gohtml b/cmd/web-app/templates/content/users-update.gohtml
index 928cfac..b58ab35 100644
--- a/cmd/web-app/templates/content/users-update.gohtml
+++ b/cmd/web-app/templates/content/users-update.gohtml
@@ -48,6 +48,7 @@
                     </select>
                     {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
                 </div>
+
             </div>
         </div>
 
diff --git a/cmd/web-app/templates/layouts/base.gohtml b/cmd/web-app/templates/layouts/base.gohtml
index bc0a0be..1f2607f 100644
--- a/cmd/web-app/templates/layouts/base.gohtml
+++ b/cmd/web-app/templates/layouts/base.gohtml
@@ -3,7 +3,7 @@
     <html lang="en">
     <head>
         <title>
-            {{block "title" .}}{{end}} Web App
+            {{block "title" .}}{{end}} - SaaS Web App
         </title>
 
         <meta charset="utf-8">