diff --git a/demo/assets/logo.png b/demo/assets/logo.png
deleted file mode 100644
index f3d2503f..00000000
Binary files a/demo/assets/logo.png and /dev/null differ
diff --git a/demo/main.js b/demo/main.js
deleted file mode 100644
index 902f34f8..00000000
--- a/demo/main.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue'
-import App from './App'
-import TreeView from "vue-json-tree-view"
-Vue.config.productionTip = false
-Vue.use(TreeView)
-new Vue({
-  // NOTE: if you need to inject as option, you can set here!
-  // plugin,
-  render: h => h(App)
-}).$mount('#app')
diff --git a/demo/App.vue b/docs/.vuepress/components/Demo.vue
similarity index 63%
rename from demo/App.vue
rename to docs/.vuepress/components/Demo.vue
index 041d75cc..04b08bbd 100644
--- a/demo/App.vue
+++ b/docs/.vuepress/components/Demo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="bg-gray-100 min-h-screen px-20 py-8">
+  <div id="app" class="min-h-screen py-8">
     <div class="flex mb-3 w-full items-end">
       <div class="flex-1">
         <label>Monitor Code</label>
@@ -32,53 +32,61 @@
 </template>
 
 <script>
-import EventsSdk from '../src/index'
-export default {
-  name: 'app',
-  data() {
-    return {
-      events: [],
-      monitorCode: 'FWsqFkPDsJuuh54YU0VLCvTu5EIrplkrUFVQ7yMiXh7U52hfiNOYanNINtekWBb6X06C3LQR7jfgCCWGAbKKCdBJAeQFIWO3DCCl',
-      error: ''
-    }
-  },
-  methods: {
-    async login() {
-      this.events = []
-      this.error = ''
-      try {
-        let sdk = new EventsSdk({
-          token: this.monitorCode
-        })
-        await sdk.login()
-        sdk.on('*', data => {
-          this.events.unshift({
-            timestamp: new Date(),
-            ...data
-          })
-        })
-      } catch (e) {
-        this.error = e
+  import Vue from 'vue';
+  import EventsSdk from '../../../src';
+  import TreeView from 'vue-json-tree-view';
+
+  Vue.use(TreeView);
+  export default {
+    name: 'app',
+    data() {
+      return {
+        events: [],
+        monitorCode: 'FWsqFkPDsJuuh54YU0VLCvTu5EIrplkrUFVQ7yMiXh7U52hfiNOYanNINtekWBb6X06C3LQR7jfgCCWGAbKKCdBJAeQFIWO3DCCl',
+        error: ''
+      };
+    },
+    methods: {
+      async login() {
+        this.events = [];
+        this.error = '';
+        try {
+          let sdk = new EventsSdk({
+            token: this.monitorCode
+          });
+          await sdk.login();
+          sdk.on('*', data => {
+            this.events.unshift({
+              timestamp: new Date(),
+              ...data
+            });
+          });
+        } catch (e) {
+          this.error = e;
+        }
       }
+    },
+    async mounted() {
+      this.login();
     }
-  },
-  async mounted() {
-    this.login()
-  }
-};
+  };
 </script>
 
 <style>
   .list-enter-active, .list-leave-active {
     transition: all .4s;
   }
+
   .list-leave-active {
     position: absolute;
   }
-  .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+
+  .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */
+  {
     opacity: 0;
     transform: translateX(-20px);
   }
+
   .list-move {
     transition: transform .3s;
   }
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index dacfb646..d44974d1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -9,6 +9,9 @@ module.exports = {
       description: 'VoicenterEventsSdk for Vue.js'
     }
   },
+  head: [
+    ['link', { rel: 'stylesheet', href: 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'}]
+  ],
   themeConfig: {
     repo: '/voicenter/VoicecenterEventsSDK',
     docsDir: 'docs',
@@ -24,6 +27,7 @@ module.exports = {
         sidebar: [
           '/installation.md',
           '/started.md',
+          '/demo.md'
         ]
       }
     }
diff --git a/docs/demo.md b/docs/demo.md
new file mode 100644
index 00000000..81cb31d9
--- /dev/null
+++ b/docs/demo.md
@@ -0,0 +1,3 @@
+# Demo
+
+<Demo></Demo>
diff --git a/package.json b/package.json
index bff6eb34..6d397ca7 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,17 @@
   "name": "voicenter-events-sdk",
   "version": "0.1.0",
   "scripts": {
-    "serve": "vue-cli-service serve ./demo/main.js",
-    "build": "vue-cli-service build --target lib --name voicenter-events-sdk src/index.js",
-    "build:demo": "vue-cli-service build ./demo/main.js",
+    "serve": "npm run docs",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "docs": "npm run docs:serve",
-    "docs:build": "vue-cli-service docs --mode build",
-    "docs:serve": "vue-cli-service docs --mode serve",
+    "docs": "vue-cli-service docs --mode serve",
+    "build:docs": "vue-cli-service docs --mode build",
     "prepublish": "vue-cli-service lint && vue-cli-service docs --mode build && vue-cli-service build",
-    "start": "vue-cli-service serve"
+    "start": "npm run docs"
   },
   "dependencies": {
-    "core-js": "^2.6.5"
+    "core-js": "^2.6.5",
+    "socket.io-client": "1.3.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
@@ -22,12 +21,14 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "socket.io-client": "1.3.6",
     "vue": "^2.6.10",
     "vue-cli-plugin-p11n": "^0.3.0",
     "vue-json-tree-view": "^2.1.4",
     "vue-template-compiler": "^2.6.10"
   },
+  "peerDependencies": {
+    "socket.io-client": "1.3.6"
+  },
   "files": [
     "dist/voicenter-events-sdk.common.js",
     "dist/voicenter-events-sdk.umd.min.js",
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb..00000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index cf07246f..00000000
--- a/public/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>voicenter-sdk</title>
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but voicenter-sdk doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/src/sdk.js b/src/sdk.js
index f75299ad..40bd5b47 100644
--- a/src/sdk.js
+++ b/src/sdk.js
@@ -1,4 +1,4 @@
-import io from 'socket.io-client'
+import io from 'socket.io-client/socket.io'
 import eventTypes from './eventTypes'
 const defaultOptions = {
   url: 'https://monitor5.voicenter.co.il/',
diff --git a/vue.config.js b/vue.config.js
index bae0e1f9..dad87598 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,13 +1,4 @@
-let externals = {
-  'socket.io-client': {
-    commonjs: 'socket.io-client',
-    commonjs2: 'socket.io-client',
-    root: 'io'
-  }
-}
-let isProd = process.env.NODE_ENV === 'production'
 module.exports = {
   configureWebpack:  {
-    externals: isProd ? externals : {}
   }
 }