From 978dbcf0a196acbafad72fe1e2478ec0e384f02f Mon Sep 17 00:00:00 2001
From: "Christopher Lott (cl778h)" <clott@research.att.com>
Date: Wed, 23 Aug 2017 18:27:19 -0400
Subject: Deliver centralized role management feature

Repair multiple defects also.
Revise deployment to use docker-compose.
Remove all zip archives.

Issue: PORTAL-21, PORTAL-25, PORTAL-28, PORTAL-52, PORTAL-69,
    PORTAL-74, PORTAL-76, PORTAL-80, PORTAL-82
Change-Id: Ie72fec7d35ba78beb162bba6ed27b2caee340c61
Signed-off-by: Christopher Lott (cl778h) <clott@research.att.com>
---
 .../account-add-details/account-add-details.html   |   81 +-
 .../account-add-details/account-add-details.js     |   27 +-
 .../account-add-details/account-add-details.less   |   13 +-
 .../account-onboarding.controller.js               |   28 +-
 .../add-admin-dialogs/new-admin.controller.js      |   15 +-
 .../admins/add-admin-dialogs/new-admin.modal.html  |  131 ++-
 .../admins/add-admin-dialogs/new-admin.modal.less  |   51 +-
 .../client/app/views/admins/admins.controller.js   |   48 +-
 .../client/app/views/admins/admins.tpl.html        |    4 +-
 .../application-details.modal.less                 |   13 +-
 .../add-catalog-dialogs/new-catalog.modal.less     |  132 +++
 .../client/app/views/catalog/catalog.less          |   23 +-
 .../client/app/views/catalog/catalog.tpl.html      |   66 +-
 .../admin-confirmation-box.tpl.html                |   27 +-
 .../confirmation-box.controller.js                 |   22 +-
 .../confirmation-box/confirmation-box.tpl.html     |   26 +-
 .../dragdrop-confirmation-box.tpl.html             |   27 +-
 .../confirmation-box/information-box.tpl.html      |   22 +-
 .../confirmation-box/reload-page-confirm.html      |   36 +
 .../views/dashboard/dashboard-widget-manage.html   |   78 +-
 .../dashboard-widget-parameter-manage.html         |   28 +-
 .../dashboard-widget-parameters.controller.js      |    8 +-
 .../dashboard/dashboard-widget.controller.less     |   57 +-
 .../app/views/dashboard/dashboard.controller.js    |   43 +-
 .../client/app/views/dashboard/dashboard.less      |   43 +-
 .../client/app/views/dashboard/dashboard.tpl.html  |   33 +-
 .../menu-details.controller.js                     |  178 ++--
 .../functionalMenu-dialog/menu-details.modal.html  |   83 +-
 .../functionalMenu-dialog/modal-details.modal.less |   28 +-
 .../app/views/functionalMenu/functionalMenu.less   |   48 +-
 .../client/app/views/header/header.controller.js   |   71 +-
 .../client/app/views/header/header.less            |   31 +
 .../client/app/views/header/header.tpl.html        |   36 +-
 .../microservice-add-details.html                  |   60 +-
 .../microservice-add-details.js                    |   13 +-
 .../microservice-add-details.less                  |   48 +-
 .../microservice-onboarding.controller.js          |   25 +-
 .../notificationhistory.controller.js              |   55 +-
 .../notification-history/notificationhistory.less  |   11 +
 .../notificationhistory.tpl.html                   |    6 +-
 .../new-portal-admin.controller.js                 |    8 +-
 .../new-portal-admin/new-portal-admin.modal.html   |   42 +-
 .../new-portal-admin/new-portal-admin.modal.less   |    2 +-
 .../views/portal-admin/portal-admin-controller.js  |   24 +-
 .../app/views/portal-admin/portal-admin.tpl.html   |   12 +-
 .../app/views/role/popup_modal_rolefunction.html   |   95 +-
 .../client/app/views/role/role-controller.js       |  212 ++--
 .../views/role/role-function-list-controller.js    |  165 +--
 .../client/app/views/role/role-list-controller.js  |   72 +-
 .../client/app/views/role/role.html                |   37 +-
 .../client/app/views/role/role.less                |   25 +-
 .../app/views/role/role_childrole_popup.html       |   19 +-
 .../client/app/views/role/role_function_list.html  |   11 +-
 .../app/views/role/role_functions_popup.html       |   38 +-
 .../client/app/views/role/role_list.html           |   27 +-
 .../app/views/role/rolefunctionpopupController.js  |  156 +--
 .../app/views/role/rolepopupmodelController.js     |   33 +-
 .../client/app/views/search/search.less            |    8 +
 .../contact-us-manage.controller.less              |   46 +
 .../contact-us-manage/contact-us-manage.html       |  255 ++---
 .../support/contact-us/contact-us.controller.js    |   33 +-
 .../app/views/support/contact-us/contact-us.less   |   40 +
 .../views/support/contact-us/contact-us.tpl.html   |   22 +-
 .../client/app/views/tabs/tabframe.html            |    2 +-
 .../client/app/views/tabs/tabs.less                |   31 +-
 .../user.notifications.Json.details.controller.js  |   13 +-
 ...user.notifications.Json.details.modal.page.html |   76 +-
 .../user.notifications.controller.js               |  123 +--
 ...user.notifications.json.details.modal.page.less |   37 +-
 .../user.notifications.less                        |   16 +
 .../user.notifications.modal.controller.js         | 1085 ++++++++++----------
 .../user.notifications.modal.less                  |   32 +-
 .../user.notifications.modal.page.html             |  181 ++--
 .../user.notifications.tpl.html                    |   17 +-
 .../users/new-user-dialogs/bulk-user.ack.html      |    2 +-
 .../users/new-user-dialogs/bulk-user.confirm.html  |   22 +-
 .../users/new-user-dialogs/bulk-user.controller.js |   15 +-
 .../users/new-user-dialogs/bulk-user.modal.html    |   81 +-
 .../users/new-user-dialogs/bulk-user.modal.less    |    5 +-
 .../users/new-user-dialogs/new-user.controller.js  |   27 +-
 .../users/new-user-dialogs/new-user.modal.html     |  143 ++-
 .../users/new-user-dialogs/new-user.modal.less     |   62 +-
 .../client/app/views/users/users.controller.js     |   56 +-
 .../client/app/views/users/users.tpl.html          |   14 +-
 .../widget-details.controller.js                   |   18 +-
 .../widget-details.modal.html                      |   85 +-
 .../widget-details.modal.less                      |   13 +-
 .../widget-onboarding.controller.js                |   27 +-
 .../widget-details.modal.html                      |    4 +-
 .../widget-details.modal.less                      |    7 +-
 90 files changed, 3206 insertions(+), 2145 deletions(-)
 create mode 100644 ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
 create mode 100644 ecomp-portal-FE-common/client/app/views/confirmation-box/reload-page-confirm.html

(limited to 'ecomp-portal-FE-common/client/app/views')

diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
index 3ecb47d0..798b4db1 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.html
@@ -1,9 +1,44 @@
-<div class="account-add-details-modal">
-	<div id="account-add-details-title" class="account-details-title">Account
-		Details</div>
+<style>
+
+.checkbox .skin {
+    left: 0px;
+    top: 0px;
+}
+
+.add-label-right{
+    float: right;
+    margin-top: -17px;
+}
+
+.endpoint-item-left{
+width:75%;
+padding-bottom:10px;
+}
+.icon-circle-action-remove {
+ float: right;
+    margin-top: -27px;
+}
+.item{
+padding-bottom:15px;
+}
+.account-property{
+padding-top:10px;
+}
+</style>
+
+<div>
+
+		<div class="b2b-modal-header">
+			<h2 class="account-details-title" id="account-add-details-title">Account Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="accountdetails-button-cancel"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
 
-	<div id="accounts">
-		<div class="account-properties-main"
+		<div class="b2b-modal-body">
+				<div class="account-properties-main"
 			scroll-top="accountAddDetails.scrollApi">
 			<form id="accounts-details-form" name="serviceForm" novalidate
 				autocomplete="off">
@@ -38,7 +73,7 @@
 					<input id="account-details-input-username" 
 						type="text" name="username" maxlength="100"
 						ng-model="accountAddDetails.account.username"
-						ng-change="accountAddDetails.updateUsername()" />
+						ng-change="accountAddDetails.updateUsername()" autocomplete="off" />
 
 					<div class="error-container"
 						ng-show="(accountAddDetails.emptyAccountUsername 
@@ -53,7 +88,7 @@
 					<div class="item-label">Password</div>
 					<input id="account-details-input-password"
 						type="password" name="password" maxlength="100"
-						ng-model="accountAddDetails.account.password" />
+						ng-model="accountAddDetails.account.password" autocomplete="off"/>
 				</div>
 
 				<div class="item">
@@ -74,7 +109,7 @@
 
 				<div class="add-endpoint-item">
 					<div class="item-label add-label-left">Add Endpoint</div>
-					<div class="icon-add add-label-right"
+					<div class="icon-add add-label-right" id="accountAddDetails-button-accordion"
 						ng-click="accountAddDetails.addEndpoint()"></div>
 				</div>
 				<div class="item">
@@ -104,24 +139,30 @@
 					</div>
 
 					<div class="account-property">
-						<input id="accounts-checkbox-app-is-enabled" type="checkbox"
-							class="checkbox-field"
-							ng-model="accountAddDetails.account.active" />
-						<div class="property-label checkbox-label">Active</div>
-					</div>
-					<div class="item">
-						<div id="account-details-next-button" class="submit-button"
-							ng-click="accountAddDetails.closeThisDialog()">close</div>
-						<div id="account-details-next-button" class="submit-button"
-							ng-click="accountAddDetails.saveChanges()">Save</div>
+						<div class="property-label checkbox-label"> 
+							<label for="accounts-checkbox-app-is-enabled" class="checkbox"> 
+		                		<input type="checkbox" ng-model="accountAddDetails.account.active" id="accounts-checkbox-app-is-enabled"/> 
+		                		<i class="skin"></i> 
+		                		<span>Active</span> 
+		            		</label> 
+						</div>	
 					</div>
+					
 				</div>
 
 			</form>
 		</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group cta-modal-footer-flex">		
+					<div class="item">
+						<div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Close</div>
+						<div id="account-details-next-button" class="btn btn-alt btn-small" ng-click="accountAddDetails.saveChanges()">Save</div>
+					</div>
+				</div>
+			</div>
 
-
-	</div>
 </div>
 
 <script>
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
index 2f9afd39..97e4b703 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.js
@@ -1,14 +1,13 @@
 'use strict';
 (function () {
     class AccountAddDetailsCtrl {
-        constructor($scope, $log, $interval, basicAuthAccountService, errorMessageByCode, ECOMP_URL_REGEX, $window, confirmBoxService, $cookies) {
+        constructor($scope, $log, $interval, basicAuthAccountService, errorMessageByCode, ECOMP_URL_REGEX, $window, confirmBoxService, $cookies,items) {
          
            this.addEndpoint = () => {
            	  this.account.endpointList.push({
            		  valid: true
            	  }); 
            }
-        	
             let init = () => {
             	this.account = [];
                 this.account.endpointList = [];
@@ -16,11 +15,11 @@
                 this.dupliateName = false;
                 this.emptyAccountName = false;
                 this.emptyAccountUsername = false;
-                this.accountList = $scope.ngDialogData.list;
+                this.accountList = items.list;
                 
-                if ($scope.ngDialogData && $scope.ngDialogData.account) {
+                if (items&& items.account) {
                     this.isEditMode = true;
-                    this.account = _.clone($scope.ngDialogData.account);
+                    this.account = _.clone(items.account);
                     this.account.repassword = this.account.password;
                     this.account.endpointList = this.account.endpoints;
                     if(this.account.isActive == 'Y')
@@ -42,9 +41,9 @@
             };
 
             
-            this.closeThisDialog = () => {
+          /*  this.closeThisDialog = () => {
             	$scope.closeThisDialog(true);
-            }
+            }*/
             
             this.removeEndpointItem = (endpoint) => {
         		for(var i = 0; i < this.account.endpointList.length; i++){
@@ -55,10 +54,6 @@
         		}
             }
             
-            this.confirmPassword = () => {
-            	this.passwordMatched =  true;
-            }
-            
             this.updateUsername = () => {
             	this.emptyAccountUsername = false;
             }
@@ -144,13 +139,17 @@
             		confirmBoxService.editItem(message).then(isConfirmed => {
 	            		if(isConfirmed){
 	            			basicAuthAccountService.updateAccount(this.account.id, newAccount).then(() => {
-	                			$scope.closeThisDialog(true);
+                                $scope.$dismiss('cancel');
+                                $window.location.reload();
+
 	                		});
 	           			}
             		});
             	}else{
             		basicAuthAccountService.createAccount(newAccount).then(() => {
-            			$scope.closeThisDialog(true);
+                        $scope.$dismiss('cancel');
+                        $window.location.reload();
+
             		});
             	}
             }
@@ -161,6 +160,6 @@
             });
         }
     }
-    AccountAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'basicAuthAccountService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window', 'confirmBoxService', '$cookies'];
+    AccountAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'basicAuthAccountService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window', 'confirmBoxService', '$cookies','items'];
     angular.module('ecompApp').controller('AccountAddDetailsCtrl', AccountAddDetailsCtrl);
 })(); 
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less
index 6a916d6c..a18be84b 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-add-details/account-add-details.less
@@ -36,7 +36,11 @@
 	        vertical-align: middle;
 	        position: relative;
 	        top: -1px;
-	      } 
+	      }
+	      .checkbox .skin {
+  				left: 0px;
+  				top: 0px;
+			}  
 	    }
 		.add-endpoint-item{
 			position: relative;
@@ -98,10 +102,7 @@
 	          vertical-align: middle;
 	          display:inline-block;
 	          width: 15%;
-	          //border-radius: 2px;
-	          //border: 1px solid @attLGray;
 	          margin-right: 10px;
-	          //background: @attWhite;
 	          white-space: nowrap;
 			  .dGray14r;
        	  }
@@ -110,7 +111,6 @@
 	          width: 45%;
 	          border-radius: 2px;
 	          border: 1px solid;
-	          //background: @attWhite;
 	          vertical-align: middle;
           }
           
@@ -123,7 +123,6 @@
 	          //border-radius: 2px;
 	          //border: 1px solid;
 	          margin-right: 10px;
-	          //background: @attWhite;
 	          white-space: nowrap;
 			  .dGray14r;
        	  }
@@ -148,7 +147,6 @@
 	          display:inline-block;
 	          width: 80%;
 	          margin-right: 10px;
-	          //background: @attWhite;
 	          white-space: nowrap;
 			  .dGray14r;
        	  }
@@ -157,7 +155,6 @@
 	          height: 30px;
 	          display:inline-block;
 	          width: 20%;
-	          //background: @attWhite;
 	          vertical-align: middle;
 	          white-space: nowrap;
 	          .dGray14r;
diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.controller.js
index deed9dc8..38c2bb17 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.controller.js
@@ -1,7 +1,7 @@
 'use strict';
 (function () {
     class AccountOnboardingCtrl {
-        constructor($log, ngDialog, confirmBoxService, basicAuthAccountService, $cookies, $scope) {
+        constructor($log, ngDialog, confirmBoxService, basicAuthAccountService, $cookies, $scope,$modal) {
         	
         	
             let init = () => {
@@ -34,18 +34,24 @@
 						list: $scope.accountList	
 					}
 				}
-                ngDialog.open({
+          		var modalInstance = $modal.open({
                     templateUrl: 'app/views/account-onboarding/account-add-details/account-add-details.html',
-                    controller: 'AccountAddDetailsCtrl',
-                    controllerAs: 'accountAddDetails',
-                    data: data
-                }).closePromise.then(needUpdate => {
+                    controller: 'AccountAddDetailsCtrl as accountAddDetails',
+                    sizeClass: 'modal-medium', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.then(function (needUpdate) {
                 	if(needUpdate.value === true){
                 		if(needUpdate.value === true){
-                			 getOnboardingAccounts();
-                        }
-                    }
-                });
+               			 getOnboardingAccounts();
+                       }
+                  }
+     	        });
             };
             
             
@@ -67,6 +73,6 @@
             init();
         }
     }
-    AccountOnboardingCtrl.$inject = ['$log', 'ngDialog', 'confirmBoxService', 'basicAuthAccountService', '$cookies', '$scope'];
+    AccountOnboardingCtrl.$inject = ['$log', 'ngDialog', 'confirmBoxService', 'basicAuthAccountService', '$cookies', '$scope','$modal'];
     angular.module('ecompApp').controller('AccountOnboardingCtrl', AccountOnboardingCtrl);
 })();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
