diff --git a/app/classes/web/panel_handler.py b/app/classes/web/panel_handler.py
index d14d6bcc..fcf5c192 100644
--- a/app/classes/web/panel_handler.py
+++ b/app/classes/web/panel_handler.py
@@ -59,6 +59,12 @@ class PanelHandler(BaseHandler):
         elif page == 'contribute':
             template = "panel/contribute.html"
 
+        elif page == 'file_edit':
+            template = "panel/file_edit.html"
+
+        elif page == 'files_menu':
+            template = "panel/files_menu.html"
+
         elif page == "remove_server":
             server_id = self.get_argument('id', None)
             server_data = controller.get_server_data(server_id)
diff --git a/app/frontend/templates/panel/file_edit.html b/app/frontend/templates/panel/file_edit.html
new file mode 100644
index 00000000..d6f40e89
--- /dev/null
+++ b/app/frontend/templates/panel/file_edit.html
@@ -0,0 +1,190 @@
+{% extends ../base.html %}
+
+{% block meta %}
+<!--  <meta http-equiv="refresh" content="60">-->
+{% end %}
+
+{% block title %}Crafty Controller - Editing File -< name >- in server -< server name >- (-< server path id >-){% end %}
+
+{% block content %}
+
+<div class="content-wrapper">
+
+    <!-- Page Title Header Starts-->
+  <div class="row page-title-header">
+    <div class="col-12">
+      <div class="page-header">
+        <h4 class="page-title">
+          Editing File -< name >- in server -< server name >- (-< server path id >-)
+            <br />
+            <small>Path: -< file location relative to server directory >-</small>
+        </h4>
+      </div>
+    </div>
+
+  </div>
+  <!-- Page Title Header Ends-->
+
+  <div class="row">
+
+    <div class="col-sm-12 grid-margin">
+      <div class="card">
+        <div class="card-body">
+          <a href="/" class="btn btn-link btn-outline-primary" style="position: relative;top: -1rem">
+            <i class="fas fa-arrow-left"></i> Back
+          </a>
+
+          <h3 id="file_warn"></h3>
+
+          <div id="editor">-< file_contents >-</div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</div>
+<!-- content-wrapper ends -->
+
+{% end %}
+
+{% block js %}
+
+<script src="/static/assets/vendors/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
+
+<script>
+
+    let editor = ace.edit('editor');
+    editor.setTheme('ace/theme/dracula');
+
+    let extensionChanges = [
+      {
+        regex: /^js$/,
+        replaceWith: 'ace/mode/javascript'
+      },
+      {
+        regex: /^py$/,
+        replaceWith: 'ace/mode/python'
+      },
+      {
+        regex: /^html$/,
+        replaceWith: 'ace/mode/html'
+      },
+      {
+        regex: /^yml$/,
+        replaceWith: 'ace/mode/yaml'
+      },
+      {
+        regex: /^yaml$/,
+        replaceWith: 'ace/mode/yaml'
+      },
+      {
+        regex: /^txt$/,
+        replaceWith: 'ace/mode/text'
+      },
+      {
+        regex: /^json$/,
+        replaceWith: 'ace/mode/json'
+      },
+      {
+        regex: /^java$/,
+        replaceWith: 'ace/mode/java'
+      },
+      {
+        regex: /^cpp$/,
+        replaceWith: 'ace/mode/c_cpp'
+      },
+      {
+        regex: /^css$/,
+        replaceWith: 'ace/mode/css'
+      },
+      {
+        regex: /^scss$/,
+        replaceWith: 'ace/mode/scss'
+      },
+      {
+        regex: /^sass$/,
+        replaceWith: 'ace/mode/sass'
+      },
+      {
+        regex: /^lua$/,
+        replaceWith: 'ace/mode/lua'
+      },
+      {
+        regex: /^php$/,
+        replaceWith: 'ace/mode/php'
+      },
+      {
+        regex: /^ps1$/,
+        replaceWith: 'ace/mode/powershell'
+      },
+      {
+        regex: /^svg$/,
+        replaceWith: 'ace/mode/svg'
+      },
+      {
+        regex: /^sh$/,
+        replaceWith: 'ace/mode/sh'
+      },
+      {
+        regex: /^xml$/,
+        replaceWith: 'ace/mode/xml'
+      },
+      {
+        regex: /^ts$/,
+        replaceWith: 'ace/mode/typescript'
+      }
+    ];
+
+    let fileName = '-< file_name >-.txt';
+
+    if (fileName.match('.')) {
+
+      // The pop method removes and returns the last element.
+      setMode(fileName
+        .split('.')
+        .pop()
+        .replace('ace/mode/', ''));
+
+    } else {
+      setMode('txt');
+      document
+        .querySelector('#file_warn')
+        .innerText = 'Warning: This is not a supported language';
+    }
+
+    function setMode (extension) {
+      // if the extension matches with the RegEx it will return the replaceWith
+      // property. else it will return the one it has. defaults to the extension.
+      // this runs for each element in extensionChanges.
+      let aceMode = extensionChanges.reduce((output, element) => {
+        return extension.match(element.regex)
+          ? element.replaceWith
+          : output;
+      }, extension);
+
+      if (!aceMode.startsWith('ace/mode/')) {
+        document
+          .querySelector('#file_warn')
+          .innerText = 'Warning: This is not a supported language';
+      } else {
+        document
+          .querySelector('#file_warn')
+          .innerText = '';
+
+        console.log(aceMode || 'ace/mode/text');
+        editor.session.setMode(aceMode || 'ace/mode/text');
+      }
+    }
+
+
+
+    function save() {
+      let text = editor.session.getValue();
+      // Use AJAX or something
+      alert(text);
+    }
+
+</script>
+{% end %}
\ No newline at end of file
diff --git a/app/frontend/templates/panel/files_menu.html b/app/frontend/templates/panel/files_menu.html
new file mode 100644
index 00000000..0f883903
--- /dev/null
+++ b/app/frontend/templates/panel/files_menu.html
@@ -0,0 +1,112 @@
+{% extends ../base.html %}
+
+{% block meta %}
+<!--  <meta http-equiv="refresh" content="60">-->
+{% end %}
+
+{% block title %}Crafty Controller - Looking at files in server -< server name >- (-< server path id >-){% end %}
+
+{% block content %}
+
+<div class="content-wrapper">
+
+    <!-- Page Title Header Starts-->
+  <div class="row page-title-header">
+    <div class="col-12">
+      <div class="page-header">
+        <h4 class="page-title">
+          Looking at files in server -< server name >- (-< server path id >-)
+          <br />
+          <small>Path: -< location relative to server directory >-</small>
+        </h4>
+      </div>
+    </div>
+
+  </div>
+  <!-- Page Title Header Ends-->
+
+  <div class="row">
+
+    <div class="col-sm-12 grid-margin">
+      <div class="card">
+        <div class="card-body">
+
+          <ul class="files-list list-group">
+            <li class="list-group-item d-flex justify-content-between align-items-center"
+                style="background-color: var(--dark) !important;">
+              <a href="/panel/file_edit?path=-< file location relative to server directory >-" class="text-white">-< name >-</a>
+              <span>
+                <a href="/panel/file_edit?path=-< file location relative to server directory >-" class="mx-1 btn btn-dark">Edit</a>
+                <button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
+                <button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
+                <span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
+                  <span class="badge badge-primary badge-pill">File</span>
+                </span>
+              </span>
+            </li>
+            <li class="list-group-item d-flex justify-content-between align-items-center"
+                style="background-color: var(--dark) !important;">
+              <a href="/panel/files_menu?path=-< location relative to server directory >-" class="text-white">-< name >-</a>
+              <span>
+                <a href="/panel/files_menu?path=-< location relative to server directory >-" class="mx-1 btn btn-dark">Open</a>
+                <button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
+                <button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
+                <span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
+                  <span class="badge badge-primary badge-pill">Folder</span>
+                </span>
+              </span>
+            </li>
+
+            <!--
+
+            File:
+            <li class="list-group-item d-flex justify-content-between align-items-center"
+                style="background-color: var(--dark) !important;">
+              <a href="/panel/file_edit?path=-< file location relative to server directory >-" class="text-white">-< name >-</a>
+              <span>
+                <a href="/panel/file_edit?path=-< file location relative to server directory >-" class="mx-1 btn btn-dark">Edit</a>
+                <button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
+                <button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
+                <span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
+                  <span class="badge badge-primary badge-pill">File</span>
+                </span>
+              </span>
+            </li>
+
+            Folder:
+            <li class="list-group-item d-flex justify-content-between align-items-center"
+                style="background-color: var(--dark) !important;">
+              <a href="/panel/files_menu?path=-< location relative to server directory >-" class="text-white">-< name >-</a>
+              <span>
+                <a href="/panel/files_menu?path=-< location relative to server directory >-" class="mx-1 btn btn-dark">Open</a>
+                <button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
+                <button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
+                <span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
+                  <span class="badge badge-primary badge-pill">Folder</span>
+                </span>
+              </span>
+            </li>
+
+            -->
+          </ul>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</div>
+<!-- content-wrapper ends -->
+
+{% end %}
+
+{% block js %}
+
+<script>
+
+    // empty for now
+
+</script>
+
+{% end %}
\ No newline at end of file