diff --git a/README.md b/README.md
index 5205302..0b1ee30 100755
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ After that, import to your project by: `import { magicMouse } from 'magicmouse.j
 
 ## CDN
 If you want to include Magicmouse.js directly to your HTML, you can use this CDN. Include the js file to the bottom of your HTML file (right before the end of body tag):
-````html  
+````html
   <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>
 ````
 ## Initialize
@@ -27,7 +27,7 @@ If you want to include Magicmouse.js directly to your HTML, you can use this CDN
 ````html
 <script type="text/javascript">
     options = {
-	"cursorOuter": "circle-basic",
+	"cursorOuter": "circle",
 	"hoverEffect": "circle-move",
 	"hoverItemMove": false,
 	"defaultCursor": false,
@@ -52,13 +52,13 @@ Sometime you just don't want to use Magicmouse on some specific elements? Then y
 # Configuration list (updating):
 | Variable name | Value |
 |--|--|
-| cursorOuter | Default: "circle-basic", other options : "disable" |
+| cursorOuter | Default: "circle", other options : "disable" |
 | hoverEffect | default: "circle-move", other options : "pointer-blur", "pointer-overlay" |
 
 # License ❤️
-This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc. 
+This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc.
 I'm not requiring you to take a photo or do anything to prove it, just do it and you will feel great about yourself :)
-Let's make the world better place. 
+Let's make the world better place.
 
 # What's next?
 You should have the nice effect for your mouse now, of course you can override the CSS code to make it more elegant and suitable with your website (change color, size,..).
diff --git a/src/index.html b/src/index.html
index b107130..c4cacf1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,7 +55,6 @@
             <select class="form-control form-control-sm" v-model="selectedEffect">
               <option v-for="effect in effectList" :value="effect">{{effect}}</option>
             </select>
-            <button class="btn btn-mm-dark magic-hover magic-hover__square" @click="changeEffect()">Try it</button>
           </div>
 
         </div>
diff --git a/src/js/index.js b/src/js/index.js
index 016dcd8..b1fb17e 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -25,7 +25,7 @@ const app = createApp({
       switch (this.selectedEffect) {
         case "example #1":
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #2":
           this.options.hoverEffect = "pointer-overlay"
@@ -39,13 +39,13 @@ const app = createApp({
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "pointer-blur"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #5":
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           this.options.defaultCursor = true
           break
       }
@@ -68,6 +68,7 @@ const app = createApp({
   watch: {
     selectedEffect() {
       this.setSelectedEffect()
+      this.changeEffect()
     },
   },
 })
diff --git a/src/js/options.js b/src/js/options.js
index 2fdd6d7..f99ba77 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -48,10 +48,10 @@ export default class Options {
         this.defaultOptions = this.generateDefault()
 
         // push user's options to default options one-by-one:
-        for(let key in options) {            
+        for(let key in options) {
             if(this.isValid(key, options[key])) {
                 this.defaultOptions[key] = options[key]
-            }  
+            }
         }
 
         return this.defaultOptions
@@ -66,7 +66,7 @@ export default class Options {
 
         let output = {}
         for(let key of acceptedKey) {
-            output[key] = this.getOptionByKey(key)['default']            
+            output[key] = this.getOptionByKey(key)['default']
         }
 
         return output
@@ -74,11 +74,11 @@ export default class Options {
 
     /**
      * This function is to check if an option is valid or not
-     * @param {String} key 
-     * @param {Any}} value 
+     * @param {String} key
+     * @param {Any}} value
      * @return {Boolean}
      */
-    isValid(key, value) {             
+    isValid(key, value) {
         // check if key is acceptable:
         const acceptedKey = pluck('name', allowedTypes)
 
@@ -86,8 +86,8 @@ export default class Options {
             // throw new Error(`${key} is not a valid option`)
             console.error(`${key} is not a valid option`)
             return false
-        }        
-        
+        }
+
         // check if the type of value is valid:
         const allowedOption = this.getOptionByKey(key)
         let isTypeValid = false
@@ -106,11 +106,11 @@ export default class Options {
                 isTypeValid = false
                 break;
         }
-        
-        if(!isTypeValid)  {            
+
+        if(!isTypeValid)  {
             console.error(`${value} is not a valid value for ${key}`)
         }
-        
+
         return isTypeValid
     }