index 9aec9b4f..a5ba0215 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.controller.js
@@ -21,15 +21,14 @@
 'use strict';
 (function () {
     class NewAdminModalCtrl {
-        constructor($log, adminsService, $scope, confirmBoxService, utilsService, $location) {
-
+        constructor($log, adminsService, $scope, confirmBoxService, utilsService, $location, items) {
             let init = () => {
                 this.isSaving = false;
                 this.originalApps = [];
                 /* istanbul ignore if */
-                if ($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState) {
-                    this.selectedUser = $scope.ngDialogData.selectedUser;
-                    this.dialogState = $scope.ngDialogData.dialogState;
+                if (items && items.selectedUser && items.dialogState) {
+                    this.selectedUser = items.selectedUser;
+                    this.dialogState = items.dialogState;
                     this.isShowBack = false;
                     if (this.dialogState === 2) {
                         this.getAdminAppsRoles();
@@ -162,7 +161,7 @@
                                 $log.debug('Admin apps roles updated successfully!', res);
                                 //close and resolve dialog promise with true (to update the table)
                                 this.remindToAddUserIfNecessary();
-                                $scope.closeThisDialog(true);
+                                $scope.$dismiss('cancel');
                             }).catch(err => {
                             $log.error('NewAdminModalCtrl.updateAdminAppsRoles:: Failed - ' + err);
                         }).finally(()=> {
@@ -193,7 +192,7 @@
              * add it to the user administrated apps list
              */
             $scope.$watch('newAdmin.selectedNewApp.value', (newVal) => {
-                var newVal= JSON.parse(newVal);
+            	if(newVal) var newVal= JSON.parse(newVal);
                 if (!newVal || newVal.isAdmin === undefined) {
                     return;
                 }
@@ -248,6 +247,6 @@
 
         }
     }
-    NewAdminModalCtrl.$inject = ['$log', 'adminsService', '$scope', 'confirmBoxService', 'utilsService', '$location'];
+    NewAdminModalCtrl.$inject = ['$log', 'adminsService', '$scope', 'confirmBoxService', 'utilsService', '$location', 'items'];
     angular.module('ecompApp').controller('NewAdminModalCtrl', NewAdminModalCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
index a18b8f60..f186fc58 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.html
@@ -17,59 +17,102 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="new-admin-modal">
+ <style>
+	.title{
+		border-bottom: none !important;  
+	  }
+	  
+	.b2b-modal-footer .cta-button-group {
+     border-top: 0px solid #d2d2d2;
+	}
+	
+</style>
 
-    <div class="search-users" ng-show="newAdmin.dialogState===1">
+<div>
+	<div ng-if="newAdmin.dialogState===1">
 
-        <search-users search-title="New Admin"
-                      selected-user="newAdmin.selectedUser"></search-users>
+		<div class="b2b-modal-header">
+			<h2 class="heading-medium" id="newAdmin">New Admin</h2>
 
-        <div class="dialog-control">
-              <button id="search-users-button-next" class="btn btn-alt btn-small" ng-click="newAdmin.selectedUser && newAdmin.getAdminAppsRoles()"
-                 ng-class="{disabled: !newAdmin.selectedUser}">Next
-            </button>
-            <button id="search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-        </div>
-    </div>
- <br>
-    <div id="div-admin-app-roles" class="admin-app-roles" ng-show="newAdmin.dialogState===2">
-        <div class="title" id="title"
-             ng-bind="newAdmin.selectedUser.firstName + ' ' + newAdmin.selectedUser.lastName + ' (' + newAdmin.selectedUser.orgUserId + ')'"></div>
-        <div class="app-roles-main">
-            <div id="div-app-roles-main-title" class="app-roles-main-title">
-                <span class="left">Administrates:</span>
-                <!--<span class="right" ng-click="newAdmin.addAdministratedApp()">+Add</span>-->
-            </div>
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="admin-button-cancel" 
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
 
+		<div class="b2b-modal-body" tabindex="0"
+			aria-label="Modal header text content" role="region">
+			<search-users search-title="" selected-user="newAdmin.selectedUser"></search-users>
+		</div>
 
-            <div class="adminAppsRoles_dropdown">
-                 <select id="dropdown1" name="dropdown1" b2b-dropdown
-									placeholder-text="Select application"
-									ng-model="newAdmin.selectedNewApp.value">
-							<option b2b-dropdown-list option-repeat="app in (filteredApps = (newAdmin.adminAppsRoles | filter:{isAdmin:'false'})) track by app.id " ng-disabled="!filteredApps.length"  value="{{app}}">{{app.appName}}</option>
-					 </select>
-            </div>
-               <br>
+		<div class="b2b-modal-footer">
+			<div class="cta-button-group in">
+				<button id="search-users-button-next" class="btn btn-alt btn-small"
+					ng-click="newAdmin.selectedUser && newAdmin.getAdminAppsRoles()"
+					ng-class="{disabled: !newAdmin.selectedUser}">Next</button>
+				<button id="search-users-button-cancel"
+					class="btn btn-alt btn-small" id="div-cancel-button" ng-click="$dismiss('cancel')">Cancel</button>
+			</div>
+		</div>
 
-            <div class="admin-roles-list">
-                <div ng-repeat="app in (newAdmin.adminAppsRoles | orderBy:newAdmin.orderFilter) track by app.id" ng-show="app.isAdmin">
-                    <div id="select-app-{{app.appName.split(' ').join('-')}}" class="administrated-application" ng-bind="app.appName | elipsis: 57"></div>
-                    <i id="i-delete-application" class="icon-misc-trash" ng-click="newAdmin.unadminApp(app)"> </i>
-                </div>
-            </div>
+	</div>
+	
+	<div id="div-admin-app-roles" class="app-roles-main" ng-if="newAdmin.dialogState===2">
+			<div class="b2b-modal-header">
+				<div class="title" id="title"
+					ng-bind="newAdmin.selectedUser.firstName + ' ' + newAdmin.selectedUser.lastName + ' (' + newAdmin.selectedUser.orgUserId + ')'">
+				</div>
 
-            <div class="dialog-control">
-                <span class="ecomp-save-spinner" ng-show="newAdmin.isSaving"></span>              
-                 <button id="button-back" ng-show="newAdmin.isShowBack" class="btn btn-alt btn-small" ng-click="newAdmin.navigateBack()">Back</button>
-                <button id="div-updateAdminAppsRoles" class="btn btn-alt btn-small" ng-click="newAdmin.updateAdminAppsRoles()"
-                     ng-class="{disabled: false}">Save
-                </button>
-                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-            </div>
+				<div class="corner-button in">
+					<button type="button" class="close" aria-label="Close"
+						ng-click="$dismiss('cancel')"></button>
+				</div>
+			</div>
 
-        </div>
 
-    </div>
+			<div class="b2b-modal-body">
+				<div id="div-app-roles-main-title" class="app-roles-main-title">
+					<span class="left">Administrates:</span>
+					<!--<span class="right" ng-click="newAdmin.addAdministratedApp()">+Add</span>-->
+				</div>
+				<div class="adminAppsRoles_dropdown">
+					<select id="dropdown1" name="dropdown1" b2b-dropdown
+						placeholder-text="Select application"
+						ng-model="newAdmin.selectedNewApp.value">
+						<option b2b-dropdown-list
+							option-repeat="app in (filteredApps = (newAdmin.adminAppsRoles | filter:{isAdmin:'false'})) track by app.id "
+							ng-disabled="!filteredApps.length" value="{{app}}">{{app.appName}}</option>
+					</select>
+				</div>
+				<br>
+				<div class="admin-roles-list">
+					<div
+						ng-repeat="app in (newAdmin.adminAppsRoles | orderBy:newAdmin.orderFilter) track by app.id"
+						ng-show="app.isAdmin">
+						<span id="select-app-{{app.appName.split(' ').join('-')}}"
+							class="administrated-application"
+							ng-bind="app.appName | elipsis: 57"></span> <i
+							id="i-delete-application" class="icon-misc-trash"
+							ng-click="newAdmin.unadminApp(app)"> </i>
+					</div>
+				</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group in">
+
+					<span class="ecomp-save-spinner" ng-show="newAdmin.isSaving"></span>
+					<button id="button-back" ng-show="newAdmin.isShowBack"
+						class="btn btn-alt btn-small" ng-click="newAdmin.navigateBack()">Back</button>
+					<button id="div-updateAdminAppsRoles" class="btn btn-alt btn-small"
+						ng-click="newAdmin.updateAdminAppsRoles()"
+						ng-class="{disabled: false}">Save</button>
+					<button id="div-cancel-button" class="btn btn-alt btn-small"
+						ng-click="$dismiss('cancel')">Cancel</button>
+
+				</div>
+			</div>
+	</div>
 
 </div>
 
diff --git a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
index f7c1111d..1ac5963f 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/admins/add-admin-dialogs/new-admin.modal.less
@@ -1,6 +1,7 @@
 .new-admin-modal {
   height: 430px;
   margin-left: 20px;
+  height: 350px;
 
   .search-users {
   }
@@ -8,7 +9,7 @@
   .admin-app-roles {
     .title {
       //.n18r;
-      .dGray18r;  //AT&T Dark Gray
+      .dGray18r;  
       border-bottom: @blue-active 3px solid;
 
     }
@@ -81,5 +82,53 @@
     }
 
   }
+  
+  .adminForm-title {
+  	color: #5a5a5a;
+  	font-size: 18px;
+  	border-bottom: #067ab4 3px solid;
+  	margin-left:0px;
+  }
+  
+  .adminForm-name-property-label {
+  	margin-bottom: 5px;    
+  	color: #5a5a5a;       
+  	font-size: 14px;    
+  	font-weight: bold;    
+  	padding-top: 20px;
+  }
+ 
+  .adminForm-requiredId {
+  	color: red;
+  }
+  
+  .adminForm-name-property-required {
+   		color: #cf2a2a; 
+   		font-size: 10px;
+   }
+   
+   .adminForm-property-required-small {
+   		position: absolute;
+   }
+   
+   .adminForm-code-property-label {
+	  	margin-bottom: 5px;    
+	  	color: #5a5a5a;       
+	  	font-size: 14px;    
+	  	font-weight: bold;    
+	  	padding-top: 20px;
+  }
+  
+  .adminForm-code-property-input {
+	  	display: inline-block; 
+	  	width: 338px; 
+	  	//height: 40px;
+  }
+  
+  .adminForm-code-property-required {
+   		color: #cf2a2a; 
+   		font-size: 10px;
+   }
+   
 }
 
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js
index 05f9db3b..28144ed7 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
     class AdminsCtrl {
-        constructor($log, adminsService, applicationsService, ngDialog) {
+        constructor($log, adminsService, applicationsService, ngDialog, $modal) {
 
             let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};
 
@@ -119,43 +119,23 @@
                         }
                     }
                 }
-                ngDialog.open({
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/admins/add-admin-dialogs/new-admin.modal.html',
-                    controller: 'NewAdminModalCtrl',
-                    controllerAs: 'newAdmin',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                    if(needUpdate.value === true){
-                        // $log.debug('AdminsCtrl:openAddNewAdminModal:: updating table data...');
-                        updateTableData();
-                    }
+                    controller: 'NewAdminModalCtrl as newAdmin',
+                    sizeClass: 'modal-medium', 
+                    resolve: {
+    					items: function () {
+    						return data;
+    			        }
+    		        }
                 });
+                
+                modalInstance.result.finally(function () {
+                	updateTableData();  
+     	        });
             };
-            
-            this.openEditUserModal = (loginId) => {
-            	var data = {
-            			loginId : loginId,
-            	        updateRemoteApp : false,
-            	        appId : this.selectedApp!=null?this.selectedApp.id:''
-            	}
-            	var modalInstance = ngDialog.open({
-                    templateUrl: 'app/views/header/user-edit/edit-user.tpl.html',
-                    controller: 'editUserController',
-                    data: data,
-                    resolve: {
-                        message: function message() {
-                            var message = {
-                                type: 'Contact',
-                            };
-                            return message;
-                        }
-                    }
-                }).closePromise.then(needUpdate => {	              	 
-                	updateTableData();
-	            });       
-            }
         }
     }
-    AdminsCtrl.$inject = ['$log', 'adminsService', 'applicationsService', 'ngDialog'];
+    AdminsCtrl.$inject = ['$log', 'adminsService', 'applicationsService', 'ngDialog', '$modal'];
     angular.module('ecompApp').controller('AdminsCtrl', AdminsCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
index f9ea3ff9..45bd184c 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
@@ -26,14 +26,14 @@
                 <div class="table-control">
                 	 <div class="table-control-fields">		
 						<div class="table-dropdown">
-							<select id="dropdown1" name="dropdown1" b2b-dropdown placeholder-text="All application" ng-model="admins.filterByApp.value">
+							<select id="dropdown1" name="dropdown1" b2b-dropdown ng-model="admins.filterByApp.value">
 				                <option b2b-dropdown-list option-repeat="d in admins.availableApps" value="{{d.value}}">{{d.title}}</option>
 				            </select>
 						</div>
 						<div >
 							<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="admins.searchString">
 						</div>
-						<button class="btn btn-alt btn-small" ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 
+						<button class="btn btn-alt btn-small" id="admin-button-add"  ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 
 					</div>                  
             	</div>
                 <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>
diff --git a/ecomp-portal-FE-common/client/app/views/applications/application-details-dialog/application-details.modal.less b/ecomp-portal-FE-common/client/app/views/applications/application-details-dialog/application-details.modal.less
index 1c8ae297..c580ac6a 100644
--- a/ecomp-portal-FE-common/client/app/views/applications/application-details-dialog/application-details.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/applications/application-details-dialog/application-details.modal.less
@@ -1,9 +1,9 @@
 .application-details-modal {
-  height: 700px;
+ // height: 700px;
 
   .title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r;  
     border-bottom: @blue-active 3px solid;
 
   }
@@ -103,4 +103,13 @@
 
   }
 
+.input-app-image-upload-ht {
+	height: 24px;
+}
+
+.checkbox .skin {
+  				left: 0px;
+  				top: 0px;
+			}
+
 }
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
new file mode 100644
index 00000000..39eb8ab9
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/catalog/add-catalog-dialogs/new-catalog.modal.less
@@ -0,0 +1,132 @@
+.new-catalog-modal {
+  height: 430px;
+
+  .user-catalog-roles{
+    .title{
+      //.n18r;
+      .dGray18r;  //Dark Gray
+      border-bottom: @portalDBlue 3px solid;
+    }
+    
+       input:not([type="button"]) {
+    height: 13px;
+} 
+    .display-userApp-Catalog-Roles
+    {
+    padding-left: 16px;
+    padding-top: 10px;
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 18px;
+    color: #5a5a5a;
+    }
+	
+	#pending-checkbox{	
+	font-family: Omnes-ECOMP-W02,Arial;
+	font-size: 15px; 
+	color: #5a5a5a;
+	}
+    .app-catalog-roles-list{
+      height: 286px;
+      
+      
+      .app-catalog-item{
+        border: 1px solid @portalLGray;
+        border-radius: 2px;
+        background-color: @funcBkgGray;
+
+        padding: 10px;
+        margin-top: 8px;
+        //margin-right: 6px;
+        //margin-left: 6px;
+
+        .app-catalog-item-left{
+          padding-top: 0;
+          line-height: 30px;
+          height: 30px;
+          vertical-align: middle;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          margin-right: 10px;
+          padding-left: 4px;
+          background: @portalWhite;
+          white-space: nowrap;
+
+        }
+        .app-catalog-item-right{
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-error{
+          .portalRed;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-catalog-item-right-contacting{
+          .portalGreen;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+        }
+
+        .app-select-left{
+          width: 45%;
+          margin-right: 10px;
+          vertical-align: middle;
+
+
+          .select-field{
+            padding-top: 0;
+            line-height: 30px;
+            height: 30px;
+            vertical-align: middle;
+            border-radius: 2px;
+            border: 1px solid @portalLGray;
+            margin-right: 10px;
+            padding-left: 4px;
+            background: @portalWhite;
+            display:inline-block;
+          }
+        }
+
+
+        .app-item-delete{
+          .ico_trash_default;
+          display: inline-block;
+          vertical-align: 2px;
+          cursor: pointer;
+          position: relative;
+          top: 6px;
+          color: transparent;
+          margin-left: 8px;
+
+        }
+
+      }
+    }
+
+  }
+  
+ .userApp-Catalog-Roles-value {
+ 	height: 150px; 
+ 	width: 200px; 
+ 	overflow-y: auto;
+ }
+ 
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.less b/ecomp-portal-FE-common/client/app/views/catalog/catalog.less
index dc5e4671..bbff8517 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.less
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.less
@@ -389,9 +389,14 @@ ul {
     right: 10px;
     position: absolute;
 }
+.checkbox input{
+ margin: 6px;
+    left: 112px;
+    top: -20px;
+    }
 .checkbox .skin {
     left: 125px;
-    top: -24px;
+    top: -18px;
 }
 .form-row {
     margin-top: -14px;
@@ -409,5 +414,19 @@ margin-left: 126px;
 .checkbox, .radio {
     min-height: 0px; 
     padding-left: 0px; 
+}
+
+.access-request-txt {
+	text-align: right;
+}
 
-}
\ No newline at end of file
+.catalog-radio-div{ 
+	display:inline-block; 
+	margin-right:5px; 
+} 
+ 
+ 
+.radio input:checked + .skin:after{ 
+	width:22px; 
+	height:22px; 
+}
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
index fd71e59b..d3c10441 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
@@ -23,22 +23,37 @@
 			<h1 class="heading-page">Application Catalog</h1>
 		</div>
 		<div class="app-catalog-list">
-			<div class="simulateCatGridHeader">
-				<span class="simulateCatGridHeaderDetails"> Click the check
-					boxes below to choose which applications are shown on the <a
-					href="applicationsHome">home page</a>.
-				</span> <br> <br> <label id="label-all"
-					class="simulateCatGridHeaderRadio"> Filter: <input
-					id="radio-button-all" type="radio" ng-model="radioValue"
-					value="All"> All
-				</label> <label id="label-accessible" class="simulateCatGridHeaderRadio">
-					<input id="radio-button-accessible" type="radio"
-					ng-model="radioValue" value="Accessible"> Accessible
-				</label> <label id="label-homepage" class="simulateCatGridHeaderRadio">
-					<input id="radio-button-homepage" type="radio"
-					ng-model="radioValue" value="Selected"> On Home Page
-				</label>
-
+			<div class="simulateCatGridHeader"> 
+				<span class="simulateCatGridHeaderDetails"> Click the check 
+					boxes below to choose which applications are shown on the <a 
+					href="applicationsHome">home page</a>. 
+				</span> <br> <br> 
+				<div class="catalog-radio-div"> 
+					<label for="radio-button-all" class="radio"> 
+						<span>Filter: </span> 
+					</label> 
+				</div> 
+				<div class="catalog-radio-div"> 
+					<label for="radio-button-all" class="radio"> 
+		                <input type="radio" ng-model="radioValue" id="radio-button-all" name="All" value="All" > 
+		                <i class="skin"></i> 
+		                <span>All</span> 
+		            </label> 
+				</div> 
+				<div class="catalog-radio-div"> 
+		            <label for="radio-button-accessible" class="radio"> 
+		                <input type="radio" ng-model="radioValue" id="radio-button-accessible" name="Accessible" value="Accessible" > 
+		                <i class="skin"></i> 
+		                <span>Accessible</span> 
+		            </label> 
+	            </div> 
+	            <div class="catalog-radio-div"> 
+		            <label for="radio-button-homepage" class="radio"> 
+		                <input type="radio" ng-model="radioValue" id="radio-button-homepage" name="Selected" value="Selected"> 
+		                <i class="skin"></i> 
+		                <span>On Home Page</span> 
+		            </label> 
+				</div> 
 			</div>
 			<div class="appCatalogue-boarder" >
 				<div gridster="catalog.gridsterOpts">	
@@ -54,12 +69,21 @@
 								            <div class="form-row" ng-show="item.access || isAdminPortalAdmin">
 								                <label class="checkbox">
 								                    <input id="gridster-{{item.headerText.split(' ').join('-')}}-icon-checkbox" type="checkbox" ng-model="item.select" ng-change="catalog.storeSelection(item)">
-								                    <i class="skin"></i> 
+								                    <i id="gridster-{{item.headerText.split(' ').join('-')}}-icon-checkbox" class="skin"></i> 
 								                </label> 
 								                <i ng-show="item.pending" class="icon-tickets-contested"></i>							                      								                
 									</div>
-								</div>								
-								<div ng-include src="'app/views/catalog/get-accessswitch.html'"></div>
+								</div>
+								<div class="gridster-box-content"
+									ng-style="{'cursor':'pointer',
+										'background-image': 'url('+(item.imageLink)+')',
+										'order': item.order, 
+										'background-color':'white',
+										'background-repeat': 'no-repeat',
+										'background-size': '168px 118px'}"
+									ng-click="catalog.openAddRoleModal(item)"
+									ng-hide="users.isLoadingTable && !users.getAppCatalogIsDone">
+								</div>
 							</div>
 						</li>
 					</ul>
@@ -68,9 +92,9 @@
 			
 			<br>
 
-			<div style="text-align: right;">
+			<div class="access-request-txt">
 				To request access to an application, please visit the <a
-				id="get-access-page-link" ng-href="getAccess">Get Access</a> page.
+					id="get-access-page-link" ng-href="getAccess">Get Access</a> page.
 			</div>
 
 			<br>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
index 69f9af84..3d5e8cc2 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/admin-confirmation-box.tpl.html
@@ -17,15 +17,20 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="confirmation-box-container">
-    <div class="confirmation-title-wrap">
-        <div class="confirmation-title" ng-bind="confirmBox.title"></div>
-    </div>
-    <div class="confirmation-message-wrap">
-        <div class="confirmation-message" ng-bind="confirmBox.message"></div>
-    </div>
-    <div class="dialog-control">
-        <div id="confirm-admin-update" class="btn btn-alt btn-small"  ng-click="confirmBox.closeBox(true)">Confirm</div>
-        <div id="cancel-admin-update" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>
-    </div>
+<div>
+	<div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">{{message.title}}</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" id="admin-div-close-button" aria-label="Close" ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+	<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content">
+		{{message.content}}
+	</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" id="admin-div-ok-button" type="button"	ng-click="ok(true)">OK</button>
+			<button class="btn btn-alt btn-small" id="admin-div-cancel-button" type="button"	ng-click="$dismiss('cancel')">Cancel</button>
+		</div>
+	</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
index 36eb04a8..ef553e23 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.controller.js
@@ -23,13 +23,13 @@
 'use strict';
 (function () {
     class ConfirmationBoxCtrl {
-        constructor($scope,$state) {
-
-            let init = () => {
-                let item = ($scope.ngDialogData && $scope.ngDialogData.item) || 'this';
-                this.message = $scope.ngDialogData.message ? $scope.ngDialogData.message : `Are you sure you want to delete "${item}"?`;
-                this.title = $scope.ngDialogData.title ? $scope.ngDialogData.title : '';
-            };
+        constructor($scope,$state,message,$modalInstance) {
+        	$scope.message = message;
+        	/*let init = () => {
+                let item = ($scope.message && $scope.message.item) || 'this';
+                message = $scope.message.content ? $scope.message.content : `Are you sure you want to delete "${message.item}"?`;
+                this.title = $scope.message.title ? $scope.message.title : '';
+            };*/
 
             this.closeBox = isConfirmed => {
                 $scope.closeThisDialog(isConfirmed);
@@ -40,10 +40,14 @@
             	$state.go(state,params);
             	
             };
+            
+            $scope.ok =function(confirm){
+            	$modalInstance.close(confirm);
+            }
 
-            init();
+          //  init();
         }
     }
-    ConfirmationBoxCtrl.$inject = ['$scope','$state'];
+    ConfirmationBoxCtrl.$inject = ['$scope','$state','message','$modalInstance'];
     angular.module('ecompApp').controller('ConfirmationBoxCtrl', ConfirmationBoxCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
index 8f880ef4..14bc7fda 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/confirmation-box.tpl.html
@@ -17,12 +17,20 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="confirmation-box-container">
-    <div class="confirmation-message-wrap">
-        <div id="confirmation-message" class="confirmation-message" ng-bind="confirmBox.message"></div>
-    </div>
-    <div class="dialog-control">
-        <div id="confirmation-button-next" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(true)">OK</div>
-        <div id="confirmation-button-cancel" class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Cancel</div>
-    </div>
-</div>
+<div>
+	<div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">{{message.title}}</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" id="div-confirm-close-button" aria-label="Close" ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+	<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content">
+		{{message.content}}
+	</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" id="div-confirm-ok-button" type="button"	ng-click="ok(true)">OK</button>
+			<button class="btn btn-alt btn-small" id="div-confirm-cancel-button" type="button"	ng-click="ok(false)">Cancel</button>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
index f6a1a29b..ba05c656 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/dragdrop-confirmation-box.tpl.html
@@ -17,15 +17,20 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="confirmation-box-container">
-    <div class="confirmation-title-wrap">
-        <div class="confirmation-title" ng-bind="confirmBox.title"></div>
-    </div>
-    <div class="confirmation-message-wrap">
-        <div class="confirmation-message" ng-bind="confirmBox.message"></div>
-    </div>
-    <div class="dialog-control">
-        <div class="next-button" ng-click="confirmBox.closeBox(true)">Confirm</div>
-        <div class="cancel-button" ng-click="confirmBox.closeBox(false)">Cancel</div>
-    </div>
+<div>
+	<div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">{{message.title}}</h2>
+		<div class="corner-button in">
+			<button type="button" class="close"  id="div-dragdrop-close-button" aria-label="Close" ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+	<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content"	style="height: 40px;">
+		{{message.content}}
+	</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" id="div-dragdrop-ok-button" type="button"	ng-click="ok(true)">OK</button>
+			<button class="btn btn-alt btn-small" id="div-dragdrop-cancel-button" type="button"	ng-click="$dismiss('cancel')">Cancel</button>
+		</div>
+	</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
index 1eaa2819..5725fca1 100644
--- a/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/information-box.tpl.html
@@ -17,11 +17,19 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="confirmation-box-container">
-    <div class="confirmation-message-wrap">
-        <div class="confirmation-message" >{{confirmBox.message}}</div>
-    </div>
-    <div class="dialog-control" id="dialog-close">
-        <div id="close-button"  class="btn btn-alt btn-small" ng-click="confirmBox.closeBox(false)">Close</div>
-    </div>
+<div>
+	<div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">{{message.title}}</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" aria-label="Close" id="div-information-close-button" ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+	<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content"	style="height: 60px;">
+		{{message.content}}
+	</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" type="button"	id="information-cancel-button" ng-click="$dismiss('cancel')">OK</button>
+		</div>
+	</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/confirmation-box/reload-page-confirm.html b/ecomp-portal-FE-common/client/app/views/confirmation-box/reload-page-confirm.html
new file mode 100644
index 00000000..0a60edbc
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/confirmation-box/reload-page-confirm.html
@@ -0,0 +1,36 @@
+<!--
+  ================================================================================
+  ECOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div>
+	<div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">Page Reload</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" id="div-confirm-close-button" aria-label="Close" ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+	<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content">
+		{{message.content}}
+	</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" id="div-confirm-ok-button" type="button"	ng-click="reload()">Retry</button>
+			<button class="btn btn-alt btn-small" id="div-confirm-cancel-button" type="button"	ng-click="$dismiss('cancel')">Cancel</button>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
index f47e17c2..5e78201e 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-manage.html
@@ -17,17 +17,23 @@
   limitations under the License.
   ================================================================================
   -->
-<div style="margin-top: 10px; margin-bottom: 10psx;">
-	<h1 class="heading1"></h1>
-</div>
-<br />
+ 
+
+<div class="manage-widget-txt">
+
+		<div class="b2b-modal-header">
+			<h2 class="title" id="manage-contactUs-home-manageWidgets-title">Manage {{widgetTypeDisplay}} Widgets</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
 
-<div style="margin-top: 25px;">
-	<div id="title" class="manage-contactUs-home-manageWidgets-title">Manage {{widgetTypeDisplay}} Widgets</div>
-		<div class="widgets-popup-margin">         
+<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content"	>
             <div class="get-access-table">
-                <div class="table-control" style="margin:30px;">
-				  	<div class="c-ecomp-portal-abs-table" style="height:300px"">
+                <div class="table-control widget-table-control">
+				  	<div class="c-ecomp-portal-abs-table widget-table" >
                     <table b2b-table id="table-main" 
                     	table-data="ignoredTableData"
                         current-page="ignoredCurrentPage">
@@ -70,7 +76,7 @@
                                 		<span class="icon-edit"></span>
                                 	</div>
                                 	<span ng-show="rowData.showEdit">
-                                		<a id="save-button" att-button btn-type="primary" ng-click="modify($index);" class="button button--primary" size="small" >Save</a>
+                                		<a id="save-button"  ng-click="modify($index);" class="btn btn-alt btn-small" size="small" >Save</a>
                                		</span>
 	                            </td>
 	                            <td b2b-table-body>
@@ -83,11 +89,10 @@
                     </table>
                 </div>
                 
-                <div att-divider-lines></div>
-					<div style="margin-top: 15px; margin-left: -80px;" >
+					<div class="widget-field" >
 					<form name = "widgetForm" novalidate>				
 						<div id="addWidgetHeader" class="contact-us-margin">				
-							<h1 style="font-size:18px;">Add</h1>
+							<h1 class="widget-add">Add</h1>
 							<div class="errMsg">{{errMsg}}</div>
 							<div class="sucessMsg" ng-bind="successMsg"></div>
 						</div>								  
@@ -107,44 +112,43 @@
 							            <input id="widget-input-add-order" class="input-text-area" type="text" ng-model="newWidgetObject.sortOrder"/>
 							        </div>
 						        </div>
-						         <div  class="add-widget-field"  ng-controller="DatePickerController" ng-show="{{widgetType=='EVENTS'}}">
-								    <h4>Event Date</h4>
-								    <div>
-								      <div>
-								        <p class="input-group">
-								          <input id="widget-input-add-date" type="text" name = "eventDate" datetime="yyyy-MM-dd" class="input-text-area" uib-datepicker-popup="{{format}}" 
-								          		ng-model="newWidgetObject.eventDate" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" 
-								           ng-focus="open1()"
-								           ng-required = "widgetType =='EVENTS'" />
-								        </p>
-								      </div>
-									</div>
-								</div>	
+						        <div  class="add-widget-field">
+							        <h4>Event Date</h4>
+							        <input class="notif-input-calendar" type="text" id="datepicker-end" 
+									ng-model="newWidgetObject.eventDate" b2b-datepicker min="minDate" max="maxDate" 
+									required />
+								</div>
 								
 						        <div class="add-contact-us-field-des"  ng-show="{{widgetType=='EVENTS'}}">
 						            <div  class="property-label">Content</div>
-						            <textarea style="margin-top: 0px; margin-bottom: 0px; height: 150px" ng-model="newWidgetObject.content" name="content" ng-required = "widgetType =='EVENTS'">
+						            <textarea class="widget-type-txt-area" ng-model="newWidgetObject.content" name="content" ng-required = "widgetType =='EVENTS'">
 						            </textarea>						            
 						        </div>
 					        </div>
-							<div style="height:50px;">
-								        <a id="add-button" style="float:right; margin-top:20px;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="saveNew()">Add New</a>
-					
-							</div>
 							
-							<div att-divider-lines></div>
+							
 					
 						</div>
 					</form>
 					</div>
-				    <div style="height:50px;">
-						<a id="close-button" style="float:right;" att-button btn-type="primary" class="button button--primary" size="small" ng-click="closeDialog()">Close</a>
-					</div>           
+				        
             </div>
-        </div>
     </div>
-</div>
 	
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+			<div class="dialog-control">
+					<a id="add-button" class="btn btn-alt btn-small"  ng-click="saveNew()">Add New</a>
+					
+						<a id="close-button"  class="btn btn-alt btn-small"  ng-click="$dismiss('cancel')">Close</a>
+  
+    </div>
+			
+		</div>
+
+</div>
+
 <script type="application/javascript">
     $(document).ready(function(){
         $(".ngdialog-content").css("width","85%");
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
index 1f958b7f..e5e7bdc2 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameter-manage.html
@@ -17,10 +17,19 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="manage-widget-parameters-header"></div>
-<div id="title" class="manage-widget-parameters-title">Manage
-	Widgets Parameters Page</div>
-<div class="widgets-popup-margin">
+<div class="manage-widget-parameter-header">
+
+		<div class="b2b-modal-header">
+			<h2 class="title" id="manage-widget-parameters-title">Manage Widgets Parameters Page</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+		   	<div class="widgets-popup-margin">
 	<div class="get-access-table">
 		<div class="table-control manage-widget-parameters-table">
 			<div class="c-ecomp-att-abs-table manage-widget-parameters-table-details">
@@ -60,9 +69,8 @@
 							<td b2b-table-body>
 								<div ng-hide="rowData.showEdit" ng-click="setEdit($index);">
 									<span class="icon-edit"></span>
-								</div> <span ng-show="rowData.showEdit"> <a att-button
-									btn-type="primary" ng-click="modify($index);"
-									class="button button--primary" size="small">Save</a>
+								</div> <span ng-show="rowData.showEdit"> 
+									<button class="btn btn-alt btn-small" id="admin-button-add"  ng-click="modify($index);">Save</button> 
 							</span>
 							</td>
 							<td b2b-table-body>
@@ -84,9 +92,13 @@
 		</div>
 	</div>
 </div>
+	
+			</div>
+			<br>
+			</div>
 
 <script>
 $(document).ready(function(){
     $(".ngdialog-close").attr('id','dialog-close');
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
index fb9a254f..10ccb9bf 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget-parameters.controller.js
@@ -21,7 +21,8 @@
 
 (function () {
     class WidgetParameterController {
-        constructor($scope, widgetsCatalogService, userProfileService) {
+        constructor($scope, widgetsCatalogService, userProfileService, $state,items) {
+        	$scope.ngDialogData=items;
         	let widgetId = $scope.ngDialogData.widgetId;
         	$scope.modflag = false;
         	$scope.isLoadingTable = false;
@@ -70,12 +71,13 @@
          			if(res.status == 'OK'){
          				$scope.modflag = false;
          				$scope.widgetParam[index].showEdit = false;
+         				$state.reload();
          			}
          		});
          		
          	};	
         }           
     }
-    WidgetParameterController.$inject = ['$scope', 'widgetsCatalogService', 'userProfileService'];
+    WidgetParameterController.$inject = ['$scope', 'widgetsCatalogService', 'userProfileService', '$state','items'];
     angular.module('ecompApp').controller('WidgetParameterController', WidgetParameterController); 
-})();
+})();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.less b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.less
index 8f326c42..5c0ce37d 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.less
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard-widget.controller.less
@@ -79,4 +79,59 @@ padding-bottom: 20px;
 	  height: 32px;
 	  border-color: slategrey !important;
 	  width:100%;
-  }
\ No newline at end of file
+  }
+  .heading1-txt {
+	   margin-top: 10px; 
+	   margin-bottom: 10px;
+  }
+  .manage-widgets-txt {
+  	margin-top: 25px;
+  }
+  .widget-table-control {
+  	margin:30px;
+  }
+  .widget-table {
+  	height:300px;
+  }
+  .widget-field {
+  	margin-top: 15px; 
+  	margin-left: -80px;
+  }
+  .widget-add {
+  	font-size:18px;
+  }
+  .widget-type-txt-area {
+  	margin-top: 0px; 
+  	margin-bottom: 0px; 
+  	height: 150px;
+  }
+  .widget-button-height {
+  	height:50px;
+  }
+  .widget-button {
+  	float:right; 
+  	margin-top:20px;
+  }
+   .widget-close-button {
+   	float:right;
+  } 
+  
+  .btn-calendar-icon {
+   position: relative;
+   width: 10px;
+   right:25px;
+   top:0px;
+}
+.dialog-control{
+bottom:30px;
+}
+input[type="text"]:focus {
+    z-index: 0;
+}
+
+ .get-access-table{
+  height:500px;
+  overflow:auto;
+  }
+  
+  
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
index 8481b5ed..4c5ee2cf 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.controller.js
@@ -54,9 +54,10 @@ function _classCallCheck(instance, Constructor) {
         $scope.editWidgetModalPopup = function(availableData, resourceType) {
             $scope.editData = JSON.stringify(availableData);
             $scope.availableDataTemp = $scope.availableData;
-            ngDialog.open({
+            var modalInstance = $modal.open({
                 templateUrl: 'app/views/dashboard/dashboard-widget-manage.html',
                 controller: 'CommonWidgetController',
+                windowClass: 'modal-docked',
                 resolve: {
                     message: function message() {
                         var message = {
@@ -66,30 +67,41 @@ function _classCallCheck(instance, Constructor) {
                         return message;
                     }
                 }
-            }).closePromise.then(needUpdate => {
-                if (resourceType == 'NEWS') {
-                    $scope.updateNews();
-                } else if (resourceType == 'EVENTS') {
-                    $scope.updateEvents();
-                } else if (resourceType == 'IMPORTANTRESOURCES') {
-                    $scope.updateImportRes();
-                }
-            });
+            })
+            
+            modalInstance.result.finally(function (needUpdate){
+            	   if (resourceType == 'NEWS') {
+                       $scope.updateNews();
+                   } else if (resourceType == 'EVENTS') {
+                       $scope.updateEvents();
+                   } else if (resourceType == 'IMPORTANTRESOURCES') {
+                       $scope.updateImportRes();
+                   }
+ 	        });
         };
 
         $scope.editWidgetParameters = function(widgetId) {
             let data = {
                 widgetId: widgetId
             }
-            ngDialog.open({
+            var modalInstance = $modal.open({
                 templateUrl: 'app/views/dashboard/dashboard-widget-parameter-manage.html',
                 controller: 'WidgetParameterController',
-                data: data
-            }).closePromise.then(needUpdate => {
+                windowClass: 'modal-docked',
 
-            });
+                resolve: {
+					items: function () {
+    	        	  return data;
+			        	}
+		        }
+            })
+            
+            modalInstance.result.then(function (needUpdate) {
+              });
         };
 
+    
+
         $scope.sort_options = [{
                 index: 0,
                 value: 'N',
@@ -488,7 +500,8 @@ function _classCallCheck(instance, Constructor) {
             }
 
 
-                };
+        
+        };
 
         this.auditLog = function(app) {
             console.log(app);
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
index 8d8f39fe..02cd960d 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less
@@ -33,7 +33,7 @@
       flex-flow: row wrap;
       width: @table-width;
       //margin-left: 230px;
-      margin-bottom: 63px;
+      margin-bottom: 0px;
 	  margin:auto;
       .app-gridster-header {
         background-color: @u;
@@ -478,10 +478,7 @@ On click the images will be displayed at normal size to complete the effect
     -webkit-transition: background-color 0.3s ease-out;
     -moz-transition: background-color 0.3s ease-out;
     transition: background-color 0.3s ease-out;
-    span{
- 		color: #888;   
     }
- }
   
 .widgetHeaderBtnPosition {
 	width: 30px;
@@ -910,4 +907,40 @@ ul {
 }
 .icon-content-gridguide{
 cursor:move;
-}
\ No newline at end of file
+}
+  .error-info-txt {
+  	display: none; 
+  	font-size: 12px; 
+  	margin-left: 5px;
+  }
+  .account-info-msg {
+  	color: red;
+  }
+  .icon-info {
+  	margin-left: 50%; 
+  	font-size: 90px; 
+  	color: black;
+  }
+  .gridster-box-pointer {
+   cursor: pointer;
+  }
+  .gridster-txt{
+  	font-size: 12px;
+  }
+  .gridster-icon {
+  	font-size: 80px; 
+  	color: #067ab4;
+  }
+  .widget-gridster {
+  	cursor:move;
+  }
+  .widgetHeaderBtns-span {
+  	color: #888;
+  }
+  .widgetHeaderBtns-img {
+  	margin-bottom: 3px; 
+  	margin-left: 3px;
+  }
+  .widget-menu-options {
+  	display: block;
+  }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
index d71b8f79..a981fd66 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
@@ -19,12 +19,11 @@
   -->
 <div class="w-ecomp-dashboard-home" id="widgets">
 	<div class="dashboard-home-container" id="page-content">
-		<div align="center" id="errorInfo"
-			style="display: none; font-size: 12px; margin-left: 5px">
-			<span style="color: red">You don't have a user account in that
+		<div align="center" id="errorInfo" class="error-info-txt">
+			<span class="">You don't have a user account in that
 				application. Please ask the system administrator. </span>
 		</div>
-		<div class="portals-list" style="margin-bottom: 0px;">
+		<div class="portals-list">
 			<div>
 				<div class="simulateGridHeader">
 					<span class="simulateGridHeaderTitle">Applications <span
@@ -43,7 +42,7 @@
 						<div ng-if="appsViewData.length==0">
 							<div class="app-error-block">
 								<i class="icon-information full-linear-icon-information"
-									style="margin-left: 50%; font-size: 90px; color: black"></i> <br>
+									class="icon-info"></i> <br>
 								<div class="activity-error-msg1">
 									You do not have access to any application or function in ECOMP
 									Portal.
@@ -68,13 +67,13 @@
 											'background-image': 'url('+(item.imageLink)+')',
 											'background-color':'white',
 											'background-repeat': 'no-repeat',
-											'background-size': '170px 130px'}"
+											'background-size': '168px 118px'}"
 											ng-click="dashboard.goToPortal(item);dashboard.auditLog(item)"
 											ng-hide="users.isLoadingTable && !users.getUserAppsIsDone">
 										</div>
 									</div>
 									<div class="gridster-box" ng-if="item.addRemoveApps">
-										<div class="gridster-box-header" style="cursor: pointer;"
+										<div class="gridster-box-header gridster-box-pointer"
 											ng-click="dashboard.goToCatalog()">
 											<i class="icon-content-gridguide"></i>
 											<h3>Select applications...</h3>
@@ -91,10 +90,10 @@
 										'padding': '4px',
 										'opacity': '1'}"
 											ng-click="dashboard.goToCatalog()" class="gridsterContent">
-											<label id="add-icon-label"  style="font-size: 12px;">Click
+											<label id="add-icon-label"  class="gridster-txt">Click
 												here to personalize <br> this applications page
 											</label> <i  id="add-icon" class="icon-controls-add-maximize"
-												style="font-size: 80px; color: #067ab4"></i>
+												class="gridster-icon"></i>
 										</div>
 									</div>
 								</li>
@@ -108,7 +107,10 @@
 
 			<br> <br>
 
-
+			<div class="simulateGridHeader">
+				<span class="simulateGridHeaderTitle">Widgets </span>
+			</div>
+			
 			<div 
 				ng-show=dashboard.isCommError>Failed to communicate with the
 				widget microservice.</div>
@@ -118,7 +120,7 @@
 					<li gridster-item="widget" ng-repeat="widget in widgetsViewData">
 						<div class="box">
 							<div class="box-header">
-							<i id="widget-gridster-{{widget.headerText.split(' ').join('-')}}-icon" style="cursor:move;" class="icon-content-gridguide"></i>
+							<i id="widget-gridster-{{widget.headerText.split(' ').join('-')}}-icon" class="icon-content-gridguide widget-gridster"></i>
 								<h3>{{ widget.headerText}}</h3>
 								<div class="box-header-btns pull-right"
 									ng-if="isAdminPortalAdmin == true" class="ng-scope">
@@ -128,10 +130,13 @@
 											ng-mousedown="showImpResOption=!showImpResOption"
 											ng-mouseleave="showImpResOption=false" title="Settings"
 											ddh-accessibility-click="13,32" tabindex="0"><span
-											class="icon-controls-moreapplications"></span></a>
+											class="widgetHeaderBtns-span"><img
+											ng-src="assets/images/generic.png"
+											class="widgetHeaderBtns-img" alt="..."
+											aria-label="Tap or Click to move"
+											src="assets/images/generic.png"></span></a>
 
-										<ul class="optionsMenu"
-											style="display: block"
+										<ul class="optionsMenu widget-menu-options"											
 											ng-show="showImpResOption"
 											ng-mouseenter="showImpResOption=true"
 											ng-mouseleave="showImpResOption=false">
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
index 69fe6e4d..a425297a 100644
--- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js
@@ -4,8 +4,8 @@
 'use strict';
 (function () {
     class MenuDetailsModalCtrl {
-        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {
-
+        constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService,items) {
+        	$scope.ngDialogData=items;
         	$scope.isAllApplications = false;
             let newMenuModel = {
                 name: null,
@@ -21,6 +21,8 @@
                     functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {
                         $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))
                         this.availableRoles = rolesObj;
+                       
+                   
                         this.preSelectedRoles = {roles:[]};
 
                         if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){
@@ -42,8 +44,20 @@
                                     }
                             }
                         }
+                        
                         $rootScope.$broadcast('availableRolesReady');
                         this.isSaving = false;
+                        for(var i=0; i<rolesObj.length;i++){
+                        	this.availableRoles[i].isApplied = false;
+                        	for(var j=0;j<this.preSelectedRoles.roles.length;j++){
+                        		if(this.preSelectedRoles.roles[j].roleId==this.availableRoles[i].roleId){
+                        			this.availableRoles[i].isApplied=true;
+                        			break;
+                        		}
+                        	}
+                        	
+
+                        	}
                     }).catch(err => {
                         $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);
                     });
@@ -89,6 +103,7 @@
                 this.formEditable = $scope.ngDialogData.source==='view' ? false : true;
                 this.selectedRole = [];
                 this.availableRoles = [];
+                this.selectedApp={};
                 this.menuItem = _.clone($scope.ngDialogData.menuItem);
                 $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');
                 if(!angular.isUndefined(this.menuItem.menuDetails) &&
@@ -98,7 +113,7 @@
                     $log.debug("MenuDetailsModalCtrl::init: menuItem: ");
                     $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);
                     this.menuItem.menu.url = this.menuItem.menuDetails.url;
-                    this.selectedApp={};
+                    this.selectedAppIndex=this.menuItem.menuDetails.appid;
                     this.selectedApp.index = this.menuItem.menuDetails.appid;
                     getAvailableRoles(this.selectedApp.index);
 
@@ -186,17 +201,40 @@
             this.isParentMenuItem = () => {
                 return this.menuItem.menu.parentMenuId!=null ? false : true;
             };
+            
+            this.isRoleSelected=()=>{
+                var selectedRoleIds=[];
+            	 for(var i=0;i<this.availableRoles.length;i++){
+                 	if(this.availableRoles[i].isApplied){
+                 	selectedRoleIds.push(this.availableRoles[i].roleId);
+                 	return true;
+                 	}
+                 }
+            	 return false;
+            	
+            };
 
             this.updateSelectedApp = (appItem) => {
+            	/*var appItemobj= JSON.parse(appItem);
+            	this.selectedApp=JSON.parse(this.selectedApp);*/
                 if (!appItem) {
                     return;
                 }
+                var appobj={};
+                for(var i=0;i<this.availableApps.length;i++ ){
+                	if(this.availableApps[i].index==appItem){
+                		appobj=this.availableApps[i];
+                		break;
+                	}
+                }
+                debugger;
                 $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));
                 $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");
                 $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);
-                this.selectedApp.isDisabled = ! appItem.enabled;
-                $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
-                getAvailableRoles(appItem.index);
+                this.selectedApp.isDisabled = ! appobj.enabled;
+                this.selectedApp.index=appobj.index;
+                 $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
+                getAvailableRoles(appobj.index);
             };
 
             this.continue = () => {
@@ -210,7 +248,6 @@
                 /*if($scope.functionalMenuForm.$invalid){
                  return;
                  }*/
-
                 if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {
                     confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});
                     return;
@@ -227,15 +264,25 @@
 
                 if ($scope.ngDialogData.source === 'edit') {     // Edit Menu Item
                     $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');
+                    var selectedRoleIds=[];
+                    for(var i=0;i<this.availableRoles.length;i++){
+                    	if(this.availableRoles[i].isApplied){
+                    	selectedRoleIds.push(this.availableRoles[i].roleId);
+                    	}
+                    }
                     activeMenuItem = {
                         menuId:this.menuItem.menu.menuId,
                         column:this.menuItem.menu.column,
                         text:this.menutitle,
                         parentMenuId:this.menuItem.menu.parentMenuId,
                         url:this.menuItem.menu.url,
+                        
                         appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
-                        roles:this.selectedRole
+                        
+                        roles:selectedRoleIds
                     };
+                    
+                   // alert(activeMenuItem);
                     // If we have removed the url and appid, we must remove the roles
                     if (!activeMenuItem.appid && !activeMenuItem.url) {
                         activeMenuItem.roles = null;
@@ -243,7 +290,9 @@
                     functionalMenuService.saveEditedMenuItem(activeMenuItem)
                         .then(() => {
                             $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
-                            $scope.closeThisDialog(true);
+                           // $scope.closeThisDialog(true);
+                            $scope.$dismiss('cancel');
+
                         }).catch(err => {
                         if(err.status === 409){//Conflict
                             handleConflictErrors(err);
@@ -259,6 +308,12 @@
                     $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));
                 } else {   // New Menu Item
                     $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');
+                    var selectedRoleIds=[];
+                    for(var i=0;i<this.availableRoles.length;i++){
+                    	if(this.availableRoles[i].isApplied){
+                    	selectedRoleIds.push(this.availableRoles[i].roleId);
+                    	}
+                    }
                     var newMenuItem = {
                         menuId:null, // this is a new menu item
                         column:this.menuItem.menu.column,
@@ -267,14 +322,15 @@
                         parentMenuId:this.menuItem.menu.menuId,
                         url:this.menuItem.menu.url,
                         appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
-                        roles:this.selectedRole
+                        roles:selectedRoleIds
                     };
 
                     $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));
                     functionalMenuService.saveMenuItem(newMenuItem)
                         .then(() => {
                             $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
-                            $scope.closeThisDialog(true);
+                           // $scope.closeThisDialog(true);
+                            $scope.$dismiss('cancel');
                         }).catch(err => {
                         if(err.status === 409){//Conflict
                             handleConflictErrors(err);
@@ -298,103 +354,7 @@
             });
         }
     }
-    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];
+    MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService','items'];
     angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl);
 
-    angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){
-        return {
-            restrict: 'E',
-            scope: {
-                model: '=',
-                options: '=',
-                populated_roles: '=preSelected',
-                dropdownTitle: '@',
-                source: '='
-            },
-            template: "<div class='btn-group' data-ng-class='{open: open}'>" +
-            "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +
-            "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +
-            "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +
-            "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +
-            "</ul>" +
-            "</div>",
-            controller: function ($scope) {
-                $scope.selectedItems = {};
-                $scope.checkAll = false;
-                $scope.$on('availableRolesReady', function() {
-                    init();
-                });
-
-                function init() {
-                    console.log('dropdownMultiselect init');
-                    $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles';
-                    console.log('$scope.populated_roles = ' + $scope.populated_roles);
-                }
-
-                $scope.$watch('populated_roles', function(){
-                    if ($scope.populated_roles && $scope.populated_roles.length>0) {
-                        for (var i = 0; i < $scope.populated_roles.length; i++) {
-                            $scope.model.push($scope.populated_roles[i].roleId);
-                            $scope.selectedItems[$scope.populated_roles[i].roleId] = true;
-                        }
-                        if ($scope.populated_roles.length === $scope.options.length) {
-                            $scope.checkAll = true;
-                        }
-                    }else{
-                        deselectAll();
-                    }
-                });
-
-                $scope.openDropDown = function () {
-
-                };
-
-                $scope.checkAllClicked = function () {
-                    if ($scope.checkAll) {
-                        selectAll();
-                    } else {
-                        deselectAll();
-                    }
-                };
-
-                function selectAll() {
-                    $scope.model = [];
-                    $scope.selectedItems = {};
-                    angular.forEach($scope.options, function (option) {
-                        $scope.model.push(option.roleId);
-                    });
-                    angular.forEach($scope.model, function (id) {
-                        $scope.selectedItems[id] = true;
-                    });
-                    console.log($scope.model);
-                };
-
-                function deselectAll() {
-                    $scope.model = [];
-                    $scope.selectedItems = {};
-                    console.log($scope.model);
-                };
-
-                $scope.setSelectedItem = function (id) {
-                    var filteredArray = [];
-                    if ($scope.selectedItems[id] === true) {
-                        $scope.model.push(id);
-                    } else {
-                        filteredArray = $scope.model.filter(function (value) {
-                            return value != id;
-                        });
-                        $scope.model = filteredArray;
-                        $scope.checkAll = false;
-                    }
-                    console.log(filteredArray);
-                    return false;
-                };
-
-                $scope.setDisable = function(source){
-                    return source ==='view' ? true : false;
-                }
-            }
-        }
-    }]);
-
-})();
\ No newline at end of file
+  })();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
index 7ba444eb..bae0e776 100644
--- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html
@@ -1,9 +1,18 @@
 <div class="functionalMenu-details-modal">
-    <div class="title">{{ngDialogData.title}}</div>
 
+		<div class="b2b-modal-header">
+			<h2 class="titles" id="microservice-add-details-title">{{ngDialogData.title}}</h2>
 
-    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
-        <form name="functionalMenuForm">
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+		    <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi">
+
+		   <form name="functionalMenuForm">
 
             <div class="span6" >
 					<div class="item-label">Parent</div>
