Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.html
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.html	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.html	(revision 57922)
@@ -32,112 +32,31 @@
                 <div class="menu_title uk-width-expand">
                   {{topic.name}}
                 </div>
-                <span class="uk-width-1-6 onHover"
-                        (click)="$event.stopPropagation();saveTopicOpen(editTopic, i); $event.preventDefault()">
-                  <i class="material-icons">more_horiz</i>
-                </span>
-              </a>
-              <div uk-drop="mode: none; offset: -2; delay-hide: 0; flip: false" #editTopic
-                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-                <div *ngIf="topicFb">
-                  <div class="md-card">
-                    <div class="md-card-content uk-position-relative">
-                      <a class="uk-position-top-right">
-                        <i (click)="hide(editTopic)" class="material-icons">close</i>
-                      </a>
-                      <div class="uk-grid-small" uk-grid [formGroup]="topicFb">
-                        <div class="uk-width-1-1">
-                          <label class="uk-text-bold">Topic Settings</label>
-                          <input class="uk-input uk-form-small" formControlName="name"
-                                 [class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
-                                 type="text">
-                        </div>
-                        <div class="uk-width-1-1">
-                          <label>Description</label>
-                          <textarea class="uk-textarea" formControlName="description"
-                                    rows="3" type="text"></textarea>
-                        </div>
-                        <div dashboard-input [type]="'select'"
-                             [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                             label="Privacy" class="uk-width-1-2">
-                        </div>
-                        <div dashboard-input [type]="'select'"
-                             [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
-                             label="Status" class="uk-width-1-2">
-                        </div>
-                      </div>
-                      <hr>
-                      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                        <div>
-                          <button class="md-btn md-btn-small"
-                                  (click)="deleteTopicOpen(this.topicFb.value.name, editTopic, i)">Delete</button>
-                        </div>
-                        <div>
-                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                                  [class.md-btn-primary]="topicFb.valid && topicFb.dirty"
-                                  [class.disabled]="topicFb.invalid || !topicFb.dirty"
-                                  (click)="saveTopic(editTopic, i)">Save
-                          </button>
-                        </div>
-                      </div>
-                    </div>
+                <div class="uk-width-1-6" (click)="$event.stopPropagation();$event.preventDefault()">
+                  <i class="material-icons onHover">more_vert</i>
+                  <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                       class="uk-padding-remove-horizontal">
+                    <ul class="uk-nav uk-dropdown-nav">
+                      <li><a (click)="editTopicOpen(i)">Edit</a></li>
+                      <!--<li><a (click)="toggleIndicatorStatus(indicator)">
+                        {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
+                      </li>
+                      <li><a (click)="toggleIndicatorAccess(indicator)">
+                          {{indicator.isPublic?'Unpublish':'Publish'}}</a>
+                      </li>-->
+                      <hr class="uk-nav-divider">
+                      <li><a (click)="deleteTopicOpen(i)">Delete</a></li>
+                    </ul>
                   </div>
                 </div>
-              </div>
+              </a>
             </li>
           </ng-template>
           <li>
-            <a href="#" (click)="saveTopicOpen(newTopic); $event.preventDefault()">
+            <a href="#" (click)="editTopicOpen(); $event.preventDefault()">
               <span class="menu_icon"><i class="material-icons">add</i></span>
               <span class="menu_title">Create new Topic</span>
             </a>
-            <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newTopic
-                 class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-              <div *ngIf="topicFb">
-                <div class="md-card">
-                  <div class="md-card-content uk-position-relative">
-                    <a class="uk-position-top-right">
-                      <i (click)="hide(newTopic)" class="material-icons">close</i>
-                    </a>
-                    <div class="uk-grid-small" uk-grid [formGroup]="topicFb">
-                      <div class="uk-width-1-1">
-                        <label class="uk-text-bold">New Topic</label>
-                        <input class="uk-input uk-form-small" formControlName="name"
-                               [class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
-                               type="text">
-                      </div>
-                      <div class="uk-width-1-1">
-                        <label>Description</label>
-                        <textarea class="uk-textarea" formControlName="description"
-                                  rows="3" type="text"></textarea>
-                      </div>
-                      <div dashboard-input [type]="'select'"
-                           [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                           label="Privacy" class="uk-width-1-2">
-                      </div>
-                      <div dashboard-input [type]="'select'"
-                           [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
-                           label="Status" class="uk-width-1-2">
-                      </div>
-                    </div>
-                    <hr>
-                    <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                      <div>
-                        <button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>
-                      </div>
-                      <div>
-                        <button class="md-btn md-btn-small uk-float-right"
-                                [class.md-btn-primary]="topicFb.valid && topicFb.dirty"
-                                [class.disabled]="topicFb.invalid || !topicFb.dirty"
-                                (click)="saveTopic(newTopic)">
-                          Create
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
           </li>
         </ul>
       </li>
@@ -188,4 +107,23 @@
     </div>
   </div>
 </div>
-<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
+<modal-alert #deleteModal (alertOutput)="deleteTopic()">
+  You are about to delete <span class="uk-text-bold" *ngIf="index !== -1">"{{stakeholder.topics[index].name}}"</span> topic permanently.
+  Are you sure you want to proceed?
+</modal-alert>
+<modal-alert #editModal (alertOutput)="saveTopic(index)">
+  <div *ngIf="form" class="uk-padding-small" [formGroup]="form">
+    <div dashboard-input class="uk-form-row" [formInput]="form.get('name')" label="Title"></div>
+    <div dashboard-input class="uk-form-row" [formInput]="form.get('description')"
+         label="Description" type="textarea">
+    </div>
+    <div class="uk-form-row uk-flex uk-flex-middle">
+      <div dashboard-input class="uk-width-small" [formInput]="form.get('isPublic')"
+           label="Accessibility" [options]="stakeholderUtils.isPublic" type="select">
+      </div>
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="form.get('isActive')"
+           label="Visibility" [options]="stakeholderUtils.isActive" type="select">
+      </div>
+    </div>
+  </div>
+</modal-alert>
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.ts	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/stakeholder/stakeholder.component.ts	(revision 57922)
@@ -12,189 +12,181 @@
 import {Subscriber} from "rxjs";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
-import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
+import {StakeholderUtils} from "../utils/indicator-utils";
 
 declare var UIkit;
 
 @Component({
-    selector: 'stakeholder',
-    templateUrl: './stakeholder.component.html',
+  selector: 'stakeholder',
+  templateUrl: './stakeholder.component.html',
 })
 export class StakeholderComponent implements OnInit, OnDestroy {
-    public subscriptions: any[] = [];
-    public loading: boolean = true;
-    public errorCodes: ErrorCodes;
-    public stakeholder: Stakeholder;
-    public analysisOpen: boolean = true;
-    private errorMessages: ErrorMessagesComponent;
-    public topicFb: FormGroup;
-    public indicatorUtils: IndicatorUtils = new IndicatorUtils();
-    public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
-    public element: any;
-    public index: number;
-    properties: EnvProperties;
-
-    @ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
-
-    constructor(
-        private route: ActivatedRoute,
-        private router: Router,
-        private title: Title,
-        private layoutService: LayoutService,
-        private fb: FormBuilder,
-        private stakeholderService: StakeholderService) {
-        this.errorCodes = new ErrorCodes();
-        this.errorMessages = new ErrorMessagesComponent();
-    }
-
-    public ngOnInit() {
-        this.route.data
-            .subscribe((data: { envSpecific: EnvProperties }) => {
-                this.properties = data.envSpecific;
-                this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
-                    if (stakeholder) {
-                        this.stakeholder = HelperFunctions.copy(stakeholder);
-                        this.topicFb = null;
-                        this.title.setTitle(stakeholder.index_name);
-                    }
-                }));
-            });
-    }
-
-    public ngOnDestroy() {
-        this.subscriptions.forEach(value => {
-            if (value instanceof Subscriber) {
-                value.unsubscribe();
-            }
-        });
-    }
-
-    public show(element) {
-        UIkit.drop(element).show();
-    }
-
-    public hide(element) {
-        UIkit.drop(element).hide();
-    }
-
-    get open(): boolean {
-        return this.layoutService.open;
-    }
-
-    public toggleOpen(event = null) {
-        if (!event) {
-            this.layoutService.setOpen(!this.open);
-        } else if (event && event['value'] === true) {
-            this.layoutService.setOpen(false);
-        }
-    }
-
-    private buildTopic(topic: Topic) {
-        let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
-        this.topicFb = this.fb.group({
-            _id: this.fb.control(topic._id),
-            name: this.fb.control(topic.name, Validators.required),
-            description: this.fb.control(topic.description),
-            alias: this.fb.control(topic.alias, [
-                    Validators.required,
-                    this.stakeholderUtils.aliasValidator(topics)
-                ]
-            ),
-            isActive: this.fb.control(topic.isActive),
-            isPublic: this.fb.control(topic.isPublic),
-            isDefault: this.fb.control(topic.isDefault),
-            categories: this.fb.control(topic.categories)
-        });
-        this.subscriptions.push(this.topicFb.get('name').valueChanges.subscribe(value => {
-          let i = 1;
-          value = this.stakeholderUtils.generateAlias(value);
-          this.topicFb.controls['alias'].setValue(value);
-          while (this.topicFb.get('alias').invalid) {
-            this.topicFb.controls['alias'].setValue(value + i);
-            i++;
+  public subscriptions: any[] = [];
+  public loading: boolean = true;
+  public errorCodes: ErrorCodes;
+  public stakeholder: Stakeholder;
+  public analysisOpen: boolean = true;
+  private errorMessages: ErrorMessagesComponent;
+  public form: FormGroup;
+  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+  public index: number = -1;
+  properties: EnvProperties;
+  
+  @ViewChild('deleteModal') deleteModal: AlertModal;
+  @ViewChild('editModal') editModal: AlertModal;
+  
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private title: Title,
+    private layoutService: LayoutService,
+    private fb: FormBuilder,
+    private stakeholderService: StakeholderService) {
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+  }
+  
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+          if (stakeholder) {
+            this.stakeholder = HelperFunctions.copy(stakeholder);
+            this.form = null;
+            this.title.setTitle(stakeholder.index_name);
           }
         }));
+      });
+  }
+  
+  public ngOnDestroy() {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
+  }
+  
+  get open(): boolean {
+    return this.layoutService.open;
+  }
+  
+  public toggleOpen(event = null) {
+    if (!event) {
+      this.layoutService.setOpen(!this.open);
+    } else if (event && event['value'] === true) {
+      this.layoutService.setOpen(false);
     }
-
-    public saveTopicOpen(element, index = -1) {
-        if (element.className.indexOf('uk-open') !== -1) {
-            this.hide(element);
-        } else {
-            if (index === -1) {
-                this.buildTopic(new Topic(null, null, null, true, true, false));
-            } else {
-                this.buildTopic(this.stakeholder.topics[index]);
-            }
-            this.show(element);
-        }
+  }
+  
+  private buildTopic(topic: Topic) {
+    let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
+    this.form = this.fb.group({
+      _id: this.fb.control(topic._id),
+      name: this.fb.control(topic.name, Validators.required),
+      description: this.fb.control(topic.description),
+      alias: this.fb.control(topic.alias, [
+          Validators.required,
+          this.stakeholderUtils.aliasValidator(topics)
+        ]
+      ),
+      isActive: this.fb.control(topic.isActive),
+      isPublic: this.fb.control(topic.isPublic),
+      isDefault: this.fb.control(topic.isDefault),
+      categories: this.fb.control(topic.categories)
+    });
+    this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
+      let i = 1;
+      value = this.stakeholderUtils.generateAlias(value);
+      this.form.controls['alias'].setValue(value);
+      while (this.form.get('alias').invalid) {
+        this.form.controls['alias'].setValue(value + i);
+        i++;
+      }
+    }));
+  }
+  
+  public editTopicOpen(index = -1) {
+    this.index = index;
+    if (index === -1) {
+      this.buildTopic(new Topic(null, null, null, true, true, false));
+    } else {
+      this.buildTopic(this.stakeholder.topics[index]);
     }
-
-    public saveTopic(element, index = -1) {
-        if (!this.topicFb.invalid) {
-            if (index === -1) {
-                this.save('Topic has been successfully created', element);
-            } else {
-                this.save('Topic has been successfully saved', element, index);
-            }
-        }
+    this.editModal.cancelButtonText = 'Cancel';
+    this.editModal.okButtonLeft = false;
+    this.editModal.alertMessage = false;
+    if (index === -1) {
+      this.editModal.alertTitle = 'Create a new topic';
+      this.editModal.okButtonText = 'Create';
+    } else {
+      this.editModal.alertTitle = 'Edit topic\'s information ';
+      this.editModal.okButtonText = 'Save';
     }
-
-    public deleteTopicOpen(name: string, element, index: number) {
-        this.element = element;
-        this.index = index;
-        this.deleteTopicModal.alertTitle = 'Delete ' + name;
-        this.deleteTopicModal.cancelButtonText = 'No';
-        this.deleteTopicModal.okButtonText = 'Yes';
-        this.deleteTopicModal.message = 'This topic will permanently be deleted. Are you sure you want to proceed?';
-        this.deleteTopicModal.open();
+    this.editModal.open();
+  }
+  
+  public saveTopic(index = -1) {
+    if (!this.form.invalid) {
+      if (index === -1) {
+        this.save('Topic has been successfully created');
+      } else {
+        this.save('Topic has been successfully saved', index);
+      }
     }
-
-    private save(message: string, element, index: number = -1) {
-        let path = [this.stakeholder._id];
-        this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.topicFb.value, path).subscribe(topic => {
-            if (index === -1) {
-                this.stakeholder.topics.push(topic);
-            } else {
-                this.stakeholder.topics[index] = topic;
-            }
-            this.stakeholderService.setStakeholder(this.stakeholder);
-            UIkit.notification(message, {
-                status: 'success',
-                timeout: 3000,
-                pos: 'top-left'
-            });
-            this.hide(element);
-        }, error => {
-            UIkit.notification(error.error.message, {
-                status: 'danger',
-                timeout: 3000,
-                pos: 'top-left'
-            });
-            this.hide(element);
-        });
-    }
-
-    deleteTopic() {
-        let path = [
-            this.stakeholder._id,
-            this.stakeholder.topics[this.index]._id
-        ];
-        this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => {
-            this.stakeholder.topics.splice(this.index, 1);
-            this.stakeholderService.setStakeholder(this.stakeholder);
-            UIkit.notification('Topic has been successfully deleted', {
-                status: 'success',
-                timeout: 3000,
-                pos: 'top-left'
-            });
-            this.hide(this.element);
-        }, error => {
-            UIkit.notification(error.error.message, {
-                status: 'danger',
-                timeout: 3000,
-                pos: 'top-left'
-            });
-            this.hide(this.element);
-        });
-    }
+  }
+  
+  public deleteTopicOpen(index: number) {
+    this.index = index;
+    this.deleteModal.alertTitle = 'Delete topic';
+    this.deleteModal.cancelButtonText = 'No';
+    this.deleteModal.okButtonText = 'Yes';
+    this.deleteModal.open();
+  }
+  
+  private save(message: string, index: number = -1) {
+    let path = [this.stakeholder._id];
+    this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.form.value, path).subscribe(topic => {
+      if (index === -1) {
+        this.stakeholder.topics.push(topic);
+      } else {
+        this.stakeholder.topics[index] = topic;
+      }
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification(message, {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
+  
+  deleteTopic() {
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.index]._id
+    ];
+    this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => {
+      this.stakeholder.topics.splice(this.index, 1);
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification('Topic has been successfully deleted', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
 }
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.html
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.html	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.html	(revision 57922)
@@ -14,58 +14,25 @@
           <div class="menu_title uk-width-expand">
             {{stakeholder.topics[topicIndex].name.toUpperCase()}}
           </div>
-          <span class="uk-width-1-6 onHover"
-                  (click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
-            <i class="material-icons md-color-white">more_horiz</i>
-          </span>
-        </a>
-        <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
-             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-          <div *ngIf="topicFb">
-            <div class="md-card">
-              <div class="md-card-content uk-position-relative">
-                <a class="uk-position-top-right">
-                  <i (click)="hide(editTopic)" class="material-icons">close</i>
-                </a>
-                <div class="uk-grid-small" uk-grid [formGroup]="topicFb">
-                  <div class="uk-width-1-1">
-                    <label class="uk-text-bold">Topic Settings</label>
-                    <input class="uk-input uk-form-small" formControlName="name"
-                           [class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
-                           type="text">
-                  </div>
-                  <div class="uk-width-1-1">
-                    <label>Description</label>
-                    <textarea class="uk-textarea" formControlName="description"
-                              rows="3" type="text"></textarea>
-                  </div>
-                  <div dashboard-input [type]="'select'"
-                       [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                       label="Privacy" class="uk-width-1-2">
-                  </div>
-                  <div dashboard-input [type]="'select'"
-                       [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
-                       label="Status" class="uk-width-1-2">
-                  </div>
-                </div>
-                <hr>
-                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                  <div>
-                    <button class="md-btn md-btn-small"
-                            (click)="deleteTopicOpen(topicFb.value.name, editTopic)">Delete</button>
-                  </div>
-                  <div>
-                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                            [class.md-btn-primary]="topicFb.valid && topicFb.dirty"
-                            [class.disabled]="topicFb.invalid || !topicFb.dirty"
-                            (click)="saveTopic(editTopic)">Save
-                    </button>
-                  </div>
-                </div>
-              </div>
+          <div class="uk-width-1-6"
+               (click)="$event.stopPropagation();$event.preventDefault()">
+            <i class="material-icons onHover md-color-white">more_vert</i>
+            <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                 class="uk-padding-remove-horizontal">
+              <ul class="uk-nav uk-dropdown-nav">
+                <li><a (click)="editTopicOpen()">Edit</a></li>
+                <!--<li><a (click)="toggleIndicatorStatus(indicator)">
+                  {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
+                </li>
+                <li><a (click)="toggleIndicatorAccess(indicator)">
+                    {{indicator.isPublic?'Unpublish':'Publish'}}</a>
+                </li>-->
+                <hr class="uk-nav-divider">
+                <li><a (click)="deleteTopicOpen()">Delete</a></li>
+              </ul>
             </div>
           </div>
-        </div>
+        </a>
       </li>
       <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
         <li [class.current_section]="categoryIndex === i"
@@ -72,65 +39,31 @@
             [class.act_section]="selectedCategoryIndex === i && toggle"
             [title]="category.name"
             class="submenu_trigger">
-          <a href="#" (click)="toggleCategory(i);hide(editCategory);$event.preventDefault()">
+          <a href="#" (click)="toggleCategory(i);$event.preventDefault()">
             <span *ngIf="category.icon" class="menu_icon"><i
-              class="material-icons">{{category.icon}}</i></span>
+                class="material-icons">{{category.icon}}</i></span>
             <div class="menu_title uk-width-expand">
               {{category.name}}
             </div>
-            <span class="uk-width-1-6 onHover"
-                    (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
-              <i class="material-icons">more_horiz</i>
-            </span>
-          </a>
-          <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editCategory
-               class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-            <div *ngIf="categoryFb">
-              <div class="md-card">
-                <div class="md-card-content uk-position-relative">
-                  <a class="uk-position-top-right">
-                    <i (click)="hide(editCategory)" class="material-icons">close</i>
-                  </a>
-                  <div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
-                    <div class="uk-width-1-1">
-                      <label class="uk-text-bold">Category Settings</label>
-                      <input class="uk-input uk-form-small" formControlName="name"
-                             [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
-                             type="text">
-                    </div>
-                    <div class="uk-width-1-1">
-                      <label>Description</label>
-                      <textarea class="uk-textarea" formControlName="description"
-                                rows="3" type="text"></textarea>
-                    </div>
-                    <div dashboard-input [type]="'select'"
-                         [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                         label="Privacy" class="uk-width-1-2">
-                    </div>
-                    <div dashboard-input [type]="'select'"
-                         [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
-                         label="Status" class="uk-width-1-2">
-                    </div>
-                  </div>
-                  <hr>
-                  <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                    <div>
-                      <button class="md-btn md-btn-small"
-                              (click)="deleteCategoryOpen(categoryFb.value.name, editCategory, i)">Delete
-                      </button>
-                    </div>
-                    <div>
-                      <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                              [class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
-                              [class.disabled]="categoryFb.invalid || !categoryFb.dirty"
-                              (click)="saveCategory(editCategory, i)">Save
-                      </button>
-                    </div>
-                  </div>
-                </div>
+            <div class="uk-width-1-6"
+                 (click)="$event.stopPropagation();$event.preventDefault()">
+              <i class="material-icons onHover">more_vert</i>
+              <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                   class="uk-padding-remove-horizontal">
+                <ul class="uk-nav uk-dropdown-nav">
+                  <li><a (click)="editCategoryOpen(i)">Edit</a></li>
+                  <!--<li><a (click)="toggleIndicatorStatus(indicator)">
+                    {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
+                  </li>
+                  <li><a (click)="toggleIndicatorAccess(indicator)">
+                      {{indicator.isPublic?'Unpublish':'Publish'}}</a>
+                  </li>-->
+                  <hr class="uk-nav-divider">
+                  <li><a (click)="deleteCategoryOpen(i)">Delete</a></li>
+                </ul>
               </div>
             </div>
-          </div>
+          </a>
           <ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
             <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
                          let-subcategory let-j="index">
@@ -137,171 +70,45 @@
               <li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
                 <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
                 <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
-                  class="material-icons">{{subcategory.icon}}</i></span>
+                    class="material-icons">{{subcategory.icon}}</i></span>
                   <div class="menu_title uk-width-expand">
                     {{subcategory.name}}
                   </div>
-                  <span class="uk-width-1-6 onHover"
-                          (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
-                    <i class="material-icons">more_horiz</i>
-                  </span>
-                </a>
-                <div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
-                     class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-                  <div *ngIf="subcategoryFb">
-                    <div class="md-card">
-                      <div class="md-card-content uk-position-relative">
-                        <a class="uk-position-top-right">
-                          <i (click)="hide(editSubCategory)" class="material-icons">close</i>
-                        </a>
-                        <div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
-                          <div class="uk-width-1-1">
-                            <label class="uk-text-bold">Subcategory Settings</label>
-                            <input class="uk-input uk-form-small" formControlName="name"
-                                   [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
-                                   type="text">
-                          </div>
-                          <div class="uk-width-1-1">
-                            <label>Description</label>
-                            <textarea class="uk-textarea" formControlName="description"
-                                      rows="3" type="text"></textarea>
-                          </div>
-                          <div dashboard-input [type]="'select'"
-                               [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                               label="Privacy" class="uk-width-1-2">
-                          </div>
-                          <div dashboard-input [type]="'select'"
-                               [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
-                               label="Status" class="uk-width-1-2">
-                          </div>
-                        </div>
-                        <hr>
-                        <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                          <div>
-                            <button class="md-btn md-btn-small"
-                                    (click)="deleteSubcategoryOpen(subcategoryFb.value.name, editSubCategory, j)">Delete
-                            </button>
-                          </div>
-                          <div>
-                            <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                                    [class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
-                                    [class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
-                                    (click)="saveSubCategory(editSubCategory, j)">Save
-                            </button>
-                          </div>
-                        </div>
-                      </div>
+                  <div class="uk-width-1-6"
+                       (click)="$event.stopPropagation();$event.preventDefault()">
+                    <i class="material-icons onHover">more_vert</i>
+                    <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                         class="uk-padding-remove-horizontal">
+                      <ul class="uk-nav uk-dropdown-nav">
+                        <li><a (click)="editSubCategoryOpen(j)">Edit</a></li>
+                        <!--<li><a (click)="toggleIndicatorStatus(indicator)">
+                          {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
+                        </li>
+                        <li><a (click)="toggleIndicatorAccess(indicator)">
+                            {{indicator.isPublic?'Unpublish':'Publish'}}</a>
+                        </li>-->
+                        <hr class="uk-nav-divider">
+                        <li><a (click)="deleteSubcategoryOpen(j)">Delete</a></li>
+                      </ul>
                     </div>
                   </div>
-                </div>
+                </a>
               </li>
             </ng-template>
             <li>
-              <a href="#" (click)="editSubCategoryOpen(newSubCategory);$event.preventDefault()">
+              <a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
                 <span class="menu_icon"><i class="material-icons">add</i></span>
                 <span class="menu_title">Create new Subcategory</span>
               </a>
-              <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newSubCategory
-                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-                <div *ngIf="subcategoryFb">
-                  <div class="md-card">
-                    <div class="md-card-content uk-position-relative">
-                      <a class="uk-position-top-right">
-                        <i (click)="hide(newSubCategory)" class="material-icons">close</i>
-                      </a>
-                      <div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
-                        <div class="uk-width-1-1">
-                          <label class="uk-text-bold">New Subcategory</label>
-                          <input class="uk-input uk-form-small" formControlName="name"
-                                 [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
-                                 type="text">
-                        </div>
-                        <div class="uk-width-1-1">
-                          <label>Description</label>
-                          <textarea class="uk-textarea" formControlName="description"
-                                    rows="3" type="text"></textarea>
-                        </div>
-                        <div dashboard-input [type]="'select'"
-                             [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                             label="Privacy" class="uk-width-1-2">
-                        </div>
-                        <div dashboard-input [type]="'select'"
-                             [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
-                             label="Status" class="uk-width-1-2">
-                        </div>
-                      </div>
-                      <hr>
-                      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                        <div>
-                          <button class="md-btn md-btn-small" (click)="hide(newSubCategory)">Cancel</button>
-                        </div>
-                        <div>
-                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                                  [class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
-                                  [class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
-                                  (click)="saveSubCategory(newSubCategory)">Create
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </li>
           </ul>
         </li>
       </ng-template>
       <li>
-        <a href="#" (click)="editCategoryOpen(newCategory);$event.preventDefault()">
+        <a href="#" (click)="editCategoryOpen();$event.preventDefault()">
           <span class="menu_icon"><i class="material-icons">add</i></span>
           <span class="menu_title">Create new Category</span>
         </a>
-        <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newCategory
-             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
-          <div *ngIf="categoryFb">
-            <div class="md-card">
-              <div class="md-card-content uk-position-relative">
-                <a class="uk-position-top-right">
-                  <i (click)="hide(newCategory)" class="material-icons">close</i>
-                </a>
-                <div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
-                  <div class="uk-width-1-1">
-                    <label class="uk-text-bold">New Category</label>
-                    <input class="uk-input uk-form-small" formControlName="name"
-                           [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
-                           type="text">
-                  </div>
-                  <div class="uk-width-1-1">
-                    <label>Description</label>
-                    <textarea class="uk-textarea" formControlName="description"
-                              rows="3" type="text"></textarea>
-                  </div>
-                  <div dashboard-input [type]="'select'"
-                       [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
-                       label="Privacy" class="uk-width-1-2">
-                  </div>
-                  <div dashboard-input [type]="'select'"
-                       [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
-                       label="Status" class="uk-width-1-2">
-                  </div>
-                </div>
-                <hr>
-                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-                  <div>
-                    <button class="md-btn md-btn-small" (click)="hide(newCategory)">Cancel</button>
-                  </div>
-                  <div>
-                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
-                            [class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
-                            [class.disabled]="categoryFb.invalid || !categoryFb.dirty"
-                            (click)="saveCategory(newCategory)">Create
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </li>
     </ul>
   </div>
@@ -311,7 +118,24 @@
             [topicIndex]="topicIndex"
             [categoryIndex]="categoryIndex"
             [subcategoryIndex]="subCategoryIndex"></indicators>
-<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
-<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
-<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>
+<modal-alert #deleteModal (alertOutput)="deleteElement()">
+  You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
+  Are you sure you want to proceed?
+</modal-alert>
+<modal-alert #editModal (alertOutput)="saveElement()">
+  <div *ngIf="form" class="uk-padding-small" [formGroup]="form">
+    <div dashboard-input class="uk-form-row" [formInput]="form.get('name')" label="Title"></div>
+    <div dashboard-input class="uk-form-row" [formInput]="form.get('description')"
+         label="Description" type="textarea">
+    </div>
+    <div class="uk-form-row uk-flex uk-flex-middle">
+      <div dashboard-input class="uk-width-small" [formInput]="form.get('isPublic')"
+           label="Accessibility" [options]="stakeholderUtils.isPublic" type="select">
+      </div>
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="form.get('isActive')"
+           label="Visibility" [options]="stakeholderUtils.isActive" type="select">
+      </div>
+    </div>
+  </div>
+</modal-alert>
 
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.html
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.html	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.html	(revision 57922)
@@ -83,7 +83,7 @@
                       <li><a (click)="toggleIndicatorAccess(indicator)">
                           {{indicator.isPublic?'Unpublish':'Publish'}}</a>
                       </li>
-                      <li class="uk-nav-divider"></li>
+                      <hr class="uk-nav-divider">
                       <li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a>
                       </li>
                     </ul>
@@ -160,7 +160,7 @@
                       <li><a (click)="toggleIndicatorAccess(indicator)">
                           {{indicator.isPublic?'Unpublish':'Publish'}}</a>
                       </li>
-                      <li class="uk-nav-divider"></li>
+                      <hr class="uk-nav-divider">
                       <li><a (click)="deleteIndicatorOpen(indicator._id)">Delete</a></li>
                     </ul>
                   </div>
@@ -230,7 +230,7 @@
     </div>
   </div>
 </div>
-<modal-alert #editIndicatorModal
+<modal-alert #editModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
              [okDisabled]="indicatorFb && (indicatorFb.invalid || indicatorFb.pristine)">
@@ -318,4 +318,8 @@
     </div>
   </div>
 </modal-alert>
-<modal-alert #deleteIndicatorModal (alertOutput)="deleteIndicator()"></modal-alert>
+<modal-alert #deleteModal (alertOutput)="deleteIndicator()">
+  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
+  "{{indicator.name?indicator.name:indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
+  Are you sure you want to proceed?
+</modal-alert>
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.ts	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.ts	(revision 57922)
@@ -8,7 +8,7 @@
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 import {Subscriber, Subscription} from "rxjs";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
-import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
+import {StakeholderUtils} from "../utils/indicator-utils";
 
 declare var UIkit;
 
@@ -19,7 +19,6 @@
 export class TopicComponent implements OnInit, OnDestroy {
     public subscriptions: any[] = [];
     public properties: EnvProperties;
-    public indicatorUtils: IndicatorUtils = new IndicatorUtils();
     public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
     public loading: boolean = true;
     public stakeholder: Stakeholder;
@@ -27,32 +26,29 @@
      * Current topic
      **/
     public topicIndex: number = 0;
-    public topicFb: FormGroup;
-
     /**
      * categoryIndex: Current category to be edited, selectedCategoryIndex: selected on menu(opened)
      */
     public categoryIndex: number = 0;
     public selectedCategoryIndex: number = 0;
-    public categoryFb: FormGroup;
     /**
      * Current Subcategory to be edited
      */
     public subCategoryIndex: number = 0;
-    public subcategoryFb: FormGroup;
     /**
-     * Current drop element and index of topic, category or subcategory to be deleted.
+     * Current element and index of topic, category or subcategory to be deleted.
      */
-    public element: any;
-    public index: number;
+    public form: FormGroup;
+    public element: Topic | Category | SubCategory;
+    public type: 'topic' | 'category' | 'subcategory' = "topic";
+    public index: number = -1;
     /**
      * Check form validity
      */
     public toggle: boolean = false;
 
-    @ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
-    @ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
-    @ViewChild('deleteSubcategoryModal') deleteSubcategoryModal: AlertModal;
+    @ViewChild('deleteModal') deleteModal: AlertModal;
+    @ViewChild('editModal') editModal: AlertModal;
 
     constructor(
         private route: ActivatedRoute,
@@ -95,18 +91,30 @@
             }
         });
     }
-
-    public hide(element) {
-        UIkit.drop(element).hide();
+    
+    public saveElement() {
+        if(this.type === "topic") {
+            this.saveTopic();
+        } else if(this.type === "category") {
+            this.saveCategory();
+        } else {
+            this.saveSubCategory();
+        }
     }
-
-    public show(element) {
-        UIkit.drop(element).show();
+    
+    public deleteElement() {
+        if(this.type === "topic") {
+            this.deleteTopic();
+        } else if(this.type === "category") {
+            this.deleteCategory();
+        } else {
+            this.deleteSubcategory();
+        }
     }
-
+    
     private buildTopic(topic: Topic) {
         let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
-        this.topicFb = this.fb.group({
+        this.form = this.fb.group({
             _id: this.fb.control(topic._id),
             name: this.fb.control(topic.name, Validators.required),
             description: this.fb.control(topic.description),
@@ -120,48 +128,49 @@
             isDefault: this.fb.control(topic.isDefault),
             categories: this.fb.control(topic.categories)
         });
-        this.subscriptions.push(this.topicFb.get('name').valueChanges.subscribe(value => {
+        this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
             let i = 1;
             value = this.stakeholderUtils.generateAlias(value);
-            this.topicFb.controls['alias'].setValue(value);
-            while (this.topicFb.get('alias').invalid) {
-                this.topicFb.controls['alias'].setValue(value + i);
+            this.form.controls['alias'].setValue(value);
+            while (this.form.get('alias').invalid) {
+                this.form.controls['alias'].setValue(value + i);
                 i++;
             }
         }));
     }
 
-    public editTopicOpen(element) {
-        if (element.className.indexOf('uk-open') !== -1) {
-            this.hide(element);
-        } else {
-            this.buildTopic(this.stakeholder.topics[this.topicIndex]);
-            this.show(element);
-        }
+    public editTopicOpen() {
+        this.index = this.topicIndex;
+        this.type = 'topic';
+        this.buildTopic(this.stakeholder.topics[this.index]);
+        this.editOpen();
     }
 
-    public saveTopic(element) {
-        if (!this.topicFb.invalid) {
+    public saveTopic() {
+        if (!this.form.invalid) {
             let path = [this.stakeholder._id];
             let callback = (topic: Topic): void => {
-                this.stakeholder.topics[this.topicIndex] = topic;
+                this.stakeholder.topics[this.index] = topic;
                 this.stakeholderService.setStakeholder(this.stakeholder);
             };
-            this.save('Topic has been successfully saved', element, path, this.topicFb.value, callback, true);
+            this.save('Topic has been successfully saved', path, this.form.value, callback, true);
         }
     }
 
-    public deleteTopicOpen(name: string, element) {
-        this.deleteOpen(name, 'topic', this.deleteTopicModal, element, this.topicIndex);
+    public deleteTopicOpen() {
+        this.type = 'topic';
+        this.index = this.topicIndex;
+        this.element = this.stakeholder.topics[this.index];
+        this.deleteOpen();
     }
 
     public deleteTopic() {
         let path: string[] = [
             this.stakeholder._id,
-            this.stakeholder.topics[this.topicIndex]._id
+            this.stakeholder.topics[this.index]._id
         ];
         let callback = (): void => {
-            this.stakeholder.topics.splice(this.topicIndex, 1);
+            this.stakeholder.topics.splice(this.index, 1);
             this.stakeholderService.setStakeholder(this.stakeholder);
         };
         this.delete('Topic has been successfully be deleted', path, callback, true);
@@ -178,7 +187,7 @@
 
     private buildCategory(category: Category) {
         let categories = this.stakeholder.topics[this.topicIndex].categories.filter(element => element._id !== category._id);
-        this.categoryFb = this.fb.group({
+        this.form = this.fb.group({
             _id: this.fb.control(category._id),
             name: this.fb.control(category.name, Validators.required),
             description: this.fb.control(category.description),
@@ -192,51 +201,52 @@
             isDefault: this.fb.control(category.isDefault),
             subCategories: this.fb.control(category.subCategories)
         });
-        this.subscriptions.push(this.categoryFb.get('name').valueChanges.subscribe(value => {
+        this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
             let i = 1;
             value = this.stakeholderUtils.generateAlias(value);
-            this.categoryFb.controls['alias'].setValue(value);
-            while (this.categoryFb.get('alias').invalid) {
-                this.categoryFb.controls['alias'].setValue(value + i);
+            this.form.controls['alias'].setValue(value);
+            while (this.form.get('alias').invalid) {
+                this.form.controls['alias'].setValue(value + i);
                 i++;
             }
         }));
     }
 
-    public editCategoryOpen(element, index: number = -1) {
-        if (element.className.indexOf('uk-open') !== -1) {
-            this.hide(element);
+    public editCategoryOpen(index: number = -1) {
+        this.index = index;
+        this.type = 'category';
+        if (index === -1) {
+            this.buildCategory(new Category(null, null, null, true, true));
         } else {
-            if (index === -1) {
-                this.buildCategory(new Category(null, null, null, true, true));
-            } else {
-                this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
-            }
-            this.show(element);
+            this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
         }
+        this.editOpen();
     }
 
-    public saveCategory(element, index = -1) {
-        if (!this.categoryFb.invalid) {
+    public saveCategory() {
+        if (!this.form.invalid) {
             let path = [this.stakeholder._id, this.stakeholder.topics[this.topicIndex]._id];
             let callback = (category: Category): void => {
-                if (index === -1) {
+                if (this.index === -1) {
                     this.stakeholder.topics[this.topicIndex].categories.push(category);
                 } else {
-                    this.stakeholder.topics[this.topicIndex].categories[index] = HelperFunctions.copy(category);
+                    this.stakeholder.topics[this.topicIndex].categories[this.index] = HelperFunctions.copy(category);
                 }
                 this.stakeholderService.setStakeholder(this.stakeholder);
             };
-            if (index === -1) {
-                this.save('Category has been successfully created', element, path, this.categoryFb.value, callback);
+            if (this.index  === -1) {
+                this.save('Category has been successfully created', path, this.form.value, callback);
             } else {
-                this.save('Category has been successfully saved', element, path, this.categoryFb.value, callback);
+                this.save('Category has been successfully saved', path, this.form.value, callback);
             }
         }
     }
 
-    public deleteCategoryOpen(name: string, element, index) {
-        this.deleteOpen(name, 'category', this.deleteCategoryModal, element, index);
+    public deleteCategoryOpen(index: number) {
+        this.type = 'category';
+        this.index = index;
+        this.element = this.stakeholder.topics[this.topicIndex].categories[this.index];
+        this.deleteOpen();
     }
 
     public deleteCategory() {
@@ -254,7 +264,7 @@
 
     private buildSubcategory(subCategory: SubCategory) {
         let subCategories = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.filter(element => element._id !== subCategory._id);
-        this.subcategoryFb = this.fb.group({
+        this.form = this.fb.group({
             _id: this.fb.control(subCategory._id),
             name: this.fb.control(subCategory.name, Validators.required),
             description: this.fb.control(subCategory.description),
@@ -269,32 +279,30 @@
             charts: this.fb.control(subCategory.charts),
             numbers: this.fb.control(subCategory.numbers)
         });
-        this.subscriptions.push(this.subcategoryFb.get('name').valueChanges.subscribe(value => {
+        this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
             let i = 1;
             value = this.stakeholderUtils.generateAlias(value);
-            this.subcategoryFb.controls['alias'].setValue(value);
-            while (this.subcategoryFb.get('alias').invalid) {
-                this.subcategoryFb.controls['alias'].setValue(value + i);
+            this.form.controls['alias'].setValue(value);
+            while (this.form.get('alias').invalid) {
+                this.form.controls['alias'].setValue(value + i);
                 i++;
             }
         }));
     }
 
-    public editSubCategoryOpen(element, index: number = -1) {
-        if (element.className.indexOf('uk-open') !== -1) {
-            this.hide(element);
+    public editSubCategoryOpen(index: number = -1) {
+        this.index = index;
+        this.type = 'subcategory';
+        if (index === -1) {
+            this.buildSubcategory(new SubCategory(null, null, null, true, true));
         } else {
-            if (index === -1) {
-                this.buildSubcategory(new SubCategory(null, null, null, true, true));
-            } else {
-                this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
-            }
-            this.show(element);
+            this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
         }
+        this.editOpen();
     }
 
-    public saveSubCategory(element, index = -1) {
-        if (!this.subcategoryFb.invalid) {
+    public saveSubCategory() {
+        if (!this.form.invalid) {
             let path: string[] = [
                 this.stakeholder._id,
                 this.stakeholder.topics[this.topicIndex]._id,
@@ -301,24 +309,26 @@
                 this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
             ];
             let callback = (subCategory: SubCategory): void => {
-                if (index === -1) {
+                if (this.index === -1) {
                     this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.push(subCategory);
                 } else {
-                    this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index] = subCategory;
+                    this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = subCategory;
                 }
                 this.stakeholderService.setStakeholder(this.stakeholder);
             };
-            if (index === -1) {
-                this.save('Subcategory has been successfully created', element, path, this.subcategoryFb.value, callback);
+            if (this.index  === -1) {
+                this.save('Subcategory has been successfully created', path, this.form.value, callback);
             } else {
-                this.save('Subcategory has been successfully saved', element, path, this.subcategoryFb.value, callback);
+                this.save('Subcategory has been successfully saved', path, this.form.value, callback);
             }
-            this.hide(element);
         }
     }
 
-    public deleteSubcategoryOpen(name: string, element, index) {
-        this.deleteOpen(name, 'subcategory', this.deleteSubcategoryModal, element, index);
+    public deleteSubcategoryOpen(index) {
+        this.type = 'subcategory';
+        this.index = index;
+        this.element = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index];
+        this.deleteOpen();
     }
 
     public deleteSubcategory() {
@@ -338,18 +348,29 @@
     private navigateToError() {
         this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
     }
+    
+    private editOpen() {
+        this.editModal.cancelButtonText = 'Cancel';
+        this.editModal.okButtonLeft = false;
+        this.editModal.alertMessage = false;
+        if (this.index === -1) {
+            this.editModal.alertTitle = 'Create a new ' + this.type;
+            this.editModal.okButtonText = 'Create';
+        } else {
+            this.editModal.alertTitle = 'Edit ' + this.type + '\'s information ';
+            this.editModal.okButtonText = 'Save';
+        }
+        this.editModal.open();
+    }
 
-    private deleteOpen(name: string, type: string, modal: AlertModal, element, index) {
-        this.element = element;
-        this.index = index;
-        modal.alertTitle = 'Delete ' + name;
-        modal.cancelButtonText = 'No';
-        modal.okButtonText = 'Yes';
-        modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
-        modal.open();
+    private deleteOpen() {
+        this.deleteModal.alertTitle = 'Delete ' + this.type;
+        this.deleteModal.cancelButtonText = 'No';
+        this.deleteModal.okButtonText = 'Yes';
+        this.deleteModal.open();
     }
 
-    private save(message: string, element, path: string[], saveElement: any, callback: Function, redirect = false) {
+    private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
         this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
             callback(saveElement);
             UIkit.notification(message, {
@@ -362,7 +383,6 @@
                     relativeTo: this.route
                 });
             }
-            this.hide(element);
         }, error => {
             UIkit.notification(error.error.message, {
                 status: 'danger',
@@ -369,7 +389,6 @@
                 timeout: 3000,
                 pos: 'top-left'
             });
-            this.hide(element);
         });
     }
 
@@ -384,7 +403,6 @@
             if (redirect) {
                 this.back();
             }
-            this.hide(this.element);
         }, error => {
             UIkit.notification(error.error.message, {
                 status: 'danger',
@@ -391,7 +409,6 @@
                 timeout: 3000,
                 pos: 'top-left'
             });
-            this.hide(this.element);
         });
     }
 
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.ts
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.ts	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/indicators.component.ts	(revision 57922)
@@ -35,7 +35,7 @@
    * Editable indicator
    */
   public indicator: Indicator;
-  public index: number;
+  public index: number = -1;
   /**
    * Displayed chart and numbers base on Top filters
    */
@@ -55,8 +55,8 @@
   public grid: boolean = true;
   private subscriptions: any[] = [];
   private urlSubscriptions: any[] = [];
-  @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
-  @ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal;
+  @ViewChild('editModal') editModal: AlertModal;
+  @ViewChild('deleteModal') deleteModal: AlertModal;
   
   constructor(private layoutService: LayoutService,
               private stakeholderService: StakeholderService,
@@ -320,6 +320,7 @@
       }
     });
     this.index = (id) ? this.charts.findIndex(value => value._id === id) : -1;
+    console.log(this.index);
     if (this.index !== -1) {
       this.indicator = HelperFunctions.copy(this.charts[this.index]);
       this.indicatorFb = this.fb.group({
@@ -348,16 +349,17 @@
       });
       this.addIndicatorPath();
     }
-    this.editIndicatorModal.cancelButtonText = 'Cancel';
-    this.editIndicatorModal.okButtonLeft = false;
-    this.editIndicatorModal.alertMessage = false;
+    this.editModal.cancelButtonText = 'Cancel';
+    this.editModal.okButtonLeft = false;
+    this.editModal.alertMessage = false;
     if (this.index === -1) {
-      this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';
-      this.editIndicatorModal.okButtonText = 'Save';
+      this.editModal.alertTitle = 'Create a new chart indicator';
+      this.editModal.okButtonText = 'Save';
     } else {
-      this.editIndicatorModal.okButtonText = 'Save Changes';
+      this.editModal.alertTitle = 'Edit chart indicator\'s information';
+      this.editModal.okButtonText = 'Save Changes';
     }
-    this.editIndicatorModal.open();
+    this.editModal.open();
   }
   
   saveIndicator() {
@@ -428,11 +430,10 @@
     } else {
       this.indicator = this.numbers.find(value => value._id == id);
     }
-    this.deleteIndicatorModal.alertTitle = 'Delete ' + this.indicator.name;
-    this.deleteIndicatorModal.cancelButtonText = 'No';
-    this.deleteIndicatorModal.okButtonText = 'Yes';
-    this.deleteIndicatorModal.message = 'This indicator will permanently be deleted. Are you sure you want to proceed?';
-    this.deleteIndicatorModal.open();
+    this.deleteModal.alertTitle = 'Delete indicator';
+    this.deleteModal.cancelButtonText = 'No';
+    this.deleteModal.okButtonText = 'Yes';
+    this.deleteModal.open();
   }
   
   deleteIndicator() {
Index: modules/uoa-monitor-portal/trunk/monitor_dashboard/src/assets/theme-assets/dashboard-custom.css
===================================================================
--- modules/uoa-monitor-portal/trunk/monitor_dashboard/src/assets/theme-assets/dashboard-custom.css	(revision 57921)
+++ modules/uoa-monitor-portal/trunk/monitor_dashboard/src/assets/theme-assets/dashboard-custom.css	(revision 57922)
@@ -20,7 +20,8 @@
   display: none;
 }
 
-.dashboard li > a:hover .onHover {
+.dashboard li > a:hover .onHover,
+.dashboard li > a .onHover.uk-open {
   display: block;
 }
 
@@ -46,17 +47,42 @@
 
 .dashboard #sidebar_main .menu_section > ul > li > a {
   font-weight: 700;
+  overflow: unset;
 }
 
+.dashboard #sidebar_main .menu_section > ul > li:not([class*=md-bg-]) > a:hover {
+  background-color: #F0F0F0;
+}
+
 .dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon {
   width: 30px;
 }
 
+.dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover {
+  background-color: #F0F0F0;
+  margin-right: 5px;
+}
+
 .dashboard #sidebar_main .menu_section > ul li > a {
   font-size: var(--sidebar-font-size);
   color: rgba(0, 0, 0, 0.7);
 }
 
+.dashboard #sidebar_main .menu_section .uk-dropdown {
+  min-width: 150px;
+}
+
+.dashboard #sidebar_main .menu_section .uk-dropdown > ul {
+  display: block;
+  margin: 0;
+  text-align: start;
+}
+
+.dashboard #sidebar_main .menu_section .uk-dropdown > ul > li > a {
+  padding: 5px 10px;
+  color: black !important;
+}
+
 .dashboard #sidebar_main .menu_section > ul ul > li > a {
   line-height: 20px;
 }
@@ -63,6 +89,7 @@
 
 .dashboard #sidebar_main .menu_section > ul li > a {
   display: flex;
+  align-items: center;
 }
 
 body.dashboard {
