diff --git a/assets/web/apps.html b/assets/web/apps.html
index 4f49f7da..d1784608 100644
--- a/assets/web/apps.html
+++ b/assets/web/apps.html
@@ -3,62 +3,90 @@
     <h1>Applications</h1>
     <div>Applications are refreshed only when Client is restarted</div>
   </div>
-  <table class="table">
-    <thead>
-      <tr>
-        <th scope="col">Name</th>
-        <th scope="col">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(app,i) in apps" :key="i">
-        <td>{{app.name}}</td>
-        <td><button class="btn btn-primary" @click="editApp(i)">Edit</button>
-        <button class="btn btn-danger" @click="showDeleteForm(i)">Delete</button></td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="edit-form" v-if="showEditForm">
-    <div class="mb-3">
-      <label for="appName" class="form-label">Application Name</label>
-      <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name">
-      <div id="appNameHelp" class="form-text">Application Name, as shown on Moonlight</div>
-    </div>
-    <div class="mb-3">
-      <label for="appName" class="form-label">Output</label>
-      <input type="text" class="form-control" id="appOutput" aria-describedby="appOutputHelp" v-model="editForm.output">
-      <div id="appOutputHelp" class="form-text">The file where the output of the command is stored, if it is not specified, the output is ignored</div>
-    </div>
-    <div class="mb-3">
-      <label for="appName" class="form-label">Command Preparations</label>
-      <div class="form-text">A list of commands to be run before/after the application. <br> If any of the prep-commands fail, starting the application is aborted</div>
-      <table>
-        <thead>
-          <th class="precmd-head">Do</th>
-          <th class="precmd-head">Undo</th>
-          <th></th>
-        </thead>
-        <tbody>
-          <tr v-for="(c,i) in editForm['prep-cmd']">
-            <td><input type="text" class="form-control" v-model="c.do"></td>
-            <td><input type="text" class="form-control" v-model="c.undo"></td>
-            <td><button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">&times;</button></td>
-          </tr>
-        </tbody>
-      </table>
-      <button class="btn btn-success" @click="addPrepCmd">&plus;</button>
-    </div>
-    <div class="mb-3">
-      <label for="appCmd" class="form-label">Command</label>
-      <input type="text" class="form-control" id="appCmd" aria-describedby="appCmdHelp" v-model="editForm.cmd">
-      <div id="appCmdHelp" class="form-text">The main application, if it is not specified, a processs is started that sleeps indefinitely</div>
-    </div>
-    <div class="d-flex">
-      <button @click="showEditForm = false" class="btn btn-secondary m-2">Cancel</button>
-      <button class="btn btn-primary m-2" @click="save">Save</button>
+  <div class="card p-4">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(app,i) in apps" :key="i">
+          <td>{{app.name}}</td>
+          <td><button class="btn btn-primary" @click="editApp(i)">Edit</button>
+            <button class="btn btn-danger" @click="showDeleteForm(i)">Delete</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="edit-form card mt-2" v-if="showEditForm">
+    <div class="p-4">
+      <!--name-->
+      <div class="mb-3">
+        <label for="appName" class="form-label">Application Name</label>
+        <input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name">
+        <div id="appNameHelp" class="form-text">Application Name, as shown on Moonlight</div>
+      </div>
+      <!--output-->
+      <div class="mb-3">
+        <label for="appOutput" class="form-label">Output</label>
+        <input type="text" class="form-control  monospace" id="appOutput" aria-describedby="appOutputHelp"
+          v-model="editForm.output">
+        <div id="appOutputHelp" class="form-text">The file where the output of the command is stored, if it is not
+          specified, the output is ignored</div>
+      </div>
+      <!--prep-cmd-->
+      <div class="mb-3 d-flex flex-column">
+        <label for="appName" class="form-label">Command Preparations</label>
+        <div class="form-text">A list of commands to be run before/after the application. <br> If any of the
+          prep-commands fail, starting the application is aborted</div>
+        <table  v-if="editForm['prep-cmd'].length > 0">
+          <thead>
+            <th class="precmd-head">Do</th>
+            <th class="precmd-head">Undo</th>
+            <th style="width: 48px;"></th>
+          </thead>
+          <tbody>
+            <tr v-for="(c,i) in editForm['prep-cmd']">
+              <td><input type="text" class="form-control monospace" v-model="c.do"></td>
+              <td><input type="text" class="form-control monospace" v-model="c.undo"></td>
+              <td><button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">&times;</button></td>
+            </tr>
+          </tbody>
+        </table>
+        <button class="mt-2 btn btn-success" style="margin: 0 auto;" @click="addPrepCmd">&plus; Add</button>
+      </div>
+      <!--detatched-->
+      <div class="mb-3">
+        <label for="appName" class="form-label">Detached Commands</label>
+        <div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2">
+          <pre>{{c}}</pre>
+          <button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">&times;</button>
+        </div>
+        <div class="d-flex justify-content-between">
+          <input type="text" class="form-control monospace" v-model="detachedCmd">
+          <button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">+</button>
+        </div>
+        <div class="form-text">A list of commands to be run and forgotten about</div>
+      </div>
+      <!--command-->
+      <div class="mb-3">
+        <label for="appCmd" class="form-label">Command</label>
+        <input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp" v-model="editForm.cmd">
+        <div id="appCmdHelp" class="form-text">The main application, if it is not specified, a processs is started that
+          sleeps indefinitely</div>
+      </div>
+      <!--buttons-->
+      <div class="d-flex">
+        <button @click="showEditForm = false" class="btn btn-secondary m-2">Cancel</button>
+        <button class="btn btn-primary m-2" @click="save">Save</button>
+      </div>
     </div>
   </div>