@@ -26,43 +35,50 @@
                    <div class="item-label">URL</div>
                     <input id="input-url" ddh-reset ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " class="functionalMenu-height" placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/>
 					<div id="error-url-conflict" ng-show="functionalMenuForm.url.$error.url">
-					<small class="err-message"	style="color: Red; font-size: 11px;">Not valid URL!</small>
+					<small class="err-message error-msg-txt">Not valid URL!</small>
 				</div>                
 				</div>
                 </div>
                  <div class="right-item">
                     <div class="item-label">App</div>
-                    <div class="custom-select-wraps" ng-readonly="checked">
+                 <div class="custom-select-wraps" ng-readonly="checked">
                     				<div id='ecomp-small-spinner' class="ecomp-small-spinner"
                     									ng-if="isAllApplications"></div>
                     				<div ng-if="!isAllApplications">
-                                            <select id="select-app" class="select-field"
-                                ng-model="functionalMenuDetails.selectedApp"
-                                ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);"
-                                ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index"
-                               
-                                required>
-                            <option value="" >No Application</option>
-                        </select>
+                                                
+                         <div class="table-dropdown" >
+							<select id="select-app" b2b-dropdown placeholder-text="Select Application" ng-model="functionalMenuDetails.selectedAppIndex" ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedAppIndex);">
+				            	<option b2b-dropdown-list option-repeat="app in functionalMenuDetails.availableApps track by app.index" value="{{app.index}}">{{app.title}}</option>
+				            </select>
+						</div>
                     </div>
                     </div>
+                    
+                   
                     <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>-->
                  <!--   <pre>{{functionalMenuDetails.menuItem | json}}</pre> -->
                 </div>
-           
-                    
-            <div class="item" ng-show="functionalMenuDetails.displayRoles==true">
-                <div class="item-label">Roles</div>
-                    <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles"
-                                          model="functionalMenuDetails.selectedRole"
-                                          options="functionalMenuDetails.availableRoles" source="ngDialogData.source" >
-                    </dropdown-multiselect>
-            </div>
+                
+                <div class="item"
+				ng-show="functionalMenuDetails.displayRoles==true">
+				<div class="item-label">Roles</div>
+				<div>
+					<multiple-select id="dropdown-roles" unique-data="{{$index}}"
+						placeholder="Select Roles"
+						on-change="functionalMenuDetails.preSelectedRoles.roles"
+						ng-model="functionalMenuDetails.availableRoles" name-attr="rolename"
+						value-attr="isApplied"> </multiple-select>
+				</div>
+				</div>
             <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div>
-             </div>
+           
         </form>
-    </div>
-    <div class="dialog-control">
+		  </div>
+	
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				 <div class="dialog-control">
         <div ng-if="ngDialogData.source!='view'">
             <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span>
             <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()">
@@ -82,16 +98,21 @@
             <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())">
                 <button id="button-save-add"
                         class="btn btn-alt btn-small" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0)
-                || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"
+                || functionalMenuDetails.isRoleSelected() || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle"
                         ng-click="functionalMenuDetails.saveChanges()">Save</button>
-                <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle
-                && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid"
+                <button id="button-save-continue" class="btn btn-alt btn-small" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle
+                && !functionalMenuDetails.isRoleSelected()" ng-disabled="!functionalMenuForm.url.$valid"
                         ng-click="functionalMenuDetails.continue()">Continue</button>
             </span>
-            <button id="button-cancel-close-dialog" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+            <button id="button-cancel-close-dialog" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button>
         </div>
         <div ng-if="ngDialogData.source=='view'">
-            <div  id="div-close-dialog"  class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</div>
+            <div  id="div-close-dialog"  class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Close</div>
         </div>
     </div>
-</div>
\ No newline at end of file
+			</div>
+			
+			
+			
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
index ce434b47..c63a63e9 100644
--- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less
@@ -1,11 +1,11 @@
 .functionalMenu-details-modal {
-  height: 520px;
+  //height: 520px;
   
  
   .title {
     //.n18r;
     .dGray18r;  //ECOMP Dark Gray
-    border-bottom: @blue-active 3px solid;
+   // border-bottom: @blue-active 3px solid;
  }
 
  .span6{
@@ -23,17 +23,20 @@ padding-top: 10px;
 .functionalMenu-height{
 height:35px;
 width:140%;
+font-family:Omnes-ECOMP-W02, Arial;
+
 
 }
 
  select {
     max-width: 150%;
-    width: 380px;
+    width: 70%;
 		}
-.btn{
-font-family: clearview_att_regular;
-    font-size: 14px !important;
-}
+		
+		.multiple-select{
+		width:70%;
+		}
+
 .btn-group.open .dropdown-toggle {
     -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
     box-shadow: inset 0 0px 0px rgba(0,0,0,.125);
@@ -88,8 +91,8 @@ font-family: clearview_att_regular;
 
   .functionalMenu-properties-main {
     padding: 16px;
-    height: 306px;
-    overflow-y: visible;
+    height: 359px;
+    overflow: auto;
     input[type=checkbox][disabled]{
     height:13px;
     }
@@ -151,10 +154,15 @@ font-family: clearview_att_regular;
           color: @funcGreen;
           font-size: 9px;
         }
+       
       }
 
     }
 
   }
-
+ .dialog-control{
+        position: relative;
+    bottom: 16px;
+    float: right;
+        }
 }
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less
index 8452590f..8554fadc 100644
--- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less
+++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less
@@ -22,6 +22,46 @@
 		margin-left:0px;
 	}
 	
+	.dropdown-menu{
+	
+		position:absolute;
+	top:100%;
+	left:0;
+	z-index:1000;
+	display:none;
+	float:left;
+	min-width:160px;
+	padding:5px 0;
+	margin:2px 0 0;
+	list-style:none;
+	font-size:14px;
+	background-color:#fff;
+	border:1px solid #ccc;
+	border:1px solid rgba(0,0,0,.15);
+	border-radius:6px;
+	-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
+	box-shadow:0 6px 12px rgba(0,0,0,.175);
+	background-clip:padding-box;
+	
+	}
+	
+	.dropdown-menu .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+}
+
+.dropdown-menu>li>a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.428571429;
+    color: #333;
+    white-space: nowrap;
+}
+	
     .tree {
    	  margin:auto;
       width: @table-width;
@@ -54,7 +94,13 @@
       }
     }
     
+    .error-msg-txt {
+    	color: red; 
+    	font-size: 11px;
+    }
     
   }
-  
+  .regenerate-functionalmenu-btn-txt {
+  	color:black;
+  }	
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.controller.js b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
index 2eba057c..6b5be745 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
 	class HeaderCtrl {
-        constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService,ngDialog) {
+        constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService,ngDialog,$modal) {
             this.firstName = '';
             this.lastName = '';
             this.$log = $log;
@@ -348,7 +348,7 @@
         }        
     }
     class NotificationCtrl{
-    	constructor($log, $scope, $cookies, $timeout, sessionService,notificationService,$interval,ngDialog) {
+    	constructor($log, $scope, $cookies, $timeout, sessionService,notificationService,$interval,ngDialog,$modal) {
     		 $scope.notifications=[];   
     		 var intervalPromise = null;
              $scope.notificationCount= notificationService.notificationCount;
@@ -372,11 +372,12 @@
                  			var data = res.data.response[i];                			
 			            	var notification ={
 			            		id:data.notificationId,
-			            		title:data.msgHeader,
+			            		msgHeader:data.msgHeader,
 			            		message:data.msgDescription,
-			            		source:data.msgSource,
+			            		msgSource:data.msgSource,
 			            		time:data.createdDate,
-			            		priority:data.priority
+			            		priority:data.priority,
+			            		notificationHyperlink:data.notificationHyperlink
 			            	};
 			            	$scope.notifications.push(notification);       
 			             }  
@@ -406,41 +407,27 @@
         		 notificationService.getMessageRecipients(selectedAdminNotification.id).then(res =>{
                      $scope.messageRecipients = res;
 				 var messageObject=JSON.parse(selectedAdminNotification.message);
-				 var html="";
-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.source+'</p>';
-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.title+'</p>';
-				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
-
-				 for(var field in  messageObject){
-					 if(field=='eventDate'||field=='lastModifiedDate'){
-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
-						  
-					 }else{
-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
-					 
-					 }
-				 }
-
-				 var modalInstance = ngDialog.open({
- 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
- 				    controller: 'userNotificationCtrl',
- 				    resolve: {
- 				    	message: function () {
- 				    		var message = {
- 				    			   title:    '',
- 		                       		text:    html
- 		                       		
- 		                           	};
- 				          return message;
- 				        },
- 				     
- 				      }
- 				  }); 
- 		     
-        	 }).catch(err => {
-                 $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
-                 $scope.isLoadingTable = false;
-             });
+				 var modalInstance = $modal.open({
+	                    templateUrl: 'app/views/user-notifications-admin/user.notifications.json.details.modal.page.html',
+	                    controller: 'userNotificationCtrl',
+	                    sizeClass: 'modal-large', 
+	                    resolve: {
+	    					items: function () {
+	    						var items = {
+	  				    			   title:    '',
+	 	                       		    selectedAdminNotification:selectedAdminNotification,messageObject:messageObject,messageRecipients:$scope.messageRecipients
+	  		                       		
+	  		                           	};
+	  				          return items;
+	    			        	}
+	    		        }
+	                })
+		     
+ 	 
+   	 }).catch(err => {
+            $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
+            $scope.isLoadingTable = false;
+        });
         	 };
  			 
  			notificationService.getNotificationRate().then(res=> {
@@ -472,9 +459,9 @@
     	}
     }
     
-    NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','notificationService','$interval','ngDialog'];
+    NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','notificationService','$interval','ngDialog','$modal'];
     LoginSnippetCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService'];
-    HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService','ngDialog'];
+    HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService','ngDialog','$modal'];
     angular.module('ecompApp').controller('HeaderCtrl', HeaderCtrl);
     angular.module('ecompApp').controller('loginSnippetCtrl', LoginSnippetCtrl);
     angular.module('ecompApp').controller('notificationCtrl', NotificationCtrl);
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.less b/ecomp-portal-FE-common/client/app/views/header/header.less
index e10e9ed7..5a6314f9 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.less
+++ b/ecomp-portal-FE-common/client/app/views/header/header.less
@@ -535,3 +535,34 @@ column-count: 4;
 	width: 126.8px;
     height: 28px;
 }
+
+.header-position {
+	position:fixed;
+	width: 100%;
+	top: 0px;
+	left: 0;
+	background-color: #222;
+	z-index:9999;
+}
+  .reg-common-label-spn-txt {
+  	font-weight:bold;
+}  	
+  .display-userAppRoles-label-txt{
+  	height:200px; 
+  	overflow-y:auto;
+}
+  .notification-history-link-txt {
+  	font-size: 14px;
+  }
+  .notification-common-position {
+  	float:left;
+  }
+  .notification-common-space { 
+  	clear:both;
+  }
+  .notification-main-ht {
+  	height:113px;
+  }
+  .recommendation-bulb-txt {
+  	font-size: 22px;
+  }
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
index ea7273b9..30d616eb 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
@@ -17,7 +17,7 @@
   limitations under the License.
   ================================================================================
   -->
-<div style="position:fixed;width: 100%;top: 0px;left: 0;background-color: #222;z-index:9999">
+<div class="header-position">
     <header class="b2b-header-tabs" b2b-header-responsive>
         <ul class="header__items" role="navigation">
 <!-- Menu Icon and name -->
@@ -160,17 +160,17 @@
 					                            </div>
 					                        </div>
 					                    </li>
-										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn" style=font-weight:bold>Email<span class="visuallyhidden">:
+										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn reg-common-label-spn-txt" >Email<span class="visuallyhidden">:
 					                    </span></span></div></li>
 										<li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
 					                        {{loginSnippetEmail}}</span></div></li>
 					                    <li>&nbsp;</li>
-										<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn" style=font-weight:bold>
+										<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn reg-common-label-spn-txt">
 					                        User Id<span class="visuallyhidden">:</span></span></div></li>
 										<li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
 					                        {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>
 					                    <li>&nbsp;</li>
-										<li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn" style=font-weight:bold>
+										<li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn reg-common-label-spn-txt">
 					                        Last login<span class="visuallyhidden">:</span></span></div></li>
 										<li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">
 					                        {{lastLogin}}<span class="visuallyhidden"></span></span></div></li>
@@ -180,13 +180,14 @@
 					                			<a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-primary-accordion-plus" ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]" >Applications and Roles</a>
 					                 		</div>
 					                 		<br>
-					                        <div class="display-userAppRoles-label" ng-show="displayUserAppRoles" style="height:200px; overflow-y:auto;">
+					                        <div class="display-userAppRoles-label display-userAppRoles-label-txt" ng-show="displayUserAppRoles">
 					                             <div ng-repeat="ua in userapproles track by  $index">
 				                                    <div class="reg-userApp-value">
-				                                    	<span class="reg-userApp-value-spn" style=font-weight:bold>{{ua.App}}<span class="visuallyhidden">:</span></span>
+				                                    	<span class="reg-userApp-value-spn reg-common-label-spn-txt">{{ua.App}}<span class="visuallyhidden">:</span></span>
 													</div>							           
 					                                <div ng-repeat="role in ua.Roles track by  $index" class="reg-userAppRoles-value" >
-					                                	<span class="reg-userAppRoles-value-spn">{{role}}</span>
+					              				 <span  ng-if="role.indexOf('global_')!=-1" id="required" style="color: Red;" visible="false"> *</span>
+					                           	<span class="reg-userAppRoles-value-spn">{{role}}</span>
 					                                </div>
 					                                <br>
 					                        	</div>
@@ -217,17 +218,17 @@
 							<div class="ng-scope">
 								<div id="notification" class="notificationBox ">
 									<div align ="right">
-					 					 <a id="notification-history-link" ui-sref="root.notificationHistory" style="font-size: 14px"> View All Recent Notifications </a>
+					 					 <a id="notification-history-link" ui-sref="root.notificationHistory" class="notification-history-link-txt"> View All Recent Notifications </a>
 									</div>
 									<div class="notification-header">
-										<div style="float:left;">
+										<div class="notification-common-position">
 											<p class="notification-heading">Notifications</p>
 										</div>
-										<div style="clear:both;"></div>
+										<div class="notification-common-space"></div>
 									</div>
 									<div ng-show="notifications.length==0">
 										<div class="notification-main">
-											<div style="height:113px;">
+											<div class="notification-main-ht">
 												<div align="center" class="icon-information notification-info-icon"></div>
 											</div>
 										<div>
@@ -243,12 +244,12 @@
 											<span class="important" ng-show="item.priority==2"/>
 											<span class="normal" ng-show="item.priority==1"/>
 										</div>
-										<div class="details" ng-click="showDetailedJsonMessage(item)">
-												<span class="title" ng-bind="item.source"></span> <span
-													class="title" ng-bind="item.title"></span> <span
-													class="message-body" ng-if="item.source==='EP'"
+											<div class="details" ng-click="showDetailedJsonMessage(item)">
+												<span class="title" ng-bind="item.msgSource"></span> <span
+													class="title" ng-bind="item.msgHeader"></span> <span
+													class="message-body" ng-if="item.msgSource==='EP'"
 													ng-bind="item.message"></span> <span class="message-body"
-													ng-if="item.source!=='EP'"
+													ng-if="item.msgSource!=='EP'"
 													ng-bind="item.message| elipsis: 27"> </span>
 												<!-- <span class="date" ng-bind="item.time" ></span> -->
 												<mydate>{{item.time | date:'MM/dd/yyyy hh:mm:ss a Z'}}</mydate>
@@ -260,13 +261,14 @@
 							</div>
 							<div class="notification-footer">
 								<div class="notification-links">
-									<div style="clear:both;"></div>
+									<div class="notification-common-space"></div>
 								</div>
 							</div>
 						</div>					
 		            </b2b-flyout-content>
 		        </b2b-flyout>
             </li>
+
             <li class="header__item recommendation" aria-haspopup="true"
 							class="recommendation-li">
             <div ng-include class="recommendation-detail-extension" src="'app/views/headerRecommendation/headerRecommendations.tpl.html'"></div> 
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
index 40b6fb30..5a8326b6 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
@@ -17,9 +17,29 @@
   limitations under the License.
   ================================================================================
   -->
+  <style>
+  .table-search-fields{
+   margin-left: 248px !important;
+    position: absolute !important;
+    margin-top: -36px !important;
+    width:50% !important;
+  }
+   .table-search-field{
+    width:50% !important;
+  }
+  </style>
 <div class="microservice-add-details-model">
-	<div id="microservice-add-details-title" class="title">Microservice Details</div>
 
+		<div class="b2b-modal-header">
+			<h2 class="title" id="microservice-add-details-title">Microservice Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="microservicedetails-button-cancel"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
 	<div id="microservices" class="microservice-scrolling-table">
 		<div class="microservice-properties-main"
 			scroll-top="microserviceAddDetails.scrollApi">
@@ -112,7 +132,7 @@
 					<div class="item-label">Security Type</div>
 					<div class="service-select">					
 						<div class="table-dropdown">
-							<select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">
+							<select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Security Type" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">
 				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>				            	
 				            </select>
 						</div>
@@ -158,7 +178,7 @@
 						ng-click="microserviceAddDetails.addParameter()"></div>
 				</div>
 				<div class="item">
-					<div class="para-label-item-left"
+					<div class="param-label-item-left"
 						ng-show="microserviceAddDetails.service.parameterList.length > 0">
 						Parameter Key</div>
 					<div class="para-label-item-right"
@@ -168,14 +188,14 @@
 					<div id="microservice-details-user-paramters"
 						ng-repeat="parameter in microserviceAddDetails.service.parameterList">
 
-						<div class="para-item-left">
+						<div class="param-item-left">
 							<input id="microservice-details-input-user-parameter-key"
 								class="table-search-field" type="text" name="param-key" maxlength="200"
 								ng-model="parameter.para_key" />
 						</div>
-						<div class="para-item-middle">
+						<div class="param-item-middle">
 							<input id="microservice-details-input-user-parameter-value"
-								class="table-search-field" type="text" name="param-value"
+								class="table-search-fields" type="text" name="param-value"
 								maxlength="200" ng-model="parameter.para_value" />
 						</div>
 
@@ -184,28 +204,38 @@
 					</div>
 
 					<div class="microservice-property">
-						<input id="microservices-checkbox-app-is-enabled" type="checkbox"
-							class="checkbox-field"
-							ng-model="microserviceAddDetails.service.active" />
-						<div class="property-label checkbox-label">Active</div>
+						<label for="microservices-checkbox-app-is-enabled" class="checkbox"> 
+		                	<input type="checkbox" ng-model="microserviceAddDetails.service.active" id="microservices-checkbox-app-is-enabled" > 
+		                	<i class="skin"></i> 
+		                	<span class="property-label checkbox-label">Active</span> 
+		            	</label>	
 					</div>
 					
 				</div>
 					
 				<div id="microservice-scroll-end"></div>
-				<div class="dialog-control">
-					<button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>				
-					<button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button>	
-				</div>
+				
 			</form>
 		</div>
 
 
 	</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group cta-modal-footer-flex">		
+					<button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>				
+					<button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="$dismiss('cancel')">Close</button>	
+				</div>
+			</div>
+			
+			
+			
+
 </div>
 
 <script>
 $(document).ready(function(){
     $(".ngdialog-close").attr('id','dialog-close');
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
index 8ce9be64..c992b9a0 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
@@ -20,9 +20,9 @@
 'use strict';
 (function () {
     class MicroserviceAddDetailsCtrl {
-        constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+        constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies,items) {
      	    
-          
+        	$scope.ngDialogData=items;
             let getAvailableApps = () => {       
             	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
             		this.availableApps=[];
@@ -130,7 +130,6 @@
             };
 
             this.addParameter = () => {
-            	document.getElementById('microservice-scroll-end').scrollIntoView();
             	this.service.parameterList.push({}); 
             }
             
@@ -314,14 +313,16 @@
 	            		if(isConfirmed){
 		            		microserviceService.updateService(this.service.id, newService).then(() => {
 		            			// TODO: result validation check
-		            			this.closeThisDialog(); 
+		            			//this.closeThisDialog(); 
+		            			$scope.$dismiss('cancel');
 		            		});
             			}
             		});
             	}else{
             		microserviceService.createService(newService).then(() => {
             			// TODO: result validation check
-            			$scope.closeThisDialog(true);
+            			//$scope.closeThisDialog(true);
+            			$scope.$dismiss('cancel');
             		});
             	}
              	
@@ -332,6 +333,6 @@
             });
         }
     }
-    MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+    MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies','items'];
     angular.module('ecompApp').controller('MicroserviceAddDetailsCtrl', MicroserviceAddDetailsCtrl);
 })(); 
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
index fa607fee..e8178034 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
@@ -1,9 +1,9 @@
 .microservice-add-details-model{
-	height: 550px;
-	overflow-y: auto;
+	//height: 550px;
+	//overflow-y: auto;
 	.title {
-		.dGray18r;  //AT&T Dark Gray
-		border-bottom: @blue-active 3px solid;
+		.dGray18r; 
+		//border-bottom: @blue-active 3px solid;
 	}
 	.microservice-details-title {
 	    color: #191919;
@@ -39,6 +39,10 @@
 	        position: relative;
 	        top: -1px;
 	      } 
+	      .checkbox .skin {
+  				left: 0px;
+  				top: 0px;
+			}  
 	    }
 		.add-para-item{
 			position: relative;
@@ -129,15 +133,18 @@
 			  .dGray14r;
        	  }
           .para-label-item-right{
-	          line-height: 30px;
-	          height: 30px;
-	          display:inline-block;
-	          width: 45%;
-	          background: @portalWhite;
-	          vertical-align: middle;
-	          white-space: nowrap;
-	          .dGray14r;
+				margin-left: 248px !important;
+			    position: absolute !important;
+			    margin-top: -19px !important;
+			    width: 50% !important;
           }
+          
+       .table-search-fields{   
+         	 margin-left: 248px;
+		    position: absolute;
+		    margin-top: -36px;
+    
+    		}
            .para-item-left{
 	          line-height: 30px;
 	          height: 36px;
@@ -187,11 +194,9 @@
    			  .btn-blue;
   	  	  }
           .para-item-right{
-          	  margin-top: 10px;
-	          height: 14px;
-	          width: 14px;
-	          float: right;
-	          display:inline-block;
+		    margin-top: -27px;
+		    position: absolute;
+		    margin-left: 500px;
           }
 	      .input-field{
 	        .custom-input-field;
@@ -210,7 +215,9 @@
 	   		.btn-blue;
 	  	  }
 	  	  
-	  	 
+	  	 .modal.fade.in{
+	  	 overflow:hidden;
+	  	 }
 	  	  
 	  	  .add-para-button{
 			height: 14px;
@@ -224,10 +231,11 @@
 	}
 }
 .microservice-scrolling-table{
-	width: 548px;
+//	width: 548px;
     margin-left: 16px;
-    height: 430px;
+    height: 450px;
     overflow: auto;
+    margin-right: -29px;
 }
 #microservice-scroll-end{
 	height: 20px;
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
index 6e711b75..dfb424f0 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
@@ -2,7 +2,7 @@
 (function () {
     class MicroserviceOnboardingCtrl {
         constructor($log, applicationsService, microserviceService, ngDialog, confirmBoxService,
-                    userProfileService, $cookies, $scope) {
+                    userProfileService, $cookies, $scope,$modal) {
         	
         	
             let getOnboardingServices = () => {
@@ -42,16 +42,21 @@
 					}
 				}
 				
-                ngDialog.open({
+				var modalInstance = $modal.open({
                     templateUrl: 'app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html',
-                    controller: 'MicroserviceAddDetailsCtrl',
-                    controllerAs: 'microserviceAddDetails',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                	if(needUpdate.value === true){
+                    controller: 'MicroserviceAddDetailsCtrl as microserviceAddDetails',
+                    sizeClass: 'modal-large', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.finally(function (){
                 		getOnboardingServices();
-                    }
-                });
+     	        });
+
             };
                         
             this.deleteService = service => { 
@@ -82,6 +87,6 @@
         }
     }
     MicroserviceOnboardingCtrl.$inject = ['$log', 'applicationsService', 'microserviceService', 'ngDialog', 'confirmBoxService',
-        'userProfileService','$cookies', '$scope'];
+        'userProfileService','$cookies', '$scope','$modal'];
     angular.module('ecompApp').controller('MicroserviceOnboardingCtrl', MicroserviceOnboardingCtrl);
 })();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
index a5ea9041..de28a8bb 100644
--- a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.controller.js
@@ -47,42 +47,27 @@
        		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{
                     $scope.messageRecipients = res;
 				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);
-				 var html="";
-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';
-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';
-				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
-
-				 for(var field in  messageObject){
-					 if(field=='eventDate'||field=='lastModifiedDate'){
-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
-						  
-					 }else{
-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
-					 
-					 }
-				 }
-
-		     var modalInstance = ngDialog.open({
-				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
-				    controller: 'userNotificationCtrl',
-				    resolve: {
-				    	message: function () {
-				    		var message = {
-				    			   title:    '',
-		                       		text:    html
-		                       		
-		                           	};
-				          return message;
-				        },
-				     
-				      }
-				  }); 
+				  var modalInstance = $modal.open({
+	                    templateUrl: 'app/views/user-notifications-admin/user.notifications.json.details.modal.page.html',
+	                    controller: 'userNotificationCtrl',
+	                    sizeClass: 'modal-large', 
+	                    resolve: {
+	    					items: function () {
+	    						var items = {
+	  				    			   title:    '',
+	 	                       		    selectedAdminNotification:selectedAdminNotification,messageObject:messageObject,messageRecipients:$scope.messageRecipients
+	  		                       		
+	  		                           	};
+	  				          return items;
+	    			        	}
+	    		        }
+	                })
 		     
-       	 }).catch(err => {
-                $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
-                $scope.isLoadingTable = false;
-            });
-
+    	 
+      	 }).catch(err => {
+               $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
+               $scope.isLoadingTable = false;
+           });
 			 };
          }
     }
diff --git a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.less b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.less
index 9e1de6fd..7120eb58 100644
--- a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.less
+++ b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.less
@@ -37,5 +37,16 @@ font-style: italic;
 		margin:auto;
        }
 
+.table-th-txt {
+	width: 10px;
+}
+
+.table-td-txt {
+	font-weight: bold;
+} 
+
+.table-td-msg {
+	width:500px
+}
 
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
index f5d0b292..22c476f6 100644
--- a/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/notification-history/notificationhistory.tpl.html
@@ -46,7 +46,7 @@
 					<thead b2b-table-row type="header">
 						<tr>
 							<th id="th-notif-0" b2b-table-header key="msgSource"
-								sortable="true" style=" width: 10px;">Message Source</th>
+								sortable="true" class="table-th-txt">Message Source</th>
 							<th id="th-notif-1" b2b-table-header key="msgHeader"
 								sortable="true">Message</th>
 							<th id="th-notif-2" b2b-table-header key="startTime"
@@ -72,8 +72,8 @@
 								<div id="{{$index}}-msgSource">{{rowData.msgSource}}</div>
 							</td>
 								<td class="td-first" b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}"  ng-click="rowData.msgSource=='EP'||showDetailedJsonMessage(rowData)">
-								<div id="{{$index}}-title" style="font-weight: bold;" ng-bind="rowData.msgHeader"></div>
-								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'"  style="width:500px" ng-bind="rowData.msgDescription"></div>
+								<div id="{{$index}}-title" class="table-td-txt" ng-bind="rowData.msgHeader"></div>
+								<div id="{{$index}}-message" ng-if="rowData.msgSource==='EP'"  class="table-td-msg" ng-bind="rowData.msgDescription"></div>
 								<div id="{{$index}}-message" ng-if="rowData.msgSource!=='EP'"  ng-bind="rowData.msgDescription| elipsis: 27"></div>
 							</td>
 							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
index 466998a3..49605e59 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.controller.js
@@ -51,22 +51,22 @@
                             portalAdminsService.addPortalAdmin(this.selectedUser.orgUserId)
                                 .then(() => {
                                     $log.debug("NewPortalAdminModalCtrl::addNewPortalAdmin: portal admin added successfully");
-                                    $scope.closeThisDialog(true);
+                                     $scope.$dismiss('cancel');
                                 }).catch(err => {
                                     if(err.status === 409) {    //Conflict
                                         confirmBoxService.showInformation('This user already exists as a portal admin!').then(function (isConfirmed) {
-                                            $scope.closeThisDialog(true);
+                                             $scope.$dismiss('cancel');
                                         });
                                     } else {
                                         confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {
-                                            $scope.closeThisDialog(true);
+                                             $scope.$dismiss('cancel');
                                         });
                                     }
                             });
                         }
                     }).catch(err => {
                         confirmBoxService.showInformation('There was a unknown problem adding the portal admin. ' + 'Please try again later. Error Status: '+ err.status).then(function (isConfirmed)  {
-                            $scope.closeThisDialog(true);
+                             $scope.$dismiss('cancel');
                         });
                         $log.error('portalAdminsService.addPortalAdmin error status: '+ err.status);
                 });
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
index 206dc168..8205e840 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html
@@ -17,23 +17,37 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="new-admin-modal">
+  
+<style>
+  .title{
+		border-bottom: none !important;  
+	  }
+</style>
+<div>
+		<div class="b2b-modal-header">
+			<h2 class="heading-medium" id="newAdmin">Add New Portal Admin</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="pa-div-close-button"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
 
-    <div class="search-users">
+		<div class="b2b-modal-body">
+			<search-users search-title="" selected-user="newPortalAdmin.selectedUser"></search-users>
+		</div>
 
-        <search-users search-title="Add New Portal Admin"
-                      selected-user="newPortalAdmin.selectedUser"></search-users>
+		<div class="b2b-modal-footer">
+			<div class="cta-button-group in">
+				<button id="pa-search-users-button-save" class="btn btn-alt btn-small"
+					ng-click="newPortalAdmin.selectedUser && newPortalAdmin.addNewPortalAdmin()"
+					ng-class="{disabled: !newPortalAdmin.selectedUser}">Save</button>
+				<button id="pa-search-users-button-cancel"
+					class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button>
+			</div>
+		</div>
 
-        <div class="dialog-control">
-            
-               <button id="pa-search-users-button-save" class="btn btn-alt btn-small"
-                 ng-click="newPortalAdmin.selectedUser && newPortalAdmin.addNewPortalAdmin()"
-                 ng-class="{disabled: !newPortalAdmin.selectedUser}">Save
-            </button>
-            <button id="pa-search-users-button-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-        </div>
-    </div>
-</div>
+	</div>
 
 <script>
 $(document).ready(function(){
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.less b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.less
index f8e1960c..7c8e5ff1 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/new-portal-admin/new-portal-admin.modal.less
@@ -7,7 +7,7 @@
   .admin-app-roles {
     .title {
       //.n18r;
-      .dGray18r;  //AT&T Dark Gray
+      .dGray18r; 
       border-bottom: @blue-active 3px solid;
 
     }
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
index 89f6d0ae..de1557a9 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin-controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
     class PortalAdminsCtrl {
-        constructor($log, portalAdminsService, ngDialog, confirmBoxService) {
+        constructor($log, portalAdminsService, ngDialog, confirmBoxService, $modal) {
 
             let updateTableData = () => {
                 this.isLoadingTable = true;
@@ -91,20 +91,22 @@
                         }
                     }
                 }
-                ngDialog.open({
+                
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/portal-admin/new-portal-admin/new-portal-admin.modal.html',
-                    controller: 'NewPortalAdminModalCtrl',
-                    controllerAs: 'newPortalAdmin',
+                    controller: 'NewPortalAdminModalCtrl as newPortalAdmin',
+                    sizeClass: 'modal-medium',
                     data: data
-                }).closePromise.then(needUpdate => {
-                    if(needUpdate.value === true){
-                        $log.debug('PortalAdminsCtrl::openAddNewPortalAdminModal: updating Portal Admin table data...');
-                        updateTableData();
-                    }
-                });
+                })
+                
+                modalInstance.result.finally(function () {
+                	$log.debug('PortalAdminsCtrl::openAddNewPortalAdminModal: updating Portal Admin table data...');         
+                    updateTableData();
+     	        });
+                
             };
         }
     }
