diff --git a/routes/api.js b/routes/api.js
index 978b269..476e03c 100644
--- a/routes/api.js
+++ b/routes/api.js
@@ -123,6 +123,20 @@ router.post('/deleteFileMongo', function(req, res, next) {
     });
 });
 
+/* DELETE FILE */
+router.post('/deleteUserMongo', function(req, res, next) {
+    console.log(JSON.stringify(req.body));
+    User.remove({_id : req.body._id, name: req.body.name}, function (err, post) {
+        if (err){
+
+            return next(err);
+        }
+
+        res.json(post);
+
+    });
+});
+
 /* DELETE FOLDER */
 router.post('/deleteFolderMongo', function(req, res, next) {
     FolderMongo.remove({_id : req.body._id, name: req.body.name, owner: req.body.owner}, function (err, post) {
diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
index 0c7df3a..221f71c 100644
--- a/src/app/book/book.component.html
+++ b/src/app/book/book.component.html
@@ -172,7 +172,7 @@
                                 </button>
                                 <h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
                             </div>
-                            <div class="modal-body img-fluid text-center">
+                            <div class="modal-body img-fluid text-center" style="display: flex; align-items: center; justify-content: center;">
                                 <div *ngIf="file.type === ('image/jpeg')">
                                     <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
                                 </div>
diff --git a/src/app/book/book.component.ts b/src/app/book/book.component.ts
index 7dcbb8c..7d9218c 100644
--- a/src/app/book/book.component.ts
+++ b/src/app/book/book.component.ts
@@ -193,6 +193,12 @@ export class BookComponent implements OnInit, OnDestroy {
         });
     }
 
+    deleteUserMongo() {
+        this.http.post('/api/deleteUserMongo', this.currentUser).subscribe(user => {
+            console.log('User is delete');
+        });
+    }
+
     deleteFolder(folderToDelete) {
         this.http.post('/api/deleteFolderMongo', folderToDelete).subscribe(folder => {
             this.openFolder(this.mainFolder.path);
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 77a63e5..5a0318d 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -92,8 +92,14 @@
         <li class="nav-item">
           <a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block"> {{currentUser.username}} </span></a>
         </li>
-        <li class="nav-item" (click)="logout()">
-          <a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-sign-out mr-1"></i> <span class="clearfix d-none d-sm-inline-block">Log out</span></a>
+        <li class="nav-item dropdown" dropdown>
+          <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
+            Profil<span class="caret"></span></a>
+          <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
+            <a class="nav-link waves-light" mdbWavesEffect (click)="logout()"><i class="fa fa-sign-out mr-1"></i><span class="clearfix d-none d-sm-inline-block">Log out</span></a>
+            <div class="divider dropdown-divider"></div>
+            <a class="dropdown-item waves-light" mdbWavesEffect (click)="deleteUserMongo()">Unsubscribe</a>
+          </div>
         </li>
       </ul>
     </navlinks>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index f9ebe1a..aad9149 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -52,6 +52,12 @@ export class MainComponent implements OnInit {
 
   }
 
+    deleteUserMongo() {
+        this.http.post('/api/deleteUserMongo', this.currentUser).subscribe(user => {
+            console.log('User is delete');
+            this.logout();
+        });
+    }
 
     getItems(path) {
       var test = [];