diff --git a/src/app/services/stakeholder.service.ts b/src/app/services/stakeholder.service.ts
index 023374f..090c6cf 100644
--- a/src/app/services/stakeholder.service.ts
+++ b/src/app/services/stakeholder.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {BehaviorSubject, Observable} from "rxjs";
-import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
+import {Indicator, IndicatorPath, Section, Stakeholder} from "../utils/entities/stakeholder";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {map} from "rxjs/operators";
 import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
@@ -74,6 +74,14 @@ export class StakeholderService {
         return this.formalize(element);
     }));
   }
+  
+  saveSection(url: string, element: any, path: string[] = [], index: number = -1): Observable<Section> {
+    path = HelperFunctions.encodeArray(path);
+    return this.http.post<Section>(url + ((path.length > 0)?'/':'') + path.join('/') +
+      '/save/' + index, element).pipe(map(element => {
+      return this.formalize(element);
+    }));
+  }
 
   deleteElement(url: string, path: string[]): Observable<any> {
     path = HelperFunctions.encodeArray(path);
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 29e886a..c508a1b 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -64,16 +64,16 @@
     </div>
     <h4 class="uk-text-bold">Number Indicators</h4>
     <div [class.list-view]="!grid" [id]="number._id"
-         class="uk-grid-match section uk-grid-small"
+         class="uk-grid-match uk-grid-small"
          *ngFor="let number of displayNumbers; let i = index"
          uk-sortable="group: number" uk-grid>
-      <div  *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
+      <!--<div  *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
         <div class="md-btn-group">
           <button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
           <button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
           <button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
         </div>
-      </div>
+      </div>-->
       <div *ngIf="false"
            class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
            uk-grid>
@@ -160,9 +160,9 @@
              uk-sortable="group: chart" uk-grid>
           <div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
             <div class="md-btn-group">
-              <button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
-              <button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
-              <button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
+              <button class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
+              <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
+              <button class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i></button>
             </div>
           </div>
           <div *ngIf="grid && chartSections.at(i)"
@@ -171,7 +171,7 @@
             <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
                  label="Add a section title"></div>
             <div class="uk-width-expand">
-              <button *ngIf="chartSections.at(i).dirty" class="md-btn">
+              <button *ngIf="chartSections.at(i).dirty" class="md-btn" (click)="saveSection(chartSections.at(i).value, i)">
                 Save
               </button>
             </div>
@@ -259,10 +259,10 @@
                       </i>
                       <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
                     </div>
-                    <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
-                            [src]="indicator.indicatorPaths[i].safeResourceUrl"
+                    <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image'"
+                            [src]="indicator.indicatorPaths[0].safeResourceUrl"
                             class="uk-width-1-1 uk-height-medium"></iframe>
-                    <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
+                    <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
                       <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
                     </div>
                   </div>
@@ -300,7 +300,7 @@
       </ng-template>
       <div *ngIf="grid" class="new-section uk-margin-top">
         <div class="tools uk-flex uk-flex-middle">
-          <button class="md-btn uk-margin-small-right">
+          <button class="md-btn uk-margin-small-right" (click)="createSection()">
             <i class="material-icons md-24 md-color-white">add</i>
           </button>
           <span>Create a new section</span>
@@ -402,3 +402,7 @@
   "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
   Are you sure you want to proceed?
 </modal-alert>
+<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
+  You are about to delete this section and his indicators permanently.
+  Are you sure you want to proceed?
+</modal-alert>
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index b014984..eccab99 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -73,6 +73,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   private urlSubscriptions: any[] = [];
   @ViewChild('editModal') editModal: AlertModal;
   @ViewChild('deleteModal') deleteModal: AlertModal;
+  @ViewChild('deleteChartSectionModal') deleteChartSectionModal: AlertModal;
   
   constructor(private layoutService: LayoutService,
               private stakeholderService: StakeholderService,
@@ -99,6 +100,28 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   ngAfterViewInit(): void {
+    this.initReorder();
+  }
+  
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.canEdit) {
+      if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) {
+        this.buildFilters();
+      }
+      this.filterCharts();
+      this.filterNumbers();
+    }
+    this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias +
+      '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias +
+      '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
+  }
+  
+  initReorder() {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Function) {
+        value();
+      }
+    });
     if (document !== undefined) {
       let callback = (list, type: IndicatorType): void => {
         let items: HTMLCollection = list.current.children;
@@ -135,19 +158,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     }
   }
   
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.canEdit) {
-      if (changes.topicIndex || changes.categoryIndex || changes.subcategoryIndex) {
-        this.buildFilters();
-      }
-      this.filterCharts();
-      this.filterNumbers();
-    }
-    this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias +
-      '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias +
-      '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
-  }
-  
   hide(element: any) {
     UIkit.dropdown(element).hide();
   }
