diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index b905a97d2..d4e81a416 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,8 +1,10 @@
 <div class="wrapper">
-	<div class="sidebar" data-color="danger" data-background-color="white">
-			<app-sidebar></app-sidebar>
-			<div class="sidebar-background"></div>
+	<div class="sidebar" data-color="danger" data-background-color="white"
+		data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
+		<app-sidebar></app-sidebar>
+		<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
 		</div>
+	</div>
 	<div class="main-panel">
 		<app-navbar></app-navbar>
 		<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css
index dc91a6610..39652dd14 100644
--- a/dmp-frontend/src/assets/css/demo.css
+++ b/dmp-frontend/src/assets/css/demo.css
@@ -1,322 +1,304 @@
 *:focus {
-  outline: none !important;
+	outline: none !important;
 }
 
 a {
-  color: rgb(106, 164, 217);
+	color: rgb(106, 164, 217);
 }
 
 a:hover {
-  color: rgb(46, 117, 182);
+	color: rgb(46, 117, 182);
 }
 
 h4 {
-  font-size: 1rem;
-  line-height: 1em;
-  font-weight: 500;
+	font-size: 1rem;
+	line-height: 1em;
+	font-weight: 500;
 }
 
 .max-width-136 {
-  max-width: 136px;
+	max-width: 136px;
 }
 
 .max-width-80 {
-  max-width: 80px;
+	max-width: 80px;
 }
 
 .more-icon {
-  color: rgb(209, 209, 209);
-  font-size: 28px;
-  cursor: pointer;
-  /* float: right; */
+	color: rgb(209, 209, 209);
+	font-size: 28px;
+	cursor: pointer;
+	/* float: right; */
 }
 
 .sidebar .sidebar-background {
-  position: absolute;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  display: block;
-  top: 0;
-  left: 0;
-  background-size: cover;
-  background-position: center center;
-  background-color: rgb(157, 157, 158);
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+	width: 100%;
+	display: block;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-position: center center;
+	background-color: rgb(157, 157, 158);
 }
 
 .sidebar .nav p {
-  margin: 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  position: relative;
-  display: block;
-  height: auto;
-  white-space: nowrap;
-  color: rgb(89, 89, 89);
+	margin: 0;
+	line-height: 20px;
+	font-size: 12px;
+	font-weight: 500;
+	position: relative;
+	display: block;
+	height: auto;
+	white-space: nowrap;
+	color: rgb(89, 89, 89);
 }
 
 .sidebar .nav i {
-  font-size: 24px;
-  float: left;
-  margin-right: 7px;
-  line-height: 20px;
-  width: 30px;
-  text-align: center;
-  color: #a1a1a1;
+	font-size: 24px;
+	float: left;
+	margin-right: 7px;
+	line-height: 20px;
+	width: 30px;
+	text-align: center;
+	color: #a1a1a1;
 }
 
