diff --git a/control/content/assets/css/bf_base.css b/control/content/assets/css/bf_base.css
index c794af7..dd84f48 100644
--- a/control/content/assets/css/bf_base.css
+++ b/control/content/assets/css/bf_base.css
@@ -697,6 +697,9 @@ color: var(--c-info);
 .align-items-center{
   align-items: center;
 }
+.justify-content-center{
+  justify-content: center;
+}
 
 /* Search Bar */
 .search-bar-container{
diff --git a/control/settings/assets/css/style.css b/control/settings/assets/css/style.css
index 7159f8a..444a0c0 100644
--- a/control/settings/assets/css/style.css
+++ b/control/settings/assets/css/style.css
@@ -316,3 +316,121 @@ tags-input > div > div > input {
 .label2 {
   margin-bottom: 1.25rem !important;
 }
+
+.add-user-container-btn {
+  text-align: end;
+}
+
+#loading, #emptyTableContainer {
+  margin-top: 40px !important;
+}
+
+.add-new-item {
+  background-color: var(--c-primary) !important;
+}
+
+.tdImageSize .imgStyle {
+  width: 40px;
+  height: 40px;
+}
+
+/* tooltip */
+.tooltip-container {
+  display: flex;
+  align-items: center;
+  margin-right: 13px !important;
+  gap: 0.25rem;
+  width: 38%;
+  padding-right: 0 !important;
+  padding-bottom: 1.25rem !important;
+}
+.tooltip-container .nowrap {
+    white-space: nowrap;
+
+}
+.tooltip-container .btn-info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  color: #fff;
+  position: relative;
+}
+.tooltip-container .btn-info-icon:after {
+  content: 'i';
+  font-weight: 400;
+  font-size: 12px;
+  font-style: normal;
+  left: 0;
+  top: auto !important;
+  height: 100%;
+}
+.tooltip-container .btn-info-icon .cp-tooltip {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, .80);
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  left: calc(100% + 12px);
+  cursor: auto;
+  font-size: 12px;
+  text-align: left;
+  width: 200px;
+  opacity: 0;
+  transform: scale(.1);
+  transition: opacity ease .1s, transform ease .1s;
+  transform-origin: left;
+  z-index: 100;
+  font-weight: 400;
+  line-height: 18px;
+  -webkit-text-stroke: 0;
+}
+.tooltip-container.bottom {
+  display: flex;
+}
+
+.tooltip-container.bottom .btn-info-icon .cp-tooltip {
+  left: -100px;
+  top: 30px;
+}
+
+.top-cp-tooltip {
+  top: 0;
+}
+.bottom-cp-tooltip {
+  bottom: 0;
+}
+.tooltip-container .btn-info-icon .cp-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -5px;
+  transform: rotate(90deg) translate(-50%);
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, .80) transparent transparent transparent;
+}
+
+.tooltip-container.bottom .btn-info-icon .cp-tooltip::before {
+  top: -10px;
+  left: 50%;
+  transform: rotate(180deg) translate(-50%);
+}
+.top-cp-tooltip::before {
+  top: 10px !important;
+}
+.bottom-cp-tooltip::before {
+  bottom: 0 !important;
+  top: unset !important;
+}
+.tooltip-container .btn-info-icon:hover .cp-tooltip {
+  opacity: 1;
+  transform: scale(1);
+}
diff --git a/control/settings/controllers/mainSettingsCtrl.js b/control/settings/controllers/mainSettingsCtrl.js
index efabdd5..0d72040 100644
--- a/control/settings/controllers/mainSettingsCtrl.js
+++ b/control/settings/controllers/mainSettingsCtrl.js
@@ -162,7 +162,8 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
             "searchResults",
             searchTableConfig,
             "loading",
-            "headTable"
+            "headTable",
+            "emptyTableContainer",
         );
         $scope.searchTableHelper.search();
     }
@@ -178,19 +179,33 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
     }
 
     var verifyUsers = function (result) {
+        let nonSubscribedUsersLength = 0;
         result.userIds.forEach((userId, index) => {
             $scope.getById(userId, (err, res) => {
-                console.log(res)
                 if (res) {
                     res.data.userDetails.hasAllowChat = true;
                     $scope.update(res.id, res.data, (err, res2) => {
-                        console.log(res2)
-                        if (index == result.userIds.length - 1)
+                        if (index === result.userIds.length - 1) {
+                            if (nonSubscribedUsersLength > 0) {
+                                buildfire.dialog.toast({
+                                    message: "Only subscribed users can be added.",
+                                    type: 'danger'
+                                });
+                            }
                             $scope.searchTableHelper.search();
+                            }
                     });
                 } else {
-                    if (index == result.userIds.length - 1)
+                    nonSubscribedUsersLength++;
+                    if (index === result.userIds.length - 1) {
+                        if (nonSubscribedUsersLength > 0) {
+                            buildfire.dialog.toast({
+                                message: "Only subscribed users can be added.",
+                                type: 'danger'
+                            });
+                        }
                         $scope.searchTableHelper.search();
+                    }
                 }
             })
         });
@@ -223,4 +238,4 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
             }
         })
     }