-  <button class="btn btn-primary" v-else @click="newApp">+ Add New</button>
+  <div class="mt-2" v-else >
+    <button class="btn btn-primary" @click="newApp">+ Add New</button>
+  </div>
 </div>
 
 <script>
@@ -69,6 +97,7 @@
         apps: [],
         showEditForm: false,
         editForm: null,
+        detachedCmd: '',
       }
     },
     created() {
@@ -78,7 +107,7 @@
       })
     },
     methods: {
-      newApp(){
+      newApp() {
         this.editForm = {
           name: '',
           output: '',
@@ -89,30 +118,30 @@
         this.editForm.index = -1;
         this.showEditForm = true;
       },
-      editApp(id){
+      editApp(id) {
         this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
-        this.$set(this.editForm,"index",id);
-        if(this.editForm["prep-cmd"] === undefined)this.$set(this.editForm,"prep-cmd",[]);
+        this.$set(this.editForm, "index", id);
+        if (this.editForm["prep-cmd"] === undefined) this.$set(this.editForm, "prep-cmd", []);
+        if (this.editForm["detached"] === undefined) this.$set(this.editForm, "detached", []);
         this.showEditForm = true;
       },
-      showDeleteForm(id){
+      showDeleteForm(id) {
         let resp = confirm("Are you sure to delete " + this.apps[id].name + "?");
-        if(resp){
-          fetch("/api/apps/" + id,{method: "DELETE"}).then((r)=>{
-          if(r.status == 200)document.location.reload();
-        });
+        if (resp) {
+          fetch("/api/apps/" + id, { method: "DELETE" }).then((r) => {
+            if (r.status == 200) document.location.reload();
+          });
         }
       },
-      addPrepCmd(){
+      addPrepCmd() {
         this.editForm['prep-cmd'].push({
           do: '',
           undo: '',
         });
       },
-      save(){
-        console.log("AAAAAAA")
-        fetch("/api/apps",{method: "POST",body: JSON.stringify(this.editForm)}).then((r)=>{
-          if(r.status == 200)document.location.reload();
+      save() {
+        fetch("/api/apps", { method: "POST", body: JSON.stringify(this.editForm) }).then((r) => {
+          if (r.status == 200) document.location.reload();
         });
       }
     }
@@ -123,4 +152,9 @@
   .precmd-head {
     width: 200px;
   }
+
+  .monospace {
+    font-family: monospace;
+  }
+
 </style>
\ No newline at end of file
diff --git a/assets/web/pin.html b/assets/web/pin.html
index d2db2af2..89e5b704 100644
--- a/assets/web/pin.html
+++ b/assets/web/pin.html
@@ -19,10 +19,11 @@
         e.preventDefault();
         let pin = document.querySelector("#pin-input").value;
         document.querySelector("#status").innerHTML = "";
-        fetch("/pin/" + pin).then((response)=>{
-            if(response.status == 200){
+        let b = JSON.stringify({pin: pin});
+        fetch("/api/pin",{method: "POST",body: b}).then((response) => response.json()).then((response)=>{
+            if(response.status){
                 document.querySelector("#status").innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
-            } else if(response.status == 418){
+            } else {
                 document.querySelector("#status").innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
             }
         })
diff --git a/sunshine/confighttp.cpp b/sunshine/confighttp.cpp
index 6546b31d..503a8c2f 100644
--- a/sunshine/confighttp.cpp
+++ b/sunshine/confighttp.cpp
@@ -170,10 +170,12 @@ void saveApp(resp_https_t response, req_https_t request) {
     pt::read_json(SUNSHINE_ASSETS_DIR "/" APPS_JSON, fileTree);
     auto &apps_node = fileTree.get_child("apps"s);
     int index       = inputTree.get<int>("index");
-    BOOST_LOG(info) << inputTree.get_child("prep-cmd").empty();
     if(inputTree.get_child("prep-cmd").empty())
       inputTree.erase("prep-cmd");
     
+    if(inputTree.get_child("detached").empty())
+      inputTree.erase("detached");
+    
     inputTree.erase("index");
     if(index == -1) {
       apps_node.push_back(std::make_pair("", inputTree));
@@ -372,6 +374,34 @@ void savePassword(resp_https_t response, req_https_t request) {
   }
 }
 
+void savePin(resp_https_t response, req_https_t request){
+  if(!authenticate(response, request)) return;
+  
+  std::stringstream ss;
+  ss << request->content.rdbuf();
+  
+  pt::ptree inputTree,outputTree;
+  
+  auto g = util::fail_guard([&]() {
+    std::ostringstream data;
+    pt::write_json(data, outputTree);
+    response->write(data.str());
+  });
+  
+  try {
+    //TODO: Input Validation
+    pt::read_json(ss, inputTree);
+    std::string pin = inputTree.get<std::string>("pin");
+    outputTree.put("status",nvhttp::pin(pin));
+  }
+  catch(std::exception &e) {
+    BOOST_LOG(warning) << e.what();
+    outputTree.put("status", false);
+    outputTree.put("error", e.what());
+    return;
+  }
+}
+
 void start(std::shared_ptr<safe::signal_t> shutdown_event) {
   auto ctx = std::make_shared<boost::asio::ssl::context>(boost::asio::ssl::context::tls);
   ctx->use_certificate_chain_file(config::nvhttp.cert);
@@ -384,7 +414,7 @@ void start(std::shared_ptr<safe::signal_t> shutdown_event) {
   server.resource["^/clients$"]["GET"]              = getClientsPage;
   server.resource["^/config$"]["GET"]               = getConfigPage;
   server.resource["^/password$"]["GET"]             = getPasswordPage;
-  server.resource["^/pin/([0-9]+)$"]["GET"]         = nvhttp::pin<SimpleWeb::HTTPS>;
+  server.resource["^/api/pin"]["POST"]              = savePin;
   server.resource["^/api/apps$"]["GET"]             = getApps;
   server.resource["^/api/apps$"]["POST"]            = saveApp;
   server.resource["^/api/config$"]["GET"]           = getConfig;
diff --git a/sunshine/nvhttp.cpp b/sunshine/nvhttp.cpp
index 1793b060..e438e2f1 100644
--- a/sunshine/nvhttp.cpp
+++ b/sunshine/nvhttp.cpp
@@ -420,6 +420,36 @@ void pair(std::shared_ptr<safe::queue_t<crypto::x509_t>> &add_cert, std::shared_
   response->write(data.str());
 }
 
+bool pin(std::string pin){
+  pt::ptree tree;
+  if(map_id_sess.empty()) {
+    return false;
+  }
+
+  auto &sess = std::begin(map_id_sess)->second;
+  getservercert(sess, tree, pin);
+
+  // response to the request for pin
+  std::ostringstream data;
+  pt::write_xml(data, tree);
+
+  auto &async_response = sess.async_insert_pin.response;
+  if(async_response.has_left() && async_response.left()) {
+    async_response.left()->write(data.str());
+  }
+  else if(async_response.has_right() && async_response.right()) {
+    async_response.right()->write(data.str());
+  }
+  else {
+    return false;
+  }
+
+  // reset async_response
+  async_response = std::decay_t<decltype(async_response.left())>();
+  // response to the current request
+  return true;
+}
+
 template<class T>
 void pin(std::shared_ptr<typename SimpleWeb::ServerBase<T>::Response> response, std::shared_ptr<typename SimpleWeb::ServerBase<T>::Request> request) {
   print_req<T>(request);
@@ -434,38 +464,12 @@ void pin(std::shared_ptr<typename SimpleWeb::ServerBase<T>::Response> response,
     return;
   }
 
-  pt::ptree tree;
-
-  if(map_id_sess.empty()) {
+  bool pinResponse = pin(request->path_match[1]);
+  if(pinResponse){
+    response->write(SimpleWeb::StatusCode::success_ok);
+  } else {
     response->write(SimpleWeb::StatusCode::client_error_im_a_teapot);
-
-    return;
   }
-
-  auto &sess = std::begin(map_id_sess)->second;
-  getservercert(sess, tree, request->path_match[1]);
-
-  // response to the request for pin
-  std::ostringstream data;
-  pt::write_xml(data, tree);
-
-  auto &async_response = sess.async_insert_pin.response;
-  if(async_response.has_left() && async_response.left()) {
-    async_response.left()->write(data.str());
-  }
-  else if(async_response.has_right() && async_response.right()) {
-    async_response.right()->write(data.str());
-  }
-  else {
-    response->write(SimpleWeb::StatusCode::client_error_im_a_teapot);
-
-    return;
-  }
-
-  // reset async_response
-  async_response = std::decay_t<decltype(async_response.left())>();
-  // response to the current request
-  response->write(SimpleWeb::StatusCode::success_ok);
 }
 
 template<class T>
diff --git a/sunshine/nvhttp.h b/sunshine/nvhttp.h
index db995fc8..f6853b60 100644
--- a/sunshine/nvhttp.h
+++ b/sunshine/nvhttp.h
@@ -17,8 +17,7 @@
 
 namespace nvhttp {
 void start(std::shared_ptr<safe::signal_t> shutdown_event);
-template<class T>
-void pin(std::shared_ptr<typename SimpleWeb::ServerBase<T>::Response> response, std::shared_ptr<typename SimpleWeb::ServerBase<T>::Request> request);
+bool pin(std::string pin);
 } // namespace nvhttp
 
 #endif //SUNSHINE_NVHTTP_H