diff --git a/pages/index.vue b/pages/index.vue
index 6bac5bc23..997c1b178 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,10 +6,12 @@
           <label for="method">Method</label>
           <select id="method" v-model="method">
             <option>GET</option>
+            <option>HEAD</option>
             <option>POST</option>
             <option>PUT</option>
             <option>DELETE</option>
             <option>OPTIONS</option>
+            <option>PATCH</option>
           </select>
         </li>
         <li>
@@ -26,7 +28,7 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'">
+    <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
       <ul>
         <li>
           <label>Content Type</label>
@@ -199,8 +201,7 @@
           </li>
           <li class="method-list-item">
             <label for="method">Method</label>
-            <input name="method" type="text" readonly
-                   :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
+            <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
             <span class="entry-status-code">{{entry.status}}</span>
           </li>
           <li>
@@ -212,11 +213,11 @@
             <input name="path" type="text" readonly :value="entry.path">
           </li>
           <li>
-            <label for="delete"class="hide-on-small-screen">&nbsp;</label>
+            <label for="delete" class="hide-on-small-screen">&nbsp;</label>
             <button name="delete" @click="deleteHistory(entry)">Delete</button>
           </li>
           <li>
-            <label for="use"class="hide-on-small-screen">&nbsp;</label>
+            <label for="use" class="hide-on-small-screen">&nbsp;</label>
             <button name="use" @click="useHistory(entry)">Use</button>
           </li>
         </ul>
