diff --git a/scripts/build-vue-comp.ps1 b/scripts/build-vue-comp.ps1
index 78ba315..82a8990 100644
--- a/scripts/build-vue-comp.ps1
+++ b/scripts/build-vue-comp.ps1
@@ -14,3 +14,4 @@ $CLI_PATH="node_modules/.bin"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name response-viewer  "$COMPONENTS_FOLDER/ResponseViewer.vue"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name import-dialog  "$COMPONENTS_FOLDER/ImportDialog.vue"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name export-dialog  "$COMPONENTS_FOLDER/ExportDialog.vue"
+& "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name response-panel  "$COMPONENTS_FOLDER/ResponsePanel.vue"
diff --git a/scripts/build-vue-comp.sh b/scripts/build-vue-comp.sh
index 7e8b070..aee96f0 100755
--- a/scripts/build-vue-comp.sh
+++ b/scripts/build-vue-comp.sh
@@ -14,4 +14,5 @@ ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDE
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-menu  ${COMPONENTS_FOLDER}/ResponseMenu.vue
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-viewer  ${COMPONENTS_FOLDER}/ResponseViewer.vue
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name import-dialog  ${COMPONENTS_FOLDER}/ImportDialog.vue
-${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name export-dialog  ${COMPONENTS_FOLDER}/ExportDialog.vue
\ No newline at end of file
+${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name export-dialog  ${COMPONENTS_FOLDER}/ExportDialog.vue
+${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-panel  ${COMPONENTS_FOLDER}/ResponsePanel.vue
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index bd7fd2f..71e6cb2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -330,7 +330,7 @@ <h4>❤️&nbsp;Support the project</h4>
               </div>
             </div>
           </div>
-          <response-panel></response-panel>
+          <div id="v-response-panel"></div>
         </div>
       </div>
 
diff --git a/src/js/app.js b/src/js/app.js
index 81a95d8..2666987 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -57,6 +57,7 @@ requirejs(
     'component/bookmarks/bookmarkVm',
     'vuecomp/dialogs-app.umd',
     'vuecomp/add-folder-button.umd',
+    'vuecomp/response-panel.umd',
   ],
   function (
     $,
@@ -75,7 +76,8 @@ requirejs(
     EntryItemVm,
     BookmarkVm,
     DialogsApp,
-    AddFolderButton
+    AddFolderButton,
+    ResponsePanel
   ) {
     function AppVm() {
       const contexts = ko.observableArray()
@@ -1004,13 +1006,6 @@ requirejs(
         },
       })
 
-      ko.components.register('response-panel', {
-        viewModel: { require: 'app/components/response/responseVm' },
-        template: {
-          require: 'text!app/components/response/response_view.html',
-        },
-      })
-
       // Show all options, more restricted setup than the Knockout regular binding.
       var options = {
         attribute: 'data-bind', // default "data-sbind"
@@ -1045,6 +1040,16 @@ requirejs(
         },
       })
 
+      const responsePanelVueApp = new Vue({
+        el: '#v-response-panel',
+        components: {
+          ResponsePanel,
+        },
+        render: function (h) {
+          return h('response-panel')
+        },
+      })
+
       // add the first tab
       appVM.newTab()
 
diff --git a/src/js/app/components/ResponsePanel.vue b/src/js/app/components/ResponsePanel.vue
new file mode 100644
index 0000000..3c027a2
--- /dev/null
+++ b/src/js/app/components/ResponsePanel.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <p class="text-center">
+            <span class="response-metric">Status:</span>
+            <span
+              class="response-metric-value"> {{callStatus}} </span>
+            <span class="response-metric">Time:</span>
+            <span
+              class="response-metric-value"> {{callDuration}} </span>
+            <span class="response-metric">Size:</span>
+            <span
+              class="response-metric-value"> {{callSize}} </span>
+          </p>
+        </div>
+
+        <div class="panel-body row">
+          <div class="col-md-12">
+            <response-menu></response-menu>
+            <div class="alert alert-success" :class="{'hide': isHidden}" role="alert">
+              <p>Response copied successfully!</p>
+            </div>
+            <div v-if="showBody">
+            <response-viewer v-if="useFormattedBody"></response-viewer>
+            <pre
+              class="pre-scrollable"
+              v-if="useRawBody">
+              <code id="highlighted-response">{{content}}</code>
+            </pre>
+            </div>
+            <div v-if="showHeaders">
+              <table class="table table-striped">
+                <tbody v-for="header in headers" :key="header.name">
+                  <tr>
+                    <td>
+                      <strong>{{header.name}}</strong>
+                    </td>
+                    <td>{{header.value}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ResponseMenu from './ResponseMenu.vue'
+import ResponseViewer from './ResponseViewer.vue'
+import bacheca from 'Services/bacheca'
+
+export default {
+  name: 'ResponsePanel',
+  mounted() {
+    bacheca.subscribe('responseReady', this.display)
+    bacheca.subscribe('reset', this.clear)
+    bacheca.subscribe('loadBookmark', this.clear)
+    bacheca.subscribe('deleteBookmark', this.clear)
+    bacheca.subscribe('copyResponse', this.copyResponse)
+    bacheca.subscribe('showResponseBody', this.showResponseBody),
+    bacheca.subscribe('showResponseHeaders', this.showResponseHeaders),
+    bacheca.subscribe('formattedBody', this.formattedBody)
+    bacheca.subscribe('rawBody', this.rawBody)
+  },
+  data(){
+    return {
+      callStatus: '-',
+      callDuration: '-',
+      callSize: '-',
+      headers: [],
+      content: '',
+      responseBody: '', // to improve
+      showHeaders: false,
+      showBody: true,
+      useFormattedBody: true,
+      useRawBody: false,
+      isHidden: true,
+    }
+  },
+  methods: {
+    headersPanel() {
+      this.showHeaders = true
+      this.showBody = false
+    },
+    showResponseBody() {
+      this.showBody = true
+      this.showHeaders = false
+    },
+    showResponseHeaders() {
+      this.showBody = false
+      this.showHeaders = true
+    },
+    bodyPanel() {
+      this.showBody = true
+      this.showHeaders = false
+    },
+    prepareBodyForView() {
+      if (this.responseBody.length === 0 && !Array.isArray(this.responseBody)) {
+        // do nothing
+      } else if (this.useFormattedBody) {
+        this.content = JSON.stringify(this.responseBody, null, 2) // used only for clipboard formatted body
+        bacheca.publish('response', this.content)
+      } else {
+        this.content = JSON.stringify(this.responseBody)
+      }
+    },
+    formattedBody() {
+      this.useFormattedBody = true
+      this.useRawBody = false
+      this.prepareBodyForView()
+    },
+    rawBody() {
+      this.useFormattedBody = false
+      this.useRawBody = true
+      this.prepareBodyForView()
+    },
+    clear() {
+      this.headers.splice(0, this.headers.length)
+      this.content = ''
+      bacheca.publish('response', '')
+      this.callDuration = '-'
+      this.allStatus = '-'
+      this.callSize = '-'
+    },
+    display(response) {
+      this.clear()
+      setTimeout(() => {
+        this.callDuration = `${response.duration}ms`
+        this.callStatus = response.status
+        this.callSize = `${response.size.toFixed(2)}KB`
+        this.headers = response.headers
+        this.responseBody = response.content
+        this.prepareBodyForView()
+      }, 500)
+    },
+    copyResponse() {
+      const responseContent = this.content
+      navigator.clipboard
+        .writeText(responseContent)
+        .then(() => {
+          this.isHidden = false
+          setTimeout(() => {
+            this.isHidden = true
+          }, 2000)
+        })
+        .catch(() => console.log('Error copying to clipboard'))
+    }
+  },
+  components: {
+    ResponseMenu, ResponseViewer
+  }
+}
+</script>
diff --git a/src/js/app/components/response/responseVm.js b/src/js/app/components/response/responseVm.js
deleted file mode 100644
index 55e21cc..0000000
--- a/src/js/app/components/response/responseVm.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
-    Copyright (C) 2017-present Mirko Perillo and contributors
-    
-    This file is part of Resting.
-
-    Resting is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    Resting is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with Resting.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-define([
-  'knockout',
-  'jquery',
-  'app/bacheca',
-  'Vue',
-  'vuecomp/response-menu.umd',
-  'vuecomp/response-viewer.umd',
-], function (ko, $, bacheca, Vue, ResponseMenu, ResponseViewer) {
-  return function ResponseVm(params) {
-    const callDuration = ko.observable('-')
-    const callStatus = ko.observable('-')
-    const callSize = ko.observable('-')
-    const headers = ko.observableArray()
-    const content = ko.observable('')
-
-    const showHeaders = ko.observable(false)
-    const showBody = ko.observable(true)
-    const useFormattedBody = ko.observable(true)
-    const useRawBody = ko.observable(false)
-    let responseBody = ''
-
-    const headersPanel = () => {
-      showHeaders(true)
-      showBody(false)
-    }
-
-    const bodyPanel = () => {
-      showBody(true)
-      showHeaders(false)
-    }
-
-    const formattedBody = () => {
-      useFormattedBody(true)
-      useRawBody(false)
-      prepareBodyForView()
-    }
-
-    const rawBody = () => {
-      useFormattedBody(false)
-      useRawBody(true)
-      prepareBodyForView()
-    }
-
-    const display = (response) => {
-      clear()
-      setTimeout(function () {
-        callDuration(`${response.duration}ms`)
-        callStatus(response.status)
-        callSize(`${response.size.toFixed(2)}KB`)
-        response.headers.forEach((header) => headers.push(header))
-        responseBody = response.content
-        prepareBodyForView()
-      }, 500)
-    }
-
-    const prepareBodyForView = () => {
-      let view = ''
-      if (responseBody.length === 0 && !Array.isArray(responseBody)) {
-        // do nothing
-      } else if (useFormattedBody()) {
-        view = JSON.stringify(responseBody, null, 2)
-        bacheca.publish('response', view)
-      } else {
-        view = JSON.stringify(responseBody)
-      }
-      content(view)
-    }
-
-    const clear = () => {
-      headers.removeAll()
-      content('')
-      bacheca.publish('response', '')
-      callDuration('-')
-      callStatus('-')
-      callSize('-')
-    }
-
-    const copyResponse = () => {
-      responseContent = content()
-      navigator.clipboard
-        .writeText(responseContent)
-        .then(() => {
-          $('.alert').removeClass('hide')
-          setTimeout(function () {
-            $('.alert').addClass('hide')
-          }, 2000)
-        })
-        .catch(() => console.log('Error copying to clipboard'))
-    }
-
-    bacheca.subscribe('responseReady', display)
-    bacheca.subscribe('reset', clear)
-    bacheca.subscribe('loadBookmark', clear)
-    bacheca.subscribe('deleteBookmark', clear)
-    bacheca.subscribe('copyResponse', copyResponse)
-    bacheca.subscribe('showResponseBody', () => {
-      showBody(true)
-      showHeaders(false)
-    })
-    bacheca.subscribe('showResponseHeaders', () => {
-      showBody(false)
-      showHeaders(true)
-    })
-    bacheca.subscribe('formattedBody', formattedBody)
-    bacheca.subscribe('rawBody', rawBody)
-
-    new Vue({
-      el: '#v-response-b-group',
-      components: {
-        ResponseMenu,
-      },
-      render: function (h) {
-        return h('response-menu')
-      },
-    })
-
-    new Vue({
-      el: '#v-response-viewer',
-      components: {
-        ResponseViewer,
-      },
-      render: function (h) {
-        return h('response-viewer')
-      },
-    })
-
-    return {
-      headersPanel,
-      bodyPanel,
-      rawBody,
-      formattedBody,
-      showHeaders,
-      showBody,
-      useFormattedBody,
-      useRawBody,
-
-      // response fields
-      content,
-      callDuration,
-      callStatus,
-      callSize,
-      headers,
-    }
-  }
-})
diff --git a/src/js/app/components/response/response_view.html b/src/js/app/components/response/response_view.html
deleted file mode 100644
index 8fa54b5..0000000
--- a/src/js/app/components/response/response_view.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
-
-    Copyright (C) 2017-present Mirko Perillo and contributors
-    
-    This file is part of Resting.
-
-    Resting is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    Resting is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with Resting.  If not, see <http://www.gnu.org/licenses/>.
-
--->
-
-<html>
-  <div class="row">
-    <div class="col-md-12">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <p class="text-center">
-            <span class="response-metric">Status:</span>
-            <span
-              class="response-metric-value"
-              data-bind="text: callStatus"></span>
-            <span class="response-metric">Time:</span>
-            <span
-              class="response-metric-value"
-              data-bind="text: callDuration"></span>
-            <span class="response-metric">Size:</span>
-            <span
-              class="response-metric-value"
-              data-bind="text: callSize"></span>
-          </p>
-        </div>
-
-        <div class="panel-body row">
-          <div class="col-md-12">
-            <div id="v-response-b-group"></div>
-            <div class="alert alert-success hide" role="alert">
-              <p>Response copied successfully!</p>
-            </div>
-            <div data-bind="visible: showBody && useFormattedBody">
-              <div id="v-response-viewer"></div>
-            </div>
-            <pre
-              class="pre-scrollable"
-              data-bind="visible: showBody && useRawBody">
-              <code id="highlighted-response" data-bind="text: content"></code>
-            </pre>
-            <div data-bind="visible: showHeaders">
-              <table class="table table-striped">
-                <tbody data-bind="foreach: headers">
-                  <tr>
-                    <td>
-                      <strong><span data-bind="text: name"></span></strong>
-                    </td>
-                    <td data-bind="text: value"></td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</html>