-.sidebar[data-color="danger"] li.active > a {
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+.sidebar[data-color="danger"] li.active>a {
+	background-color: #ffffff;
+	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
 }
 
-.sidebar .nav li.active > a i {
-  color: rgb(89, 89, 89);
+.sidebar .nav li.active>a i {
+	color: rgb(89, 89, 89);
 }
 
-.sidebar .nav li a,
-.sidebar .nav li .dropdown-menu a {
-  margin: 5px 15px 5px;
-  border-radius: 3px;
-  color: #3c4858;
-  padding-left: 10px;
-  padding-right: 10px;
-  text-transform: capitalize;
-  font-size: 13px;
-  padding: 10px 5px;
+.sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
+	margin: 5px 15px 5px;
+	border-radius: 3px;
+	color: #3c4858;
+	padding-left: 10px;
+	padding-right: 10px;
+	text-transform: capitalize;
+	font-size: 13px;
+	padding: 10px 5px;
 }
 
 .sidebar .logo:after {
-  content: none;
-  position: absolute;
-  bottom: 0;
-  right: 15px;
-  height: 1px;
-  width: calc(100% - 30px);
-  background-color: rgba(180, 180, 180, 0.3);
+	content: none;
+	position: absolute;
+	bottom: 0;
+	right: 15px;
+	height: 1px;
+	width: calc(100% - 30px);
+	background-color: rgba(180, 180, 180, 0.3);
 }
 
-.form-control,
-.is-focused .form-control {
-  background-image: none;
+.form-control, .is-focused .form-control {
+	background-image: none;
 }
 
 .navbar form .btn {
-  margin-bottom: 0;
-  padding-left: 5px;
+	margin-bottom: 0;
+	padding-left: 5px;
 }
 
 .navbar .notification {
-  position: absolute;
-  top: 5px;
-  border: 1px solid #fff;
-  right: 5px;
-  font-size: 9px;
-  background: rgb(192, 0, 0);
-  color: #ffffff;
-  min-width: 20px;
-  padding: 0px 5px;
-  height: 20px;
-  border-radius: 10px;
-  text-align: center;
-  line-height: 19px;
-  vertical-align: middle;
-  display: block;
+	position: absolute;
+	top: 5px;
+	border: 1px solid #fff;
+	right: 5px;
+	font-size: 9px;
+	background: rgb(192, 0, 0);
+	color: #ffffff;
+	min-width: 20px;
+	padding: 0px 5px;
+	height: 20px;
+	border-radius: 10px;
+	text-align: center;
+	line-height: 19px;
+	vertical-align: middle;
+	display: block;
 }
 
 .card-icon {
-  cursor: pointer;
+	cursor: pointer;
 }
 
-.card .card-header-default .card-icon,
-.card .card-header-default .card-text,
-.card .card-header-default:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
-  background: linear-gradient(60deg, #fff, #fff);
+.card .card-header-default .card-icon, .card .card-header-default .card-text, .card .card-header-default:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
+	background: linear-gradient(60deg, #fff, #fff);
 }
 
-.card .card-header-default .card-icon,
-.card .card-header-default:not(.card-header-icon):not(.card-header-text),
-.card .card-header-default .card-text {
-  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
+.card .card-header-default .card-icon, .card .card-header-default:not(.card-header-icon):not(.card-header-text), .card .card-header-default .card-text {
+	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
 
-.card .card-header-plain .card-icon,
-.card .card-header-plain .card-text,
-.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
-  background: linear-gradient(60deg, #fff, #fff);
+.card .card-header-plain .card-icon, .card .card-header-plain .card-text, .card .card-header-plain:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
+	background: linear-gradient(60deg, #fff, #fff);
 }
 
-.card .card-header-plain .card-icon,
-.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
-.card .card-header-plain .card-text {
-  -webkit-box-shadow: none;
-  box-shadow: none;
+.card .card-header-plain .card-icon, .card .card-header-plain:not(.card-header-icon):not(.card-header-text), .card .card-header-plain .card-text {
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
-.card .card-header-blue .card-icon,
-.card .card-header-blue .card-text,
-.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
-  background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182));
+.card .card-header-blue .card-icon, .card .card-header-blue .card-text, .card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
+	background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182));
 }
 
-.card .card-header-blue .card-icon,
-.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
-.card .card-header-blue .card-text {
-  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
+.card .card-header-blue .card-icon, .card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card .card-header-blue .card-text {
+	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
+	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
 
 .card-stats .card-header.card-header-icon i {
-  font-size: 36px;
-  line-height: 56px;
-  width: 56px;
-  height: 56px;
-  text-align: center;
-  color: rgb(138, 170, 195);
+	font-size: 36px;
+	line-height: 56px;
+	width: 56px;
+	height: 56px;
+	text-align: center;
+	color: rgb(138, 170, 195);
 }
 
-.card [class*="card-header-"] .card-icon,
-.card [class*="card-header-"] .card-text {
-  border-radius: 5px;
-  /* background-color: #999999; */
-  padding: 15px;
-  margin-top: -20px;
-  margin-right: 15px;
-  float: left;
+.card [class*="card-header-"] .card-icon, .card [class*="card-header-"] .card-text {
+	border-radius: 5px;
+	/* background-color: #999999; */
+	padding: 15px;
+	margin-top: -20px;
+	margin-right: 15px;
+	float: left;
 }
 
-.card [class*="card-header-"] .card-title + .card-category {
-  color: #fff;
-  font-size: 12px;
+.card [class*="card-header-"] .card-title+.card-category {
+	color: #fff;
+	font-size: 12px;
 }
 
 .card .card-header .card-title {
-  margin-bottom: 0px;
-  margin-top: 5px;
+	margin-bottom: 0px;
+	margin-top: 5px;
 }
 
 .card-desc h4 {
-  text-transform: uppercase;
+	text-transform: uppercase;
 }
 
 .card-footer .stats {
-  font-size: 12px;
-  line-height: 22px;
-  font-weight: 500;
-  margin-left: 10px;
+	font-size: 12px;
+	line-height: 22px;
+	font-weight: 500;
+	margin-left: 10px;
 }
 
 .card-stats .card-header .card-category:not([class*="text-"]) {
-  display: block;
-  color: #999999;
-  font-size: 13px;
-  /* font-size: 9px; */
-  /* font-weight: 500; */
+	display: block;
+	color: #999999;
+	font-size: 13px;
+	/* font-size: 9px; */
+	/* font-weight: 500; */
 }
 
 .card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
-  border-radius: 5px;
-  margin-top: -20px;
-  padding: 15px;
-  /* border: 1px solid rgb(231, 230, 230); */
+	border-radius: 5px;
+	margin-top: -20px;
+	padding: 15px;
+	/* border: 1px solid rgb(231, 230, 230); */
 }
 
 .card [class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
-  border-radius: 5px;
-  margin-top: -20px;
-  padding: 15px;
-  border: 1px solid rgb(231, 230, 230);
+	border-radius: 5px;
+	margin-top: -20px;
+	padding: 15px;
+	border: 1px solid rgb(231, 230, 230);
 }
 
 .card-desc {
-  display: inline-block;
+	display: inline-block;
 }
 
 .view-all {
-  display: inline-block;
-  float: right;
-  margin-top: 10px;
-  margin-right: 10px;
-  font-weight: 400;
-  cursor: pointer;
-  text-transform: uppercase;
-  color: rgb(106, 164, 217);
+	display: inline-block;
+	float: right;
+	margin-top: 10px;
+	margin-right: 10px;
+	font-weight: 400;
+	cursor: pointer;
+	text-transform: uppercase;
+	color: rgb(106, 164, 217);
 }
 
 .view-all:hover {
-  color: rgb(46, 117, 182);
+	color: rgb(46, 117, 182);
 }
 
 .card-header-plain h4 {
-  color: black !important;
+	color: black !important;
 }
 
 .card-header-plain p {
-  color: #999999 !important;
+	color: #999999 !important;
 }
 
 .text-default {
-  color: rgb(120, 173, 220) !important;
+	color: rgb(120, 173, 220) !important;
 }
 
 .table thead th {
-  font-size: 0.95rem;
-  font-weight: 400;
-  border-top-width: 0;
-  border-bottom-width: 1px;
+	font-size: 0.95rem;
+	font-weight: 400;
+	border-top-width: 0;
+	border-bottom-width: 1px;
 }
 
 .card .card-body {
-  padding: 0.8rem 20px;
-  position: relative;
+	padding: 0.8rem 20px;
+	position: relative;
 }
 
-table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
-  padding: 8px 8px;
-  vertical-align: middle;
+table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
+	padding: 8px 8px;
+	vertical-align: middle;
 }
 
 .nav-link {
-  display: block;
-  padding: 0;
-  font-weight: 400;
+	display: block;
+	padding: 0;
+	font-weight: 400;
 }
 
 .nav-item {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .navbar.navbar-absolute {
-  position: absolute;
-  width: 100%;
-  z-index: 0;
+	position: absolute;
+	width: 100%;
+	z-index: 0;
 }
 
 .fixed-top {
-  z-index: 0;
+	z-index: 0;
 }
 
 .form-control:focus {
-  color: #495057;
-  background-color: rgba(0, 0, 0, 0);
-  border-color: none;
-  outline: none;
-  box-shadow: none;
+	color: #495057;
+	background-color: rgba(0, 0, 0, 0);
+	border-color: none;
+	outline: none;
+	box-shadow: none;
+}
+
+.sidebar .sidebar-background:after {
+	position: absolute;
+	z-index: 3;
+	width: 100%;
+	height: 100%;
+	content: "";
+	display: block;
+	background: rgba(250, 250, 250, 0.95);
+	opacity: .93;
 }
diff --git a/dmp-frontend/src/assets/images/logan-troxell-9187-unsplash.jpg b/dmp-frontend/src/assets/images/logan-troxell-9187-unsplash.jpg
new file mode 100644
index 000000000..97c229def
Binary files /dev/null and b/dmp-frontend/src/assets/images/logan-troxell-9187-unsplash.jpg differ
diff --git a/dmp-frontend/src/assets/images/main_nav_bg_LQ.PNG b/dmp-frontend/src/assets/images/main_nav_bg_LQ.PNG
new file mode 100644
index 000000000..92ee21470
Binary files /dev/null and b/dmp-frontend/src/assets/images/main_nav_bg_LQ.PNG differ