@@ -229,30 +230,30 @@
   import section from "../components/section";
 
   const statusCategories = [{
-    name: 'informational',
+      name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
       className: 'info-response'
     },
     {
-    name: 'successful',
+      name: 'successful',
       statusCodeRegex: new RegExp(/[2][0-9]+/),
       className: 'success-response'
     },
     {
-    name: 'redirection',
+      name: 'redirection',
       statusCodeRegex: new RegExp(/[3][0-9]+/),
       className: 'redir-response'
     },
     {
-    name: 'client error',
+      name: 'client error',
       statusCodeRegex: new RegExp(/[4][0-9]+/),
       className: 'cl-error-response'
     },
     {
-    name: 'server error',
+      name: 'server error',
       statusCodeRegex: new RegExp(/[5][0-9]+/),
       className: 'sv-error-response'
-  },
+    },
     {
       // this object is a catch-all for when no other objects match and should always be last
       name: 'unknown',
@@ -261,33 +262,34 @@
     }
   ];
   const parseHeaders = xhr => {
-      const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
-      const headerMap = {};
-      headers.forEach(line => {
-          const parts = line.split(': ');
-          const header = parts.shift().toLowerCase();
-          const value = parts.join(': ');
-          headerMap[header] = value
-      });
-      return headerMap
+    const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
+    const headerMap = {};
+    headers.forEach(line => {
+      const parts = line.split(': ');
+      const header = parts.shift().toLowerCase();
+      const value = parts.join(': ');
+      headerMap[header] = value
+    });
+    return headerMap
 
   };
   const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
   export default {
-      components: {
+    components: {
       'pw-section': section,
       VirtualList
     },
-      data () {
-          return {
-              method: 'GET',
-              url: 'https://reqres.in',
-              auth: 'None',
-              path: '/api/users',
-              httpUser: '',
-              httpPassword: '',
-              bearerToken: '',headers: [],
+    data() {
+      return {
+        method: 'GET',
+        url: 'https://reqres.in',
+        auth: 'None',
+        path: '/api/users',
+        httpUser: '',
+        httpPassword: '',
+        bearerToken: '',
+        headers: [],
         params: [],
         bodyParams: [],
         rawParams: '',
@@ -368,84 +370,87 @@
     methods: {
       findEntryStatus(entry) {
         let foundStatusGroup = findStatusGroup(entry.status);
-            return foundStatusGroup || {className: ''};
-          },
-          deleteHistory(entry) {
-              this.history.splice(this.history.indexOf(entry), 1)
-              window.localStorage.setItem('history', JSON.stringify(this.history))
-          },
-          clearHistory() {
-              this.history = []
-              window.localStorage.setItem('history', JSON.stringify(this.history))
-          },
-          useHistory({
-                         method,
-                         url,
-                         path
-                     }) {
-              this.method = method
-              this.url = url
-              this.path = path
-              this.$refs.request.$el.scrollIntoView({
-                  behavior: 'smooth'
-              })
-          },
-          sendRequest() {
+        return foundStatusGroup || {
+          className: ''
+        };
+      },
+      deleteHistory(entry) {
+        this.history.splice(this.history.indexOf(entry), 1)
+        window.localStorage.setItem('history', JSON.stringify(this.history))
+      },
+      clearHistory() {
+        this.history = []
+        window.localStorage.setItem('history', JSON.stringify(this.history))
+      },
+      useHistory({
+        method,
+        url,
+        path
+      }) {
+        this.method = method
+        this.url = url
+        this.path = path
+        this.$refs.request.$el.scrollIntoView({
+          behavior: 'smooth'
+        })
+      },
+      sendRequest() {
         if (!this.isValidURL) {
           alert('Please check the formatting of the URL');
           return
-        }    if (this.$refs.response.$el.classList.contains('hidden')) {
-              this.$refs.response.$el.classList.toggle('hidden')
-            }
-            this.$refs.response.$el.scrollIntoView({
-              behavior: 'smooth'
-            });
+        }
+        if (this.$refs.response.$el.classList.contains('hidden')) {
+          this.$refs.response.$el.classList.toggle('hidden')
+        }
+        this.$refs.response.$el.scrollIntoView({
+          behavior: 'smooth'
+        });
         this.previewEnabled = false;
-            this.response.status = 'Fetching...';
-            this.response.body = 'Loading...';
-            const xhr = new XMLHttpRequest();
-            const user = this.auth === 'Basic' ? this.httpUser : null;
-            const password = this.auth === 'Basic' ? this.httpPassword : null;
-            xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
-            if (this.auth === 'Bearer Token')
-              xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken
-            );
-            if (this.headers) {
+        this.response.status = 'Fetching...';
+        this.response.body = 'Loading...';
+        const xhr = new XMLHttpRequest();
+        const user = this.auth === 'Basic' ? this.httpUser : null;
+        const password = this.auth === 'Basic' ? this.httpPassword : null;
+        xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
+        if (this.auth === 'Bearer Token')
+          xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
+        if (this.headers) {
           this.headers.forEach(function(element) {
             xhr.setRequestHeader(element.key, element.value)
           })
         }
-        if (this.method === 'POST' || this.method === 'PUT') {
-              const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
-              xhr.setRequestHeader('Content-Length', requestBody.length);
-              xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
-              xhr.send(requestBody);
-            } else {
-              xhr.send();
-            }
-            xhr.onload = e => {
-              this.response.status = xhr.status;
-              const headers = this.response.headers = parseHeaders(xhr);
+        if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
+          const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
+          xhr.setRequestHeader('Content-Length', requestBody.length);
+          xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
+          xhr.send(requestBody);
+        } else {
+          xhr.send();
+        }
+        xhr.onload = e => {
+          this.response.status = xhr.status;
+          const headers = this.response.headers = parseHeaders(xhr);
           this.response.body = xhr.responseText;
-              if ((headers['content-type'] || '').startsWith('application/json')) {
-                this.response.body = JSON.stringify(JSON.parse(
-                this.response.body ), null, 2);
-              }
-              const n = new Date().toLocaleTimeString();
-              this.history = [{
-                status: xhr.status,
-                time: n,
-                method: this.method,
-                url: this.url,
-                path: this.path
-              }, ...this.history];
-              window.localStorage.setItem('history', JSON.stringify(this.history));
-            };
-            xhr.onerror = e => {
-              this.response.status = xhr.status;
-              this.response.body = xhr.statusText;
+          if (this.method != 'HEAD') {
+            if ((headers['content-type'] || '').startsWith('application/json')) {
+              this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
             }
-          },
+          }
+          const n = new Date().toLocaleTimeString();
+          this.history = [{
+            status: xhr.status,
+            time: n,
+            method: this.method,
+            url: this.url,
+            path: this.path
+          }, ...this.history];
+          window.localStorage.setItem('history', JSON.stringify(this.history));
+        };
+        xhr.onerror = e => {
+          this.response.status = xhr.status;
+          this.response.body = xhr.statusText;
+        }
+      },
       addRequestHeader() {
         this.headers.push({
           key: '',