-    PortalAdminsCtrl.$inject = ['$log', 'portalAdminsService', 'ngDialog', 'confirmBoxService'];
+    PortalAdminsCtrl.$inject = ['$log', 'portalAdminsService', 'ngDialog', 'confirmBoxService', '$modal'];
     angular.module('ecompApp').controller('PortalAdminsCtrl', PortalAdminsCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
index 33268efb..e5396348 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
@@ -29,7 +29,7 @@
 						<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="portalAdmin.searchString">
 					</div>
 					<div class="table-control-buttons">
-						<button class="btn btn-alt btn-small" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Portal Admin</button> 		
+						<button class="btn btn-alt btn-small" id="portal-admin-button-add" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Portal Admin</button> 		
 					</div>      
                 </div>
 
@@ -47,11 +47,11 @@
 						</thead>
 						<tbody b2b-table-row type="body" 	row-repeat="rowData in portalAdmin.portalAdminsTableData">
 							<tr>
-								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.loginId"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
-									<span class="icon-misc-trash" ng-click="portalAdmin.removePortalAdmin(rowData)"></span>
+								<td b2b-table-body id="rowheader_t1_{{$index}}-firstName" headers="col1" ng-bind="rowData.firstName"></td>
+								<td b2b-table-body  id="rowheader_t1_{{$index}}-lastName" headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
+								<td b2b-table-body  id="rowheader_t1_{{$index}}-loginId"  headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.loginId"></td>
+								<td b2b-table-body  id="rowheader_t1_{{$index}}"  headers="rowheader_t1_{{$index}} col4">
+									<span id="{{$index}}-button-portal-admin-remove" class="icon-misc-trash" ng-click="portalAdmin.removePortalAdmin(rowData)"></span>
 								</td>							
 							</tr>
 						</tbody>
diff --git a/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html b/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
index c5673da8..ad05f9d5 100644
--- a/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
+++ b/ecomp-portal-FE-common/client/app/views/role/popup_modal_rolefunction.html
@@ -17,39 +17,85 @@
   limitations under the License.
   ================================================================================
   -->
+  <style>
+  .dialog-control {
+    position: relative;
+    bottom: -13px;
+    right: 0px;
+}
+  </style>
+<style>
+  .dialog-control {
+    position: relative;
+    bottom: -13px;
+    right: 0px;
+}
+  </style>
 
-<div class="new-admin-modal" style="height: 350px;">
-	<form name="adminForm" novalidate>
-		<div class="title" ng-bind="label" style="color: #5a5a5a;font-size: 18px;border-bottom: #067ab4 3px solid;margin-left:0px"></div>
+<!-- <link rel="stylesheet" href="role.css">
+ --><div class="new-admin-modal">
+		<div class="b2b-modal-header">
+			
 
-		<div id="name-property-title" class="property required">
-			<div id="name-property-label" class="property-label" style="margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">
-				<sup><b style="color: Red;">*</b></sup>Name:</div>
-			<input id="name-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"ng-model="editRoleFunction.name" maxlength="30" />
-			<div id="name-property-required" ng-show="!editRoleFunction.name||editRoleFunction.name.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Name is Required</small>
-				</div>
-		</div>
-		<br />
-		<div id="code-property-title" class="property required">
-			<div id="code-property-label" class="property-label" style="    margin-bottom: 5px;    color: #5a5a5a;       font-size: 14px;    font-weight: bold;    padding-top: 20px;">
-				<sup><b style="color: Red;">*</b></sup>Code:
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="button-cancel-role"
+					ng-click="$dismiss('cancel')"></button>
 			</div>
-		   <input id="code-property-input" type="text" class="input-field" style=" display: inline-block; width: 396px; height: 40px;"
-				ng-model="editRoleFunction.code" ng-disabled="disableCd"
-				maxlength="30" />
-				<div id="code-property-required" ng-show="!editRoleFunction.code||editRoleFunction.code.length==0" style="color: #cf2a2a; font-size: 10px;"><small style="position: absolute;">Code is Required</small>
-				</div>
 		</div>
-		
 
+		<div class="b2b-modal-body">
+		<form id="admin-details-form" name="adminForm" novalidate>
+		<div class="title" ng-bind="label" class="adminForm-title"></div>
+<br>
+		<div >
+					<div class="item-label"> <span ID="required" style="color: Red;"
+						visible="false"> *</span>Name:</div>
+					<input id="name-property-input"
+						class="adminForm-name-property-input" ng-model="editRoleFunction.name"
+						type="text" maxlength="30"
+						 />
 
-	<div class="dialog-control">
+					<div class="error-container"
+						ng-show="!editRoleFunction.name||editRoleFunction.name.length==0">
+						<small id="microservices-details-input-url-required"
+							class="err-message">Name is Required</small>
+					</div>
+				</div>
+			<br>	
+				<div >
+					<div class="item-label"> <span ID="required" style="color: Red;"
+						visible="false"> *</span>Code:</div>
+					<input id="code-property-input"
+						class="adminForm-code-property-input" ng-model="editRoleFunction.code" ng-disabled="disableCd"
+						type="text" maxlength="30"
+						 />
+
+					<div class="error-container"
+						ng-show="!editRoleFunction.code||editRoleFunction.code.length==0">
+						<small id="code-property-required"
+							class="err-message">Code is Required</small>
+					</div>
+				</div>
+		
+		</form>
+	</div>
+		
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
 				
-					<button id="button-app-save" class="save-button" size="small" ng-disabled="(!editRoleFunction.name||editRoleFunction.name.length==0)||(!editRoleFunction.code||editRoleFunction.code.length==0 )" ng-click="!saveRoleFunction(editRoleFunction)";herf="javascript:void(0)">Save</button>
+<button id="button-app-save" class="btn btn-alt btn-small" size="small" ng-disabled="(!editRoleFunction.name||editRoleFunction.name.length==0)||(!editRoleFunction.code||editRoleFunction.code.length==0 )" ng-click="!saveRoleFunction(editRoleFunction)";herf="javascript:void(0)">Save</button>
 						
-						<div id="button-app-cancel" class="cancel-button" ng-click="closeThisDialog()" role="button" tabindex="0" herf="javascript:void(0)">Cancel</div>
+						<div id="button-app-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')" role="button" tabindex="0" herf="javascript:void(0)">Cancel</div>
 		</div>
-	</form>
+		
+		<!-- <div class="dialog-control">
+
+<button id="button-app-save" class="btn btn-alt btn-small" size="small" ng-disabled="(!editRoleFunction.name||editRoleFunction.name.length==0)||(!editRoleFunction.code||editRoleFunction.code.length==0 )" ng-click="!saveRoleFunction(editRoleFunction)";herf="javascript:void(0)">Save</button>
+
+<div id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()" role="button" tabindex="0" herf="javascript:void(0)">Cancel</div>
+</div> -->
+			</div>
+			
 </div>
 
 <script>
@@ -57,3 +103,4 @@ $(document).ready(function(){
     $(".ngdialog-close").attr('id','dialog-close');
 });
 </script>
+
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-controller.js
index 2bd522a4..22b28e93 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-controller.js
@@ -18,70 +18,80 @@
  * ================================================================================
  */
 
-app.controller('roleController', function ($scope, $http, confirmBoxService, ngDialog, RoleService, conf, $stateParams){
+
+app.controller('roleController', function ($scope, $http, confirmBoxService, ngDialog, RoleService, conf, $stateParams,$modal,utilsService){
 	//$scope.role=${role};
 		
 	$( "#dialogRoleFunction" ).hide();
 	$( "#dialogChildRole" ).hide();
-	
-	//$scope.ociavailableRoleFunctions=${availableRoleFunctions};
+	$scope.routeRoleId = $stateParams.roleId;
+
+	// $scope.ociavailableRoleFunctions=${availableRoleFunctions};
 	$scope.fetchRoles = function() {
-	
-	RoleService.getRole($stateParams.roleId).then(function(data){
-		
-		var j = data;
-  		$scope.data = JSON.parse(j.data);
-  		
-  		$scope.role =JSON.parse($scope.data.role);
-  		
-  		$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
-  		$scope.availableRoleFunctions=[];
-  		
-  		if($scope.ociavailableRoleFunctions)
-  			$.each($scope.ociavailableRoleFunctions, function(i, a){ 
-  				var availableRoleFunction = a;
-  				availableRoleFunction.selected = false;
-  			    $.each($scope.role.roleFunctions, function(j, b){ 
-  			    	if(a.code === b.code) {
-  			    		availableRoleFunction.selected = true;
-  			    	}
-  			    });
-  			    $scope.availableRoleFunctions.push(availableRoleFunction);	    
-  		});	
-  		
+		$scope.isLoadingRoleFunctions = true;
+		utilsService.showLoadingLayer(); // show the loading layer
+		RoleService.getRole($stateParams.roleId).then(function(data){
+			if(data==null || data ==''){
+				var msg={
+						content:'Something is wrong. Please contact the administrator for more information'
+				};
+				confirmBoxService.reloadPageConfirm(msg);
+			}else{
+				var j = data;
+				$scope.data = JSON.parse(j.data);
+				$scope.role =JSON.parse($scope.data.role);
+				$scope.routeRoleId = $stateParams.roleId;
+				$scope.ociavailableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
+				$scope.isGlobalRoleChecked=($scope.role.name.indexOf('global_')==-1)?false:true;
 
-  		$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);
-  		$scope.availableRoles=[];
-  		
-  		if($scope.ociavailableRoles)
-  			$.each($scope.ociavailableRoles, function(i, a){ 
-  				var availableRole = a;
-  				availableRole.selected = false;
-  				if($scope.role.childRoles){
-  			    $.each($scope.role.childRoles, function(j, b){ 
-  			    	if(a.id === b.id) {
-  			    		availableRole.selected = true;
-  			    	}
-  			    });
-  				};
-  			    $scope.availableRoles.push(availableRole);	    
-  		});
-  			
-	
-	},function(error){
-		console.log("RoleService.getRole failed", error);
-		//reloadPageOnce();
-	});
+				$scope.availableRoleFunctions=[];
+
+				if($scope.ociavailableRoleFunctions)
+					$.each($scope.ociavailableRoleFunctions, function(i, a){ 
+						var availableRoleFunction = a;
+						availableRoleFunction.selected = false;
+						$.each($scope.role.roleFunctions, function(j, b){ 
+							if(a.code === b.code) {
+								availableRoleFunction.selected = true;
+							}
+						});
+						$scope.availableRoleFunctions.push(availableRoleFunction);	    
+					});	
+				$scope.ociavailableRoles=JSON.parse($scope.data.availableRoles);
+				$scope.availableRoles=[];
+
+				if($scope.ociavailableRoles)
+					$.each($scope.ociavailableRoles, function(i, a){ 
+						var availableRole = a;
+						availableRole.selected = false;
+						if($scope.role.childRoles){
+							$.each($scope.role.childRoles, function(j, b){ 
+								if(a.id === b.id) {
+									availableRole.selected = true;
+								}
+							});
+						};
+						$scope.availableRoles.push(availableRole);	    
+					});
+			}
+		},function(error){
+			console.log("RoleService.getRole failed", error);
+		}).finally(function(){
+			utilsService.hideLoadingLayer();
+			$scope.isLoadingRoleFunctions = false;
+		});
 	}
 	
 	$scope.fetchRoles();
 
+	$scope.isGlobalRoleChecked;
+
 	$scope.saveRole = function() {
 				var exists = false,x;	
 				for(x in $scope.availableRoles){
 					if($scope.availableRoles[x].name==$scope.role.name){
 						exists = true;
-						//$modalInstance.close({availableRoleFunctions:message.availableRoleFunctions});
+						// $modalInstance.close({availableRoleFunctions:message.availableRoleFunctions});
 					}
 				}
 				if (exists) {
@@ -89,17 +99,30 @@ app.controller('roleController', function ($scope, $http, confirmBoxService, ngD
 				}
 				else {
 					var uuu = conf.api.saveRole + "?role_id="+$stateParams.roleId;
+					if($scope.isGlobalRoleChecked ){
+						$scope.role.name = ($scope.role.name.indexOf('global_')==-1)?('global_'+$scope.role.name):($scope.role.name);
+						
+					}else{
+						$scope.role.name=$scope.role.name.replace('global_','');
+					}
 					var postData = {
 							role: $scope.role, 
 							childRoles: $scope.role.childRoles,
 							roleFunctions : $scope.role.roleFunctions
 					};
-					$http.post(uuu, JSON.stringify(postData)).then(function(res) {
-						// console.log('roleController::saveRole: ' + JSON.stringify(res));
-						if (res && res.data && res.data.role)
+					$http.post(uuu, JSON.stringify(postData,$stateParams.roleId)).then(function(res) {
+						// console.log('roleController::saveRole: ' +
+						// JSON.stringify(res));
+						if (res && res.data && res.data.role){
 							confirmBoxService.showInformation("Update Successful.");
-						else
+							$scope.routeRoleId = res.role;
+					  		$scope.isSaveClicked=true;
+					  		$scope.role='';
+						}
+						
+						else{
 							confirmBoxService.showInformation('Failed to create role: ' + res.data.error)
+						}
 					},
 					function(res){
 						console.log('post failed', res.data);
@@ -110,42 +133,42 @@ app.controller('roleController', function ($scope, $http, confirmBoxService, ngD
 			};
 		
 	$scope.addNewRoleFunctionModalPopup = function() {
-			var modalInstance = ngDialog.open({
-			    templateUrl: 'app/views/role/role_functions_popup.html',
-			    controller: 'rolepopupController',
-			    
-			    resolve: {
-			    	roleId: function () {
-				          return $stateParams.roleId;
-				        },
-			    	role: function () {
-			          return $scope.role;
+		var modalInstance = $modal.open({
+            templateUrl: 'app/views/role/role_functions_popup.html',
+            controller: 'rolepopupController',
+            sizeClass: 'modal-medium',
+            resolve: {
+            	roleId: function () {
+			          return $stateParams.roleId;
 			        },
-			        availableRoles: function () {
-				          return $scope.ociavailableRoles;
-				    },
-				    availableRoleFunctions: function () {
-				          return $scope.ociavailableRoleFunctions;
-				    },
-			      }
-			  });
-			 modalInstance.closePromise.then(response => {
-					if($stateParams.roleId === '0'){
-						return $scope.role;
-					}else{
-						$scope.fetchRoles();
-					}
-	           // $scope.role=response.role;
-	        });
+		    	role: function () {
+		          return $scope.role;
+		        },
+		        availableRoles: function () {
+			          return $scope.ociavailableRoles;
+			    },
+			    availableRoleFunctions: function () {
+			          return $scope.ociavailableRoleFunctions;
+			    }
+            }
+        });
+    	
+    	modalInstance.result.finally(function () {
+    		if($stateParams.roleId === '0'){
+				return $scope.role;
+			}else{
+				$scope.fetchRoles();
+			}
+	    });
 	};
 		
 	 $scope.addNewChildRoleModalPopup = function() {
-			var modalInstance = ngDialog.open({
-			    templateUrl: 'app/views/role/role_childrole_popup.html',
-			    controller: 'rolepopupController',
-			  
-			    resolve: {
-			    	roleId: function () {
+		   var modalInstance = $modal.open({
+	            templateUrl: 'app/views/role/role_childrole_popup.html',
+	            controller: 'rolepopupController',
+	            sizeClass: 'modal-medium',
+	            resolve: {
+	            	roleId: function () {
 				          return $stateParams.roleId;
 				        },
 			    	role: function () {
@@ -156,16 +179,17 @@ app.controller('roleController', function ($scope, $http, confirmBoxService, ngD
 				    },
 				    availableRoleFunctions: function () {
 				          return $scope.ociavailableRoleFunctions;
-				    },
-			      }
-			  }).closePromise.then(function(response){
-					if($stateParams.roleId === '0'){
-						 return $scope.role;
-					}else{
-			            $scope.fetchRoles();
-					}
-	            //$scope.role=response.role;
+				    }
+	            }
 	        });
+	    	
+	    	modalInstance.result.finally(function () {
+	    		if($stateParams.roleId === '0'){
+					return $scope.role;
+				}else{
+					$scope.fetchRoles();
+				}
+		    });
 		};
 		
 		$scope.removeRoleFunction = function(roleFunction) {
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
index e7195996..5e7c62cc 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-function-list-controller.js
@@ -17,20 +17,21 @@
  * limitations under the License.
  * ================================================================================
  */
-app.controller('roleFunctionListController', function ($scope,RoleService,$http,$state,conf,confirmBoxService, ngDialog){
+app.controller('roleFunctionListController', function ($scope,RoleService,$http,$state,conf,confirmBoxService, ngDialog,$modal){
 	$( "#dialog" ).hide();
-	
+	$scope.isLoadingRoleFunctions = true;
 	RoleService.getRoleFunctionList().then(function(data){
 		
 		var j = data;
   		$scope.data = JSON.parse(j.data);
   		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
-  		
   		//$scope.resetMenu();
 	
 	},function(error){
 		console.log("failed");
 		//reloadPageOnce();
+	}) .finally(function(){
+		$scope.isLoadingRoleFunctions = false;
 	});
 	
 	$scope.editRoleFunction = null;
@@ -46,32 +47,35 @@ app.controller('roleFunctionListController', function ($scope,RoleService,$http,
 		$scope.editRoleFunction = availableRoleFunction;
 		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
 		//$scope.availableRoleFunctions={};
-		var modalInstance = ngDialog.open({
-		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',
-		    controller: 'rolefunctionpopupController',
-		    resolve: {
-		    	message: function () {
-		    		var message = {
-		    				availableRoleFunction:  $scope.editRoleFunction,
-		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
-                           	};
-		          return message;
-		        },
-		        isEditing: function () {
-		        	return true;
-		        }
-		      }
-		  }); 
-		modalInstance.closePromise.then(response =>{
-			if(response.value!=null){
-            	if(response.value.result){
-            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
-            	}
-            }            	
-            /*else
-            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
-            */
-        });
+		
+		 var modalInstance = $modal.open({
+             templateUrl: 'app/views/role/popup_modal_rolefunction.html',
+             controller: 'rolefunctionpopupController',
+             sizeClass: 'modal-small', 
+             resolve: {
+ 		    	message: function () {
+ 		    		var message = {
+ 		    				availableRoleFunction:  $scope.editRoleFunction,
+ 		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
+                            	};
+ 		          return message;
+ 		        },
+ 		        isEditing: function () {
+ 		        	return true;
+ 		        }
+ 		      }
+ 		  });
+         
+         modalInstance.result.then(function (response) {
+        	 if(response.value!=null){
+             	if(response.value.result){
+             		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
+             	}
+             }            	
+             else
+             	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+             
+         });
 	};
 	
 	$scope.addNewRoleFunctionModalPopup = function(availableRoleFunction) {
@@ -79,34 +83,36 @@ app.controller('roleFunctionListController', function ($scope,RoleService,$http,
 		$scope.editRoleFunction = null;
 		$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
 		//$scope.availableRoleFunctions={};
-		var modalInstance = ngDialog.open({
-		    templateUrl: 'app/views/role/popup_modal_rolefunction.html',
-		    controller: 'rolefunctionpopupController',
-		    resolve: {
-		    	message: function () {
-		    		var message = {
-		    				availableRoleFunction: $scope.editRoleFunction,
-		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
-                           	};
-		          return message;
-		        },
-		        isEditing: function () {
-		        	return false;
-		        }
-		      }
-		  });
-		modalInstance.closePromise.then(response => {
-            if(response.value!=null){
-            	if(response.value.result){
-            		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
-            	}
-            }
-           /* if(response.availableRoleFunctions != undefined)
-            	$scope.availableRoleFunctions=response.availableRoleFunctions;
-            else
-            	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
-            	*/
-        });
+		 var modalInstance = $modal.open({
+             templateUrl: 'app/views/role/popup_modal_rolefunction.html',
+             controller: 'rolefunctionpopupController',
+             sizeClass: 'modal-small', 
+             resolve: {
+ 		    	message: function () {
+ 		    		var message = {
+ 		    				availableRoleFunction: $scope.editRoleFunction,
+ 		    				availableRoleFunctions: $scope.availableRoleFunctionsTemp
+                            	};
+ 		          return message;
+ 		        },
+ 		        isEditing: function () {
+ 		        	return false;
+ 		        }
+ 		      }
+ 		  });
+         
+         modalInstance.result.then(function (response) {
+         	if(response.value!=null){
+         	if(response.value.result){
+        		$scope.availableRoleFunctions=response.value.availableRoleFunctions;	
+        	}
+        }
+        if(response.availableRoleFunctions != undefined)
+        	$scope.availableRoleFunctions=response.availableRoleFunctions;
+        else
+        	$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+        	
+    });
 	};
 	
 	$scope.addNewRoleFunctionPopup = function() {
@@ -134,27 +140,28 @@ app.controller('roleFunctionListController', function ($scope,RoleService,$http,
 		
 		$scope.removeRole = function(availableRoleFunction) {
 			confirmBoxService.confirm("You are about to delete the role function "+availableRoleFunction.name+". Do you want to continue?").then(
-	    			function(confirmed){
-	    				if(confirmed){
-							$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
-							//$scope.availableRoleFunctions={};
-						  var uuu = conf.api.removeRoleFunction;
-						  var postData={availableRoleFunction: availableRoleFunction};
-					  	  $http.post(uuu,postData).then(function(response) {
-					  		  var data = response.data;
-					  		  if(data.availableRoleFunctions == undefined)
-					  			confirmBoxService.showInformation("Error while deleting: "+ data);
-					  		  else 
-					  			  $scope.availableRoleFunctions=data.availableRoleFunctions; 
-					  	  },
-					  	function() {
-					  		$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
-					  		confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
-					  	  }
-					  	  );
-	    				}			
-	    			});
-			
-		};
+			function(confirmed){
+			if(confirmed){
+			$scope.availableRoleFunctionsTemp=$scope.availableRoleFunctions;
+			//$scope.availableRoleFunctions={};
+			var uuu = conf.api.removeRoleFunction;
+			var postData=availableRoleFunction;
+			$http.post(uuu,postData).then(function(response) {
+			var data = response.data;
+			if(data == undefined)
+			confirmBoxService.showInformation("Error while deleting: "+ data);
+			else
+			$scope.availableRoleFunctionsTemp.splice($scope.availableRoleFunctionsTemp.indexOf(availableRoleFunction), 1);
+			$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+			},
+			function() {
+			$scope.availableRoleFunctions=$scope.availableRoleFunctionsTemp;
+			confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
+			}
+			);
+			}
+			});
+
+			};
 
 });
diff --git a/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js b/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
index 2e1acf37..582706c5 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
+++ b/ecomp-portal-FE-common/client/app/views/role/role-list-controller.js
@@ -17,7 +17,7 @@
  * limitations under the License.
  * ================================================================================
  */
-app.controller('roleListController', function ($scope,RoleService,confirmBoxService,conf,$state,$http){
+app.controller('roleListController', function ($scope,RoleService,confirmBoxService,conf,$state,$http,$log){
 	$scope.showSpinner = true;
 	
 	RoleService.getRoles().then(function(data){
@@ -26,20 +26,16 @@ app.controller('roleListController', function ($scope,RoleService,confirmBoxServ
   		$scope.data = JSON.parse(j.data);
   		$scope.availableRoles =JSON.parse($scope.data.availableRoles);
   		$scope.showSpinner = false;
-  		//$scope.resetMenu();
 	
 	},function(error){
-		console.log("failed");
-		//reloadPageOnce();
+		$log.debug('failed');
 	});
 	
 	
-		$scope.goToUrl = function(roleIdVal) {
+	$scope.goToUrl = function(roleIdVal) {
 			$state.go("root.role", {"roleId":roleIdVal});
-		}	
-	//console.log($scope.availableRoles);
+		}
 		$scope.toggleRole = function(selected,availableRole) {
-				//alert('toggleRole: '+selected);
 				var toggleType = null;
 				if(selected) {
 					toggleType = "activate";
@@ -48,57 +44,34 @@ app.controller('roleListController', function ($scope,RoleService,confirmBoxServ
 				}
 				
 				confirmBoxService.confirm("You are about to "+toggleType+" the role "+availableRole.name+". Do you want to continue?").then(
-		    			function(confirmed){
+		    		function(confirmed){
 		    				
-		    				 if(confirmed) {
-			                    var uuu = conf.api.toggleRole;
+		    			if(confirmed) {
+			            	var uuu = conf.api.toggleRole;
 								
 								var postData={role:availableRole};
 								$http.post(uuu, postData).then(function(response) {
 									var data = response.data;
 									if (typeof data === 'object') {
-										console.log(data);
+										$log.debug('data:'+data);
 							  			$scope.availableRoles=data.availableRoles; 
-							  			console.log($scope.availableRoles);
+							  			$log.debug('role::availableRoles:'+$scope.availableRoles);
 									} else {
 										//
 									}
 
 								}, function(response) {
-									console.log(response.data);
+									debug.log('response:'+response);
 									availableRole.active=!availableRole.active;
 									confirmBoxService.showInformation("Error while saving.");
 								});
 								
-								/*
-							  	  $.ajax({
-							  		 type : 'POST',
-							  		 url : uuu,
-							  		 dataType: 'json',
-							  		 contentType: 'application/json',
-							  		 data: JSON.stringify(postData),
-							  		 success : function(data){
-							  			console.log(data);
-							  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;}); 
-							  			console.log($scope.availableRoles);
-									 },
-									 error : function(data){
-										 console.log(data);
-										 availableRole.active=!availableRole.active;
-										 confirmBoxService.showInformation("Error while saving.");
-									 }
-							  	  });
-							  	  */
 		    				 }
-		    				 else {
-		    					 availableRole.active=!availableRole.active;
-		    				 }
-					
+
+		    	}) .catch(function(err) {
+		    		$log.error('roleListController::confirmBoxService.confirm error:', err);
+		    		availableRole.active=!availableRole.active;					
 		    	});
-		    	//,
-		    	//function(){
-		    //		availableRole.active=!availableRole.active;
-		    	//})
 				
 				  
 		};
@@ -109,20 +82,7 @@ app.controller('roleListController', function ($scope,RoleService,confirmBoxServ
 	    			function(confirmed){
 							var uuu = conf.api.removeRole;
 							  var postData={role:role};
-						  /*	  $.ajax({
-						  		 type : 'POST',
-						  		 url : uuu,
-						  		 dataType: 'json',
-						  		 contentType: 'application/json',
-						  		 data: JSON.stringify(postData),
-						  		 success : function(data){
-						  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;});  
-								 },
-								 error : function(data){
-									 console.log(data);
-									 confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
-								 }
-						  	  }); */
+
 							  
 							  
 							  $http.post(uuu, postData).then(function(response) {
@@ -134,7 +94,7 @@ app.controller('roleListController', function ($scope,RoleService,confirmBoxServ
 									}
 
 								}, function(response) {
-									console.log(response.data);
+									$log.debug('response:'+response.data);
 									confirmBoxService.showInformation("Error while deleting: "+ data.responseText);
 								});
 				
diff --git a/ecomp-portal-FE-common/client/app/views/role/role.html b/ecomp-portal-FE-common/client/app/views/role/role.html
index 2356058d..9febc978 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role.html
@@ -17,6 +17,25 @@
   limitations under the License.
   ================================================================================
   -->
+  <style>
+  .checkbox .skin {
+    left: 112px;
+    top: -8px;
+}
+.checkbox input {
+    margin: 0px;
+    left: 105px;
+    height: 20px;
+    top: -4px;
+    }
+.checkbox span {
+    display: inline-block;
+    margin-left: 1px;
+    margin-top: 0;
+    position: relative;
+    top: -3px;
+}
+  </style>
 <div class="w-ecomp-admins-page-main">
 	<div class="admins-home-container" id="page-content">
 	 	<div id="title" class="w-ecomp-main-view-title">
@@ -26,10 +45,18 @@
 			<div>
 				<br>
 			    <p class="p-info">Please edit the role details below:&nbsp;</p><br>
+			    
+			     <div class="property-label checkbox-label"> 
+					<label for="checkbox-app-is-restricted" class="checkbox"> 
+		                <input type="checkbox" ng-model="isGlobalRoleChecked" id="checkbox-app-is-restricted"  ng-checked="isGlobalRoleChecked" /> 
+		                <i id="checkbox-app-is-restricted" class="skin"></i> 
+		                <span>Global Roles: </span> 
+		            </label> 
+				</div> 
 			     
 				<div id="role-text" >
 					<label id="role-text-name-label" >*Name:</label>
-					<input id="input-name"  class="input-field" maxlength="30"  type="text" data-ng-model="role.name">					 
+					<input id="input-name"  class="input-field" maxlength="300"  type="text" data-ng-model="role.name">					 
 					<br>
 					<label id="role-text-priority-label">Priority:</label>
 					<input id="input-priority" class="input-field" maxlength="30"  type="text" data-ng-model="role.priority">					 	
@@ -40,12 +67,14 @@
 				</div>
 				
 				<br>
+				<div ng-if="routeRoleId!=0">
 				<div id="page-title"  class="pageTitle">
 					<label>Role Functions</label>
 					<a id="add-new-role" ng-click="addNewRoleFunctionModalPopup();" ng-style="{'cursor':'pointer'}" class="icon-primary-accordion-plus" size="small"></a>
 				</div>
 			
 				<div b2b-table table-data="role.roleFunctions"  ng-hide="users.isLoadingTable"	search-string="users.searchString" class="b2b-table-div">
+				<span class="ecomp-spinner" ng-show="isLoadingRoleFunctions"></span>
 					<table>
 						<thead b2b-table-row type="header">
 							<tr >
@@ -57,7 +86,7 @@
 							<tr >
 								<td id="role-function-{{roleFunction.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="roleFunction.name"></td>
 								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
-					    			<div ng-click="removeRoleFunction(roleFunction);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
+					    			<div id="{{$index}}-remove-trash-button" ng-click="removeRoleFunction(roleFunction);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
 								</td>							
 							</tr>
 						</tbody>
@@ -82,7 +111,7 @@
 						<tbody b2b-table-row type="body" 	row-repeat="role in role.childRoles">
 							<tr >
 								<td id="role-function-{{role.name}}" b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="role.name"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
+								<td b2b-table-body headers="rowheader_t1_{{$index}} col4" id="{{$index}}-button-remove-role" >
 					    			<div ng-click="removeChildRole(role);" ><a href="javascript:void(0)" class="icon-misc-trash"></a></div>
 								</td>							
 							</tr>
@@ -90,7 +119,7 @@
 					</table>
 				</div>					
 			</div>
-	
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role.less b/ecomp-portal-FE-common/client/app/views/role/role.less
index 71d240dc..b6e92c9e 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role.less
+++ b/ecomp-portal-FE-common/client/app/views/role/role.less
@@ -47,4 +47,27 @@
 
 .scroll-bar {
 	border-radius: 0px !important;
-}
\ No newline at end of file
+}
+
+.admins-table-create-new-admin {
+	marin-bottom: 50px;
+}
+
+.admins-table-space {
+	text-align: justify;
+	text-align-last: auto;
+}
+
+.admins-table-tbody {
+	max-height: 980px;
+}
+
+.admins-table-btn-txt {
+	font-size:20px;
+}
+
+.admins-table-btn-create {
+	margin-bottom: 50px;
+}
+
+
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html b/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
index e96fb062..cf9502a1 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_childrole_popup.html
@@ -19,7 +19,14 @@
   -->
 <link rel="stylesheet" href="role.css">
 <div class="application-details-modal">
-    <div id="title" class="title">Select Role Functions</div>
+    <div class="b2b-modal-header ng-scope in">
+		<h2 id="myModalLabel" modal-title="">Select Role Functions</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" aria-label="Close" id="div-childrole-cancel-button"
+				ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+<div class="b2b-modal-body">
 <div class="scrolling-table">
 
 	<div b2b-table table-data="availableRoles"   class="b2b-table-div">
@@ -44,9 +51,13 @@
 		</table>
 	</div>
 </div>
-    <div class="dialog-control">
-        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>      
-    </div>
+</div>
+	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+		<div class="cta-button-group in">
+			<button class="btn btn-alt btn-small" type="button" id="div-childrole-close-button"
+				ng-click="$dismiss('cancel')">Close</button>
+		</div>
+	</div>
 </div>
 <script>
 $(document).ready(function(){
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_function_list.html b/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
index 7c50a5ac..6abf6006 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_function_list.html
@@ -42,16 +42,17 @@
 	<div class="admins-table">
 	
 	 <!-- <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a> -->
-	        <div id="create-new-admin" align="left" style="marin-bottom: 50px;">
+	        <div id="create-new-admin" align="left" class="admins-table-create-new-admin">
 				<button id="button-admin-create" type="submit" ng-click="addNewRoleFunctionModalPopup();" 
 					 class="btn btn-alt btn-small">Create</button>
 			</div>
 			
-			<div style="text-align: justify;text-align-last:auto;">
+			<div class="admins-table-space">
 			<!-- 	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.  -->
 			</div>
 	
 	<div id="rolesTable" class="c-ecomp-abs-table default"  title="Role Functions">
+	  <span class="ecomp-spinner" ng-show="isLoadingRoleFunctions"></span>
 	  <table b2b-table table-data="availableRoleFunctions" current-page="1">
 	  	<thead b2b-table-row type="header">
 	  		<tr>
@@ -61,7 +62,7 @@
 	  			<th id="table-header-delete" b2b-table-header width="10%" sortable="false">Delete?</th>
 	  		</tr>
 	  	</thead>
-	  	<tbody b2b-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+	  	<tbody b2b-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" class="admins-table-tbody" ><!-- background colors will alternate not properly with multiple tbody-->
 		  <tr>
 		    <td id="table-body-role-{{availableRoleFunction['name'].split(' ').join('-')}}" b2b-table-body width="70%" ng-bind="availableRoleFunction['name']"></td>
 		    <td id="table-body-role-{{availableRoleFunction['code']}}" b2b-table-body width="10%" ng-bind="availableRoleFunction['code']"></td>
@@ -69,11 +70,11 @@
 		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
 		    <img src="static/fusion/images/editicon.gif">
 		    </a> -->
-		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-edit" href="javascript:void(0)" class="icon-edit"></a></div>
+		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" class="admins-table-btn-txt"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-edit" href="javascript:void(0)" class="icon-edit"></a></div>
 		    </td>
 		     <td b2b-table-body width="10%">
 		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
-		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-trash" href="javascript:void(0)" class="icon-misc-trash"></a></div>
+		    	<div ng-click="removeRole(availableRoleFunction);" class="admins-table-btn-txt"><a id="role-{{availableRoleFunction['name'].split(' ').join('-')}}-trash" href="javascript:void(0)" class="icon-misc-trash"></a></div>
 		     </td>
 		  </tr>
 		</tbody>
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html b/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
index 52c4cb3a..a405ba02 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_functions_popup.html
@@ -17,10 +17,21 @@
   limitations under the License.
   ================================================================================
   -->
-<link rel="stylesheet" href="role.css">
+ 
+ 
+ <link rel="stylesheet" href="role.css">
 <div class="application-details-modal">
-    <div id="title" class="title">Select Role Functions</div>
-<div class="scrolling-table">
+		<div class="b2b-modal-header">
+			<h2 class="account-details-title" id="application-details-title">Select Role Functions</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="div-notification-cancel--button"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+ <div class="scrolling-table">
 	<div b2b-table table-data="availableRoleFunctions"   class="b2b-table-div">
 		<table>
 			<thead b2b-table-row type="header">
@@ -43,13 +54,16 @@
 		</table>
 	</div>
 </div>
-    <div class="dialog-control">
-        <button id="button-app-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>
-    </div>
-</div>
+	</div>
+		
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group in">			
+						<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">close</button>
+				</div>
+			</div>
+			
+			
+			
 
-<script>
-$(document).ready(function(){
-    $(".ngdialog-close").attr('id','dialog-close');
-});
-</script>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_list.html b/ecomp-portal-FE-common/client/app/views/role/role_list.html
index 74de7c23..4248b46a 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_list.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_list.html
@@ -17,16 +17,25 @@
   limitations under the License.
   ================================================================================
   -->
+  <style>
+  .property-label{
+  text-align: right;
+  }
+  </style>
 <div class="w-ecomp-admins-page-main">
 	<div class="admins-home-container" id="page-content">
 		<div id="title" class="w-ecomp-main-view-title">
 			<h1 class="heading-page" >Roles</h1>
 		</div>
 		<div class="admins-table">
-			<div id="button-create-role" align="left" style="marin-bottom: 50px;" >
-				<button ng-click="goToUrl(0)" class = "btn btn-alt btn-small">Create</button>
+			<div id="button-create-role" align="left" class="admins-table-btn-create" >
+				<button id="button-create-role" ng-click="goToUrl(0)" class = "btn btn-alt btn-small">Create</button>
 			</div>
+			<br>
+			  <div class="property-label">
+					<span ID="required" style="color: Red;font-size: 210%;"	visible="false"> *</span>-----Indicates Global Roles	</div>
 			<div b2b-table table-data="availableRoles"  search-string="searchString" class="b2b-table-div">
+			<span class="ecomp-spinner" ng-show="showSpinner"></span>
 		        <table>
 		            <thead b2b-table-row type="header">
 		                <tr>
@@ -38,20 +47,28 @@
 		            </thead>
 		            <tbody b2b-table-row type="body" row-repeat="rowData in availableRoles">
 		                <tr>
-		                    <td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData['name']"></td>
+		                   <!--  <td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData['name']"></td> -->
+		                   <td b2b-table-body>
+								<span  ng-if="rowData.name.indexOf('global_')!=-1" id="required" style="color: Red;font-size: 180%;" visible="false"> *</span>
+								<span>{{rowData.name}}</span>
+								</td>
 		                    <td b2b-table-body ng-bind="rowData['priority']"></td>
 		                    <td b2b-table-body headers="rowheader_t1_{{$index}} col3" >
 		                    	<div >
 						    		<label class="btn-switch-label" tabindex="0" role="option">
-										<input type="checkbox" b2b-switches ng-model="rowData.active" ng-click="toggleRole(rowData.active,rowData);">
+										<input type="checkbox" id="{{$index}}-button-toggle-role" b2b-switches ng-model="rowData.active" ng-click="toggleRole(rowData.active,rowData);">
 								    </label> 
 						    	</div>
 		                    </td>
-		                    <td b2b-table-body class="icon-misc-pen" ng-click="goToUrl(rowData.id)"></td>    
+		                    <td b2b-table-body id="{{$index}}-button-edit-role" class="icon-misc-pen" ng-click="goToUrl(rowData.id)"></td>    
 		                </tr>
 		            </tbody>
 		        </table>
+		        
+		      
 		    </div>
 		</div>
 	</div>
 </div>
+
+
diff --git a/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js b/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
index db5bb1b6..41241500 100644
--- a/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
+++ b/ecomp-portal-FE-common/client/app/views/role/rolefunctionpopupController.js
@@ -17,79 +17,85 @@
  * limitations under the License.
  * ================================================================================
  */
-app.controller('rolefunctionpopupController', function ($scope, confirmBoxService, message, $http,RoleService, conf, isEditing){
-				if(message.availableRoleFunction==null) {
-					$scope.label='Add Role Function';
-					var tempText = "";
-				}
-				else{
-					$scope.label='Edit Role Function'
-					$scope.disableCd=true;
-					var tempText = new String(message.availableRoleFunction.name);
-					$scope.editRoleFunction = angular.copy(message.availableRoleFunction);
-				}
-				
-				$scope.tempText = tempText;
-				$scope.isEditing = isEditing;
-				
-				$scope.saveRoleFunction = function(availableRoleFunction) {
-					  var uuu = conf.api.saveRoleFunction;
-					  var postData={availableRoleFunction: availableRoleFunction};
+app.controller('rolefunctionpopupController',function($scope, confirmBoxService, message, $http,RoleService, conf, isEditing) {
+					if (message.availableRoleFunction == null) {
+						$scope.label = 'Add Role Function';
+						var tempText = "";
+					} else {
+						$scope.label = 'Edit Role Function'
+						$scope.disableCd = true;
+						var tempText = new String(message.availableRoleFunction.name);
+						$scope.editRoleFunction = angular.copy(message.availableRoleFunction);
+					}
 
-					  if(availableRoleFunction==null){
-						  confirmBoxService.showInformation("Please enter valid role function details.");
-					  }
-					  var exists = false,x;
-					  for(x in message.availableRoleFunctions){
-						  console.log(message.availableRoleFunctions[x].name);
-							if(message.availableRoleFunctions[x].name==availableRoleFunction.name){
-								confirmBoxService.showInformation("Role Function already exists.");
-								exists = true;
-								availableRoleFunction.name = $scope.tempText;
-								break;
-							} 
-							if(!isEditing){
-								if (message.availableRoleFunctions[x].code == availableRoleFunction.code) {
-									confirmBoxService.showInformation("Code already exists. Please create a role function with a different code to proceed.");
-									exists = true;
-									availableRoleFunction.name = $scope.tempText;
-									break;
-								}
-							}
-					  }
-					  
-					  if(!exists && availableRoleFunction.name.trim() != '' && availableRoleFunction.code.trim() != ''){
-			              $http.post(uuu, JSON.stringify(postData)).then(function(res){
-			            	  console.log("data");
-//			            	  console.log(res.data);
-//			            	  $scope.availableRoleFunctionsTemp = res.data.availableRoleFunctions;
-			            	  RoleService.getRoleFunctionList().then(function(data){
-			            			
-			            			var j = data;
-			            	  		$scope.data = JSON.parse(j.data);
-			            	  		$scope.availableRoleFunctions =JSON.parse($scope.data.availableRoleFunctions);
-			            	  		
-			            	  		//$scope.resetMenu();
-			            	  		$scope.closeThisDialog({result: true, availableRoleFunctions: $scope.availableRoleFunctions });
-			            		},function(error){
-			            			console.log("failed");
-			            			//reloadPageOnce();
-			            			$scope.closeThisDialog(true);		            			
-			            		});
-			            	  
-			            	  
-			              });						  
-						  
-						  
-						  
-						  
-						}
-				};
-					  
-				  	  
-					
-				$scope.close = function() { 
-					this.closeThisDialog(true);
-				};
-}
-);
+					$scope.tempText = tempText;
+					$scope.isEditing = isEditing;
+
+					$scope.saveRoleFunction = function(availableRoleFunction) {
+						confirmBoxService.confirm(
+										"You are about to Create the role function "+ availableRoleFunction.name+ ". Do you want to continue?")
+								.then(function(confirmed) {
+											if (confirmed) {
+
+												var uuu = conf.api.saveRoleFunction;
+												var postData = availableRoleFunction;
+
+												if (availableRoleFunction == null) {
+													confirmBoxService.showInformation("Please enter valid role function details.");
+												}
+												var exists = false, x;
+												for (x in message.availableRoleFunctions) {
+													console.log(message.availableRoleFunctions[x].name);
+													if (message.availableRoleFunctions[x].name == availableRoleFunction.name) {
+														confirmBoxService.showInformation("Role Function already exists.");
+														exists = true;
+														availableRoleFunction.name = $scope.tempText;
+														break;
+													}
+													if (!isEditing) {
+														if (message.availableRoleFunctions[x].code == availableRoleFunction.code) {
+															confirmBoxService.showInformation("Code already exists. Please create a role function with a different code to proceed.");
+															exists = true;
+															availableRoleFunction.name = $scope.tempText;
+															break;
+														}
+													}
+												}
+
+												if (!exists&& availableRoleFunction.name.trim() != ''&& availableRoleFunction.code.trim() != '') {
+													$http.post(uuu,JSON.stringify(postData)).then(function(res) {
+																		$scope.availableRoleFunctionsTemp = res.data.availableRoleFunctions;
+																		RoleService.getRoleFunctionList().then(
+																						function(data) {
+
+																							var j = data;
+																							$scope.data = JSON.parse(j.data);
+																							$scope.availableRoleFunctions = JSON.parse($scope.data.availableRoleFunctions);
+
+																							// $scope.resetMenu();
+																							/*$scope.closeThisDialog({
+																										result : true,
+																										availableRoleFunctions : $scope.availableRoleFunctions
+																									});*/
+																							$scope.$dismiss({result : true,availableRoleFunctions : $scope.availableRoleFunctions});
+																						},
+																						function(error) {
+																							console.log("failed");
+																							// reloadPageOnce();
+																							//$scope.closeThisDialog(true);
+																							$scope.$dismiss('cancel');
+																						});
+
+																	});
+
+												}
+											};
+
+											$scope.close = function() {
+												this.closeThisDialog(true);
+											};
+										}
+
+								);
+					}
+				});
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js b/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
index 1176e50a..67bf3b2e 100644
--- a/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
+++ b/ecomp-portal-FE-common/client/app/views/role/rolepopupmodelController.js
@@ -88,9 +88,6 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 									
 									
 								}
-		    					 else {
-		    						 availableRoleFunction.selected=!availableRoleFunction.selected;
-			    				 }
 								/*
 							  	  $.ajax({
 							  		 type : 'POST',
@@ -106,7 +103,11 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 									 }
 							  	  });
 							  	  */
-		    			});
+		    			}).catch(function(err) {
+							  availableRoleFunction.selected=!availableRoleFunction.selected;
+					    		$log.error('roleListController::confirmBoxService.confirm error:', err);
+
+				    	});
 	
 			} else {
 				//add role function
@@ -127,10 +128,7 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 									  function(data) {
 										  confirmBoxService.showInformation("Error while saving.");
 									  });
-							} else {
-									  availableRoleFunction.selected=!availableRoleFunction.selected;
-							}
-									/*		  
+							}	/*		  
 								  	  $.ajax({
 								  		 type : 'POST',
 								  		 url : uuu,
@@ -150,7 +148,10 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 						    	function(){
 						    		availableRoleFunction.selected=!availableRoleFunction.selected;
 						    	})*/
-			});
+			}).catch(function(err) {
+				  availableRoleFunction.selected=!availableRoleFunction.selected;
+		    		$log.error('roleListController::confirmBoxService.confirm error:', err);
+	    	});
 			
 			  
 	}
@@ -180,10 +181,11 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 							  function(data) {
 								  confirmBoxService.showInformation("Error while saving.");
 							  });
-						  } else {
-							  availableRole.selected=false;
 						  }
-	    			});
+	    			}).catch(function(err) {
+	    				availableRole.selected=!availableRole.selected;
+			    		$log.error('roleListController::confirmBoxService.confirm error:', err);
+		    	});
 					  	 /* $.ajax({
 					  		 type : 'POST',
 					  		 url : uuu,
@@ -219,8 +221,6 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 							  function(data) {
 								  confirmBoxService.showInformation("Error while saving.");
 							  });
-						  } else {
-							  availableRole.selected=false;
 						  }
 			  	 /* $.ajax({
 			  		 type : 'POST',
@@ -236,7 +236,10 @@ app.controller('rolepopupController',  function ($scope, role, roleId, confirmBo
 					 }
 			  	});*/
 				
-	    	});
+	    	}).catch(function(err) {
+				availableRole.selected=!availableRole.selected;
+	    		$log.error('roleListController::confirmBoxService.confirm error:', err);
+    	});
 		
 		  
 	}
diff --git a/ecomp-portal-FE-common/client/app/views/search/search.less b/ecomp-portal-FE-common/client/app/views/search/search.less
index 11c71f9a..85d79d01 100644
--- a/ecomp-portal-FE-common/client/app/views/search/search.less
+++ b/ecomp-portal-FE-common/client/app/views/search/search.less
@@ -63,4 +63,12 @@ padding-bottom: 20px;
 
 .search-popup-content{
 	line-height: normal; right: 167px; min-height: 122px; height: auto; width: auto;
+}
+
+.search-li {
+	font-size: 16px;
+}
+
+.contentVertical-pos {
+	position: relative;
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
index 2625f32c..8dc97447 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.controller.less
@@ -168,3 +168,49 @@ background-color: transparent;
  padding-bottom: 11px;
 
 }
+
+.contactus-manage-table {
+	height: 300px;
+}
+
+.contactus-addWidgetHeader {
+	margin-top: 15px; 
+	margin-left: -78px;
+} 
+
+.contactus-addWidgetHeader-txt {
+	font-size: 18px;
+}
+
+.mots-property-label-spn {
+	color: Red;
+}
+
+.property-label-desc-txtarea {
+	margin-top: 0px; 
+	margin-bottom: 0px; 
+	height: 100px;
+}
+
+.btn-ht {
+	height: 50px;
+}
+
+.btn-ht-href {
+	float: right; 
+	margin-top: 20px;
+}
+
+.close-btn-ht-href {
+	float: right; 
+	margin-right: -230px !important;
+}
+
+.manage-contactus-home {
+	margin-top: 25px;
+}
+
+.manage-contactus-top {
+	margin-top: 10px; 
+	margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
index 4c8f6dee..c85618e2 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us-manage/contact-us-manage.html
@@ -17,165 +17,112 @@
   limitations under the License.
   ================================================================================
   -->
-<div style="margin-top: 10px; margin-bottom: 10px;"></div>
-<br />
-
-<div style="margin-top: 25px;">
-	<div id="title" class="manage-contactUs-home-title">Manage
-		Contact Us</div>
-	<div class="contact-us-margin">
-		<div class="get-access-table">
-			<div class="table-control">
-				<div class="c-ecomp-portal-abs-table" style="height: 300px">
-					<table b2b-table id="table-main" table-data="contactUsList"
-						current-page="ignoredCurrentPage">
-						<thead b2b-table-row type="header">
-							<tr>
-								<th id="th-users-0" b2b-table-header key="ecomp_function"
-									default-sort="a">App Name</th>
-								<th id="th-users-1" b2b-table-header key="app_name"
-									sortable="true">Contact Name</th>
-								<th id="th-users-2" b2b-table-header key="app_name"
-									sortable="true">Contact Email</th>
-								<th id="th-users-3" b2b-table-header key="role_name"
-									sortable="true">Contact URL</th>
-								<th id="th-users-4" b2b-table-header key="role_name"
-									sortable="true">Description</th>
-								<th id="th-users-5" b2b-table-header key="role_name"
-									sortable="true">Edit</th>
-								<th id="th-users-6" b2b-table-header key="role_name"
-									sortable="true">Delete</th>
-							</tr>
-						</thead>
-						<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
-						<tbody b2b-table-row type="body" class="table-body"
-							track-by="$index" row-repeat="rowData in contactUsList">
-							<tr id="tr-rowData" ng-click="">
-								<td b2b-table-body>
-									<div id="users-page-td-appName" ng-bind="rowData.appName"></div>
-								</td>
-								<td b2b-table-body>
-									<div id="users-page-td-name" ng-hide="rowData.showEdit"
-										ng-bind="rowData.contactName"></div> <input
-									class="input-inline-edit-text" type="text"
-									ng-show="rowData.showEdit"
-									ng-model="contactUsList[$index].contactName" />
-								</td>
-								<td b2b-table-body>
-									<div id="users-page-td-email" ng-hide="rowData.showEdit"
-										ng-bind="rowData.contactEmail"></div> <input
-									class="input-inline-edit-text" type="text"
-									ng-show="rowData.showEdit"
-									ng-model="contactUsList[$index].contactEmail" />
-								</td>
-								<td b2b-table-body>
-									<div id="users-page-td-url" ng-hide="rowData.showEdit"
-										ng-bind="rowData.url"></div> <input
-									class="input-inline-edit-text" type="text"
-									ng-show="rowData.showEdit" ng-model="contactUsList[$index].url" />
-								</td>
-								<td b2b-table-body>
-									<div id="users-page-td-descr" ng-hide="rowData.showEdit"
-										ng-bind=" rowData.description"></div> <input
-									class="input-inline-edit-text" type="text"
-									ng-show="rowData.showEdit"
-									ng-model="contactUsList[$index].description" />
-								</td>
-								<td b2b-table-body>
-									<div class="delete-contact-us" ng-hide="rowData.showEdit"
-										ng-click="rowData.showEdit=true">
-										<span class="icon-edit"></span>
-									</div> <span ng-show="rowData.showEdit"> <a
-										btn-type="primary"
-										ng-click="editContactUsFun(rowData); rowData.showEdit=false"
-										class="btn btn-alt btn-small" size="small">Save</a>
-								</span>
-								</td>
-								<td b2b-table-body>
-									<div class="delete-contact-us"
-										ng-click="delContactUsFun(rowData)">
-										<span class="icon-misc-trash"></span>
-									</div>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-
-				<div id="divider-line"></div>
-				<div style="margin-top: 15px; margin-left: -78px;">
-					<div id="addWidgetHeader" class="contact-us-margin">
-						<h1 style="font-size: 18px;">Add Application Contact
-							Information</h1>
-						<!-- <div class="errMsg">{{errMsg}}</div> -->
-					</div>
-					<div id="addWidget" class="contact-us-margin">
-						<div>
-							<div id="add-contact-us-field-appname"
-								class="add-contact-us-field">
-								<div id="mots-property-label" class="property-label"><span ID="required" style="color: Red;"visible="false"> *</span>App	Name</div>
-								<select id="dropdown1" name="dropdown1" b2b-dropdown
-									placeholder-text="Select an App"
-									ng-model="newContactUs.app.value">
-									<option b2b-dropdown-list
-										option-repeat="d in contactUsAllAppList" value="{{d.value}}">{{d.title}}</option>
-								</select>
-								<div id="mots-property-label-required" ng-show="newContactUs.app.title==null || newContactUs.app.title=='' ">
-							<small class="mandatory-categories">App Name is Required</small>
-							</div>
-							</div>
-							<br>
-							<div id="add-contact-us-field-contactname"
-								class="add-contact-us-field">
-								<div id="property-label-name" class="property-label">Contact
-									Name</div>
-								<input id="property-input-name" class="input-text-area"
-									type="text" ng-model="newContactUs.name" />
-							</div>
-							<div id="add-contact-us-field-email" class="add-contact-us-field">
-								<div id="property-label-email" class="property-label">Contact
-									Email</div>
-								<input id="property-input-email" class="input-text-area"
-									type="text" ng-model="newContactUs.email" />
-							</div>
-							<div id="add-contact-us-field-url" class="add-contact-us-field">
-								<div id="property-label-url" class="property-label">Contact
-									URL</div>
-								<input id="property-input-url" class="input-text-area"
-									type="text" ng-model="newContactUs.url" />
-							</div>
-							<div id="add-contact-us-field-desc"
-								class="add-contact-us-field-des">
-								<div id="property-label-desc" class="property-label">Description</div>
-								<textarea id="property-input-desc"
-									style="margin-top: 0px; margin-bottom: 0px; height: 100px"
-									ng-model="newContactUs.desc"></textarea>
-							</div>
-						</div>
-						<div style="height: 50px;">
-							<a style="float: right; margin-top: 20px"
-								class="btn btn-alt btn-small" ng-click="newContactUsFun()" ng-disabled="newContactUs.app.title==null || newContactUs.app.title=='' ">Add
-								New</a>
+<div class="b2b-modal-header" >
+	<h2 id="myModalLabel" b2b-modal-title="" tabindex="-1">Manage Contact Us</h2>
+	<div class="corner-button">
+		<button type="button" class="close" aria-label="Close"	ng-click="$dismiss('cancel')"></button>
+	</div>
+</div>
+<div class="b2b-modal-body" tabindex="0" role="region" aria-label="Modal header text content"	>
+	<div class="c-ecomp-portal-abs-table contactus-manage-table">
+		<table b2b-table id="table-main" table-data="contactUsList"	current-page="ignoredCurrentPage">
+			<thead b2b-table-row type="header">
+				<tr>
+					<th id="th-users-0" b2b-table-header key="ecomp_function" default-sort="a">App Name</th>
+					<th id="th-users-1" b2b-table-header key="app_name" sortable="true">Contact	Name</th>
+					<th id="th-users-2" b2b-table-header key="app_name" sortable="true">Contact	Email</th>
+					<th id="th-users-3" b2b-table-header key="role_name" sortable="true">Contact URL</th>
+					<th id="th-users-4" b2b-table-header key="role_name" sortable="true">Description</th>
+					<th id="th-users-5" b2b-table-header key="role_name" sortable="true">Edit</th>
+					<th id="th-users-6" b2b-table-header key="role_name" sortable="true">Delete</th>
+				</tr>
+			</thead>
+			<!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data -->
+			<tbody b2b-table-row type="body" class="table-body" track-by="$index" row-repeat="rowData in contactUsList">
+				<tr id="tr-rowData" ng-click="">
+					<td b2b-table-body>
+						<div id="users-page-td-appName" ng-bind="rowData.appName"></div>
+					</td>
+					<td b2b-table-body>
+						<div id="users-page-td-name" ng-hide="rowData.showEdit" ng-bind="rowData.contactName"></div> 
+						<input	class="input-inline-edit-text" type="text"	ng-show="rowData.showEdit"	ng-model="contactUsList[$index].contactName" />
+					</td>
+					<td b2b-table-body>
+						<div id="users-page-td-email" ng-hide="rowData.showEdit"	ng-bind="rowData.contactEmail"></div> 
+						<input	class="input-inline-edit-text" type="text"	ng-show="rowData.showEdit"	ng-model="contactUsList[$index].contactEmail" />
+					</td>
+					<td b2b-table-body>
+						<div id="users-page-td-url" ng-hide="rowData.showEdit"	ng-bind="rowData.url"></div> 
+						<input		class="input-inline-edit-text" type="text"	ng-show="rowData.showEdit" ng-model="contactUsList[$index].url" />
+					</td>
+					<td b2b-table-body>
+						<div id="users-page-td-descr" ng-hide="rowData.showEdit"		ng-bind=" rowData.description"></div> 
+						<input	class="input-inline-edit-text" type="text"	ng-show="rowData.showEdit"	ng-model="contactUsList[$index].description" />
+					</td>
+					<td b2b-table-body>
+						<div class="delete-contact-us" ng-hide="rowData.showEdit"	ng-click="rowData.showEdit=true">
+							<span class="icon-edit"></span>
+						</div> 
+						<span ng-show="rowData.showEdit"> 
+							<a btn-type="primary"	ng-click="editContactUsFun(rowData); rowData.showEdit=false"	class="btn btn-alt btn-small" size="small">Save</a>
+					</span>
+					</td>
+					<td b2b-table-body>
+						<div class="delete-contact-us" ng-click="delContactUsFun(rowData)">
+							<span class="icon-misc-trash"></span>
 						</div>
-						<div id="divider-line-bottom"></div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 
-						<div style="height: 50px;">
-							<a style="float: right; margin-right: -230px !important;"
-								class="btn btn-alt btn-small" ng-click="closeDialog()">Close</a>
-						</div>
+	<div id="divider-line"></div>
 
-					</div>
 
+	<div class="contactus-addWidgetHeader">
+		<div id="addWidgetHeader" class="contact-us-margin">
+			<h1 class="contactus-addWidgetHeader-txt">Add Application Contact Information</h1>
+		</div>
+		<div id="addWidget" class="contact-us-margin">
+			<div>
+				<div id="add-contact-us-field-appname" class="add-contact-us-field">
+					<div id="mots-property-label" class="property-label">
+						<span ID="required" class="mots-property-label-spn"	visible="false"> *</span>App Name
+					</div>
+					<select id="dropdown1" name="dropdown1" b2b-dropdown	placeholder-text="Select an App" ng-model="newContactUs.app.value">
+						<option b2b-dropdown-list option-repeat="d in contactUsAllAppList"	value="{{d.value}}">{{d.title}}</option>
+					</select>
+					<div id="mots-property-label-required"	ng-show="newContactUs.app.title==null || newContactUs.app.title=='' ">
+						<small class="mandatory-categories">App Name is Required</small>
+					</div>
 				</div>
-
-			</div>
+				<br>
+				<div id="add-contact-us-field-contactname"	class="add-contact-us-field">
+					<div id="property-label-name" class="property-label">Contact Name</div>
+					<input id="property-input-name" class="input-text-area" type="text"	ng-model="newContactUs.name" />
+				</div>
+				<div id="add-contact-us-field-email" class="add-contact-us-field">
+					<div id="property-label-email" class="property-label">Contact Email</div>
+					<input id="property-input-email" class="input-text-area" type="text" ng-model="newContactUs.email" />
+				</div>
+				<div id="add-contact-us-field-url" class="add-contact-us-field">
+					<div id="property-label-url" class="property-label">Contact	URL</div>
+					<input id="property-input-url" class="input-text-area" type="text" ng-model="newContactUs.url" />
+				</div>
+				<div id="add-contact-us-field-desc" class="add-contact-us-field-des">
+					<div id="property-label-desc" class="property-label">Description</div>
+					<textarea id="property-input-desc"	class="property-label-desc-txtarea" ng-model="newContactUs.desc"></textarea>
+				</div>
+			</div>		
 		</div>
 	</div>
 </div>
-
-<script type="application/javascript">
-    $(document).ready(function(){
-        $(".ngdialog-content").css("width","85%");
-        $(".ngdialog-close").attr('id','dialog-close');
-    });
-</script>
+<div class="b2b-modal-footer ng-scope ng-isolate-scope">
+	<div class="cta-button-group cta-modal-footer-flex">
+		<div>
+			<button class="btn btn-clear btn-medium pull-left" type="button" ng-click="$dismiss('cancel')">Close</button>
+			<button class="btn btn-alt btn-medium" type="button" ng-click="newContactUsFun()" ng-disabled="newContactUs.app.title==null || newContactUs.app.title=='' ">Add New</button>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
index eddde0d9..770f85e6 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.controller.js
@@ -105,21 +105,24 @@
             
             updateContactUsTable();
             this.editContactUsModalPopup = () => {
-                 // $log.debug('ContactUsCtrl::editContactUsModalPopup updating table data...');               
-                 var modalInstance = ngDialog.open({
-                     templateUrl: 'app/views/support/contact-us/contact-us-manage/contact-us-manage.html',
-                     controller: 'ContactUsManageController',
-                     resolve: {
-                         message: function message() {
-                             var message = {
-                                 type: 'Contact',
-                             };
-                             return message;
-                         }
-                     }
-                 }).closePromise.then(needUpdate => {	              	 
-                	 updateContactUsTable();
-	             });       
+            	var modalInstance = $modal.open({
+                    templateUrl: 'app/views/support/contact-us/contact-us-manage/contact-us-manage.html',
+                    controller: 'ContactUsManageController',
+                    windowClass: 'modal-docked',
+                    resolve: {
+                        message: function message() {
+                            var message = {
+                                type: 'Contact',
+                            };
+                            return message;
+                        }
+                    }
+                });
+            	
+            	modalInstance.result.finally(function (needUpdate) {
+                 	updateContactUsTable();            
+      	        });
+                    
              };
              
              this.goToSection = (id) => {
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.less b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.less
index 6fd0a420..9b463e40 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.less
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.less
@@ -12,6 +12,7 @@
 
   .w-ecomp-main-view-title{
   	 font-family: Omnes-ECOMP-W02,Arial;
+  	 font-size: 20px;
   }
   
   #title{
@@ -30,6 +31,8 @@
     padding-left: 0;
     padding-bottom: 32px;
     width: 100%;
+    height:100%;
+    overflow:auto;
    
 
     .contactUs-general-div {
@@ -89,5 +92,42 @@
 	padding-top: 5px;
 	padding-bottom: 5px;
 }
+
+.contactUs-table-ht {
+	height:60px;
+}
+
+.contactUs-table-spn {
+	top:20px;
+}
+
+.contactUs-table-title-spn {
+	float: right; 
+	margin-right: 30px; 
+	margin-top:20px;
+}
+
+.contactUs-collapsible-panel-spn {
+	margin-bottom: 20px;
+}
 	
+.contactUs-main-table {
+	border-spacing: 10px 5px; 
+	max-width:950px; 
+	margin:10px;
+}	
+	
+.contactUs-main-panel-labels {
+	width: 120px;
+}
+
+.contactUs-main-panel-value {
+	width: 830px;
+}
+
+.contactUs-table-ht {
+	height:auto;
+}
+
+
 }
diff --git a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
index 444a9820..c2ec02ca 100644
--- a/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/support/contact-us/contact-us.tpl.html
@@ -17,7 +17,7 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="w-ecomp-contactUs-home" style=" overflow:auto;''">
+<div class="w-ecomp-contactUs-home">
 	<div class="contactUs-home-container" id="page-content">
 		<div class="admins-page-main">
 			<div id="title" class="w-ecomp-main-view-title">
@@ -28,7 +28,7 @@
 			
 		<br/> 
 		<!-- Function Categories -->		
-		<div id="appFunctionInfo" style="font-size: 20px;" class="w-ecomp-main-view-title"> Application Functions
+		<div id="appFunctionInfo" class="w-ecomp-main-view-title"> Application Functions
 				<div b2b-table table-data="contact.functionalTableData" class="b2b-table-div">
 						<table>
 							<thead b2b-table-row type="header">
@@ -66,17 +66,17 @@
 		<br/>
 		<!-- Display applicationInfo panels -->
 		<div id="allAppInfo">
-			<div style="font-size: 20px;" class="w-ecomp-main-view-title"> All Applications		
+			<div class="w-ecomp-main-view-title"> All Applications		
 			</div>		
 			<div class="contactUs-general-div">
 				<div class="contact-us-table">
-				<div style="height:auto;" class="c-ecomp-portal-abs-table default">
+				<div class="c-ecomp-portal-abs-table default contactUs-table-ht">
 					<div ng-repeat="rowData in contact.appTable"
 						class="contactUs-collapsible-panel">
-						<div id="{{rowData.app_Id}}" style="height:60px; " class="contactUs-panel-header" ng-click="rowData.showFlag = !rowData.showFlag" >
-							<span id="appId{{$index}}" ng-bind="rowData.app_name" style="position:relative; top:20px"></span>
+						<div id="{{rowData.app_Id}}" class="contactUs-table-ht" class="contactUs-panel-header" ng-click="rowData.showFlag = !rowData.showFlag" >
+							<span id="appId{{$index}}" ng-bind="rowData.app_name" class="contactUs-table-spn"></span>
 							
-							<span style="float: right; margin-right: 30px; margin-top:20px;">
+							<span class="contactUs-table-title-sp">
 						 		<span ng-show="rowData.showFlag" title="Collapse app contact section" class="icon-controls-upPRIMARY"></span>
 								<span ng-hide="rowData.showFlag" title="Expand app contact section" class="icon-controls-down"></span>
 							</span>
@@ -85,13 +85,13 @@
 						<div id="collapse{{$index}}" ng-show="rowData.showFlag"
 							class="contactUs-collapsible-panel">
 							<div class="contactUs-txt" ng-hide="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
-								<span style="margin-bottom: 20px;"> No application information is available. Please use the links above to contact the ECOMP Portal team. </span>
+								<span class="contactUs-collapsible-panel-spn"> No application information is available. Please use the links above to contact the ECOMP Portal team. </span>
 							</div>
 		 					<div class="contactUs-txt" ng-show="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> 
-							  <table style="border-spacing: 10px 5px; max-width:950px; margin:10px;">
+							  <table class="contactUs-main-table">
 								<tr>
-									<td class="contactUs-panel-labels" style="width: 120px;">Contact:</td>
-									<td class="contactUs-panel-labels" style="width: 830px;">{{rowData.contact_name}}</td>
+									<td class="contactUs-panel-labels contactUs-main-panel-labels">Contact:</td>
+									<td class="contactUs-panel-labels contactUs-main-panel-value">{{rowData.contact_name}}</td>
 								</tr>
 								<tr>
 									<td class="contactUs-panel-labels">Email:</td>
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
index 0155592a..9a6b3f3d 100644
--- a/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html
@@ -17,6 +17,6 @@
   limitations under the License.
   ================================================================================
   -->
-<iframe id= "tabframe-{{tab.title.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%' style='height: 90vh;' 
+<iframe id= "tabframe-{{tab.title.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%' class='tab-iframe' 
 src='{{tab.content | trusted}}'
 ></iframe>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
index 9f90d610..76ee598c 100644
--- a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
+++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less
@@ -643,10 +643,13 @@ md-ink-bar{
   transition: transform @transition;
 }
 
+.icon-primary-close{
+font-size: 14px;
+}
 .tab-cross-sign{
-	position:relative;
-    margin-left: 126px;
-	top:-70px;
+	position: relative;
+    margin-left: 123px;
+    top: -76px;
 	 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  	 top:-70px;
 	}    
@@ -658,3 +661,25 @@ md-ink-bar{
     border-bottom-width:0px;
     padding: 6px 6px 6px 3px;   
 }
+
+.tab-iframe {
+	height: 90vh;
+}
+
+.selectedIndex-spn {
+	overflow: hidden;
+	white-space: 
+	nowrap;display: block;
+}
+
+.tab-space-pos {
+	position: fixed; 
+	right: 290px; 
+	top: 62px;
+}
+
+.search-box {
+	position: fixed; 
+	right: 0; 
+	top: 58px;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
index 5fc2d894..a691887f 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.controller.js
@@ -22,12 +22,17 @@
 (function () {
 
     class userNotificationCtrl {
-        constructor($scope,   message,  ngDialog) {
-    		$scope.messageData=message.text;
-   			//alert("message.text" + $scope.messageData);
+        constructor($scope,  ngDialog,items) {
+    		$scope.messageData=items.text;
+    		$scope.messageObject=items.messageObject;
+    		$scope.selectedAdminNotification=items.selectedAdminNotification;
+    		$scope.messageRecipients=items.messageRecipients;
+    		$scope.notifiHyperlink=function(ticket){
+     	    	window.open(ticket);
+    		}
          }
     }
-    userNotificationCtrl.$inject = ['$scope',  'message', 'ngDialog'];
+    userNotificationCtrl.$inject = ['$scope','ngDialog','items'];
     angular.module('ecompApp').controller('userNotificationCtrl', userNotificationCtrl);
 })();
 
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
index 5e5c55db..45c73518 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html
@@ -17,32 +17,58 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="w-ecomp-user-json-notification-details-admin"
-	ng-style="{bottom: tabBottom}">
-	 <div class="w-ecomp-main-container" >
-	<div class="user-notification" >
-		<div id="'widgets-details-title" class="w-ecomp-main-json-view-title"> Message Notification Details </div>
-	
-	
-<div class="notifications-properties-main">
-		
-		<div ng-bind-html="messageData"></div>
-		</div>
-		
-            <div class="dialog-control-close">
-               
-                <button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</button>
-            </div>
-		
+
+<div class="b2b-modal-header">
+			<h2 class="w-ecomp-main-json-view-title" id="notification-details-title">Message Notification Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="user-notification-button-cancel"
+					ng-click="$dismiss('cancel')"></button>
 			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+		<div class="notifications-properties-main">
+
+				<div>
 
-</div>
-</div>
+					<p>Message Source :{{selectedAdminNotification.msgSource}}</p>
+					<p>Message Title :{{selectedAdminNotification.msgHeader}}</p>
+					<p>Message Recipient :{{messageRecipients}}</p>
+					Notification Hyperlink :<a
+						ng-click="notifiHyperlink('{{selectedAdminNotification.notificationHyperlink}}')">{{selectedAdminNotification.notificationHyperlink}}</a>
 
-<script type="application/javascript">
-    $(document).ready(function(){
-        $(".ngdialog-content").css("width","40%")
-        $(".ngdialog-content").css("height","450px")
+					<div ng-repeat="(key, data) in messageObject">
 
-    });
-</script>
+						<div ng-switch on="key">
+							<div ng-switch-when="ticketNum">
+								{{key}} : <a
+									ng-click="notifiHyperlink('{{selectedAdminNotification.notificationHyperlink}}')">{{data}}
+								</a>
+							</div>
+							<div ng-switch-when="eventDate">
+								<p>{{key}} : {{data | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
+							</div>
+							<div ng-switch-when="lastModifiedDate">
+								<p>{{key}} : {{data | date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
+							</div>
+							<div ng-switch-default>
+								<p>{{key}} :{{data}}</p>
+							</div>
+						</div>
+					</div>
+
+
+				</div>
+			</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
+				<button id="div-cancel-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">Close</button>
+						
+					</div>
+			</div>
+			
+			
+			
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
index 4207bc6e..146bc523 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.controller.js
@@ -22,7 +22,7 @@
 (function () {
 
     class userNotificationsCtrl {
-        constructor($scope, $log, notificationService, confirmBoxService, $modal, ngDialog, $state) {
+        constructor($scope, $log, notificationService, filterFilter,confirmBoxService, $modal, ngDialog, $state) {
 
         	var priorityItems={"1":"Normal","2":"Important"};
         	$scope.priorityItems=priorityItems;
@@ -33,7 +33,8 @@
         	$scope.totalPages1 = 0;
         	$scope.viewPerPage1 = 15;
         	$scope.currentPage1 = 1;
-        	$scope.showLoader = false;
+            $scope.startIndex=0;
+            $scope.showLoader = false;
         	$scope.firstPlay = true;
         	// Start with empty list to silence error in console
         	$scope.tableData = [];
@@ -44,33 +45,35 @@
                 $scope.adminNotifications = res.data;
                 $scope.isLoadingTable = false;
                 $scope.tableData = res.data;
-    			var totalItems = $scope.tableData.length;
+                var totalItems = $scope.tableData.length;
     			$scope.totalPages1  = Math.ceil(totalItems / $scope.viewPerPage1);
     			$scope.showLoader = false;
     			$scope.currentPage1=1;
-    			var endIndex = 1 * $scope.viewPerPage1;
-    			var startIndex = endIndex - $scope.viewPerPage1;
-    			$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex); 
+    			$scope.tableAdminNotifItems = $scope.tableData; 
             	}).catch(err => {
                 $log.error('userNotificationsCtrl:getAdminNotifications:: error ', err);
                 $scope.isLoadingTable = false;
             });
              }
         	 
+        	
       	   getAdminNotifications();           
-
-        	$scope.customPageHandler = function(num) {
-        		$scope.currentPage1=num;
-        		var endIndex = num * $scope.viewPerPage1;
-        		var startIndex = endIndex - $scope.viewPerPage1;
-        		$scope.tableAdminNotifItems = $scope.tableData.slice(startIndex, endIndex);
-        	};
-        	  
-
+      	   
+        	
+        	  $scope.$watch('searchString', function (searchKey) {
+                  var search = searchKey;               
+                  this.totalPage1 = filterFilter($scope.tableData, search);
+                  var resultLen = this.totalPage1.length;
+                  $scope.totalPage1 = Math.ceil(resultLen/$scope.viewPerPage1);
+                  $scope.currentPage1 = 1;
+              });
           
-
+        	  $scope.updateTable = (num) => {
+                  this.startIndex=this.viewPerPage1*(num-1);
+                  this.currentPage1 = num;
+              };
            	
-           $scope.removeUserNotification = function (selectedAdminNotification) {
+           this.removeUserNotification = (selectedAdminNotification) => {
                 selectedAdminNotification.activeYn = 'N';
                 confirmBoxService.deleteItem(selectedAdminNotification.msgHeader)
                     .then(isConfirmed => {
@@ -114,41 +117,27 @@
            
 
           
-        	 $scope.showDetailedJsonMessage=function (selectedAdminNotification) {
+           this.showDetailedJsonMessage = (selectedAdminNotification) => {
         		 notificationService.getMessageRecipients(selectedAdminNotification.notificationId).then(res =>{
                      $scope.messageRecipients = res;
 				 var messageObject=JSON.parse(selectedAdminNotification.msgDescription);
-				 var html="";
-				 html+='<p>'+'Message Source'+' : '+selectedAdminNotification.msgSource+'</p>';
-				 html+='<p>'+'Message Title'+' : '+selectedAdminNotification.msgHeader+'</p>';
-				 html+='<p>'+'Message Recipient'+' : '+$scope.messageRecipients+'</p>';
-
-				 for(var field in  messageObject){
-					 if(field=='eventDate'||field=='lastModifiedDate'){
-						 html+='<p>'+field+' : '+new Date(+messageObject[field])+'</p>';
-						  
-					 }else{
-					 html+='<p>'+field+' : '+messageObject[field]+'</p>';
-					 
-					 }
-				 }
-
- 		     var modalInstance = ngDialog.open({
- 				    templateUrl: 'app/views/user-notifications-admin/user.notifications.Json.details.modal.page.html',
- 				    controller: 'userNotificationCtrl',
- 				    resolve: {
- 				    	message: function () {
- 				    		var message = {
- 				    			   title:    '',
- 		                       		text:    html
- 		                       		
- 		                           	};
- 				          return message;
- 				        },
- 				     
- 				      }
- 				  }); 
- 		     
+				  var modalInstance = $modal.open({
+	                    templateUrl: 'app/views/user-notifications-admin/user.notifications.json.details.modal.page.html',
+	                    controller: 'userNotificationCtrl',
+	                    sizeClass: 'modal-large', 
+	                    resolve: {
+	    					items: function () {
+	    						var items = {
+	  				    			   title:    '',
+	 	                       		    selectedAdminNotification:selectedAdminNotification,messageObject:messageObject,messageRecipients:$scope.messageRecipients
+	  		                       		
+	  		                           	};
+	  				          return items;
+	    			        	}
+	    		        }
+	                })
+		     
+      	 
         	 }).catch(err => {
                  $log.error('userNotificationsCtrl:getMessageRecipients:: error ', err);
                  $scope.isLoadingTable = false;
@@ -157,7 +146,7 @@
  			 };
     
 			 
-            $scope.editUserNotificationModal = function (selectedAdminNotification) {
+            this.editUserNotificationModal = (selectedAdminNotification) => {
 
                 // retrieve roleIds here
                 selectedAdminNotification.roleIds = null;
@@ -165,32 +154,44 @@
                     .then(res => {
                         selectedAdminNotification.roleIds = res.data;
 
-                        $scope.openUserNotificationModal(selectedAdminNotification);
+                        this.openUserNotificationModal(selectedAdminNotification);
                     }).catch(err => {
                         $log.error('UserNotifCtlr:getNotificationRoles:: error ', err);
 
                     });
             }
 
-            $scope.openUserNotificationModal = function (selectedAdminNotification) {
+            this.openUserNotificationModal = (selectedAdminNotification) => {
                 let data = null;
                 if (selectedAdminNotification) {
                     data = {
                         notif: selectedAdminNotification
                     }
                 }
-                ngDialog.open({
+             
+                
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/user-notifications-admin/user.notifications.modal.page.html',
-                    controller: 'userNotificationsModalCtrl',
-                    controllerAs: 'userNotifModal',
-                    data: data
-                }).closePromise.then(function (needUpdate) {
-                    getAdminNotifications();
-                });
+                    controller: 'userNotificationsModalCtrl as userNotifModal',
+                    sizeClass: 'modal-large', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.finally(function () {
+                		getAdminNotifications();
+     	        });
             }
-
+            $scope.customPageHandler = function(num) {
+        		$scope.currentPage1=num;
+        		this.startIndex=$scope.viewPerPage1*(num-1);
+        	};
+        	  
         }
     }
-    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
+    userNotificationsCtrl.$inject = ['$scope', '$log', 'notificationService','filterFilter', 'confirmBoxService', '$modal', 'ngDialog', '$state'];
     angular.module('ecompApp').controller('userNotificationsCtrl', userNotificationsCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
index e17ec46f..57926695 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.json.details.modal.page.less
@@ -14,11 +14,15 @@
     margin-left: 220px;
   .w-ecomp-main-json-view-title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r;  
     border-bottom: @portalDBlue 3px solid;
     width:100%;
   }
   
+   a:hover {
+  cursor:pointer;
+ }
+  
   .notifications-properties-main{
      padding-top: 16px;
     font-size: 14px;
@@ -27,15 +31,12 @@
       
   }
 input:not([type="button"]) {
-  height: 22px; }
+  height: 22px; 
+  }
   .widget-properties-main {
     padding: 16px;
     height: 460px;
     overflow-y: auto;
-
-
-    
-
   }
 
 .dialog-control-close {
@@ -44,5 +45,27 @@ input:not([type="button"]) {
     right: 16px;
 }
 
+.notifcation-label-user-requiredId {
+	color: red;
+}
+
+.user-enddate-error-txt {
+	color: #cf2a2a; 
+	font-size: 10px;
+}
+
+.user-enddate-error-small {
+	position: absolute;
+}
+
+.add-notification-input-title-ht {
+	height: 50px;
+}
+
+
+
+}
 
-}
\ No newline at end of file
+  a:hover {
+  cursor:pointer;
+ }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
index ee5f9e4d..3be148c8 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.less
@@ -124,5 +124,21 @@ p {
     width: 160px;
     margin-bottom: 11px;
   }
+}
+
 
+.tree-div{
+	height:300px;
+	overflow:auto;
+	.checkbox .skin{
+		left: 0px; 
+	    top: 0px; 
+	}
+	.checkbox input[type=checkbox]{
+		 margin-left: 0px;
+	}
+	.checkbox {
+	    display: inline !important;
+	    vertical-align: middle; 
+	}
 }
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
index 7821e070..48f7d9df 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.controller.js
@@ -22,18 +22,19 @@
 (function () {
 
     class userNotificationsModalCtrl {
-        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter) {
-
-            let newNotifModel = {
+        constructor($scope, $log, functionalMenuService, confirmBoxService, notificationService, $modal, ngDialog, $state, $filter,items) {
+        	this.debug = false;
+            $scope.newNotifModel = {
                 'isOnlineUsersOnly': null,
                 'isForAllRolesOptions': null,
                 'selectedPriority': null,
                 'isActive': null,
-                'startTime': null,
-                'endTime': null,
+                'startTime': '',
+                'endTime': '',
                 'msgHeader': null,
                 'msgDescription': null,
                 'roleIds': null,
+                'anyTreeItemSelected':false,
                 'roleObj': {notificationRoleIds:null}
             };
             
@@ -65,52 +66,52 @@
                 { "index": 0, "value": "Y", "title": "Yes" },
                 { "index": 1, "value": "N", "title": "No" }
             ];
-            $scope.isActive = $scope.isActiveOptions[0];
-            $scope.selectPriority = $scope.priorityOptions[0];
-            $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];
-          $scope.isForAllRoles=$scope.isForAllRolesOptions[0].value;
-          $scope.isFunctionalMenu ="Y";
-
-          $scope.selectedPriority=$scope.priorityOptions[0].value;
-
-            // $scope.notificationRoleIds = [];
-            $scope.msgHeader = '';
-            $scope.msgDescription = '';
-            $scope.treeTitle="Functional Menu";
-            $scope.notifObj= {isCategoriesFunctionalMenu:true};
+            $scope.newNotifModel.isActive = $scope.isActiveOptions[0];
+            $scope.newNotifModel.selectPriority = $scope.priorityOptions[0];
+            $scope.newNotifModel.isOnlineUsersOnly = $scope.onlineAllUsersOptions[1];
+            $scope.newNotifModel.isForAllRoles=$scope.isForAllRolesOptions[0].value;
+          $scope.newNotifModel.isFunctionalMenu ="Y";
+
+          $scope.newNotifModel.selectedPriority=$scope.priorityOptions[0].value;
+          $scope.newNotifModel.msgHeader = '';
+          $scope.newNotifModel.msgDescription = '';
+            $scope.newNotifModel.treeTitle="Functional Menu";
+            $scope.newNotifModel.notifObj= {isCategoriesFunctionalMenu:true};
 
             let init = () => {
-                // $log.info('userNotificationsModalCtrl::init');
+            	if(this.debug)
+            		$log.debug('userNotificationsModalCtrl::init');
                 this.isSaving = false;
                 var today = new Date();
                 $scope.minDate = today.toISOString().substring(0, 10);
                 var threeMonthsFromNow = new Date();
                 threeMonthsFromNow.setMonth(threeMonthsFromNow.getMonth() + 3);
                 $scope.maxDate = threeMonthsFromNow.toISOString().substring(0, 10);
-                if ($scope.ngDialogData && $scope.ngDialogData.notif) {
-                    // $log.debug('userNotificationsModalCtrl:init:: Edit
-					// notification mode for', $scope.ngDialogData.notif);
+                if (items && items.notif) {
+                	if(this.debug)
+                		$log.debug('userNotificationsModalCtrl:init:: Edit notification mode for', items.notif);
                     $scope.isEditMode = true;
                     $scope.editModeObj = {isEditMode: true};
-                    this.notif = _.clone($scope.ngDialogData.notif);
+                    this.notif = _.clone(items.notif);
                     $scope.modalPgTitle = 'View Notification'
-                    $scope.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];
-                    $scope.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;
-                    $scope.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];
-                    $scope.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;
-                    $scope.startTime = new Date(this.notif.startTime);
-                    $scope.endTime = new Date(this.notif.endTime);
-                    $scope.msgHeader = this.notif.msgHeader;
-                    $scope.msgDescription = this.notif.msgDescription;
+                    $scope.newNotifModel.isOnlineUsersOnly = $scope.onlineAllUsersOptions[this.YN_index_mapping[this.notif.isForOnlineUsers]];
+                    $scope.newNotifModel.isForAllRoles = $scope.isForAllRolesOptions[this.YN_index_mapping[this.notif.isForAllRoles]].value;
+                    $scope.newNotifModel.isActive = $scope.isActiveOptions[this.YN_index_mapping[this.notif.activeYn]];
+                    $scope.newNotifModel.selectedPriority = $scope.priorityOptions[this.notif.priority - 1].value;
+                    $scope.newNotifModel.startTime = new Date(this.notif.startTime);
+                    $scope.newNotifModel.endTime = new Date(this.notif.endTime);
+                    $scope.newNotifModel.msgHeader = this.notif.msgHeader;
+                    $scope.newNotifModel.msgDescription = this.notif.msgDescription;
                     $scope.notificationId = this.notif.notificationId;
-                    $scope.notificationRoleIds = this.notif.roleIds;
+                    $scope.newNotifModel.notificationRoleIds = this.notif.roleIds;
                     $scope.roleObj = {notificationRoleIds:this.notif.roleIds};
                 } else {
-                	// $log.debug('AppDetailsModalCtrl:init:: New app mode');
+                	if(this.debug)
+                		$log.debug('AppDetailsModalCtrl:init:: New app mode');
                     $scope.isEditMode = false;
                     $scope.editModeObj = {isEditMode: false};
                     $scope.modalPgTitle = 'Add a New Notification'
-                    this.notif = _.clone(newNotifModel);
+                    this.notif = _.clone($scope.newNotifModel);
                     $scope.roleObj = {notificationRoleIds:null};
                 }
             };
@@ -143,291 +144,347 @@
                 }
             };
             $scope.addUserNotificationValidation = function () {
-                // // pre-processing
-                if (!($scope.isEditMode)) {                    
-                    var validation=false;
-
-               if($scope.startTime && $scope.endTime && $scope.msgHeader != '' && $scope.msgDescription != '' && ($scope.startTime<$scope.endTime)){
-            	   validation=true;
-            	   if( $scope.isForAllRoles=='N'){
-                       validation =  $scope.checkBoxObj.isAnyRoleSelected;
-                   }
-               }
-               else{
-            	   validation=false;
-            	   }
-                    
-                    	
-                   return !validation; 
-                }
-            }
+				// // pre-processing
+				if (!($scope.isEditMode)) {                    
+					var validation=false;
+					if($scope.isDateValid($scope.newNotifModel.startTime) && $scope.isDateValid($scope.newNotifModel.endTime) && $scope.newNotifModel.msgHeader != '' && $scope.newNotifModel.msgDescription != '' && ($scope.newNotifModel.startTime<$scope.newNotifModel.endTime)){
+						validation=true;
+						if( $scope.newNotifModel.isForAllRoles=='N'){
+							validation =  $scope.checkTreeSelect();
+						}
+					}
+					else{
+						validation=false;
+					}
+					return !validation; 
+				}
+			}
             
             /* format the value for viewing a notification */
             $scope.formatStartDate = function () {
-            	if ($scope.startTime) {
-            		$scope.startTime = $filter('date')($scope.startTime, 'medium'); 
+            	if ($scope.newNotifModel.startTime) {
+            		$scope.newNotifModel.startTime = $filter('date')($scope.startTime, 'medium'); 
            	}            	
             }
             
             /* format the value for viewing a notification */
             $scope.formatEndDate = function () {
-            	if($scope.endTime){
-            		$scope.endTime = $filter('date')($scope.endTime, 'medium');
+            	if($scope.newNotifModel.endTime){
+            		$scope.newNotifModel.endTime = $filter('date')($scope.endTime, 'medium');
             	}
             }
             
-            $scope.addUserNotification = function () {
-                $scope.notificationRoleIds = [];
-                // pre-processing
-                for (var key in $scope.checkboxIdDict) {
-                    if ($scope.checkboxIdDict[key].is_box_checked && ($scope.checkboxIdDict[key].role_id != null)) {
-                        var role_ids = $scope.checkboxIdDict[key].role_id;
-                        for (var i in role_ids) {
-                            if (!($scope.notificationRoleIds.indexOf(role_ids[i]) > -1)) {
-                                $scope.notificationRoleIds.push(role_ids[i]);
-                            }
-                        }
-                    }
-                }
-
-                $scope.notificationRoleIds.sort();
-                if (($scope.isOnlineUsersOnly) && ($scope.isForAllRoles) && ($scope.selectedPriority) && ($scope.isActive)
-                    && ($scope.startTime) && ($scope.endTime) && ($scope.msgHeader != '') && ($scope.msgDescription != '')) {
-                    this.newUserNotification =
-                        {
-                            'notificationId':$scope.notificationId,
-                            'isForOnlineUsers': $scope.isOnlineUsersOnly.value,
-                            'isForAllRoles': $scope.isForAllRoles,
-                            'priority': $scope.selectedPriority,
-                            'activeYn': $scope.isActive.value,
-                            'startTime': $scope.startTime,
-                            'endTime': $scope.endTime,
-                            'msgHeader': $scope.msgHeader,
-                            'msgDescription': $scope.msgDescription,
-                            'roleIds': $scope.notificationRoleIds,
-                            'createdDate': new Date()
-                        };
-
-                    // POST ajax call here;
-                    if ($scope.isEditMode) {
-                        notificationService.updateAdminNotification(this.newUserNotification)
-                            .then(() => {
-                                //$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');
-                                $scope.closeThisDialog(true);
-                                // emptyCookies();
-                            }).catch(err => {
-                                $log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));
-                                switch (err.status) {
-                                    case '409':         // Conflict
-                                        // handleConflictErrors(err);
-                                        break;
-                                    case '500':         // Internal Server Error
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    case '403':         // Forbidden... possible
-														// webjunction error to
-														// try again
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    default:
-                                        confirmBoxService.showInformation('There was a problem updating the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
-                                }
-                            }).finally(() => {
-                                // for bug in IE 11
-                                var objOffsetVersion = objAgent.indexOf("MSIE");
-                                if (objOffsetVersion != -1) {
-                                    $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
-                                    $window.location.reload();   
-                                }
-                                // for bug in IE 11
-                            });
-
-                    } else {
-                        notificationService.addAdminNotification(this.newUserNotification)
-                            .then((res) => {
-                                $log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);
-                                if(res.status=='ERROR'){
-                                	 confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                             ' Error: ' + res.response).then(isConfirmed => { });
-
-                                	
-                                }
-                                else{
-                                	 $scope.closeThisDialog(true);
-                                }
-                               
-                                // emptyCookies();
-                            }).catch(err => {
-                                switch (err.status) {
-                                    case '409':         // Conflict
-                                        // handleConflictErrors(err);
-                                        break;
-                                    case '500':         // Internal Server Error
-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                            'Please try again later. Error: ' + err.status).then(isConfirmed => { });
-                                        break;
-                                    default:
-                                        confirmBoxService.showInformation('There was a problem adding the notification. ' +
-                                            'Please try again. If the problem persists, then try again later. Error: ' +
-                                            err.status).then(isConfirmed => { });
-                                }
-                                $log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));
-                            })
-                    }
-
-                   
-                } else {
-                    $log.warn('please fill in all required fields');
-                	confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });
+            $scope.isDateValid = function (time) {
+            	if(time == undefined){
+                    return false;
                 }
+            	if(typeof time == 'object'){
+            		return true;
+            	}
+                var startDateformat	=time.split('/');
+                if (startDateformat.length != 3) return false;
+                var day = startDateformat[1];
+                var month = startDateformat[0];
+                 month= parseInt(month)-1;
+                var year = startDateformat[2];
+                if(year.length!=4) return false;
+                var composedDate = new Date(year, month, day);
+                 return composedDate.getDate() == day &&
+                         composedDate.getMonth() == month &&
+                         composedDate.getFullYear() == year;
+              
+            };
+            
+           
+            $scope.addUserNotification = function () {
+            	$scope.notificationRoleIds = [];
+				// pre-processing
+
+				for(var fi=0;fi<$scope.treedata.length;fi++){
+					var fLevel = $scope.treedata[fi];
+					if(fLevel){
+						var fLevelChild = fLevel.child;
+						for(var si=0;si<fLevelChild.length;si++){
+							var sLevel = fLevelChild[si];
+							if(sLevel){
+								var sLevelChild = sLevel.child;
+								if(sLevelChild){
+									for(var ti=0;ti< sLevelChild.length;ti++){
+										var tLevel = sLevelChild[ti];
+										if(tLevel.isSelected && tLevel.roleId){
+											$scope.newNotifModel.anyTreeItemSelected=true;
+											for(var i in tLevel.roleId)
+												$scope.notificationRoleIds.push(tLevel.roleId[i]);
+										}
+									}
+								}
+							}
+							if(sLevel.isSelected && sLevel.roleId){
+								for(var i in sLevel.roleId)
+									$scope.notificationRoleIds.push(sLevel.roleId[i]);
+							}
+						}
+					}               	
+				}
+
+				$scope.notificationRoleIds.sort();
+				if (($scope.newNotifModel.isOnlineUsersOnly) && ($scope.newNotifModel.isForAllRoles) && ($scope.newNotifModel.selectedPriority) && ($scope.newNotifModel.isActive)
+						&& ($scope.newNotifModel.startTime) && ($scope.newNotifModel.endTime) && ($scope.newNotifModel.msgHeader != '') && ($scope.newNotifModel.msgDescription != '')) {
+					this.newUserNotification =
+					{
+							'notificationId':$scope.notificationId,
+							'isForOnlineUsers': $scope.newNotifModel.isOnlineUsersOnly.value,
+							'isForAllRoles': $scope.newNotifModel.isForAllRoles,
+							'priority': $scope.newNotifModel.selectedPriority,
+							'activeYn': $scope.newNotifModel.isActive.value,
+							'startTime': $scope.newNotifModel.startTime,
+							'endTime': $scope.newNotifModel.endTime,
+							'msgHeader': $scope.newNotifModel.msgHeader,
+							'msgDescription': $scope.newNotifModel.msgDescription,
+							'roleIds': $scope.notificationRoleIds,
+							'createdDate': new Date()
+					};
+
+					// POST ajax call here;
+					if ($scope.isEditMode) {
+						notificationService.updateAdminNotification(this.newUserNotification)
+						.then(() => {
+							if(this.debug)
+								$log.debug('NotificationService:updateAdminNotification:: Admin notification update succeeded!');
+							$scope.closeThisDialog(true);
+						}).catch(err => {
+							$log.error('notificationService.updateAdminNotfication failed: ' + JSON.stringify(err));
+							switch (err.status) {
+							case '409':         // Conflict
+								// handleConflictErrors(err);
+								break;
+							case '500':         // Internal Server Error
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							case '403':         // Forbidden... possible
+								// webjunction error to
+								// try again
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							default:
+								confirmBoxService.showInformation('There was a problem updating the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' + err.status).then(isConfirmed => { });
+							}
+						}).finally(() => {
+							// for bug in IE 11
+							var objOffsetVersion = objAgent.indexOf("MSIE");
+							if (objOffsetVersion != -1) {
+								if(this.debug)
+									$log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
+								$window.location.reload();   
+							}
+							// for bug in IE 11
+						});
+
+					} else {
+						notificationService.addAdminNotification(this.newUserNotification)
+						.then((res) => {
+							if(this.debug)
+								$log.debug('notificationService:addAdminNotification:: Admin notification creation succeeded!,',res);
+							if(res.status=='ERROR'){
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										' Error: ' + res.response).then(isConfirmed => { });
+
+
+							}
+							else{
+								//$scope.closeThisDialog(true);
+								$scope.$dismiss('cancel');
+							}
+
+							// emptyCookies();
+						}).catch(err => {
+							switch (err.status) {
+							case '409':         // Conflict
+								// handleConflictErrors(err);
+								break;
+							case '500':         // Internal Server Error
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										'Please try again later. Error: ' + err.status).then(isConfirmed => { });
+								break;
+							default:
+								confirmBoxService.showInformation('There was a problem adding the notification. ' +
+										'Please try again. If the problem persists, then try again later. Error: ' +
+										err.status).then(isConfirmed => { });
+							}
+							$log.error('notificationService:addAdminNotification error:: ' + JSON.stringify(err));
+						})
+					}
+
+
+				} else {
+					$log.warn('please fill in all required fields');
+					confirmBoxService.showInformation('Please fill in all required fields').then(isConfirmed => { });
+				}
             }
+            $scope.functionalMenuRes={};
+            $scope.checkTreeSelect = function(){
+				if($scope.treedata){
+					for(var fi=0; fi<$scope.treedata.length;fi++){
+						var fLevel = $scope.treedata[fi];
+						if(fLevel.isSelected){
+							return true;
+						}                		
+						var sLevel = fLevel.child;
+						if(sLevel){
+							for(var si=0;si<sLevel.length;si++){
+								if(sLevel[si].isSelected){
+									return true;
+								}  
+								var tLevel = sLevel[si].child;
+								if(tLevel){
+									for(var ti=0;ti<tLevel.length;ti++){
+										if(tLevel[ti].isSelected){
+											return true;
+										}	
+									}                   		
+								}	
+							}
+						}
+					} 
+				}
+				return false;
+			}
             // Populate the category list for category dropdown list
             let getFunctionalMenu = () => {
-                this.isLoadingTable = true;
-                $scope.notifObj= {isCategoriesFunctionalMenu:true};
-                functionalMenuService.getFunctionalMenuRole().then(role_res => {
-                    var menu_role_dict = {};
-                    for (var i in role_res) {
-                        // if first time appear in menu_role_dict
-                        if (!(role_res[i].menuId in menu_role_dict)) {
-                            menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];
-                        } else {
-                            menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);
-                        }
-                    }
-                    functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {
-                        let actualData = [];
-                        var exclude_list = ['Favorites']
-                        // Adding children and label attribute to all objects in
-                        $scope.checkboxIdDict = {};
-                        $scope.checkBoxObj = {isAnyRoleSelected:false};
-                        for (let i = 0; i < res.length; i++) {
-                            res[i].children = [];
-                            res[i].label = res[i].text;
-                            res[i].id = res[i].text;
-                            // res[i].is_box_checked = false;
-                            res[i].can_check = true;
-                            res[i].roleId = menu_role_dict[res[i].menuId];
-                            $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId };
-                        }
-
-                        // Adding actual child items to children array in res
+            	this.isLoadingTable = true;
+            	if(this.debug)
+            		$log.debug('getFunctionalMenu:init');
+
+				functionalMenuService.getFunctionalMenuRole().then(role_res => {
+					var menu_role_dict = {};
+					if(this.debug)
+	            		$log.debug('functionalMenuService:getFunctionalMenuRole:: getting result', role_res);
+
+					for (var i in role_res) {
+						// if first time appear in menu_role_dict
+						if (!(role_res[i].menuId in menu_role_dict)) {
+							menu_role_dict[role_res[i].menuId] = [role_res[i].roleId];
+						} else {
+							menu_role_dict[role_res[i].menuId].push(role_res[i].roleId);
+						}
+					}
+					
+					functionalMenuService.getManagedFunctionalMenuForNotificationTree().then(res => {
+						if(this.debug)
+		            		$log.debug('functionalMenuService:getManagedFunctionalMenuForNotificationTree:: getting result', res);
+						var exclude_list = ['Favorites'];
+						let actualData=[];
+						$scope.functionalMenuRes=res;
+						
+						//Adding children and label attribute to all objects in res
+						for(let i = 0; i < res.length; i++){
+							res[i].child=[];
+							res[i].name=res[i].text;
+							res[i].id=res[i].text;
+							res[i].displayCheckbox= true;	                         
+							$scope.checkBoxObj = {isAnyRoleSelected:false};
+							res[i].roleId = menu_role_dict[res[i].menuId];
+							res[i].onSelect = function () {
+								$scope.$apply(function () {
+									$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+								})
+							};
+							
+							if (res[i].roleId && res[i].roleId.length==_.intersection(res[i].roleId, $scope.roleObj.notificationRoleIds).length){
+								res[i].isSelected= true;
+								res[i].selected= true;	
+								res[i].indeterminate= false;
+							}else{
+								/*default*/
+								res[i].isSelected= false;
+								res[i].selected= false;
+								res[i].indeterminate= false;		                     
+							}
+						}
+
+						// Adding actual child items to children array in res
 						// objects
-                        $scope.parentChildDict ={};
-                        $scope.parentChildRoleIdDict ={};
-                        for (let i = 0; i < res.length; i++) {
-                            let parentId = res[i].menuId;
-                            $scope.parentChildDict[parentId] = [];
-                            $scope.parentChildRoleIdDict[parentId]=[];
-                            for (let j = 0; j < res.length; j++) {
-                                let childId = res[j].parentMenuId;
-                                if (parentId === childId) {
-                                    res[i].children.push(res[j]);
-                                    $scope.parentChildDict[parentId].push(res[j].menuId);
-                                    //if res[j].roleId is defined
-                                    if (res[j].roleId) {
-                                    	for (let k in res[j].roleId) {
-                                            $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
-                                    	}
-                                    	
-                                    }
-                                }
-                            }
-                        }
-                        
-                        //check if grand children exist
-                            for (var key in $scope.parentChildDict){
-                            	var children = $scope.parentChildDict[key];
-                            	var isGrandParent = false;
-                            	if (children.length>0) {
-                            		for (var i in children) {
-                            			if ($scope.parentChildDict[children[i]].length>0){
-                            				isGrandParent = true;
-                            				break;
-                            			}
-                            		}
-                            	}
-                            	if (isGrandParent) {
-                                	for (var i in children) {
-                                		// if the child has children
-                                		if ($scope.parentChildDict[children[i]].length>0) {
-                                			for (var j in $scope.parentChildRoleIdDict[children[i]]) {
-                                				
-                                				if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[children[i]][j]) === -1) {
-                                					$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[children[i]][j]);
-                                				}
-                                			}
-                                		} else {
-                                			 
-                                		}
-                                	}
-                            	}
-
-                            };                            
-                                                        
-
-                                var ListMenuIdToRemove = [];
-                        //$scope.parentObj = {ListMenuIdToRemove : []};
-                        //get the list of menuId that needs to be removed 
-                        for (let i = 0; i < res.length; i++) {
-                            if ((res[i].children.length==0)&&(!res[i].roleId)) {
-                                var menuIdToRemove = res[i].menuId;
-                                if (ListMenuIdToRemove.indexOf(menuIdToRemove) === -1){
-                                    ListMenuIdToRemove.push(menuIdToRemove);
-                                }
-                            }
-                        }
-
-                        // a scope variable that marks whether each functional menu item should be displayed.
-                        $scope.toShowItemDict = {};                        
-                        for (let i = 0; i < res.length; i++) {
-                            if (res[i].roleId==null) {
-                                if (res[i].children.length==0) {
-                                    $scope.toShowItemDict[res[i].menuId]=false;                                
-                                } else if(res[i].children.length>0){
-                                    if($scope.parentChildDict[res[i].menuId].length === _.intersection($scope.parentChildDict[res[i].menuId], ListMenuIdToRemove).length){
-                                        $scope.toShowItemDict[res[i].menuId]=false;                                
-                                    } else {
-                                        $scope.toShowItemDict[res[i].menuId]=true;                                
-                                    }
-                                }
-                            } else {
-                                $scope.toShowItemDict[res[i].menuId]=true;
-                            }
-                        }
- 
-                        // Sort the top-level menu items in order based on the
-						// column
-                        res.sort(function (a, b) {
-                            return a.column - b.column;
-                        });
-
-                        // Sort all the children in order based on the column
-                        for (let i = 0; i < res.length; i++) {
-                            res[i].children.sort(function (a, b) {
-                                return a.column - b.column;
-                            });
-                        }
-
-                        // Forming actual parent items
-                        for (let i = 0; i < res.length; i++) {
-                            let parentId = res[i].parentMenuId;
-                            if (parentId === null) {
-                                actualData.push(res[i]);
-                            }
-                        }
-
-                        // $scope.treedata = actualData;
-                        var treedata = actualData[0].children;
-                        $scope.treedata = [];
-                        for (var i in treedata) {
-                            if (!(treedata[i].label.indexOf(exclude_list) > -1)) {
-                                $scope.treedata.push(treedata[i])
-                            }
-                        }
+						$scope.parentChildDict ={};
+						$scope.parentChildRoleIdDict ={};
+						for (let i = 0; i < res.length; i++) {
+							let parentId = res[i].menuId;
+							$scope.parentChildDict[parentId] = [];
+							$scope.parentChildRoleIdDict[parentId]=[];
+							for (let j = 0; j < res.length; j++) {
+								let childId = res[j].parentMenuId;
+								if (parentId === childId) {
+									res[i].child.push(res[j]);
+									$scope.parentChildDict[parentId].push(res[j].menuId);
+									//if res[j].roleId is defined
+									if (res[j].roleId) {
+										for (let k in res[j].roleId) {
+											$scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+										}
+
+									}
+								}
+							}
+						}
+						//check if grand children exist
+						for (var key in $scope.parentChildDict){
+							var child = $scope.parentChildDict[key];
+							var isGrandParent = false;
+							if (child.length>0) {
+								for (var i in child) {
+									if ($scope.parentChildDict[child[i]].length>0){
+										isGrandParent = true;
+										break;
+									}
+								}
+							}
+							if (isGrandParent) {
+								for (var i in child) {
+									// if the child has children
+									if ($scope.parentChildDict[child[i]].length>0) {
+										for (var j in $scope.parentChildRoleIdDict[child[i]]) {
+											if ($scope.parentChildRoleIdDict[key].indexOf($scope.parentChildRoleIdDict[child[i]][j]) === -1) {
+												$scope.parentChildRoleIdDict[key].push($scope.parentChildRoleIdDict[child[i]][j]);
+											}
+										}
+									} 
+								}
+							}
+
+						};     
+
+						// Sort the top-level menu items in order based on the column
+						res.sort(function(a, b) {
+							return a.column-b.column;
+						});
+
+						// Sort all the child in order based on the column
+						for(let i = 0; i < res.length; i++){
+							res[i].child.sort(function(a, b){
+								return a.column-b.column;
+							});
+						}
+
+						//Forming actual parent items
+						for(let i = 0; i < res.length; i++){
+							let parentId=res[i].parentMenuId;
+							if(parentId===null){
+								actualData.push(res[i]);
+							}
+						}
+						var treedata = actualData[0].child;
+						$scope.treedata = [];
+
+						/*Remove favorite from the list */
+						for (var i in treedata) {
+							if (!(treedata[i].name.indexOf(exclude_list) > -1)) {
+								$scope.treedata.push(treedata[i])
+							}
+						}
+						//setting b2b tree parameter
+						$scope.settingTreeParam();
 
                     }).catch(err => {
                         $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
@@ -443,71 +500,91 @@
      
             
             let getAppRoleIds = () => {
-                $scope.notifObj= {isCategoriesFunctionalMenu:false};
-                notificationService.getAppRoleIds().then(res => {
-                	
-                    res = res.data;
-                    let actualData = [];
-                    // var exclude_list = ['Favorites']
-                    var app_id_name_list = {};
-                        $scope.checkboxIdDict = {};
-                        $scope.checkBoxObj = {isAnyRoleSelected:false};
-
-                    for (let i = 0; i < res.length; i++) {
-                        if (!(res[i].appId in app_id_name_list)) {
-                            app_id_name_list[res[i].appId] = res[i].appName;
-                        }
-
-                        res[i].children = [];
-                        res[i].label = res[i].roleName;
-                        res[i].id = res[i].roleId;
-                        res[i].menuId = res[i].roleId;
-                        res[i].parentMenuId = res[i].appId;
-                        res[i].can_check = true;
-                        res[i].roleId = [res[i].roleId];
-                        $scope.checkboxIdDict[res[i].id] = { 'is_box_checked': false, 'role_id': res[i].roleId};   
-                    }
-                    
-                    for (var app_id in app_id_name_list) {
-                        var new_res = {};
-                        new_res.children = [];
-                        new_res.label = app_id_name_list[app_id];
-                        new_res.id = app_id;
-                        new_res.menuId = app_id;
-                        new_res.parentMenuId = null;
-                        new_res.appId = null;
-                        new_res.can_check = true;
-                        new_res.roleId = null;
-                        $scope.checkboxIdDict[new_res.id]= { 'is_box_checked': false, 'role_id': new_res.roleId };
-                        res.push(new_res);
-                    }
-                    $scope.parentChildRoleIdDict ={};
-                    //Adding actual child items to children array in res objects
-                    for (let i = 0; i < res.length; i++) {
-                        let parentId = res[i].menuId;
-                        $scope.parentChildRoleIdDict[parentId]=[];
-                        for (let j = 0; j < res.length; j++) {
-                            let childId = res[j].parentMenuId;
-                            if (parentId == childId) {
-                                res[i].children.push(res[j]);
-                                if (res[j].roleId) {
-                                	for (let k in res[j].roleId) {
-                                        $scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
-                                	}
-                                	
-                                }
-                            }
-                        }
-                    }
-                    //Forming actual parent items
-                    for (let i = 0; i < res.length; i++) {
-                        let parentId = res[i].parentMenuId;
-                        if (parentId === null) {
-                            actualData.push(res[i]);
-                        }
-                    }
-
-                    $scope.treedata = actualData;
+            	$scope.notifObj= {isCategoriesFunctionalMenu:false};
+				notificationService.getAppRoleIds().then(res => {
+					if(this.debug)
+	            		$log.debug('notificationService:getAppRoleIds:: getting result', res);
+					res = res.data;
+					let actualData = [];
+					var app_id_name_list = {};
+					$scope.checkBoxObj = {isAnyRoleSelected:false};
+					for (let i = 0; i < res.length; i++) {
+						if (!(res[i].appId in app_id_name_list)) {
+							app_id_name_list[res[i].appId] = res[i].appName;
+						}
+						res[i].child=[];
+						res[i].name=res[i].roleName;
+						res[i].displayCheckbox= true;
+						res[i].id = res[i].roleId;
+						res[i].menuId = res[i].roleId;
+						res[i].parentMenuId = res[i].appId;
+						res[i].can_check = true;
+						res[i].roleId = [res[i].roleId];
+						res[i].onSelect = function () {
+							$scope.$apply(function () {
+								$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+							})
+						};
+						/*assigning selected value*/
+						if (res[i].roleId && res[i].roleId.length==_.intersection(res[i].roleId, $scope.roleObj.notificationRoleIds).length){
+							res[i].isSelected= true;
+							res[i].selected= true;	
+							res[i].indeterminate= false;
+						}else{
+							/*default*/
+							res[i].isSelected= false;
+							res[i].selected= false;
+							res[i].indeterminate= false;		                     
+						}  
+					}
+
+					for (var app_id in app_id_name_list) {
+						var new_res = {};
+						new_res.child = [];
+						new_res.name = app_id_name_list[app_id];
+						new_res.id = app_id;
+						new_res.displayCheckbox= true;
+						new_res.menuId = app_id;
+						new_res.parentMenuId = null;
+						new_res.appId = null;
+						new_res.can_check = true;
+						new_res.roleId = null;
+						new_res.onSelect = function () {
+							$scope.$apply(function () {
+								$scope.newNotifModel.anyTreeItemSelected=$scope.checkTreeSelect();
+							})
+						};
+						res.push(new_res);
+					}
+					$scope.parentChildRoleIdDict ={};
+					//Adding actual child items to child array in res objects
+					for (let i = 0; i < res.length; i++) {
+						let parentId = res[i].menuId;
+						$scope.parentChildRoleIdDict[parentId]=[];
+						for (let j = 0; j < res.length; j++) {
+							let childId = res[j].parentMenuId;
+							if (parentId == childId) {
+								res[i].child.push(res[j]);
+								if (res[j].roleId) {
+									for (let k in res[j].roleId) {
+										$scope.parentChildRoleIdDict[parentId].push(res[j].roleId[k]);
+									}
+
+								}
+							}
+						}
+					}
+					//Forming actual parent items
+					for (let i = 0; i < res.length; i++) {
+						let parentId = res[i].parentMenuId;
+						if (parentId === null) {
+							actualData.push(res[i]);
+						}
+					}
+
+					$scope.treedata = actualData;                       
+					//setting correct parameters for b2b tree
+					$scope.settingTreeParam();
                 }).catch(err => {
                     $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ', err);
                 }).finally(() => {
@@ -523,6 +600,114 @@
                 getAppRoleIds();
             }
              
+            
+            
+            $scope.settingTreeParam = function(){
+            	/**************first level****************/
+				for(var fi=0; fi<$scope.treedata.length;fi++){
+					var fLevel = $scope.treedata[fi];
+					var sLevel = $scope.treedata[fi].child;
+					var sLevelSelectedCount =0;
+					var sLevelChildNumber =0
+					if(fLevel.child.length==0 && fLevel.roleId==null){
+						delete fLevel.child;
+					}else if(sLevel){
+						/**************Second level****************/
+						var sLevelDelArray=[]; 
+						for(var si=0;si<sLevel.length;si++){     
+							var deletThisSLev= false;
+							if(sLevel[si].child.length==0 && sLevel[si].roleId==null){
+								sLevel[si].displayCheckbox=false;
+								sLevelDelArray.push(sLevel[si].name);
+								sLevel[si].name = '';
+								sLevel[si].active=false;
+								delete sLevel[si].child;
+							} else if(sLevel[si].child.length==0){
+								delete sLevel[si].child;
+							}else{
+								/**************Third level****************/
+								var tLevel = sLevel[si].child;
+								var tLevelSelectedCount =0;
+								var tLevelChildNumber =0;
+								if(tLevel){
+									var tLevelDelArray=[]; 
+									var tLevelLen = tLevel.length;
+									var tLevelRoleIdUndefined =0;
+									for(var ti=0;ti<tLevel.length;ti++){
+										delete tLevel[ti].child;
+										if(tLevel[ti].roleId==null){
+											tLevel[ti].displayCheckbox=false;
+											tLevelDelArray.push(tLevel[ti].name);
+											tLevel[ti].name = '';
+											tLevel[ti].active=false;										
+											tLevelRoleIdUndefined++
+										}else{
+											if(tLevel[ti].isSelected)
+												tLevelSelectedCount++;
+
+											if(tLevel[ti].displayCheckbox)
+												tLevelChildNumber++;
+										} 	
+									}
+									if(tLevelRoleIdUndefined==tLevelLen)
+										deletThisSLev=true;
+									if(tLevelSelectedCount==tLevelChildNumber){
+										sLevel[si].isSelected=true;
+										sLevel[si].indeterminate=false;
+										sLevel[si].active=true;
+									}else if(tLevelSelectedCount>0){
+										sLevel[si].indeterminate=true;
+										sLevel[si].active=true;
+									}	
+									
+									/*Cleanup unused third level items*/
+									for(var i=0;i<tLevelDelArray.length;i++){
+										var name = tLevelDelArray[i];
+										for(var ti=0;ti<tLevel.length;ti++){
+											if(name==tLevel[ti].text){
+												tLevel.splice(ti,1);
+												break;
+											}
+										}
+									}
+								}	
+							}
+							if(deletThisSLev){ //remove the whole second level item if all it's child has no roleId
+								sLevel[si].displayCheckbox=false;
+								sLevelDelArray.push(sLevel[si].name);
+								sLevel[si].name = '';
+								sLevel[si].active=false;
+							}else{
+								if(sLevel[si].isSelected)
+									sLevelSelectedCount++;	
+								if(sLevel[si].displayCheckbox)
+									sLevelChildNumber++;
+							}
+						}
+						if(sLevelSelectedCount==sLevelChildNumber && sLevelChildNumber!=0){
+							fLevel.isSelected=true;
+							fLevel.indeterminate=false;
+							fLevel.active=true;
+						}else if(sLevelSelectedCount>0){
+							fLevel.indeterminate=true;
+							fLevel.active=true;
+						}else{
+							//fLevel.active=false;
+							fLevel.indeterminate=false;
+						}
+						/*Cleanup unused second level items*/
+						for(var i=0;i<sLevelDelArray.length;i++){
+							var name = sLevelDelArray[i];
+							for(var si=0;si<sLevel.length;si++){
+								if(name==sLevel[si].text){
+									sLevel.splice(si,1);
+									break;
+								}
+							}
+						}
+					}
+				}
+            }
             init();
             getFunctionalMenu();
 
@@ -530,7 +715,7 @@
         
     }
     
-    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter'];
+    userNotificationsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'confirmBoxService', 'notificationService', '$modal', 'ngDialog', '$state', '$filter','items'];
     angular.module('ecompApp').controller('userNotificationsModalCtrl', userNotificationsModalCtrl);
     
     angular.module('ecompApp').directive('attDatepickerCustom', ['$log', function($log) {
@@ -583,165 +768,5 @@
         };
     }]);
 
-    angular.module('ecompApp').directive('jqTreeUserNotif', ['functionalMenuService', '$log', 'confirmBoxService', '$compile', function (functionalMenuService, $log, confirmBoxService, $compile) {
-        return {
-            scope: true,
-            templateUrl: 'jq-tree-tmpl-user-notif.html',
-            link: function (scope, el, attrs) {
-
-                var $jqTree = el.find('#jqTreeUserNotif').tree({
-                    data: scope.treedata,
-                    autoOpen: scope.editModeObj.isEditMode,
-                    dragAndDrop: false,
-                    onCreateLi: function (node, $li) {
-                        node.is_checked = false;
-                        if (node.roleId&&scope.roleObj.notificationRoleIds) {
-                            node.is_checked = (node.roleId.length === _.intersection(node.roleId, scope.roleObj.notificationRoleIds).length);
-                        }                        
-                        if (typeof node.id =="string"){
-                            $li.attr('id', node.id.replace(/\s+/g, '_'));
-                        }
-                        var isChecked = '';
-                        if (node.is_checked) {
-                            isChecked = 'checked="checked"';
-                        }
-                        if (node.can_check) {
-                            var toShow = true;
-                            if (scope.notifObj.isCategoriesFunctionalMenu) {
-                                toShow = scope.toShowItemDict[node.menuId];
-                            }
-                            var isDisabled = "";
-                            if (scope.editModeObj.isEditMode) {
-                                isDisabled = " disabled"
-                                	
-                                	//if node is a parent/grandparent node
-                                    if (node.children.length>0){
-                                             	//whether to show node first
-                                    	if (_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
-                                    		toShow=true;
-                                    		if (scope.parentChildRoleIdDict[node.menuId].length==_.intersection(scope.parentChildRoleIdDict[node.menuId], scope.roleObj.notificationRoleIds).length) {
-                                                isChecked = 'checked="checked"';                                			
-                                    		}
-                                    	} else {
-                                    		toShow=false;
-                                    	}
-                                    } 
-                                    //if node is a child node
-                                    else {
-                                    	if (node.is_checked) {
-                                        	toShow=true;                                	
-                                    	} else {
-                                    		toShow=false;
-                                    	}
-                                    }
-
-                              }
-
-                            
-
-                            var template = '<input ng-click="thisCheckboxClicked($event)" type="checkbox" class="edit js-node-check" data-node-menu-id="' + node.menuId + '"  data-node-id="' + node.id + '" ' + isChecked + ' ng-show="' + toShow + '"' + isDisabled+ '/>'
-
-                            var templateEl = angular.element(template);
-                            var $jqCheckbox = $compile(templateEl)(scope);
-							if (toShow){
-									$li.find('.jqtree-element').prepend($jqCheckbox);
-								} else {
-									$li.find('.jqtree-element').remove();
-									}
-                        }
-                    }
-                });
-
-                scope.thisCheckboxClicked = function (e) {
-                
-                	var nodeId = e.target.attributes[4].value;
-                	
-             
-               
-                	var sBrowser, sUsrAg = window.navigator.userAgent;
-                	//if (sUsrAg.indexOf("Firefox") > -1) {
-                	
-                	if (sUsrAg.indexOf("Trident") > -1) {
-                		nodeId = e.target.attributes[5].value;
-                	}
-                    
-//                	if (sUsrAg.indexOf("MSIE") > 1) {
-//                		alert("hELLO tHIS IS IE10");
-//                		nodeId = e.target.attributes[3].value;
-//                		alert('nodeId 26 of IE 45 : '+nodeId);
-//                	}
-//                	
-                	var version = navigator.userAgent.match(/Firefox\/(.*)$/);
-                	
-                	if(version && version.length > 1){
-                	if(parseInt(version[1]) >= 50){
-                		nodeId = e.target.attributes[3].value;
-                	} else if(parseInt(version[1]) >= 45){
-                		
-                		nodeId = e.target.attributes[2].value;
-                	}
-                }
-                	var thisNode = el.find('#jqTreeUserNotif').tree('getNodeById', nodeId);
-                    var isChecked = e.target.checked;
-                    scope.checkboxIdDict[nodeId]['is_box_checked'] = isChecked;
-
-                    thisNode = angular.element(thisNode);
-                    if (thisNode[0].hasOwnProperty('children') && thisNode[0].children.length > 0) {
-                        var jsNodeCheckList = angular.element(e.target).parent().next().find('.js-node-check')
-                        // check/uncheck children items
-                        jsNodeCheckList.prop('checked', isChecked);
-
-                        for (var i in jsNodeCheckList) {
-                            var singlediv = jsNodeCheckList[i];
-                            if (typeof singlediv == 'object' & (!singlediv.length)) {
-                            	
-                            	var tempNodeId = angular.element(singlediv)[0].attributes[4].value;
-                            
-                                
-                                
-                                if (sUsrAg.indexOf("Trident") > -1) {
-                                	
-                                	var tempNodeId = angular.element(singlediv)[0].attributes[5].value;
-                                	
-                               
-                                }
-                                
-//                                if (sUsrAg.indexOf("MSIE") > 0) {
-//                                    var tempNodeId = angular.element(singlediv)[0].attributes[3].value;
-//                                    alert('tempNodeId 2 FF 45 : '+tempNodeId);
-//                                    }
-                                if(version && version.length > 1){
-                                	if(parseInt(version[1]) >= 50){
-                                		tempNodeId = angular.element(singlediv)[0].attributes[3].value;
-                                	} 
-                                	else if(parseInt(version[1]) >= 45){
-                                		tempNodeId = angular.element(singlediv)[0].attributes[2].value;
-                                	}
-                                }
-                                scope.checkboxIdDict[tempNodeId]['is_box_checked'] = isChecked;
-                            }
-                        }
-                    }
-
-                    scope.checkBoxObj.isAnyRoleSelected = false;
-                    for (var key in scope.checkboxIdDict) {
-                        if (scope.checkboxIdDict[key]['is_box_checked']&&scope.checkboxIdDict[key]['role_id']) {
-                            scope.checkBoxObj.isAnyRoleSelected = true;
-                            break;
-                        }
-                    }
-                }
-
-
-
-                scope.$watch('treedata', function (oldValue, newValue) {
-                    if (oldValue !== newValue) {
-                        $jqTree.tree('loadData', scope.treedata);
-                        $jqTree.tree('reload', function () {
-                        });
-                    }
-                });
-            }
-        };
-    }]);
+    
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
index b712ed26..e648c1d6 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.less
@@ -1,13 +1,16 @@
 
 .user-notification-details-modal {
-    width: 595px;
+   // width: 595px;
     margin:auto;
     background-color:white;
   .title {
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r; 
     border-bottom: @blue-active 3px solid;
 
   }    
+  .btn-calendar-icon{
+  	z-index:1;
+  }
     input:not([type="button"]) {
     height: 13px;
 } 
@@ -41,6 +44,11 @@
     width: 80px;
 }
 
+.radio {
+   
+    margin-bottom: 12px;
+}
+
     .left-container{
       display: inline-block;
       width: 48%;
@@ -59,7 +67,8 @@
 	position:absolute;
 	
 	}
-      
+
+
       .notif-input{
       width:302px;
       height:50px;
@@ -148,10 +157,15 @@
      }
       }
       
-   #datepicker{
-      z-index: 10000 !important;
-      width: 302px;
-      padding-left: 6px;
-  }     
-        
       
+ .radio input:checked + .skin:after{ 
+	width:22px; 
+	height:22px; 
+}          
+
+.btn-calendar-icon{
+    width: 10px;
+    position: absolute;
+    right: 25px;
+    top: 8px;
+}     
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
index ac7f4895..57433c1c 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.modal.page.html
@@ -18,38 +18,64 @@
   ================================================================================
   -->
 <div class="user-notification-details-modal">
-	<!--<div class="functional-menu-container">-->
-	<div id="app-title" class="title">{{modalPgTitle}}</div>
-	<div class="user-notification-details-contents">
+
+		<div class="b2b-modal-header">
+			<h2 class="account-details-title" id="account-add-details-title">{{modalPgTitle}}</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="user-notification-button-close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+					<div class="user-notification-details-contents">
 		<div class="left-container">
 			<div class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
 				<div class="user-notif-label">Broadcast to All Categories</div>
-				<label id="label-yes" class="simulateCatGridHeaderRadioButton"> <input
-					id="radio-button-yes" type="radio" ng-model="isForAllRoles" value="Y"> Yes
-				</label> <label id="label-no" class="simulateCatGridHeaderRadioButton"> <input
-					id="radio-button-no" type="radio" ng-model="isForAllRoles" value="N"> No
-				</label>
+				<div class="user-notif-label">
+					<label for="radio-button-yes" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isForAllRoles" id="radio-button-yes" name="YES" value="Y" > 
+		                <i class="skin"></i> 
+		                <span>Yes</span> 
+		            </label>
+				</div>
+				<div class="user-notif-label">
+		            <label for="radio-button-no" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isForAllRoles" id="radio-button-no" name="NO" value="N" > 
+		                <i class="skin"></i> 
+		                <span>No</span> 
+		            </label>
+		        </div> 
 			</div>
 			<div 
-				style="padding-left: 10px; {{(! isForAllRoles ||isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "
+				style="padding-left: 10px; {{(! newNotifModel.isForAllRoles ||newNotifModel.isForAllRoles=='Y')? 'opacity : 0.6; pointer-events: none;':' '}} {{isEditMode? 'opacity : 0.6;':' '}} "
 				class="user-notif-label">
 				<div id="notifcation-label-user" class="user-notif-label">
-					<span ng-show="isForAllRoles=='N'" runat="server" ID="required" style="color: Red;">*</span>
+					<span ng-show="newNotifModel.isForAllRoles=='N'" runat="server" ID="required" class="notifcation-label-user-requiredId">*</span>
 					Categories
 				</div>
 				<div>
 
 				<div id="notifcation-label-user-div" class="user-notif-label"></div>
-				<label id="funcMenu-label-yes" > <input id="radio-button-funcMenu"
-				type="radio" ng-model="isFunctionalMenu" ng-click="getFunctionalMenu()" value="Y"> Functional Menu
-				<br/>
-				</label> <label id="approles-label-no" > <input id="radio-button-approles"
-				type="radio" ng-model="isFunctionalMenu" ng-click="getAppRoleIds()" value="N"> Application Roles
-				</label>
+				<div class="user-notif-label">
+		            <label for="funcMenu-label-yes" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.isFunctionalMenu" ng-click="getFunctionalMenu()" id="funcMenu-label-yes" name="FUNCTIONAL MENU" value="Y" > 
+		                <i class="skin"></i> 
+		                <span>Functional Menu</span> 
+		            </label>
+		        </div>
+				<div class="user-notif-label">
+		            <label for="approles-label-no" class="radio"> 
+		                <input type="radio"ng-model="newNotifModel.isFunctionalMenu" ng-click="getAppRoleIds()" id="approles-label-no" name="APPLICATION ROLES" value="N" > 
+		                <i class="skin"></i> 
+		                <span>Application Roles</span> 
+		            </label>
+		        </div>
 
-				<div id="approles-checkbox" ng-show="!checkBoxObj.isAnyRoleSelected&&(isForAllRoles=='N')&&(!isEditMode)">
+				<div id="approles-checkbox" ng-show="!newNotifModel.anyTreeItemSelected&&(newNotifModel.isForAllRoles=='N')&&(!newNotifModel.isEditMode)">
 					
-					<div id="approles-checkbox-required" ng-show="!checkBoxObj.isAnyRoleSelected" >
+					<div id="approles-checkbox-required" ng-show="!newNotifModel.anyTreeItemSelected" >
 						
 
 						<small class="checkbox-categories">At least
@@ -60,64 +86,74 @@
 				
 				</div>
 				
-				<div  id="tree1">
-					<div id="Service_Creation"></div>
-				</div>
-				<div 
-					
-					id="jq-tree-div" jq-tree-user-notif ></div>
-
-					
-
-				<script type="text/ng-template" id="jq-tree-tmpl-user-notif.html">
-            	<div  id="jqTreeUserNotif" class="tree"></div>
-        	</script>
+				
+        	
+        	<br>
+        		 <div id="user-notif-tree-div" class="tree-div" >
+	        		 <div id="user-notif-tree" class="b2b-tree-checkbox" style="{{isEditMode? 'pointer-events: none;':' '}}">
+	                    <b2b-tree-node-checkbox  id="jqTreeUserNotif" collection="treedata" set-role="tree" group-it="false" ></b2b-tree-node-checkbox>
+	                </div>
+        		 </div>  
 			</div>
 			<div>
 
-				<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
-					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>
-					<label id="label-important" class="simulateCatGridHeaderRadioButton"> <input
-						id="radio-button-normal" type="radio" ng-model="selectedPriority" value="1"> Normal
-					</label> <label id="label-normal" class="simulateCatGridHeaderRadioButton"> <input
-						id="radio-button-important" type="radio" ng-model="selectedPriority" value="2">
-						Important
-					</label>
-				</div>
+				
 			</div>
 		</div>
 		<div id="app-conatiner-right" class="right-container">
+		<div id="add-user-notif-priority" class="add-widget-field" style="{{isEditMode? 'opacity : 0.6; pointer-events: none;':' '}} ">
+					<div id="user-notification-priority-label" class="user-notif-label">Priority</div>
+					<div class="user-notification-priority-label">
+		            <label for="label-important" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.selectedPriority" id="label-important" name="NORMAL" value="1" > 
+		                <i class="skin"></i> 
+		                <span>Normal</span> 
+		            </label>
+		            </div>
+					<div class="user-notification-priority-label">
+		            <label for="label-normal" class="radio"> 
+		                <input type="radio" ng-model="newNotifModel.selectedPriority" id="label-normal" name="IMPORTANT" value="2" > 
+		                <i class="skin"></i> 
+		                <span>Important</span> 
+		            </label>
+		            </div>
+				</div>
 
 			<div id="add-user-notif-startdate" class="add-widget-field"
 				style="padding-bottom: 12px; width: 301px !important;{{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-startdate-label" class="user-notif-label">
 					<div class="user-notif-label">
-						<span runat="server" ID="required" style="color: Red;">*</span>
+						<span runat="server" ID="required" class="notifcation-label-user-requiredId">*</span>
 						Start Date (Local Time)
 					</div>
-					<input class="notif-input-calendar" id="datepicker-start" type="text" 
-						ng-model="startTime" b2b-datepicker min="minDate" max="maxDate" 
-						required />
-					<div id="user-startdate-required" ng-show="!startTime">
-						<small class="mandatory-categories">Start Date is Required</small>
+					<div class="datepicker-container">
+						<input class="notif-input-calendar" id="datepicker-start" type="text" 
+							ng-model="newNotifModel.startTime" b2b-datepicker min="minDate" max="maxDate" 
+							required />
+					</div>
+					<div id="user-startdate-required" ng-show="!isDateValid(newNotifModel.startTime)">
+						<small class="mandatory-categories">Please enter valid date in MM/DD/YYYY format!</small>
 					</div>
+					
 				</div>
 				<div ng-show="!isEditMode" ng-init="formatStartDate()"></div> 
 			</div>			
 
 			<div id="add-user-notif-enddate" class="add-widget-field"
-				style="padding-bottom: 12px;     width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
+				style="padding-bottom: 12px; width: 301px !important; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-enddate-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;">*</span> End	Date (Local Time)
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId">*</span> End	Date (Local Time)
 				</div>
-				<input class="notif-input-calendar" type="text" id="datepicker-end" 
-					ng-model="endTime" b2b-datepicker min="minDate" max="maxDate" 
-					required />
-				<div id="user-enddate-required" ng-show="!endTime" >
-					<small class="mandatory-categories">End Date is Required</small>
+				<div class="datepicker-container">
+					<input class="notif-input-calendar" type="text" id="datepicker-end" 
+						ng-model="newNotifModel.endTime" b2b-datepicker min="minDate" max="maxDate" 
+						required />
 				</div>
-				<div id="user-enddate-error" ng-show="endTime&&startTime&&startTime.getTime()>=endTime.getTime()" style="color: #cf2a2a; font-size: 10px;">
-					<small style="position: absolute;">End Date must be greater than start Date</small>
+				<div id="user-endDate-required" ng-show="!isDateValid(newNotifModel.endTime)">
+						<small class="mandatory-categories">Please enter valid date in MM/DD/YYYY format!</small>
+					</div>
+				<div id="user-enddate-error" ng-show="newNotifModel.endTime&&newNotifModel.startTime&&newNotifModel.startTime.getTime()>=newNotifModel.endTime.getTime()" class="user-enddate-error-txt">
+					<small class="mandatory-categories">End Date must be greater than start Date</small>
 				</div>
 				<div ng-show="!isEditMode" ng-init="formatEndDate()" ></div> 
 			</div>
@@ -125,12 +161,12 @@
 			<div id="add-user-notif-title" class="add-widget-field"
 				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notification-title-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;"
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId"
 						visible="false"> *</span> Title
 				</div>
-				<textarea id="add-notification-input-title" class="notif-input" ng-model="msgHeader" name="content" style="height: 50px;">
+				<textarea id="add-notification-input-title" class="notif-input" ng-model="newNotifModel.msgHeader" name="content" class="add-notification-input-title-ht">
                 </textarea>
-				<div id="user-title-required" ng-show="msgHeader.length == 0">
+				<div id="user-title-required" ng-show="newNotifModel.msgHeader.length == 0">
 					<small class="mandatory-categories">Title is Required</small>
 				</div>
 			</div>
@@ -138,30 +174,39 @@
 			<div id="add-user-notif-message" class="add-widget-field"
 				style="padding-bottom: 12px; {{( isEditMode )? 'opacity : 0.6; pointer-events: none;':' '}}">
 				<div id="user-notif-message-label" class="user-notif-label">
-					<span runat="server" ID="required" style="color: Red;"
+					<span runat="server" ID="required" class="notifcation-label-user-requiredId"
 						visible="false"> *</span> Message
 				</div>
-				<textarea id="user-notif-input-message" class="notif-input" style="height: 150px"
-					ng-model="msgDescription" name="content">
+				<textarea id="user-notif-input-message" class="notif-input" class="add-notification-input-title-ht"
+					ng-model="newNotifModel.msgDescription" name="content">
 				</textarea>
-				<div id="user-notif-message-required" ng-show="msgDescription.length ==0 ">
+				<div id="user-notif-message-required" ng-show="newNotifModel.msgDescription.length ==0 ">
 				<small class="mandatory-categories">Message is Required</small>
 				</div>
 			</div>
 
-			<div class="dialog-control">
-				<a ng-show="!isEditMode">
-				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()"
-					ng-click="addUserNotification()">Save</button></a> 						
-				<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="closeThisDialog()" role="button" tabindex="0">Cancel</button>
-			</div>
+		
 			
 		</div>
 	</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="dialog-control">
+				<a ng-show="!isEditMode">
+				<button id="button-notification-save" class="btn btn-alt btn-small" size="small" ng-disabled="addUserNotificationValidation()" ng-click="addUserNotification()">Save</button></a> 	
+						<button id="button-notification-cancel" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')"role="button" tabindex="0">Cancel</button>
+						
+					</div>
+			</div>
+			
+			
+			
+
 </div>
 
 <script>
 $(document).ready(function(){
     $(".ngdialog-close").attr('id','dialog-close');
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
index 72c92c21..f7973f71 100644
--- a/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/user-notifications-admin/user.notifications.tpl.html
@@ -31,16 +31,15 @@
 						placeholder="Search in entire table" ng-model="searchString" />
 					</div>
 			  <div class="table-control-buttons" ng-controller="userNotificationsCtrl">
-						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="openUserNotificationModal()" >
+						<button class="btn btn-alt btn-small"id="button-openAddNewApp"   ng-click="userNotifications.openUserNotificationModal()" >
 		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Notification
 		                </button> 
 					</div>
 		
 			<span class="ecomp-spinner" ng-show="isLoadingTable"></span>
-			<div class="b2b-table-div"
-				ng-hide="isLoadingTable" id="table-main">
-				<table b2b-table id="table-main" table-data="adminNotifications" search-string="searchString"
-					current-page="ignoredCurrentPage">
+			<div class="b2b-table-div" b2b-table table-data="adminNotifications"
+				ng-hide="isLoadingTable" id="table-main" search-string="searchString">
+				<table  id="table-main" >
 					<thead b2b-table-row type="header">
 						<tr>
 							<th id="th-notif-0" b2b-table-header key="msgSource"
@@ -63,7 +62,7 @@
 						</tr>
 					</thead>
 					<tbody b2b-table-row type="body" class="table-body"
-						row-repeat="rowData in tableAdminNotifItems">
+				row-repeat="rowData in tableAdminNotifItems | filter:searchString | startFrom:(currentPage1-1)*viewPerPage1 | limitTo:viewPerPage1 "track-by="$index">
 						<tr>
 							<td b2b-table-body style="{{rowData.expired?'color:lightgray !important':''}}">
 								<div  id="{{$index}}-msgSource">{{rowData.msgSource}}</div>
@@ -96,9 +95,9 @@
 							</td>
 							<td b2b-table-body style="{{rowData.expired?' color:lightgray !important':''}}">
 							
-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 
-							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 
-							<p id="{{$index}}-notification-delete" ng-click="removeUserNotification(rowData)" class="icon-misc-trash"></p> 
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource==='EP'" ng-click="userNotifications.editUserNotificationModal(rowData)"class="icon-overview"  >  /</p> 
+							<p id="{{$index}}-notification-edit" ng-if="rowData.msgSource!=='EP'" ng-click="userNotifications.showDetailedJsonMessage(rowData)"class="icon-overview"  >/ </p> 
+							<p id="{{$index}}-notification-delete" ng-click="userNotifications.removeUserNotification(rowData)" class="icon-misc-trash"></p> 
 							
 						
 							</td>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
index e3bcf0a4..17b8b595 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.ack.html
@@ -19,7 +19,7 @@
   -->
 <div class="new-user-modal">
 	<div class="search-users-directive">
-		<div class="title">Bulk User Upload Acknowledgement</div>
+		<div id="title" class="title">Bulk User Upload Acknowledgement</div>
 		<div class="main">
 			<h1>The valid entries have been uploaded.</h1>
 
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
index 6df7d240..f7c7adff 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.confirm.html
@@ -17,9 +17,15 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="bulk-user-modal">
-	<div class="title">Bulk User Upload Confirmation</div>
-		<div class="main">
+<div>
+	<div class="b2b-modal-header">
+		<h2 class="heading-medium" id="newAdmin">Bulk User Upload Confirmation</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" aria-label="Close" id="bulk-user-button-close"
+				ng-click="$dismiss('cancel')"></button>
+		</div>
+	</div>
+		<div class="b2b-modal-body">
 
 			<!-- progress indicator -->
 			<div class="upload-instructions"
@@ -73,11 +79,13 @@
 				</div>
 
 			</div>
-			<div class="dialog-control">		
-					<button id="bulk-user-ok-button" class="btn btn-alt btn-small" ng-class="{disabled: isValidating}"
+			
+		</div>
+		<div class="b2b-modal-footer">	
+			<div class="cta-button-group in">	
+				<button id="bulk-user-ok-button" class="btn btn-alt btn-small" ng-class="{disabled: isValidating}"
 					ng-click="updateDB()">Ok</button>
-					<button id="bulk-user-cancel-button" class="btn btn-alt btn-small" ng-click="cancelUpload()">Cancel</button>
-					
+				<button id="bulk-user-cancel-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button>		
 			</div>
 		</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
index 8c9420d4..1e169953 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.controller.js
@@ -23,7 +23,7 @@
 'use strict';
 (function () {
     class BulkUserModalCtrl {
-    	constructor($scope, $log, $filter, $q, usersService, applicationsService, confirmBoxService, functionalMenuService, ngDialog) {
+    	constructor($scope, $log, $filter, $q, usersService, applicationsService, confirmBoxService, functionalMenuService, ngDialog,$modal) {
     		
     		// Set to true for copious console output
     		var debug = false;
@@ -486,10 +486,13 @@
             	// Start the process
             	$scope.readValidateFile();
             	// Dialog shows progress
-            	ngDialog.open({
-            		templateUrl: 'app/views/users/new-user-dialogs/bulk-user.confirm.html',
-            		scope: $scope
-            	});
+            	$modal.open({
+                	templateUrl: 'app/views/users/new-user-dialogs/bulk-user.confirm.html',
+                    controller: '',
+                    sizeClass: 'modal-medium', 
+                    resolve:'',
+                    scope: $scope
+                })
              };
 
              // Invoked by the Cancel button on the confirmation dialog.
@@ -500,7 +503,7 @@
              init();
     	} // constructor
     } // class
-    BulkUserModalCtrl.$inject = ['$scope', '$log', '$filter', '$q', 'usersService', 'applicationsService', 'confirmBoxService', 'functionalMenuService', 'ngDialog'];    
+    BulkUserModalCtrl.$inject = ['$scope', '$log', '$filter', '$q', 'usersService', 'applicationsService', 'confirmBoxService', 'functionalMenuService', 'ngDialog','$modal'];    
     angular.module('ecompApp').controller('BulkUserModalCtrl', BulkUserModalCtrl);
 
     angular.module('ecompApp').directive('fileChange', ['$parse', function($parse){
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
index 7945e54a..69f2de08 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.html
@@ -17,44 +17,53 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="bulk-user-modal">
-	<div class="title">Bulk User Upload</div>
-	<div class="main">
-		<div ng-show="bulkUser.step1">
-			<div class="upload-instructions">Select Application:</div>
-			<div class="c-ecomp-portal-abs-select default">
-
-			      <select id="bulk-user-dropdown-apps" name="dropdown1" b2b-dropdown  ng-model="selectedApplication.value" ng-disabled="isProcessing" ng-class="{disabled: isProcessing}">  
-				        <option b2b-dropdown-list option-repeat="d in adminApps" value="{{d.value}}">{{d.title}}</option>
-				                </select>
-
-			</div>
+<div>
+	<div class="b2b-modal-header">
+		<h2 class="heading-medium" id="newAdmin">Bulk User Upload</h2>
+		<div class="corner-button in">
+			<button type="button" class="close" aria-label="Close" id="bulkuser-button-close"
+				ng-click="$dismiss('cancel')"></button>
 		</div>
-
-		<div ng-hide="bulkUser.step1">
-			<div class="upload-instructions">Select Upload File:</div>
-
-			<!-- input type=file is difficult to style.
-				 Instead use a label styled as a button. -->
-			<label class="file-label"> 
-				<input type="file"
-					file-change="fileChangeHandler($event,files)" 
-					ng-model="fileModel" />
-					<span>Browse...</span>
-			</label>{{selectedFile}}
-			<div class="upload-instructions">File must have one entry per line with this format:
-			<pre>orgUserId, role name</pre>
+	</div>
+	<div class="b2b-modal-body">
+		<div class="b2b-modal-body-div">
+			<div ng-show="bulkUser.step1">
+				<div class="upload-instructions">Select Application:</div>
+				<div class="c-ecomp-portal-abs-select default">
+	
+				      <select id="bulk-user-dropdown-apps" name="dropdown1" b2b-dropdown  ng-model="selectedApplication.value" ng-disabled="isProcessing" ng-class="{disabled: isProcessing}">  
+					        <option b2b-dropdown-list option-repeat="d in adminApps" value="{{d.value}}">{{d.title}}</option>
+					                </select>
+	
+				</div>
 			</div>
+	
+			<div ng-hide="bulkUser.step1">
+				<div class="upload-instructions">Select Upload File:</div>
+	
+				<!-- input type=file is difficult to style.
+					 Instead use a label styled as a button. -->
+				<label class="file-label"> 
+					<input type="file"
+						file-change="fileChangeHandler($event,files)" 
+						ng-model="fileModel" />
+						<span>Browse...</span>
+				</label>{{selectedFile}}
+				<div class="upload-instructions">File must have one entry per line with this format:
+				<pre>orgUserId, role name</pre>
+				</div>
+			</div>
+	
+			<!-- progress indicator in middle -->
+			<div ng-show="isProcessing">
+				<span class="ecomp-spinner"></span>
+			</div>
+			<br>
 		</div>
-
-		<!-- progress indicator in middle -->
-		<div ng-show="isProcessing">
-			<span class="ecomp-spinner"></span>
-		</div>
-
-		<div class="dialog-control">
-				
-				<button id="bulk-user-back-button" class="btn btn-alt btn-small"
+	</div>
+	<div class="b2b-modal-footer">
+		<div class="cta-button-group in">		
+			<button id="bulk-user-back-button" class="btn btn-alt btn-small"
 				ng-hide="bulkUser.step1" ng-click="navigateBack()">Back</button>
 			<button id="bulk-user-next-button" class="btn btn-alt btn-small"
 				ng-hide="!bulkUser.step1" ng-click="!isProcessing && step2()"
@@ -64,7 +73,7 @@
 				ng-click="bulkUser.fileSelected && confirmUpload()"
 				ng-class="{disabled: !bulkUser.fileSelected}">Upload</button>
 			<button id="bulk-user-cancel-button" class="btn btn-alt btn-small"
-				ng-click="closeThisDialog()">Cancel</button>
+				ng-click="$dismiss('cancel')">Cancel</button>
 		</div>
 	</div>
 </div>
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.less b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.less
index b6ee63f8..07afd90b 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/bulk-user.modal.less
@@ -2,7 +2,7 @@
 	height: 430px;
 
 	.title {
-		.dGray18r;  //AT&T Dark Gray
+		.dGray18r; 
 		border-bottom: @blue-active 3px solid;
 	}
 	
@@ -58,3 +58,6 @@
 	}
     
 }
+.b2b-modal-body-div{
+	height:250px;
+}
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
index 6550a1ee..5367ecf8 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.controller.js
@@ -23,7 +23,7 @@
 'use strict';
 (function () {
     class NewUserModalCtrl {
-        constructor($scope, $log, usersService, applicationsService, confirmBoxService) {
+        constructor($scope, $log, usersService, applicationsService, confirmBoxService, items) {
             var extRequestValue = false;
             let init = () => {
                 //$log.info('NewUserModalCtrl::init');
@@ -31,9 +31,9 @@
                 this.anyChanges = false;
                 this.adminApps = [];
                 this.isGettingAdminApps = false;
-                if($scope.ngDialogData && $scope.ngDialogData.selectedUser && $scope.ngDialogData.dialogState){
-                    this.selectedUser = $scope.ngDialogData.selectedUser;
-                    this.dialogState = $scope.ngDialogData.dialogState;
+                if(items && items.selectedUser && items.dialogState){
+                    this.selectedUser = items.selectedUser;
+                    this.dialogState = items.dialogState;
                     this.isShowBack = false;
                     if(this.dialogState === 3){
                         this.getUserAppsRoles();
@@ -109,6 +109,13 @@
                             //$log.debug('NewUserModalCtrl::getUserAppsRoles: got a result for app: ',app.id,': ',app.name,': ',userAppRolesResult);
                             app.appRoles = userAppRolesResult;
                             app.isLoading = false;
+                            for(var i=0;i<app.appRoles.length;i++){
+                                
+                            	if(app.appRoles[i].roleName.indexOf('global_')!=-1){
+                            		app.appRoles[i].roleName='*'+app.appRoles[i].roleName;
+            						
+            					}
+                                }
 
                         }).catch(err => {
                             $log.error(err);
@@ -148,6 +155,12 @@
                     if (app.isChanged) {
                         //$log.debug('NewUserModalCtrl::updateUserAppsRoles: app roles have changed; going to update: id: ', app.id, '; name: ', app.name);
                         app.isUpdating = true;
+                        for(var i=0;i<app.appRoles.length;i++){
+                          if(app.appRoles[i].roleName.indexOf('*global_')!=-1){
+                        		app.appRoles[i].roleName=app.appRoles[i].roleName.replace('*','');
+        						
+        					}
+                            }
                         var newUserAppRoles = {
                         	orgUserId: this.selectedUser.orgUserId,
                         	appId: app.id, 
@@ -172,7 +185,7 @@
                                 this.isSaving = false; // hide the spinner
                             }
                             if (this.numberAppsSucceeded === this.adminApps.length) {
-                                $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)
+                            	$scope.$dismiss('cancel');//close and resolve dialog promise with true (to update the table)
                             }
                         })
                     } else {
@@ -185,7 +198,7 @@
                             this.isSaving = false; // hide the spinner
                         }
                         if (this.numberAppsSucceeded === this.adminApps.length) {
-                            $scope.closeThisDialog(true);//close and resolve dialog promise with true (to update the table)
+                        	$scope.$dismiss('cancel');//close and resolve dialog promise with true (to update the table)
                         }
                     }
                 });
@@ -212,6 +225,6 @@
             });
         }
     }
-    NewUserModalCtrl.$inject = ['$scope', '$log', 'usersService', 'applicationsService', 'confirmBoxService'];
+    NewUserModalCtrl.$inject = ['$scope', '$log', 'usersService', 'applicationsService', 'confirmBoxService', 'items'];
     angular.module('ecompApp').controller('NewUserModalCtrl', NewUserModalCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
index 5fec021a..b36e8594 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.html
@@ -17,69 +17,100 @@
   limitations under the License.
   ================================================================================
   -->
-<div class="new-user-modal">
+<style>
+	.title {
+		border-bottom: none !important;
+	}
+	
+	.b2b-modal-footer .cta-button-group {
+		border-top: 0px solid #d2d2d2;
+	}
+	
+	.multiple-select {
+		width: 250px;
+	}
+</style>
 
-    <div class="search-users" ng-show="newUser.dialogState===1">
+ <div >
+ 
+<div ng-if="newUser.dialogState===1">
 
-        <search-users search-title="New User"
-                      selected-user="newUser.selectedUser"></search-users>
+		<div class="b2b-modal-header">
+			<h2 class="heading-medium" id="newAdmin">New User</h2>
 
-        <div class="dialog-control">   
-            <button class="btn btn-alt btn-small" id="next-button"  ng-click="newUser.selectedUser && newUser.getUserAppsRoles()"
-                 ng-class="{disabled: !newUser.selectedUser}">Next
-            </button>
-             <button class="btn btn-alt btn-small" id="cancel-button" ng-click="closeThisDialog()">Cancel</button>
-            
-        </div>
-    </div>
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close" id="user-button-close" 
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
 
-    <div class="user-apps-roles" ng-show="newUser.dialogState===3">
-        <div class="title"
-             ng-bind="newUser.selectedUser.firstName + ' ' + newUser.selectedUser.lastName + ' (' + newUser.selectedUser.orgUserId + ')'"></div>
-
-
-        <div class="app-roles-main">
-            <div class="app-roles-main-title">
-                <span class="left">Access and roles:</span>
-            </div>
+		<div class="b2b-modal-body" tabindex="0"
+			aria-label="Modal header text content" role="region">
+			<search-users search-title="" selected-user="newUser.selectedUser"></search-users>
+		</div>
 
-            <div class="app-roles-list">
-                <div class="app-item" ng-repeat="app in (newUser.adminApps) track by app.id"  id="app-name-{{app.name.split(' ').join('-')}}" ng-show="!app.isDeleted">
-                    <div class="app-item-left" id="div-app-name-{{app.name.split(' ').join('-')}}">{{app.name | elipsis: 27}}</div>
-                    <div class="app-item-right" id="div-app-name-dropdown-{{app.name.split(' ').join('-')}}" ng-show="!app.isError && !app.isLoading && !app.noChanges && !app.isUpdating && !app.isDoneUpdating && !app.isErrorUpdating">
-                        <multiple-select id="app-roles"
-                                         unique-data="{{$index}}"
-                                         placeholder="Select roles"
-                                         ng-model="app.appRoles"
-                                         on-change="newUser.appChanged($index)"
-                                         name-attr="roleName"
-                                         value-attr="isApplied"></multiple-select>
-                    </div>
-                    <div id="app-item-no-contact" class="app-item-right-error" ng-show="app.isError">{{app.errorMessage}}</div>
-                    <div id="app-item-contacting" class="app-item-right-contacting" ng-show="app.isLoading">Contacting application...</div>
-                    <div id="app-item-no-changes" class="app-item-right-contacting" ng-show="app.noChanges">No changes</div>
-                    <div id="app-item-no-updating" class="app-item-right-contacting" ng-show="app.isUpdating">Updating application...</div>
-                    <div id="app-item-done-updating" class="app-item-right-contacting" ng-show="app.isDoneUpdating">Finished updating application</div>
-                    <div id="app-item-cannot-update" class="app-item-right-error" ng-show="app.isErrorUpdating">Could not update application...</div>
-                    <div id="app-item-delete" class="app-item-delete" ng-click="newUser.deleteApp(app)" ng-show="!app.isLoading && !app.isError"></div>
-                    <div id='ecomp-small-spinner' class="ecomp-small-spinner" ng-show="app.isLoading"></div>
-                </div>
-            </div>
-            
-             <div class="dialog-control">
-                <span id="ecomp-save-spinner" class="ecomp-save-spinner" ng-show="newUser.isSaving || newUser.isGettingAdminApps"></span>
-                <button id="new-user-back-button" class="btn btn-alt btn-small"  ng-show="newUser.isShowBack" ng-click="newUser.navigateBack()">Back</button>
-                <button id="new-user-save-button" class="btn btn-alt btn-small" ng-click="newUser.updateUserAppsRoles()"
-                      ng-disabled="(newUser.anyChanges == false)">Save
-                </button>
-                <button id="new-user-cancel-button" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-            </div>
-
-        </div>
-
-    </div>
+		<div class="b2b-modal-footer">
+			<div class="cta-button-group in">
+				<button class="btn btn-alt btn-small" id="next-button"  ng-click="newUser.selectedUser && newUser.getUserAppsRoles()"
+	                 ng-class="{disabled: !newUser.selectedUser}">Next
+	            	</button>
+				<button id="search-users-button-cancel"
+					class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button>
+			</div>
+		</div>
 
+	</div>
+		<div ng-if="newUser.dialogState===3">
+	
+			<div class="b2b-modal-header">
+				<div class="title"
+             ng-bind="newUser.selectedUser.firstName + ' ' + newUser.selectedUser.lastName + ' (' + newUser.selectedUser.orgUserId + ')'"></div>
 
+	
+				<div class="corner-button in">
+					<button type="button" class="close" aria-label="Close" id="div-cancel-button"
+						ng-click="$dismiss('cancel')"></button>
+				</div>
+			</div>
+	
+			<div class="b2b-modal-body">
+				<div class="app-roles-main-title">
+					<span class="left">Access and roles:</span>
+				</div>
+				<br/>
+				<table  class="app-roles-list">
+					<tr class="app-item" ng-repeat="app in (newUser.adminApps) track by app.id" id="app-name-{{app.name.split(' ').join('-')}}" ng-show="!app.isDeleted">
+						<td class="app-item-left" id="div-app-name-{{app.name.split(' ').join('-')}}">{{app.name | elipsis: 27}}</td>
+						<td class="app-item-right" id="div-app-name-dropdown-{{app.name.split(' ').join('-')}}" ng-show="!app.isError && !app.isLoading && !app.noChanges && !app.isUpdating && !app.isDoneUpdating && !app.isErrorUpdating">
+							<multiple-select id="app-roles-{{app.name}}" unique-data="{{$index}}" placeholder="Select roles"
+										ng-model="app.appRoles" on-change="newUser.appChanged($index)" name-attr="roleName"
+										value-attr="isApplied"></multiple-select>
+						</td>
+						<td id="app-item-no-contact" class="app-item-right-error" ng-show="app.isError">{{app.errorMessage}}</td>
+						<td id="app-item-contacting" class="app-item-right-contacting" ng-show="app.isLoading">Contacting application...</td>
+						<td id="app-item-no-changes" class="app-item-right-contacting" ng-show="app.noChanges">No changes</td>
+						<td id="app-item-no-updating" class="app-item-right-contacting" ng-show="app.isUpdating">Updating application...</td>
+						<td id="app-item-done-updating" class="app-item-right-contacting" ng-show="app.isDoneUpdating">Finished updating application</td>
+						<td id="app-item-cannot-update" class="app-item-right-error" ng-show="app.isErrorUpdating">Could not update application...</td>
+						<td id="app-item-delete" ng-click="newUser.deleteApp(app)" ng-show="!app.isLoading && !app.isError" >
+							<i class="icon-misc-trash"></i>
+						</td> 
+						<td id='ecomp-small-spinner' class="ecomp-small-spinner" ng-show="app.isLoading"></td>
+					</tr>
+				</table >
+			</div>
+	
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group in">
+					<span id="ecomp-save-spinner" class="ecomp-save-spinner" ng-show="newUser.isSaving || newUser.isGettingAdminApps"></span>
+					<button id="new-user-back-button" class="btn btn-alt btn-small" ng-show="newUser.isShowBack" ng-click="newUser.navigateBack()">Back</button>
+					<button id="new-user-save-button" class="btn btn-alt btn-small" ng-click="newUser.updateUserAppsRoles()"
+							ng-disabled="(newUser.anyChanges == false)">Save
+					</button>
+					<button id="new-user-cancel-button" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button>
+				</div>
+			</div>
+	</div>
 
 </div>
 
diff --git a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.less b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.less
index 68c23e52..8a44b110 100644
--- a/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/users/new-user-dialogs/new-user.modal.less
@@ -4,7 +4,7 @@
   .user-apps-roles{
     .title{
       //.n18r;
-      .dGray18r;  //AT&T Dark Gray
+      .dGray18r;  
       border-bottom: @portalDBlue 3px solid;
     }
 	
@@ -50,28 +50,6 @@
           vertical-align: middle;
         }
 
-        .app-item-right-error{
-          .portalRed;
-          padding: 7px 7px 7px 7px;
-          display:inline-block;
-          width: 45%;
-          border-radius: 2px;
-          border: 1px solid @portalLGray;
-          background: @portalWhite;
-          vertical-align: middle;
-        }
-
-        .app-item-right-contacting{
-          .portalGreen;
-          padding: 7px 7px 7px 7px;
-          display:inline-block;
-          width: 45%;
-          border-radius: 2px;
-          border: 1px solid @portalLGray;
-          background: @portalWhite;
-          vertical-align: middle;
-        }
-
         .app-select-left{
           width: 45%;
           margin-right: 10px;
@@ -94,15 +72,9 @@
 
 
         .app-item-delete{
-          .ico_trash_default;
-          display: inline-block;
-          vertical-align: 2px;
-          cursor: pointer;
-          position: relative;
-          top: 6px;
-          color: transparent;
-          margin-left: 8px;
-
+          margin-right: -20px;
+          float: right; 
+          margin-top: -22px;
         }
 
       }
@@ -110,3 +82,29 @@
 
   }
 }
+
+	.icon-misc-trash {
+		font-size: 20px;
+	}
+	
+	.app-item-right-error{
+          .portalRed;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+    }
+        
+     .app-item-right-contacting{
+          .portalGreen;
+          padding: 7px 7px 7px 7px;
+          display:inline-block;
+          width: 45%;
+          border-radius: 2px;
+          border: 1px solid @portalLGray;
+          background: @portalWhite;
+          vertical-align: middle;
+    }
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.controller.js b/ecomp-portal-FE-common/client/app/views/users/users.controller.js
index ac223ed6..f74b167e 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/users/users.controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
     class UsersCtrl {
-        constructor($log, applicationsService, usersService, confirmBoxService, $scope, ngDialog) {
+        constructor($log, applicationsService, usersService, confirmBoxService, $scope, ngDialog,$modal) {
             this.$log = $log;
             $scope.adminAppsIsNull = false;
             $scope.appsIsDown = false;
@@ -114,7 +114,7 @@
                 }
             }
 
-            this.updateUsersList = () => {
+             let updateUsersList = () => {
                 $scope.appsIsDown = false;
                 $scope.noUsersInApp = false;
                 // $log.debug('UsersCtrl::updateUsersList: Starting updateUsersList');
@@ -185,19 +185,24 @@
                         }
                     }
                 }
-                ngDialog.open({
+                
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/users/new-user-dialogs/new-user.modal.html',
-                    controller: 'NewUserModalCtrl',
-                    controllerAs: 'newUser',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                    if (needUpdate.value === true) {
-                        $log.debug('UsersCtrl::openAddNewUserModal updating table data...');
-                        this.updateUsersList();
-                    }
-                });
+                    controller: 'NewUserModalCtrl as newUser',
+                    sizeClass: 'modal-medium', 
+                    resolve: {
+    					items: function () {
+    						return data;
+    			        }                
+    		        }
+                })
+                
+                modalInstance.result.finally(function () {
+                    $log.debug('UsersCtrl::openAddNewUserModal updating table data...');
+                    updateUsersList();                 
+     	        });
             };
-            
+                            
             this.openBulkUserUploadModal = (adminApps) => {
                 let data = null;
                 if (adminApps) {
@@ -209,14 +214,21 @@
                         }
                     }
                 }
-                ngDialog.open({
-                    templateUrl: 'app/views/users/new-user-dialogs/bulk-user.modal.html',
-                    controller: 'BulkUserModalCtrl',
-                    controllerAs: 'bulkUser',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                	this.updateUsersList();
+                var modalInstance = $modal.open({
+                	templateUrl: 'app/views/users/new-user-dialogs/bulk-user.modal.html',
+                    controller: 'BulkUserModalCtrl as bulkUser',
+                    sizeClass: 'modal-medium', 
+                    resolve: {
+                    	items: function () {
+                    		return data;
+    			        }
+    		        }
                 });
+                
+                modalInstance.result.finally(function () {
+                        $log.debug('UsersCtrl::openAddNewUserModal updating table data...');
+                        updateUsersList();
+     	        });
             };
 
 
@@ -226,7 +238,7 @@
                 }
                 $log.debug('UsersCtrl::openAddNewUserModal:$watch selectedApp -> Fire with: ', newVal);
                 this.accountUsers = []; //reset table and show swirl here
-                this.updateUsersList();
+                updateUsersList();
             });
 
             $scope.$on('$destroy', () => {
@@ -239,6 +251,6 @@
             init();
         }
     }
-    UsersCtrl.$inject = ['$log', 'applicationsService', 'usersService', 'confirmBoxService', '$scope', 'ngDialog'];
+    UsersCtrl.$inject = ['$log', 'applicationsService', 'usersService', 'confirmBoxService', '$scope', 'ngDialog','$modal'];
     angular.module('ecompApp').controller('UsersCtrl', UsersCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
index 606ced6e..b1a02102 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
@@ -34,8 +34,8 @@
 						<div>
 							<input id="input-table-search" placeholder="Search" class="table-search-field" type="text" data-ng-model="users.searchString">
 						</div>
-						<button class="btn btn-alt btn-small" ng-click="users.openAddNewUserModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add User</button> 
-	                   	<button class="btn btn-alt btn-small" ng-click="users.openBulkUserUploadModal()"><i class="icon-arrows-upload" aria-hidden="true"></i>&nbsp;Bulk Upload</button>
+						<button class="btn btn-alt btn-small" id="users-button-add"  ng-click="users.openAddNewUserModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add User</button> 
+	                   	<button class="btn btn-alt btn-small" id="users-bulk-upload-button-add"  ng-click="users.openBulkUserUploadModal()"><i class="icon-arrows-upload" aria-hidden="true"></i>&nbsp;Bulk Upload</button>
 					</div>
                 </div>
                 <div ng-hide="users.isLoadingTable">
@@ -73,11 +73,11 @@
 						</thead>
 						<tbody b2b-table-row type="body" 	row-repeat="rowData in users.accountUsers" class="table-users-div">
 							<tr ng-click="users.openAddNewUserModal(rowData)">
-								<td b2b-table-body id="rowheader_t1_{{$index}}" headers="col1" ng-bind="rowData.firstName"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col2" ng-bind="rowData.lastName"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col3" ng-bind="rowData.orgUserId"></td>
-								<td b2b-table-body headers="rowheader_t1_{{$index}} col4">
-									<div class="ecomp-table-repeat" ng-repeat="role in rowData.roles" ng-bind="role.name"></div>
+								<td b2b-table-body id="rowheader_t1_{{$index}}-firstName" headers="col1" ng-bind="rowData.firstName"></td>
+								<td b2b-table-body  id="rowheader_t1_{{$index}}-lastName"  headers="col2" ng-bind="rowData.lastName"></td>
+								<td b2b-table-body  id="rowheader_t1_{{$index}}-orgUserId"  headers="col3" ng-bind="rowData.orgUserId"></td>
+								<td b2b-table-body   id="rowheader_t1_{{$index}}"  headers="col4">
+									<div class="ecomp-table-repeat"  id="rowheader_t1_{{$index}}"  ng-repeat="role in rowData.roles" ng-bind="role.name"></div>
 								</td>							
 							</tr>
 						</tbody>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
index ad88c02b..052d623d 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js
@@ -20,7 +20,7 @@
 'use strict';
 (function () {
     class WidgetOnboardingDetailsModalCtrl {
-        constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+        constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies,items) {
      	    
     	    this.appUpdate = function(){
     	    	this.hasSelectedApp = false;
@@ -206,10 +206,10 @@
             	this.allUser = false;
             	this.emptyWidgetName = false;
             	
-                if ($scope.ngDialogData && $scope.ngDialogData.widget) {
+                if (items && items.widget) {
                     this.isEditMode = true;
             		this.allRoleSelected = true;
-                    this.widget = _.clone($scope.ngDialogData.widget);
+                    this.widget = _.clone(items.widget);
                 } else {
                     this.isEditMode = false;
                     this.widget = _.clone(newWidgetModel);
@@ -316,7 +316,7 @@
             	var serviceId = null;
             	if(this.widget.serviceURL != null &&
             	this.widget.serviceURL != undefined){
-            		serviceId = this.widget.serviceURL.id;
+            		serviceId = parseInt(this.widget.serviceURL);
             	}
             	
             	
@@ -344,14 +344,15 @@
             					this.widget.saving = false;
             					return;
             				}
-            				$scope.closeThisDialog(true);
+            				$scope.$dismiss('cancel');
     	            		this.widget.saving = false;
             			});	
             		}
             		else{
             			widgetsCatalogService.updateWidget(this.widget.id, newWidget)
 	            		.then(() => {
-	            			$scope.closeThisDialog(true); 
+            				$scope.$dismiss('cancel');
+
 	                    });
             		}
             	}
@@ -365,7 +366,8 @@
 	        				this.widget.saving = false;
 	        				return;
 	        			}
-	            		$scope.closeThisDialog(true);
+        				$scope.$dismiss('cancel');
+
 	            		this.widget.saving = false;
             		});
             	}
@@ -376,6 +378,6 @@
             });
         }
     }
-    WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+    WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies','items'];
     angular.module('ecompApp').controller('WidgetOnboardingDetailsModalCtrl', WidgetOnboardingDetailsModalCtrl);
 })(); 
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
index 9e1c1696..b1232239 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html
@@ -18,16 +18,25 @@
   ================================================================================
   -->
 <div class="widget-details-modal">
-	<div id="'widgets-details-title" class="title">Widget Details</div>
 
-	<div class="widget-properties-main"
+		<div class="b2b-modal-header">
+			<h2 class="widget-title" id="widgets-details-title">Widget Details</h2>
+
+			<div class="corner-button in">
+				<button type="button" class="close" aria-label="Close"
+					ng-click="$dismiss('cancel')"></button>
+			</div>
+		</div>
+
+		<div class="b2b-modal-body">
+		<div class="widget-properties-main"
 		scroll-top="widgetOnboardingDetails.scrollApi">
 		<form id="widgets-details-form" name="widgetForm" novalidate
 			autocomplete="off">
 
 			<div class="item required">
 				<div class="item-label">Widget Name</div>
-				<input id="widgets-details-input-name" class="input-field"
+				<input id="widgets-details-input-name" class="table-search-field"
 					type="text" ng-model="widgetOnboardingDetails.widget.name"
 					ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"
 					ng-pattern="/^[\w -]*$/" maxlength="100"
@@ -51,35 +60,32 @@
 				</div>
 			</div>
 
-
 			<div class="item">
 				<div class="item-label">Widget Description</div>
-				<input id="widgets-details-input-name" class="input-field"
+				<!-- <input id="widgets-details-input-description" class="input-field"
 					type="text" ng-model="widgetOnboardingDetails.widget.desc"
-					name="desc" maxlength="200" />
+					name="desc" maxlength="200" /> -->
+					<textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
+						name="desc" type="text" ng-model="widgetOnboardingDetails.widget.desc"  maxlength="200" 	></textarea>
 			</div>
 
 			<div class="item">
 				<div class="item-label">Service Endpoint</div>
-				<div>
-					<select id="widgets-details-input-endpoint-url" name="url"
-						class="input-field"
-						ng-model="widgetOnboardingDetails.widget.serviceURL"
-						ng-options="service as service.option
-						  for service in widgetOnboardingDetails.availableServices"
-						  ng-disabled="widgetOnboardingDetails.isEditMode">
-						<option value="" selected="selected">Select Microservice
-							Endpoint</option>
-					</select>
-				</div>
+				<div class="table-dropdown" >
+							<select id="widgets-details-input-endpoint-url" name="url" b2b-dropdown placeholder-text="Select Microservice Endpoint" ng-model="widgetOnboardingDetails.widget.serviceURL" ng-disabled="widgetOnboardingDetails.isEditMode" >
+				            	<option b2b-dropdown-list option-repeat="service in widgetOnboardingDetails.availableServices" value="{{service.id}}">{{service.option}}</option>
+				            </select>
+						</div>
 			</div>
 
 			<div class="widget-property">
-				<input id="widgets-checkbox-app-is-enabled" type="checkbox"
-					class="checkbox-field"
-					ng-model="widgetOnboardingDetails.widget.allUser" />
-				<div class="property-label checkbox-label">Allow all user
-					access</div>
+				<label for="widget-checkbox-app-is-enabled" class="checkbox">
+					<input type="checkbox"
+					ng-model="widgetOnboardingDetails.widget.allUser"
+					id="widget-checkbox-app-is-enabled"> <i class="skin"></i>
+					<span class="property-label checkbox-label">Allow all user
+						access</span>
+				</label>
 			</div>
 
 			<div class="item required"
@@ -126,7 +132,7 @@
 				<div>
 					<input id="widget-onboarding-details-upload-file"
 						file-model="widgetOnboardingDetails.widget.file" type="file"
-						style="height: 24px;" />
+						class="widget-onboarding-details-upload-file ht" />
 
 
 					<div class="error-container"
@@ -137,20 +143,21 @@
 			</div>
 		</form>
 	</div>
+			</div>
+			<br>
+			<div class="b2b-modal-footer">
+				<div class="cta-button-group cta-modal-footer-flex">						
+					<span class="ecomp-save-spinner" ng-show="widgetOnboardingDetails.isSaving"></span>
+					<button id="widgets-details-save-button" class="btn btn-alt btn-small" 	ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName 
+					|| (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)
+					|| (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"
+					ng-click="widgetOnboardingDetails.saveChanges()">Save</button>				
+					<button class="btn btn-alt btn-small" id="widgets-details-cancel-button" ng-click="$dismiss('cancel')">Cancel</button>	
+				</div>
+			</div>
+			
+			
+			
+			
 
-	<div class="dialog-control">
-		<span class="ecomp-save-spinner"
-			ng-show="widgetOnboardingDetails.isSaving"></span>
-		<button id="widgets-details-save-button" class="btn btn-alt btn-small"
-			ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName 
-			|| (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)
-			|| (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"
-			ng-click="widgetOnboardingDetails.saveChanges()">Save</button>
-		<button id="widgets-details-cancel-button"
-			class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
-
-	</div>
-
-
-
-</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less
index d7cf2671..065c5428 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less
@@ -1,9 +1,8 @@
 .widget-details-modal {
-  height: 580px;
   .title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
-    border-bottom: @portalDBlue 3px solid;
+    .dGray18r; 
+   // border-bottom: @portalDBlue 3px solid;
   }
   .widget-input-field{
   	width:250px;
@@ -31,7 +30,10 @@
         top: -1px;
         height:15px;
       } 
-      
+      .checkbox .skin {
+		left: 0px;
+		top: 0px;
+	  }
     }
 	.widget-upload-field{
 		height:24px;
@@ -99,4 +101,7 @@
 
   }
 
+  .widget-onboarding-details-upload-file ht {
+  	height: 24px;
+  }
 }
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
index 0e7fd9fb..8dc2201b 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js
@@ -21,7 +21,7 @@
 (function () {
     class WidgetOnboardingCtrl {
         constructor($log, applicationsService, widgetsCatalogService, ngDialog, confirmBoxService,
-                    userProfileService, $cookies, $scope) {
+                    userProfileService, $cookies, $scope,$modal) {
             $scope.infoMessage = true;
 
             let populateAvailableApps = widgets => {
@@ -145,16 +145,20 @@
                         widget: selectedWidget
                     }
                 }
-                ngDialog.open({
+                var modalInstance = $modal.open({
                     templateUrl: 'app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html',
-                    controller: 'WidgetOnboardingDetailsModalCtrl',
-                    controllerAs: 'widgetOnboardingDetails',
-                    data: data
-                }).closePromise.then(needUpdate => {
-                	if(needUpdate.value === true){
-                        getOnboardingWidgets();
-                    }
-                });
+                    controller: 'WidgetOnboardingDetailsModalCtrl as widgetOnboardingDetails',
+                    sizeClass: 'modal-medium', 
+                    resolve: {
+    					items: function () {
+        	        	  return data;
+    			        	}
+    		        }
+                })
+                
+                modalInstance.result.finally(function () {
+                		getOnboardingWidgets();
+     	        });
             };
 
             this.deleteWidget = widget => { 
@@ -199,6 +203,7 @@
 	        	        document.body.removeChild(a);
 	        	        window.URL.revokeObjectURL(url);  
 	        	    }, 100);  
+	        	    
 	        	});
             };
             
@@ -206,6 +211,6 @@
         }
     }
     WidgetOnboardingCtrl.$inject = ['$log', 'applicationsService', 'widgetsCatalogService', 'ngDialog', 'confirmBoxService',
-        'userProfileService','$cookies', '$scope'];
+        'userProfileService','$cookies', '$scope','$modal'];
     angular.module('ecompApp').controller('WidgetOnboardingCtrl', WidgetOnboardingCtrl);
 })();
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
index 0f77ef63..779ac902 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.html
@@ -22,7 +22,7 @@
 
     <div class="widget-properties-main" scroll-top="widgetDetails.scrollApi">
         <form id="widgets-details-form" name="widgetForm" novalidate autocomplete="off">
-            <!-- We can remove this script once we get to AT&T Corporate Firefox version 47
+            <!-- We can remove this script once we get to Firefox version 47
                  autocomplete="off" won't work until v47 -->
             <script type="text/javascript">
                 document.getElementById("appForm").reset();
@@ -38,7 +38,7 @@
                             ng-disabled="!widgetDetails.availableApps || !widgetDetails.availableApps.length"
                             name="app"
                             required>
-                        <option id="widgets-details-select-app-disabled" value="" disabled style="display: none;">Select application</option>
+                        <option id="widgets-details-select-app-disabled" value="" disabled class="widgets-details-select-app-disabled">Select application</option>
                     </select>
                 </div>
                 <div class="error-container" ng-show="widgetForm.app.$dirty">
diff --git a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.less b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.less
index 568b6180..2ab7ebad 100644
--- a/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.less
+++ b/ecomp-portal-FE-common/client/app/views/widgets/widget-details-dialog/widget-details.modal.less
@@ -1,9 +1,8 @@
 .widget-details-modal {
-  height: 580px;
 
   .title {
     //.n18r;
-    .dGray18r;  //AT&T Dark Gray
+    .dGray18r; 
     border-bottom: @portalDBlue 3px solid;
   }
 
@@ -71,5 +70,7 @@
     }
 
   }
-
+  .widgets-details-select-app-disabled{
+  	display: none;
+  }
 }
-- 
cgit 1.2.3-korg