diff --git a/package-lock.json b/package-lock.json
index 2b8fccc975944a8014a20eefa6c60b209691d749..fa131b8bf0c65285f3eeb8fa3c0596637b7bedca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -267,9 +267,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.1.tgz",
-      "integrity": "sha512-5hBmhrHf9+WjGVIT8gbhT0Nh37BAjgI2TGRkt1o4qX8cG+1B6gU2MxM+CDJ7PhxSJi9lW93lq2AMuWwnRSllyg==",
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.3.tgz",
+      "integrity": "sha512-+DOS6x05/nNdnoRmEi3bgQxKym34PeCRGD6dimdw0l7ZgM57qhlaBWo0dXB7QSyR9E44uVT91e4h8ye+/ne1DQ==",
       "requires": {
         "parse5": "^5.0.0",
         "tslib": "^1.7.1"
@@ -449,9 +449,9 @@
       "dev": true
     },
     "@angular/material": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.1.tgz",
-      "integrity": "sha512-45aaxKuLTrthzhAhG2+OY86wafuRBteZcRjDG7rKZ3Cc3KteUp5QwAi+QbhHzs4O3WXLWTAmuLYJelRqRqqw7g==",
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.3.tgz",
+      "integrity": "sha512-qZVWrJ/EO1y0lJCy7pe536RlYiih3p3fQzj7tgus7JdOpspyF+zBLzn8gNrdAFACXpVWwq2kLorieoR3BB47ZQ==",
       "requires": {
         "tslib": "^1.7.1"
       }
diff --git a/package.json b/package.json
index f22045a3dab968e39f244c09f17dbd98e4c9b6d4..bba9abdf294234197ce31c7c4cc95255ac39389e 100644
--- a/package.json
+++ b/package.json
@@ -35,13 +35,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^8.1.2",
-    "@angular/cdk": "^8.1.1",
+    "@angular/cdk": "^8.1.3",
     "@angular/common": "^8.1.2",
     "@angular/compiler": "^8.1.2",
     "@angular/core": "^8.1.2",
     "@angular/flex-layout": "^8.0.0-beta.26",
     "@angular/forms": "^8.1.2",
-    "@angular/material": "^8.1.1",
+    "@angular/material": "^8.1.3",
     "@angular/platform-browser": "^8.1.2",
     "@angular/platform-browser-dynamic": "^8.1.2",
     "@angular/router": "^8.1.2",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e482e6042fc184e924f111040fdd153b376bab4f..b735b02bff351e9a70bf8dd7823f1523b5239d31 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -40,17 +40,21 @@
 
     <!-- calculators list as a tabs bar-->
     <div id="tabs-container" [hidden]="! tabsFitInNavbar">
-      <button mat-raised-button color="primary" *ngFor="let c of calculators" class="" [title]="c.title"
-        [routerLink]="['/calculator/',c.uid]" [color]="c.active ? '' : 'primary'"
-        (click)="setActiveCalc(c.uid)" (mouseup)="onMouseUp($event, c.uid)"
-        [ngClass]="['calculator-button', 'calculator-uid-' + c.uid, c.active ? 'active' : '' ]">
-
-        <span class="calc-name">
-          {{ c.title }}
-        </span>
-        <span class="calc-type" [innerHTML]="'(' + getCalculatorLabel(c.type) + ')'"></span>
-      </button>
-      
+      <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropCalcButton($event)">
+
+        <button mat-raised-button color="primary" *ngFor="let c of calculators" class="" [title]="c.title"
+          [routerLink]="['/calculator/',c.uid]" [color]="c.active ? '' : 'primary'"
+          (click)="setActiveCalc(c.uid)" (mouseup)="onMouseUp($event, c.uid)"
+          [ngClass]="['calculator-button', 'calculator-uid-' + c.uid, c.active ? 'active' : '' ]"
+          cdkDragLockAxis="x" cdkDrag>
+
+          <span class="calc-name">
+            {{ c.title }}
+          </span>
+          <span class="calc-type" [innerHTML]="'(' + getCalculatorLabel(c.type) + ')'"></span>
+        </button>
+
+      </div>
     </div>
 
     <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 41b91040f44dd89337631324000e30c55925a48c..b0dd4500e69ddfec6d41b0fd65d297e527dee56c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { MatIconRegistry } from "@angular/material/icon";
 import { MatSidenav } from "@angular/material/sidenav";
 import { MatToolbar } from "@angular/material/toolbar";
 import { DomSanitizer } from "@angular/platform-browser";
+import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
 
 import { Observer, jalhydDateRev, jalhydVersion, CalculatorType, Session } from "jalhyd";
 
@@ -425,12 +426,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.setActiveCalc(id);
   }
 
-  private toFirstCalc() {
-    if (this.calculators.length > 0) {
-      this.toCalc(this.calculators[0].uid);
-    }
-  }
-
   /**
    * récupération du composant affiché par le routeur
    */
@@ -595,6 +590,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     });
   }
 
+  public dropCalcButton(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.calculators, event.previousIndex, event.currentIndex);
+  }
+
   /**
    * détection de la fermeture de la page/navigateur et demande de confirmation
    */
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9deea03e47a97c50fb718777586c90000cd1a022..e1fb55a8b585cc70faab8dd41fb6521887f4fa76 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,7 +27,9 @@ import {
 } from "@angular/material";
 import { MaterialFileInputModule } from "ngx-material-file-input";
 
-import {TableModule} from "primeng/components/table/table";
+import { DragDropModule } from "@angular/cdk/drag-drop";
+
+import { TableModule } from "primeng/components/table/table";
 import { KonamiModule } from "ngx-konami";
 
 import { FlexLayoutModule } from "@angular/flex-layout";
@@ -118,6 +120,7 @@ const appRoutes: Routes = [
     BrowserAnimationsModule,
     BrowserModule,
     ChartModule,
+    DragDropModule,
     HttpClientModule,
     FlexLayoutModule,
     MatBadgeModule,