diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0b820c0f0..c58fca5ab 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -20,16 +20,6 @@ $responsiveWidth: 720px;
   font-family: "Poppins", "Roboto", "Noto", sans-serif;
 }
 
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 a {
   display: inline-flex;
   color: inherit;
@@ -42,7 +32,6 @@ body {
   color: var(--fg-color);
   font-weight: 500;
   line-height: 1.5;
-  animation: fadein 0.2s;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -56,6 +45,10 @@ h3 {
   font-weight: 700;
 }
 
+h3.title {
+  margin: 4px;
+}
+
 header,
 footer {
   display: flex;
@@ -85,9 +78,9 @@ nav {
 
 body.sticky-footer footer {
   position: fixed;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
 }
 
 .logo {
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index 262c718f2..40f9bd1b1 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -12,10 +12,11 @@
         display: inline-block;
         vertical-align: middle;
 
-        padding: 8px 15px;
-        margin: 5px;
+        padding: 8px 16px;
+        margin: 4px;
         background-color: rgba(93, 93, 93, 0.2);
         border-radius: 4px;
+        cursor: pointer;
 
         &.active {
             background-color: rgba(93, 93, 93, 0.3);
@@ -24,10 +25,10 @@
         .preview {
             vertical-align: middle;
             display: inline-block;
-            width: 36px;
-            height: 36px;
+            width: 32px;
+            height: 32px;
             border-radius: 100%;
-            margin-right: 10px;
+            margin-right: 8px;
 
             position: relative;
             .activeTick {
diff --git a/pages/index.vue b/pages/index.vue
index ac4c9a6ea..2cb4ddc04 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-
     <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
@@ -27,7 +26,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'">
       <ul>
         <li>
@@ -74,7 +72,6 @@
         <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
       </div>
     </pw-section>
-
     <pw-section class="green" label="Authentication" collapsed>
       <ul>
         <li>
@@ -103,7 +100,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="orange" label="Headers" collapsed>
       <ol v-for="(header, index) in headers">
         <li>
@@ -132,7 +128,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="cyan" label="Parameters" collapsed>
       <ol v-for="(param, index) in params">
         <li>
@@ -161,7 +156,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="purple" label="Response" id="response" ref="response">
       <ul>
         <li>
@@ -185,7 +179,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="gray" label="History">
       <ul>
         <li>
@@ -199,8 +192,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>
@@ -221,267 +213,273 @@
         </li>
       </ul>
     </pw-section>
-
   </div>
 </template>
-
 <script>
-      const statusCategories = [
-        {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
-        {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
-        {name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'},
-        {name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'},
-        {name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
-      ];
-
-
-      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 findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
-
-      import section from "../components/section";
-
-      export default {
-      components: {
+  const statusCategories = [{
+      name: 'informational',
+      statusCodeRegex: new RegExp(/[1][0-9]+/),
+      className: 'info-response'
+    },
+    {
+      name: 'successful',
+      statusCodeRegex: new RegExp(/[2][0-9]+/),
+      className: 'success-response'
+    },
+    {
+      name: 'redirection',
+      statusCodeRegex: new RegExp(/[3][0-9]+/),
+      className: 'redir-response'
+    },
+    {
+      name: 'client error',
+      statusCodeRegex: new RegExp(/[4][0-9]+/),
+      className: 'cl-error-response'
+    },
+    {
+      name: 'server error',
+      statusCodeRegex: new RegExp(/[5][0-9]+/),
+      className: 'sv-error-response'
+    },
+  ];
+  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 findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+  import section from "../components/section";
+  export default {
+    components: {
       'pw-section': section
     },
-
-      data () {
-          return {
-              method: 'GET',
-              url: 'https://reqres.in',
-              auth: 'None',
-              path: '/api/users',
-              httpUser: '',
-              httpPassword: '',
-              bearerToken: '',
-              headers: [],
-              params: [],
-              bodyParams: [],
-              rawParams: '',
-              rawInput: false,
-              contentType: 'application/json',
-              response: {
-                  status: '',
-                  headers: '',
-                  body: ''
-              },
-              history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : []
-          }
+    data() {
+      return {
+        method: 'GET',
+        url: 'https://reqres.in',
+        auth: 'None',
+        path: '/api/users',
+        httpUser: '',
+        httpPassword: '',
+        bearerToken: '',
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: '',
+        rawInput: false,
+        contentType: 'application/json',
+        response: {
+          status: '',
+          headers: '',
+          body: ''
+        },
+        history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : []
+      }
+    },
+    computed: {
+      statusCategory() {
+        return findStatusGroup(this.response.status);
       },
-      computed: {
-          statusCategory(){
-            return findStatusGroup(this.response.status);
-          },
-          noHistoryToClear() {
-              return this.history.length === 0;
-          },
-          isValidURL() {
-            const protocol = '^(https?:\\/\\/)?';
-
-            const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
-            const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
-
-            return validIP.test(this.url) || validHostname.test(this.url);
-          },
-          rawRequestBody() {
-              const {
-                  bodyParams
-              } = this
-              if (this.contentType === 'application/json') {
-                  try {
-                      const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
+      noHistoryToClear() {
+        return this.history.length === 0;
+      },
+      isValidURL() {
+        const protocol = '^(https?:\\/\\/)?';
+        const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
+        const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
+        return validIP.test(this.url) || validHostname.test(this.url);
+      },
+      rawRequestBody() {
+        const {
+          bodyParams
+        } = this
+        if (this.contentType === 'application/json') {
+          try {
+            const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
               "${key}": "${value}"
               `).join()}}`)
-                      return JSON.stringify(obj)
-                  } catch (ex) {
-                      return 'invalid'
-                  }
-              } else {
-                  return bodyParams
-                      .filter(({
-                                   key
-                               }) => !!key)
-                      .map(({
-                                key,
-                                value
-                            }) => `${key}=${encodeURIComponent(value)}`).join('&')
-              }
-          },
-          headerString() {
-              const result = this.headers
-                  .filter(({
-                               key
-                           }) => !!key)
-                  .map(({
-                            key,
-                            value
-                        }) => `${key}: ${value}`).join(',\n')
-              return result == '' ? '' : `${result}`
-          },
-          queryString() {
-              const result = this.params
-                  .filter(({
-                               key
-                           }) => !!key)
-                  .map(({
-                            key,
-                            value
-                        }) => `${key}=${encodeURIComponent(value)}`).join('&')
-              return result == '' ? '' : `?${result}`
+            return JSON.stringify(obj)
+          } catch (ex) {
+            return 'invalid'
           }
+        } else {
+          return bodyParams
+            .filter(({
+              key
+            }) => !!key)
+            .map(({
+              key,
+              value
+            }) => `${key}=${encodeURIComponent(value)}`).join('&')
+        }
       },
-      methods: {
-          findEntryStatus(entry){
-            return findStatusGroup(entry.status);
-          },
-          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.$refs.response.$el.classList.contains('hidden')) {
-                  this.$refs.response.$el.classList.toggle('hidden')
-              }
-              this.$refs.response.$el.scrollIntoView({
-                  behavior: 'smooth'
-              })
-              this.response.status = 'Fetching...'
-              this.response.body = 'Loading...'
-              const xhr = new XMLHttpRequest()
-              const user = this.auth === 'Basic' ? this.httpUser : null
-              const pswd = this.auth === 'Basic' ? this.httpPassword : null
-              xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
-              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 ((headers['content-type'] || '').startsWith('application/json')) {
-                  this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
-                } else {
-                  this.response.body = xhr.responseText
-                }
-
-                if (!this.isValidURL) {
-                  alert('Please check the formatting of the URL');
-                  return
-                }
-                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: '',
-                  value: ''
-              })
-              return false
-          },
-          removeRequestHeader(index) {
-              this.headers.splice(index, 1)
-          },
-          addRequestParam() {
-              this.params.push({
-                  key: '',
-                  value: ''
-              })
-              return false
-          },
-          removeRequestParam(index) {
-              this.params.splice(index, 1)
-          },
-          addRequestBodyParam() {
-              this.bodyParams.push({
-                  key: '',
-                  value: ''
-              })
-              return false
-          },
-          removeRequestBodyParam(index) {
-              this.bodyParams.splice(index, 1)
-          },
-          formatRawParams(event) {
-            if ((event.which !== 13 && event.which !== 9)) {
-              return;
-            }
-            const textBody = event.target.value;
-            const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
-            const textAfterCursor = textBody.substring(event.target.selectionEnd);
-
-            if (event.which === 13) {
-              event.preventDefault();
-              const oldSelectionStart = event.target.selectionStart;
-              const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
-              const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
-              event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
-              setTimeout(() => event.target.selectionStart = event.target.selectionEnd =  oldSelectionStart + rightPadding.length + 1, 1);
-            }
-            else if (event.which === 9) {
-              event.preventDefault();
-              const oldSelectionStart = event.target.selectionStart;
-              event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
-              event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
-              return false;
-            }
-
-          },
-           copyResponse() {
-            var copyText = document.getElementById("response-details");
-            copyText.select();
-            document.execCommand("copy");
-          }
+      headerString() {
+        const result = this.headers
+          .filter(({
+            key
+          }) => !!key)
+          .map(({
+            key,
+            value
+          }) => `${key}: ${value}`).join(',\n')
+        return result == '' ? '' : `${result}`
+      },
+      queryString() {
+        const result = this.params
+          .filter(({
+            key
+          }) => !!key)
+          .map(({
+            key,
+            value
+          }) => `${key}=${encodeURIComponent(value)}`).join('&')
+        return result == '' ? '' : `?${result}`
       }
+    },
+    methods: {
+      findEntryStatus(entry) {
+        return findStatusGroup(entry.status);
+      },
+      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.$refs.response.$el.classList.contains('hidden')) {
+          this.$refs.response.$el.classList.toggle('hidden')
+        }
+        this.$refs.response.$el.scrollIntoView({
+          behavior: 'smooth'
+        })
+        this.response.status = 'Fetching...'
+        this.response.body = 'Loading...'
+        const xhr = new XMLHttpRequest()
+        const user = this.auth === 'Basic' ? this.httpUser : null
+        const pswd = this.auth === 'Basic' ? this.httpPassword : null
+        xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
+        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 ((headers['content-type'] || '').startsWith('application/json')) {
+            this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
+          } else {
+            this.response.body = xhr.responseText
+          }
+          if (!this.isValidURL) {
+            alert('Please check the formatting of the URL');
+            return
+          }
+          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: '',
+          value: ''
+        })
+        return false
+      },
+      removeRequestHeader(index) {
+        this.headers.splice(index, 1)
+      },
+      addRequestParam() {
+        this.params.push({
+          key: '',
+          value: ''
+        })
+        return false
+      },
+      removeRequestParam(index) {
+        this.params.splice(index, 1)
+      },
+      addRequestBodyParam() {
+        this.bodyParams.push({
+          key: '',
+          value: ''
+        })
+        return false
+      },
+      removeRequestBodyParam(index) {
+        this.bodyParams.splice(index, 1)
+      },
+      formatRawParams(event) {
+        if ((event.which !== 13 && event.which !== 9)) {
+          return;
+        }
+        const textBody = event.target.value;
+        const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
+        const textAfterCursor = textBody.substring(event.target.selectionEnd);
+        if (event.which === 13) {
+          event.preventDefault();
+          const oldSelectionStart = event.target.selectionStart;
+          const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
+          const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
+          event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
+          setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
+        } else if (event.which === 9) {
+          event.preventDefault();
+          const oldSelectionStart = event.target.selectionStart;
+          event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
+          event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
+          return false;
+        }
+      },
+      copyResponse() {
+        var copyText = document.getElementById("response-details");
+        copyText.select();
+        document.execCommand("copy");
+      }
+    }
   }
+
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index bb34e09d5..c5a11311a 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,126 +1,130 @@
 <template>
-    <div class="page">
-
-        <pw-section class="blue" label="Theme">
-            <ul>
-                <li>
-                    <h3>Background</h3>
-                    <div class="backgrounds">
-                        <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
-                            <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
-                        </span>
-                    </div>
-
-                </li>
-            </ul>
-
-            <br><br>
-
-            <ul>
-                <li>
-
-                    <h3>Color</h3>
-                    <div class="colors">
-                        <span v-for="entry in colors" :key="entry.color"
-                              @click.prevent="setActiveColor(entry.color, entry.vibrant)">
-                            <swatch
-                                :color="entry.color"
-                                :name="entry.name"
-                                :class="{ vibrant: entry.vibrant }"
-                                :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
-                        </span>
-                    </div>
-
-                    <p>
-                        <input id="disableFrameColors" type="checkbox"
-                              :checked="!settings.DISABLE_FRAME_COLORS"
-                              @change="toggleSetting('DISABLE_FRAME_COLORS')">
-                        <label for="disableFrameColors">Enable multi-colored frames</label>
-                    </p>
-                </li>
-            </ul>
-        </pw-section>
-
-    </div>
+  <div class="page">
+    <pw-section class="blue" label="Theme">
+      <ul>
+        <li>
+          <h3 class="title">Background</h3>
+          <div class="backgrounds">
+            <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
+              <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
+            </span>
+          </div>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Color</h3>
+          <div class="colors">
+            <span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
+              <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
+            </span>
+          </div>
+          <p>
+            <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+            <label for="disableFrameColors">Enable multi-colored frames</label>
+          </p>
+        </li>
+      </ul>
+    </pw-section>
+  </div>
 </template>
-
 <script>
-    import section from "../components/section";
-    import swatch from "../components/settings/swatch";
-
-    export default {
-        data () {
-            return {
-                // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
-                //        You should copy the existing light theme as a template and then just
-                //        set the relevant values.
-                themes: [
-                    { "color": "#121212", "name": "Dark (Default)", "class": "" },
-                    { "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" }
-                ],
-
-                // You can define a new color here! It will simply store the color value.
-                colors: [
-                    // If the color is vibrant, black is used as the active foreground color.
-                    { "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true },
-                    { "color": "#FFC107", "name":"Yellow", "vibrant": true },
-                    { "color": "#E91E63", "name":"Pink", "vibrant": false },
-                    { "color": "#e74c3c", "name":"Red", "vibrant": false },
-                    { "color": "#9b59b6", "name":"Purple", "vibrant": false },
-                    { "color": "#2980b9", "name":"Blue", "vibrant": false },
-                ],
-                settings: {
-                    THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
-                    THEME_COLOR: '',
-                    THEME_COLOR_VIBRANT: true,
-
-                    DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
-                }
-            }
-        },
-
-        components: {
-            'pw-section': section,
-            'swatch': swatch
-        },
-
-        methods: {
-            applyTheme (name) {
-                this.applySetting('THEME_CLASS', name);
-                document.documentElement.className = name;
-            },
-
-            setActiveColor (color, vibrant) {
-                // By default, the color is vibrant.
-                if(vibrant == null) vibrant = true;
-
-                document.documentElement.style.setProperty('--ac-color', color);
-                document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
-
-                this.applySetting('THEME_COLOR', color.toUpperCase());
-                this.applySetting('THEME_COLOR_VIBRANT', vibrant);
-            },
-
-            getActiveColor () {
-                // This strips extra spaces and # signs from the strings.
-                const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
-
-                return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
-            },
-
-            applySetting (key, value) {
-                this.settings[key] = value;
-                this.$store.commit('postwoman/applySetting', [key, value]);
-            },
-
-            toggleSetting (key) {
-                this.settings[key] = !this.settings[key];
-                this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
-            }
-        },
-
-        beforeMount () {
-            this.settings.THEME_COLOR = this.getActiveColor();
+  import section from "../components/section";
+  import swatch from "../components/settings/swatch";
+  export default {
+    data() {
+      return {
+        // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
+        //        You should copy the existing light theme as a template and then just
+        //        set the relevant values.
+        themes: [{
+            "color": "#121212",
+            "name": "Dark (Default)",
+            "class": ""
+          },
+          {
+            "color": "#DFDFDF",
+            "name": "Light",
+            "vibrant": true,
+            "class": "light"
+          }
+        ],
+        // You can define a new color here! It will simply store the color value.
+        colors: [
+          // If the color is vibrant, black is used as the active foreground color.
+          {
+            "color": "#51ff0d",
+            "name": "Lime (Default)",
+            "vibrant": true
+          },
+          {
+            "color": "#FFC107",
+            "name": "Yellow",
+            "vibrant": true
+          },
+          {
+            "color": "#E91E63",
+            "name": "Pink",
+            "vibrant": false
+          },
+          {
+            "color": "#e74c3c",
+            "name": "Red",
+            "vibrant": false
+          },
+          {
+            "color": "#9b59b6",
+            "name": "Purple",
+            "vibrant": false
+          },
+          {
+            "color": "#2980b9",
+            "name": "Blue",
+            "vibrant": false
+          },
+        ],
+        settings: {
+          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
+          THEME_COLOR: '',
+          THEME_COLOR_VIBRANT: true,
+          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
         }
+      }
+    },
+    components: {
+      'pw-section': section,
+      'swatch': swatch
+    },
+    methods: {
+      applyTheme(name) {
+        this.applySetting('THEME_CLASS', name);
+        document.documentElement.className = name;
+      },
+      setActiveColor(color, vibrant) {
+        // By default, the color is vibrant.
+        if (vibrant == null) vibrant = true;
+        document.documentElement.style.setProperty('--ac-color', color);
+        document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
+        this.applySetting('THEME_COLOR', color.toUpperCase());
+        this.applySetting('THEME_COLOR_VIBRANT', vibrant);
+      },
+      getActiveColor() {
+        // This strips extra spaces and # signs from the strings.
+        const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
+        return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
+      },
+      applySetting(key, value) {
+        this.settings[key] = value;
+        this.$store.commit('postwoman/applySetting', [key, value]);
+      },
+      toggleSetting(key) {
+        this.settings[key] = !this.settings[key];
+        this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
+      }
+    },
+    beforeMount() {
+      this.settings.THEME_COLOR = this.getActiveColor();
     }
-</script>
\ No newline at end of file
+  }
+
+</script>
diff --git a/pages/websocket.vue b/pages/websocket.vue
index cd371346c..d7334b479 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-
     <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
@@ -13,36 +12,31 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="purple" label="Communication" id="response" ref="response">
       <ul>
         <li>
           <label for="log">Log</label>
           <div id="log" name="log" class="log">
-              <span v-if="communication.log">
-                <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
-              </span>
+            <span v-if="communication.log">
+              <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
+            </span>
             <span v-else>(Waiting for connection...)</span>
           </div>
         </li>
       </ul>
-
       <ul>
         <li>
           <label for="message">Message</label>
           <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
         </li>
-
         <li>
           <label>&nbsp;</label>
           <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
         </li>
       </ul>
     </pw-section>
-
   </div>
 </template>
-
 <style lang="scss">
   div.log {
     margin: 4px;
@@ -54,7 +48,8 @@
     height: 256px;
     overflow: auto;
 
-    &, span {
+    &,
+    span {
       font-weight: 700;
       font-size: 18px;
       font-family: monospace;
@@ -65,142 +60,116 @@
       white-space: pre-wrap;
     }
   }
-</style>
 
+</style>
 <script>
   import section from "../components/section";
-
   export default {
-
     components: {
       'pw-section': section
     },
-
-    data () {
+    data() {
       return {
         connectionState: false,
         url: "wss://echo.websocket.org",
         socket: null,
-
         communication: {
           log: null,
           input: ""
         }
       }
     },
-
     computed: {
-      toggleConnectionVerb () {
-          return !this.connectionState ? "Connect" : "Disconnect";
+      toggleConnectionVerb() {
+        return !this.connectionState ? "Connect" : "Disconnect";
       },
-
-      urlValid () {
-          const pattern = new RegExp('^(wss?:\\/\\/)?' +
-              '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
-              '((\\d{1,3}\\.){3}\\d{1,3}))' +
-              '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
-              '(\\?[;&a-z\\d%_.~+=-]*)?' +
-              '(\\#[-a-z\\d_]*)?$', 'i');
-          return pattern.test(this.url);
+      urlValid() {
+        const pattern = new RegExp('^(wss?:\\/\\/)?' +
+          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+          '((\\d{1,3}\\.){3}\\d{1,3}))' +
+          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+          '(\\?[;&a-z\\d%_.~+=-]*)?' +
+          '(\\#[-a-z\\d_]*)?$', 'i');
+        return pattern.test(this.url);
       }
     },
-
     methods: {
-      toggleConnection () {
+      toggleConnection() {
         // If it is connecting:
-        if(!this.connectionState) return this.connect();
-
+        if (!this.connectionState) return this.connect();
         // Otherwise, it's disconnecting.
         else return this.disconnect();
       },
-
-      connect () {
-        this.communication.log = [
-          {
-            payload: `Connecting to ${this.url}...`,
-            source: 'info',
-            color: 'lime'
-          }
-        ];
-
+      connect() {
+        this.communication.log = [{
+          payload: `Connecting to ${this.url}...`,
+          source: 'info',
+          color: 'lime'
+        }];
         try {
-            this.socket = new WebSocket(this.url);
-
-            this.socket.onopen = (event) => {
-                this.connectionState = true;
-
-                this.communication.log = [
-                    {
-                        payload: `Connected to ${this.url}.`,
-                        source: 'info',
-                        color: 'lime'
-                    }
-                ];
-            };
-
-            this.socket.onerror = (event) => {
-                this.handleError();
-            };
-
-            this.socket.onclose = (event) => {
-                this.connectionState = false;
-
-                this.communication.log.push({
-                    payload: `Disconnected from ${this.url}.`,
-                    source: 'info',
-                    color: 'red'
-                });
-            };
-
-            this.socket.onmessage = (event) => {
-                this.communication.log.push({
-                    payload: event.data,
-                    source: 'server'
-                });
-            }
-        }catch(ex){
-            this.handleError(ex);
+          this.socket = new WebSocket(this.url);
+          this.socket.onopen = (event) => {
+            this.connectionState = true;
+            this.communication.log = [{
+              payload: `Connected to ${this.url}.`,
+              source: 'info',
+              color: 'lime'
+            }];
+          };
+          this.socket.onerror = (event) => {
+            this.handleError();
+          };
+          this.socket.onclose = (event) => {
+            this.connectionState = false;
+            this.communication.log.push({
+              payload: `Disconnected from ${this.url}.`,
+              source: 'info',
+              color: 'red'
+            });
+          };
+          this.socket.onmessage = (event) => {
+            this.communication.log.push({
+              payload: event.data,
+              source: 'server'
+            });
+          }
+        } catch (ex) {
+          this.handleError(ex);
         }
       },
-
-      disconnect () {
-        if(this.socket != null) this.socket.close();
+      disconnect() {
+        if (this.socket != null) this.socket.close();
       },
-
-      handleError (error) {
-          this.disconnect();
-          this.connectionState = false;
-
-          this.communication.log.push({
-              payload: `An error has occurred.`,
-              source: 'info',
-              color: 'red'
-          });
-          if(error != null) this.communication.log.push({
-              payload: error,
-              source: 'info',
-              color: 'red'
-          });
+      handleError(error) {
+        this.disconnect();
+        this.connectionState = false;
+        this.communication.log.push({
+          payload: `An error has occurred.`,
+          source: 'info',
+          color: 'red'
+        });
+        if (error != null) this.communication.log.push({
+          payload: error,
+          source: 'info',
+          color: 'red'
+        });
       },
-
-      sendMessage () {
+      sendMessage() {
         const message = this.communication.input;
-
         this.socket.send(message);
         this.communication.log.push({
-            payload: message,
-            source: 'client'
+          payload: message,
+          source: 'client'
         });
-
         this.communication.input = "";
       },
-
-      collapse({target}) {
+      collapse({
+        target
+      }) {
         const el = target.parentNode.className;
         document.getElementsByClassName(el)[0].classList.toggle('hidden');
       },
-
-      getSourcePrefix(source){
+      getSourcePrefix(source) {
         const sourceEmojis = {
           // Source used for info messages.
           'info': 'ℹ️ [INFO]:\t',
@@ -209,11 +178,10 @@
           // Source used for server to client messages.
           'server': '📥 [RECEIVED]:\t'
         };
-
         if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
         return '';
       }
     }
-
   }
+
 </script>