diff --git a/src/filemanager.html b/src/filemanager.html
index c16ae0628..edb8e1a5f 100644
--- a/src/filemanager.html
+++ b/src/filemanager.html
@@ -66,24 +66,6 @@
 
   <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
-  <!-- Modal text editor -->
-  <div class="modal fade" id="textEditorModal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" style="width: 90%; max-width: 1280px;">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h4 class="modal-title">
-            Edit <b>{{ textEditor.entry.fileName }}</b>
-            <button type="button" class="btn btn-success pull-right" ng-click="textEditor.submit()" ng-disabled="textEditor.busy"><i class="fa fa-circle-notch fa-spin" ng-show="textEditor.busy"></i> Save</button>
-            <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
-          </h4>
-        </div>
-        <div class="modal-body" style="padding-top: 0;">
-          <div id="textEditorContainer" style="width: 100%; height: 600px; border: 0px solid black"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <!-- Modal image/video viewer -->
   <div class="modal fade" id="mediaViewerModal" tabindex="-1" role="dialog">
     <div class="modal-dialog" style="width: calc(100% - 60px); max-width: 1280px; height: 800px; max-height: calc(100% - 60px);">
@@ -215,7 +197,7 @@
   </div>
 
   <div class="main-container animateMe ng-hide layout-root" ng-show="initialized">
-    <div class="layout-content container">
+    <div ng-show="view === 'fileTree'" class="layout-content container">
       <div class="row" ng-hide="app">
         <div class="col-md-12 text-center">
           <h3>App not found</h3>
@@ -277,11 +259,24 @@
       </div>
     </div>
 
+    <div ng-show="view === 'textEditor'" class="text-editor">
+      <div>
+        <div class="toolbar">
+          <button type="button" class="btn btn-success" ng-click="textEditor.saveAndClose()" ng-disabled="textEditor.busy">Save and Close</button>
+          <button type="button" class="btn btn-primary" ng-click="textEditor.save()" ng-disabled="textEditor.busy">Save</button>
+          <div><span><i class="fa fa-circle-notch fa-spin" ng-show="textEditor.busy"></i> {{ textEditor.entry.fileName }}</span></div>
+          <button type="button" class="btn btn-primary" ng-click="textEditor.close()">Close</button>
+        </div>
+      </div>
+      <div id="textEditorContainer" style="flex-grow: 2; border: 0px solid black"></div>
+    </div>
+
     <footer class="text-center ng-cloak">
       <span class="text-muted" ng-bind-html="status.footer | markdown2html"></span>
       <span class="version">v{{status.version}}</span>
     </footer>
   </div>
 
+
 </body>
 </html>
diff --git a/src/js/filemanager.js b/src/js/filemanager.js
index 9d1afe404..bd76c5f5d 100644
--- a/src/js/filemanager.js
+++ b/src/js/filemanager.js
@@ -73,6 +73,7 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
     $scope.dropToBody = false;
     $scope.sortAsc = true;
     $scope.sortProperty = 'fileName';
+    $scope.view = 'fileTree';
 
     $scope.owners = [
         { name: 'cloudron', value: 1000 },
@@ -443,7 +444,8 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
             // clear model if any
             if ($scope.textEditor.editor && $scope.textEditor.editor.getModel()) $scope.textEditor.editor.setModel(null);
 
-            $('#textEditorModal').modal('show');
+            $scope.view = 'textEditor';
+            // document.getElementById('textEditorModal').style['display'] = 'flex';
 
             var filePath = sanitize($scope.cwd + '/' + entry.fileName);
             var language = getLanguage(entry.fileName);
@@ -465,7 +467,7 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
             });
         },
 
-        submit: function () {
+        save: function (callback) {
             $scope.textEditor.busy = true;
 
             var newContent = $scope.textEditor.editor.getValue();
@@ -477,8 +479,18 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
 
                 if (error) return Client.error(error);
 
-                $('#textEditorModal').modal('hide');
+                if (callback) callback();
             });
+        },
+
+        saveAndClose: function () {
+            $scope.textEditor.save(function () {
+                $scope.textEditor.close();
+            });
+        },
+
+        close: function () {
+            $scope.view = 'fileTree';
         }
     };
 
diff --git a/src/theme.scss b/src/theme.scss
index c6651967c..737f77292 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1637,7 +1637,6 @@ tag-input {
     }
 }
 
-
 // ----------------------------
 // Terminal
 // ----------------------------
@@ -1685,12 +1684,39 @@ tag-input {
 }
 
 
+
 // ----------------------------
-// FileManager
+// File Manager
 // ----------------------------
 
 .filemanager {
 
+    .text-editor {
+        display: flex;
+        padding: 10px;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+
+        .toolbar {
+            width: 100%;
+            display: flex;
+            margin-bottom: 5px;
+            justify-content: space-between;
+
+            :not(:last-child) {
+                margin-right: 5px;
+            }
+
+            div {
+                flex-grow: 2;
+                margin: auto;
+                text-align: center;
+            }
+        }
+    }
+
     // those are for drag'n'drop
     .file-list {
         overflow: auto;