diff --git a/package-lock.json b/package-lock.json
old mode 100644
new mode 100755
index 8079d85..3bd3ba6
--- a/package-lock.json
+++ b/package-lock.json
@@ -5062,6 +5062,12 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "email-addresses": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.0.3.tgz",
+      "integrity": "sha512-kUlSC06PVvvjlMRpNIl3kR1NRXLEe86VQ7N0bQeaCZb2g+InShCeHQp/JvyYNTugMnRN2NvJhHlc3q12MWbbpg==",
+      "dev": true
+    },
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -6290,6 +6296,33 @@
       "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
       "dev": true
     },
+    "filename-reserved-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
+      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
+      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^1.0.0",
+        "strip-outer": "^1.0.0",
+        "trim-repeated": "^1.0.0"
+      }
+    },
+    "filenamify-url": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
+      "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
+      "dev": true,
+      "requires": {
+        "filenamify": "^1.0.0",
+        "humanize-url": "^1.0.0"
+      }
+    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
@@ -7131,6 +7164,43 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "gh-pages": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-2.0.1.tgz",
+      "integrity": "sha512-uFlk3bukljeiWKQ2XvPfjcSi/ou7IfoDf2p+Fj672saLAr8bnOdFVqI/JSgrSgInKpCg5BksxEwGUl++dbg8Dg==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify-url": "^1.0.0",
+        "fs-extra": "^7.0.0",
+        "globby": "^6.1.0",
+        "graceful-fs": "^4.1.11",
+        "rimraf": "^2.6.2"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
     "glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -7707,6 +7777,55 @@
         }
       }
     },
+    "humanize-url": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
+      "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
+      "dev": true,
+      "requires": {
+        "normalize-url": "^1.0.0",
+        "strip-url-auth": "^1.0.0"
+      },
+      "dependencies": {
+        "normalize-url": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.0.1",
+            "prepend-http": "^1.0.0",
+            "query-string": "^4.1.0",
+            "sort-keys": "^1.0.0"
+          }
+        },
+        "prepend-http": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+          "dev": true
+        },
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "sort-keys": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+          "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+          "dev": true,
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13516,6 +13635,21 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
+    "strip-url-auth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
+      "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=",
+      "dev": true
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -14073,6 +14207,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index ecf7c14..68043e4
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint --no-fix",
     "test": "npm run lint && vue-cli-service test:unit",
     "coverage": "npm test && codecov",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "gh-pages": "vue-cli-service build && gh-pages -d dist"
   },
   "license": "MIT",
   "author": "Chameleon Team <chameleon@nsoft.com>",
@@ -36,6 +37,7 @@
     "codecov": "^3.5.0",
     "eslint-plugin-jest": "^22.6.4",
     "eslint-plugin-vue": "^5.2.2",
+    "gh-pages": "^2.0.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.10",
diff --git a/src/App.vue b/src/App.vue
old mode 100644
new mode 100755
index ba79e15..7669581
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,18 @@
 <template>
   <v-app id="app">
-    <VColorPickerInput v-model="color"
-                       return-type="value"
-                       @change="showColor">
-    </VColorPickerInput>
+    <v-content>
+      <v-container>
+        <h1>vuetify-colorizer</h1>
+        <p>
+          This is an example of the vuetify-colorizer:
+        </p>
+        <br>
+        <VColorPickerInput v-model="color"
+                           return-type="value"
+                           @change="showColor">
+        </VColorPickerInput>
+      </v-container>
+    </v-content>
   </v-app>
 </template>
 
@@ -35,9 +44,9 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  #app {
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 </style>
diff --git a/src/components/VColorPickerInput.vue b/src/components/VColorPickerInput.vue
old mode 100644
new mode 100755
index 5c0de14..85f6876
--- a/src/components/VColorPickerInput.vue
+++ b/src/components/VColorPickerInput.vue
@@ -162,6 +162,7 @@ export default {
 
 <style lang="stylus">
 .colorizer-picker-input {
+  position: relative;
   .v-input__append-inner {
     margin-top: 0px !important;
     position: relative;
diff --git a/vue.config.js b/vue.config.js
old mode 100644
new mode 100755
index 0bf9e90..17a8f78
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,4 +14,8 @@ module.exports = {
     },
     plugins,
   },
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/vuetify-colorizer' // prod
+    : '/', // dev
+
 };