diff --git a/app/classes/web/panel_handler.py b/app/classes/web/panel_handler.py
index 63843ded..c948eca4 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
diff --git a/app/frontend/templates/panel/server_term.html b/app/frontend/templates/panel/server_term.html
index 488e08bb..5c7a2390 100644
--- a/app/frontend/templates/panel/server_term.html
+++ b/app/frontend/templates/panel/server_term.html
@@ -72,13 +72,21 @@
               </div>
               <br />
 
-              <div class="input-group">
-                <input type="text" class="form-control" id="server_command" name="server_command" placeholder="Enter your server command" autofocus="">
+              <div style="gap: 0.5rem;" class="input-group flex-wrap">
+                <input style="min-width: 10rem;" type="text" class="form-control" id="server_command" name="server_command" placeholder="Enter your server command" autofocus="">
                 <span class="input-group-btn ml-5">
                   <input type="hidden" value="" id="last_command"/>
                   <button id="submit" class="btn btn-sm btn-info" type="button">Send Command</button>
                 </span>
               </div>
+
+              <div class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+                <button onclick="send_command(server_id, 'start_server');" id="start-btn" style="max-width: 7rem;" class="btn btn-primary m-1 flex-grow-1">Start</button>
+                <button onclick="send_command(server_id, 'restart_server');" id="restart-btn" style="max-width: 7rem;" class="btn btn-outline-primary m-1 flex-grow-1">Restart</button>
+                <button onclick="send_command(server_id, 'stop_server');" id="stop-btn" style="max-width: 7rem;" class="btn btn-danger m-1 flex-grow-1">Stop</button>
+              </div>
+
+
             </div>
 
         </div>
@@ -96,6 +104,44 @@
 
 {% block js %}
 <script>
+
+    function send_command (server_id, command){
+      <!--  this getCookie function is in base.html-->
+      var token = getCookie("_xsrf");
+
+      $.ajax({
+        type: "POST",
+        headers: {'X-XSRFToken': token},
+        url: '/server/command?command=' + command + '&id=' + server_id,
+        success: function(data){
+          console.log("got response:");
+          console.log(data);
+          setTimeout(function(){ location.reload(); }, 10000);
+
+        }
+      });
+    }
+
+    // Convert running to lower case (example: 'True' converts to 'true') and
+    // then to boolean via JSON.parse()
+    let online = JSON.parse('{{ data['server_stats'][0]['running'] }}'.toLowerCase());
+
+    let startBtn = document.querySelector('#start-btn');
+    let restartBtn = document.querySelector('#restart-btn');
+    let stopBtn = document.querySelector('#stop-btn');
+
+    if (online) {
+      startBtn.setAttribute('disabled', 'disabled');
+      restartBtn.removeAttribute('disabled');
+      stopBtn.removeAttribute('disabled');
+    } else {
+      startBtn.removeAttribute('disabled');
+      restartBtn.setAttribute('disabled', 'disabled');
+      stopBtn.setAttribute('disabled', 'disabled');
+    }
+
+    let server_id = '{{ data['server_stats'][0]['server_id']['server_id'] }}';
+
     function get_server_log(){
       if( !$("#stop_scroll").is(':checked')){
         $.ajax({
diff --git a/app/frontend/templates/public/login.html b/app/frontend/templates/public/login.html
index c5c8ad05..ea151ed2 100755
--- a/app/frontend/templates/public/login.html
+++ b/app/frontend/templates/public/login.html
@@ -26,26 +26,50 @@
           <div class="row w-100">
             <div class="col-lg-4 mx-auto">
 
-              <div class="auto-form-wrapper">
+              <div class="auto-form-wrapper login-modal">
                 <div class="text-center">
-                <img src="/static/assets/images/logo_long.jpg">
-              </div>
+                  <img src="/static/assets/images/logo_long.jpg">
+                </div>
+                <style>
+                  .login-modal {
+                    border-radius: 0.4rem !important;
+                    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2) !important;
+                  }
+                  .login-text-input {
+                    border: none !important;
+                    background-color: hsl(234, 30%, 45%);
+                    color: #ffffff !important;
+                  }
+                  .login-text-input:hover,
+                  .login-text-input:focus {
+                    background-color: hsl(234, 30%, 39%) !important;
+                  }
+                  .login-input {
+                    border-radius: 0.4rem !important;
+                    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2);
+                    transition: all 0.3s ease-in-out;
+                  }
+                  .login-input:hover,
+                  .login-input:focus {
+                    box-shadow: 0 12px 16px 0 hsla(0, 0%, 0%, 0.4);
+                  }
+                </style>
                 <form action="/public/login" method="post">
                   {% raw xsrf_form_html() %}
                   <div class="form-group">
                     <label class="label">Username</label>
                     <div class="input-group">
-                      <input type="text" class="form-control" placeholder="username" name="username" id="username" required="true">
+                      <input type="text" class="form-control login-text-input login-input" placeholder="username" name="username" id="username" required="true">
                     </div>
                   </div>
                   <div class="form-group">
                     <label class="label">Password</label>
                     <div class="input-group">
-                      <input type="password" class="form-control" placeholder="" name="password" id="password" required="true">
+                      <input type="password" class="form-control login-text-input login-input" placeholder="" name="password" id="password" required="true">
                     </div>
                   </div>
                   <div class="form-group">
-                    <button class="btn btn-primary submit-btn btn-block">Login</button>
+                    <button class="login-input btn btn-primary submit-btn btn-block">Login</button>
                   </div>
                   <div class="form-group d-flex justify-content-between">
                     <div class="form-check form-check-flat mt-0">