@@ -216,6 +226,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         });
       })
     });
+    this.buildSections();
   }
   
   filterNumbers() {
@@ -223,6 +234,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
       this.filters.value.status),
       this.filters.value.privacy);
+    this.buildSections();
   }
   
   onChartTypeChange(value) {
@@ -554,7 +566,112 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     });
   }
   
-  createSection(index: number = -1) {
+  saveSection(section : Section, index: number, type: IndicatorType = "chart") {
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
+    ];
+    this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, section, path, index).subscribe(section => {
+      if(type === 'chart') {
+        this.charts[index] = section;
+        this.filterCharts();
+      } else {
+        this.numbers[index] = section;
+        this.filterNumbers();
+      }
+      this.initReorder();
+      UIkit.notification('Section has been successfully saved', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
   
+  createSection(index = -1, type: IndicatorType = 'chart') {
+    this.section = new Section(type, null, null, this.stakeholder.alias);
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
+    ];
+    this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, this.section, path, index).subscribe(section => {
+      if(type === 'chart') {
+        if(index !== -1) {
+          this.charts.splice(index, 0, section);
+        } else {
+          this.charts.push(section);
+        }
+        this.filterCharts();
+      } else {
+        if(index !== -1) {
+          this.numbers.splice(index, 0, section);
+        } else {
+          this.numbers.push(section);
+        }
+        this.filterNumbers();
+      }
+      this.initReorder();
+      UIkit.notification('Section has been successfully created', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
+  
+  deleteChartSectionOpen(section: Section, index: number) {
+    this.section = section;
+    this.index = index;
+    this.deleteChartSectionModal.alertTitle = 'Delete Section';
+    this.deleteChartSectionModal.cancelButtonText = 'No';
+    this.deleteChartSectionModal.okButtonText = 'Yes';
+    this.deleteChartSectionModal.open();
+  }
+  
+  deleteSection(type: IndicatorType = 'chart')  {
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id,
+      this.section._id
+    ];
+    this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(()=> {
+      if(type === "chart") {
+        this.charts.splice(this.index, 1);
+        this.filterCharts();
+      } else {
+        this.numbers.splice(this.index, 1);
+        this.filterNumbers();
+      }
+      this.initReorder();
+      UIkit.notification('Section has been successfully deleted', {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
   }
 }
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index b0a16b6..389d24f 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
-import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
+import {Category, Section, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
@@ -355,7 +355,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
       let path: string[] = [
         this.stakeholder._id,
         this.stakeholder.topics[this.topicIndex]._id,
-        this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
+        this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id
       ];
       let callback = (subCategory: SubCategory): void => {
         if (this.index === -1) {
diff --git a/src/app/utils/entities/stakeholder.ts b/src/app/utils/entities/stakeholder.ts
index dee7f5f..6040dc9 100644
--- a/src/app/utils/entities/stakeholder.ts
+++ b/src/app/utils/entities/stakeholder.ts
@@ -111,8 +111,8 @@ export class SubCategory {
     this.isActive = isActive;
     this.isPublic = isPublic;
     this.defaultId = defaultId;
-    this.charts = [new Section("chart")];
-    this.numbers = [new Section("number")];
+    this.charts = [];
+    this.numbers = [];
     this.recommendedFor= [];
   }
 
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index e7d93f1..b1865ec 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -413,20 +413,20 @@ body.dashboard {
 
 .dashboard .section:hover .tools .md-btn-group::before {
   content: "";
-  border-bottom: 25px solid var(--secondary-color);
+  border-bottom: 23px solid var(--secondary-color);
   border-left:solid 12px transparent;
   width: 0;
   margin-left: -1px;
-  border-top-right-radius: 5px;
+  padding-bottom: 2px;
 }
 
 .dashboard .section:hover .tools .md-btn-group::after {
   content: "";
-  border-bottom: 25px solid var(--secondary-color);
+  border-bottom: 23px solid var(--secondary-color);
   border-right: solid 12px transparent;
   width: 0;
   margin-left: -1px;
-  border-top-left-radius: 5px;
+  padding-bottom: 2px;
 }
 
 /* New section*/