-}]);
\ No newline at end of file
+}]);
diff --git a/control/settings/controllers/search-table-helper.js b/control/settings/controllers/search-table-helper.js
index 3b57818..bf383dd 100644
--- a/control/settings/controllers/search-table-helper.js
+++ b/control/settings/controllers/search-table-helper.js
@@ -1,11 +1,13 @@
 class SearchTableHelper {
 
-  constructor(tableId, config, loading, headTable) {
+  constructor(tableId, config, loading, headTable, emptyTable) {
     if (!config) throw "No config provided";
     if (!tableId) throw "No tableId provided";
     this.table = document.getElementById(tableId);
     if (!this.table) throw "Cant find table with ID that was provided";
 
+    if (!emptyTable) throw "No empty container provided";
+    this.emptyTable = document.getElementById(emptyTable);
     if (!loading) throw "No loading provided";
     this.loading = document.getElementById(loading);
     if (!this.loading)
@@ -84,13 +86,14 @@ class SearchTableHelper {
     };
   }
 
-  search(filter) {
+  async search(filter) {
     this.tbody.innerHTML = "";
     this.table.classList.add("hidden");
-    this.headTable.classList.remove("hidden");
+    this.headTable.classList.add("hidden");
+    this.emptyTable.classList.add("hidden");
     this.loading.classList.remove("hidden");
     this.filter = filter;
-    this._fetchPageOfData(this.filter, 0);
+    await this._fetchPageOfData(this.filter, 0);
   }
 
   _fetchNextPage() {
@@ -102,53 +105,57 @@ class SearchTableHelper {
     });
   }
 
-  _fetchPageOfData(filter, pageIndex, callback) {
-    if (pageIndex > 0 && this.endReached) return;
-    let pageSize = 50;
-    this.pageIndex = pageIndex;
-
-    let searchFilter = {
-      $and: [{
-          "_buildfire.index.string1": ""
-        },
-        {
-          "$json.userDetails.hasAllowChat": true,
-        }
-      ]
-    }
+  _fetchPageOfData(filter, pageIndex) {
+    return new Promise((resolve, reject) => {
+      if (pageIndex > 0 && this.endReached) return resolve();
+      let pageSize = 50;
+      this.pageIndex = pageIndex;
 
-    if (filter) {
-      searchFilter = filter;
-    }
+      let searchFilter = {
+        $and: [
+          { "_buildfire.index.string1": "" },
+          { "$json.userDetails.hasAllowChat": true }
+        ]
+      };
 
-    let options = {
-      filter: searchFilter,
-      page: pageIndex,
-      pageSize: pageSize,
-    };
+      if (filter) {
+        searchFilter = filter;
+      }
 
+      let options = {
+        filter: searchFilter,
+        page: pageIndex,
+        pageSize: pageSize,
+      };
 
-    this.searchOptions = options;
+      this.searchOptions = options;
 
-    let t = this;
-    window.buildfire.publicData.search(this.searchOptions, 'subscribedUsersData', function (err, data) {
-      if (err) console.error(err);
-      else if (data && data.length > 0) {
-        t.productsLength = data.length;
-        t.loading.classList.add("hidden");
-        t.table.classList.remove("hidden");
-        t.headTable.classList.remove("hidden");
-        t.tbody.innerHTML = "";
-        data.forEach((p) => t.renderRow(p));
-        t.endReached = data.length < pageSize;
-      } else {
-        t.tbody.innerHTML = "";
-        t.loading.classList.add("hidden");
-        t.headTable.classList.add("hidden");
-      }
-    })
+      let t = this;
+      window.buildfire.publicData.search(this.searchOptions, 'subscribedUsersData', function (err, data) {
+        if (err) {
+          console.error(err);
+          return reject(err);
+        } else if (data && data.length > 0) {
+          t.productsLength = data.length;
+          t.loading.classList.add("hidden");
+          t.emptyTable.classList.add("hidden");
+          t.table.classList.remove("hidden");
+          t.headTable.classList.remove("hidden");
+          t.tbody.innerHTML = "";
+          data.forEach((p) => t.renderRow(p));
+          t.endReached = data.length < pageSize;
+          return resolve();
+        } else {
+          console.log(t,'t');
+          t.tbody.innerHTML = "";
+          t.loading.classList.add("hidden");
+          t.headTable.classList.add("hidden");
+          t.emptyTable.classList.remove("hidden");
+          return resolve();
+        }
+      });
+    });
   }
-
   _onCommand(obj, tr, command) {
     if (this.commands[command]) {
       this.commands[command](obj, tr);
@@ -262,7 +269,7 @@ class SearchTableHelper {
               message: "Are you sure you want to remove chat availability for " + (obj.data.userDetails.displayName ? obj.data.userDetails.displayName : (obj.data.userDetails.firstName + ' ' + obj.data.userDetails.lastName)) + " ?",
               confirmButton: {
                 text: "Remove User",
-                type: "warning",
+                type: "danger",
               },
             },
             (err, isConfirmed) => {
@@ -271,6 +278,8 @@ class SearchTableHelper {
               if (isConfirmed) {
                 //Go back
                 tr.classList.add("hidden");
+                this.loading.classList.remove("hidden");
+
                 obj.data.userDetails.hasAllowChat = false;
                 window.buildfire.publicData.update(obj.id, obj.data, 'subscribedUsersData', function (err, res2) {
                   if (err) tr.classList.remove("hidden");
@@ -314,10 +323,12 @@ class SearchTableHelper {
   }
 
   onRowDeleted(obj, tr) {
+    this.loading.classList.add("hidden");
     this.productsLength -= 1;
     if (this.productsLength == 0) {
       this.table.classList.add("hidden");
       this.headTable.classList.add("hidden");
+      this.emptyTable.classList.remove("hidden");
     }
   }
-}
\ No newline at end of file
+}
diff --git a/control/settings/views/mainSettings.html b/control/settings/views/mainSettings.html
index f14f502..e379969 100644
--- a/control/settings/views/mainSettings.html
+++ b/control/settings/views/mainSettings.html
@@ -25,20 +25,17 @@ <h1>Post Permissions</h1>
                 </div>
             </div>
         </div>
-
-        <div class="row" style="margin-bottom: 1.25rem;" ng-show="data.allowMainThreadTags">
-            <div class="col-md-4">
-                <label style="font-size: 14px !important;">Tags</label>
-                <span class="customTooltipBox btn-primary">
-                    <div style="bottom: -5px; left: 5px; position: absolute;">i</div>
-                    <span class="customTooltipText">You may have to reload the page if you have been applying these
-                        tags to
-                        yourself.</span>
+        
+        <div class="row flex align-items-center justify-content-center" style="margin-bottom: 1.25rem;" ng-show="data.allowMainThreadTags">
+            <div class="tooltip-container col-md-4">Tags
+                <span class="btn-info-icon btn-primary">
+                    <span class="cp-tooltip">You may have to reload the pageif you have been applying these tags to yourself.</span>
                 </span>
             </div>
             <div class="col-md-8">
                 <tags-input class="margin-bottom-ten" ng-model="data.mainThreadUserTags"
-                    min-tags="{{data.allowMainThreadTags ? 1 : 0}}" on-tag-added="save()" on-tag-removed="save()">
+                            min-tags="{{data.allowMainThreadTags ? 1 : 0}}" on-tag-added="save()"
+                            on-tag-removed="save()">
                 </tags-input>
             </div>
         </div>
@@ -55,19 +52,19 @@ <h1>Post Permissions</h1>
             </div>
         </div>
 
-        <div class="row" style="margin-bottom: 1.25rem;" ng-show="data.allowSideThreadTags">
-            <div class="col-md-4">
-                <label style="font-size: 14px !important;">Tags</label>
-                <span class="customTooltipBox btn-primary">
-                    <div style="bottom: -5px; left: 5px; position: absolute;">i</div>
-                    <span class="customTooltipText">You may have to reload the page if you have been applying these
-                        tags to
-                        yourself.</span>
+        <div class="row flex align-items-center justify-content-center" style="margin-bottom: 1.25rem;"
+             ng-show="data.allowSideThreadTags">
+            <div class="tooltip-container col-md-4">Tags
+                <span class="btn-info-icon btn-primary">
+                    <span class="cp-tooltip">
+                        You may have to reload the page if you have been applying these tags to yourself.
+                    </span>
                 </span>
             </div>
+            
             <div class="col-md-8">
-                <tags-input class="margin-bottom-ten" ng-model="data.sideThreadUserTags"
-                    min-tags="{{data.allowSideThreadTags ? 1 : 0}}" on-tag-added="save()" on-tag-removed="save()">
+                <tags-input class="margin-bottom-ten" ng-model="data.sideThreadUserTags" min-tags="{{data.allowSideThreadTags ? 1 : 0}}"
+                    on-tag-added="save()" on-tag-removed="save()">
                 </tags-input>
             </div>
         </div>
@@ -82,18 +79,18 @@ <h1>Post Permissions</h1>
             </div>
             <div class="col-md-2 radio radio-primary radio-inline" style="width: 20% !important;">
                 <input id="AllUsers" type="radio" name="allowChat" ng-model="data.allowChat" value="allUsers">
-                <label class="subtitles-labels" for="AllUsers">All users</label>
+                <label class="subtitles-labels" for="AllUsers">All Users</label>
             </div>
             <div class="col-md-3 radio radio-primary radio-inline" style="width: 25% !important;">
                 <input id="selectedUsers" type="radio" name="allowChat" ng-model="data.allowChat" value="selectedUsers">
-                <label class="subtitles-labels" for="selectedUsers">Selected Users</label>
-                <span class="customTooltipBox btn-primary">
-                    <div style="bottom: -5px; left: 5px; position: absolute;">i</div>
-                    <span class="customTooltipText2">Users added to the list will be able to send private messages to
-                        all
-                        users. Users that are not in the list, will be able to send private messages only to the users
-                        in the list.</span>
-                </span>
+                <label for="selectedUsers" class="tooltip-container bottom col-md-4">
+                    <span class="nowrap">Selected Users</span>
+                    <span class="btn-info-icon btn-primary">
+                        <span class="cp-tooltip">
+                           Users added to the list will be able to send private messages to all users. Users that are not in the list, will be able to send private messages only to the users in the list.
+                        </span>
+                    </span>
+                </label>
             </div>
         </div>
 
@@ -101,26 +98,26 @@ <h1>Post Permissions</h1>
             <div class="col-md-9">
                 <label class="subtitles-labels" style="font-size: 14px !important;">Allowed Users</label>
             </div>
-            <div class="col-md-3">
-                <button class="btn btn-success stretch" id="addUser" ng-click="selectUsers()">
+            <div class="col-md-3 add-user-container-btn">
+                <button class="btn btn-primary" id="addUser" ng-click="selectUsers()">
                     <span class="icon icon-plus margin-right-ten"></span>Select User
                 </button>
             </div>
         </div>
 
-        <div class="row" style="margin-bottom: 1.25rem;" ng-show="data.allowChat == 'selectedUsers'">
+        <div class="row" style="margin-bottom: 1.25rem;min-height: 240px;" ng-show="data.allowChat == 'selectedUsers'">
             <div class="col-md-5">
             </div>
             <div class="col-md-7">
                 <table class="table table-bf hidden" id="headTable" style="margin-bottom: 0;">
                     <thead>
-                        <th class="headerPadding" style="width: 56.5px;">
-                            <h5 class="headerCell text-left"> </h5>
-                        </th>
-                        <th class="headerPadding" style="width: 162px;">
-                            <h5 class="headerCell text-left">User Name</h5>
-                        </th>
-                        <th class="editColumn"></th>
+                    <th class="headerPadding" style="width: 56.5px;">
+                        <h5 class="headerCell text-left"></h5>
+                    </th>
+                    <th class="headerPadding" style="width: 162px;">
+                        <h5 class="headerCell text-left">User Name</h5>
+                    </th>
+                    <th class="editColumn"></th>
                     </thead>
                 </table>
                 <div class="tableDiv">
@@ -131,6 +128,11 @@ <h5 class="text-center" style="margin-bottom: 0px">
                         Loading...
                     </h5>
                 </div>
+                
+                <div id="emptyTableContainer" class="well empty-state-lg hidden">
+                    <h5 class="text-center">There is no any users added yet.</h5>
+                    <br>
+                </div>
             </div>
         </div>
         <div class="row">
@@ -159,18 +161,19 @@ <h5 class="text-center" style="margin-bottom: 0px">
 
         <div class="row">
             <div class="col-md-4">
-                <label class="label2" style="font-size: 14px !important;">Allow Users to Follow other users
-                    <span class="customTooltipBox btn-primary">
-                        <div style="bottom: -5px; left: 5px; position: absolute;">i</div>
-                        <span class="customTooltipText">Requires Community Feed</span>
-                    </span>
+                <label class="label2" style="font-size: 14px !important;">
+                    <div class="tooltip-container">
+                        <span class="nowrap">Allow Users to Follow other users</span>
+                        <span class="btn-info-icon btn-primary">
+                            <span class="cp-tooltip">Requires Community Feed.</span>
+                        </span>
+                    </div>
                 </label>
 
             </div>
             <div class="col-md-8">
                 <div class="button-switch">
-                    <input id="allowCommunityFeedFollow" type="checkbox" ng-model="data.allowCommunityFeedFollow"
-                        ng-change="save()">
+                    <input id="allowCommunityFeedFollow" type="checkbox" ng-model="data.allowCommunityFeedFollow" ng-change="save()">
                     <label for="allowCommunityFeedFollow" class="label-success"></label>
                 </div>
             </div>
@@ -178,11 +181,13 @@ <h5 class="text-center" style="margin-bottom: 0px">
 
         <div class="row">
             <div class="col-md-4">
-                <label class="label2" style="font-size: 14px !important;">Allow See Profile Option
-                    <span class="customTooltipBox btn-primary">
-                        <div style="bottom: -5px; left: 5px; position: absolute;">i</div>
-                        <span class="customTooltipText">This will expose user emails</span>
-                    </span>
+                <label class="label2" style="font-size: 14px !important;">
+                    <div class="tooltip-container">
+                        <span class="nowrap">Allow See Profile Option</span>
+                        <span class="btn-info-icon btn-primary">
+                            <span class="cp-tooltip">This will expose user emails.</span>
+                        </span>
+                    </div>
                 </label>
             </div>
             <div class="col-md-8">
@@ -198,4 +203,4 @@ <h5 class="text-center" style="margin-bottom: 0px">
         <h1>Action Items</h1>
         <div id="actions"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/widget/assets/css/style.css b/widget/assets/css/style.css
index 895c19e..0085544 100644
--- a/widget/assets/css/style.css
+++ b/widget/assets/css/style.css
@@ -38,7 +38,7 @@
     src: url(https://fonts.gstatic.com/s/materialiconstwotone/v73/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2');
     font-display: block;
   }
-  
+
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
@@ -54,7 +54,7 @@
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
   }
-  
+
   .material-icons-outlined {
     font-family: 'Material Icons Outlined';
     font-display: block;
@@ -71,7 +71,7 @@
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
   }
-  
+
   .material-icons-round {
     font-family: 'Material Icons Round';
     font-weight: normal;
@@ -87,7 +87,7 @@
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
   }
-  
+
   .material-icons-sharp {
     font-family: 'Material Icons Sharp';
     font-weight: normal;
@@ -103,7 +103,7 @@
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
   }
-  
+
   .material-icons-two-tone {
     font-family: 'Material Icons Two Tone';
     font-weight: normal;
@@ -160,6 +160,7 @@ q:after {
 table {
     border-collapse: collapse;
     border-spacing: 0;
+    min-height: 240px;
 }
 html{
     font-size: 16px !important;
@@ -567,14 +568,14 @@ button.btn--lg,
     padding: .75rem;
     display: flex;
     justify-content: center;
-    align-items: center; 
+    align-items: center;
 }
 
 .social-plugin .head-btn2 a{
     padding: .75rem;
     display: flex;
     justify-content: center;
-    align-items: center; 
+    align-items: center;
 }
 .content{
     height:100%;
@@ -703,7 +704,7 @@ button.btn--lg,
  .social-comment {
      display: flex;
  }
- 
+
  .comments-list{
     border-top: 1px solid rgba(150,150,150,.3);
  }
@@ -719,7 +720,7 @@ button.btn--lg,
  .social-comment .comment-content{
      flex: auto;
  }
- .comment-content 
+ .comment-content
  .social-comment .status-footer{
      border-bottom: 0;
  }
@@ -767,7 +768,7 @@ button.btn--lg,
  }
  .status-footer .likes,
  .status-footer .comments{
-     
+
  }
 
 
@@ -1336,7 +1337,7 @@ html[safe-area="true"] .post-section.has-comment-box {
 html[buildfire][safe-area="true"] body {
     -webkit-overflow-scrolling: auto !important;
   }
-  
+
 
 .blankState {
     padding-top: 20px;
@@ -1407,8 +1408,8 @@ html[buildfire][safe-area="true"] body {
     max-height: calc(100vh - 50px);
 }
 
-.inner-addon { 
-    position: relative; 
+.inner-addon {
+    position: relative;
 }
 
 /* style icon */
@@ -1598,4 +1599,4 @@ button.btn-danger-outlined:hover, button.btn-danger-outlined:focus{
 .social-comment .head .media-holder {
     width: 40px;
     height: 40px;
-}
\ No newline at end of file
+}