diff --git a/mods/view-scale/app.css b/mods/view-scale/app.css
index 6a56e5d..737368d 100644
--- a/mods/view-scale/app.css
+++ b/mods/view-scale/app.css
@@ -1,43 +1,28 @@
 /*
  * view-scale
- * (c) 2020 SP12893678 (https://github.com/SP12893678)
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 SP12893678
  * under the MIT license
  */
 
- .bottom-right-buttons {
-    position: absolute;
-    bottom: 33px;
-    right: 33px;
-    z-index: 101;
-    cursor: default;
-    pointer-events: none;
+.notion-topbar-actions{
     display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-  
-  .bottom-right-buttons > div {
-    margin-top: 8px;
-    pointer-events: auto;
-    user-select: none;
-    position: static !important;
-    width: 40px;
-    border-radius: 100%;
-    font-size: 20px;
-    box-shadow: rgba(50, 50, 50, 0.05) 0px 0px 0px 1px, rgba(50, 50, 50, 0.05) 0px 2px 4px;
+    align-items: center !important;
+    justify-content: center;
+    
 }
 
 .notion-scale-contaienr{
     border: 1px solid rgba(200, 200, 200, 0.5);
     border-radius: 8px !important;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    margin: 0px 2px;
 }
 
 .notion-scale-contaienr div{
-    margin: 4px 0px;
+    margin: 2px 2px;
     cursor: pointer;
 }
 
diff --git a/mods/view-scale/mod.js b/mods/view-scale/mod.js
index b7f70d4..aed223d 100644
--- a/mods/view-scale/mod.js
+++ b/mods/view-scale/mod.js
@@ -22,6 +22,18 @@ module.exports = {
       type: 'toggle',
       value: true,
     },
+    {
+        key: 'canMouseWheel',
+        label: 'use mouse wheel to scale',
+        type: 'toggle',
+        value: true,
+    },
+    {
+        key: 'canHotkey',
+        label: 'use keyboard hotkey to scale',
+        type: 'toggle',
+        value: true,
+    },
     {
       key: 'offset',
       label: 'set scale plus and minus offset',
@@ -43,6 +55,7 @@ module.exports = {
             const attempt_interval = setInterval(enhance, 500);
             function enhance() {
                 if (!document.querySelector('.notion-frame')) return;
+                if (!document.querySelector('.notion-topbar-actions')) return;
                 clearInterval(attempt_interval);
 
                 electron.webFrame.setZoomFactor(store().zoom / 100) 
@@ -51,9 +64,7 @@ module.exports = {
                 let minZoom = 0.5
                 let maxZoom = 2
 
-                const $container = document.createElement('div');
-                const $helpButton = document.querySelector('.notion-help-button');
-
+                const $topBarActionShareMenu = document.querySelector('.notion-topbar-share-menu');
                 const $scaleSet = createElement('<div class="notion-scale-contaienr"></div>');
                 const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
                 const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
@@ -73,26 +84,47 @@ module.exports = {
                     $scaleSet.append($scaleView)
                     $scaleSet.append($scaleMinusButton)
                     
-                    $container.className = 'bottom-right-buttons';
-                    $helpButton.after($container);
-                    $container.append($scaleSet);
-                    $container.append($helpButton);
+                    $topBarActionShareMenu.before($scaleSet);
 
                     changeScaleViewUIValue()
                 }
+                if(store().canMouseWheel){
+                    document.defaultView.addEventListener('wheel', (event)=>{
+                        if (event.ctrlKey && event.deltaY < 0){
+                            zoomPlus()
+                            if(store().showUI) changeScaleViewUIValue()
+                        }
+    
+                        if (event.ctrlKey && event.deltaY > 0){
+                            zoomMinus()
+                            if(store().showUI) changeScaleViewUIValue()
+                        }
+                    });
+                }
+
+                if(store().canHotkey){
+                    document.defaultView.addEventListener('keydown', (event) => {
+                        if (event.key == '+' && event.ctrlKey){
+                            zoomPlus()
+                            if(store().showUI) changeScaleViewUIValue()
+                        }
+                            
+                        if (event.key == '-' && event.ctrlKey){
+                            zoomMinus()
+                            if(store().showUI) changeScaleViewUIValue()
+                        }
+                    })
+                }
+                
+                const observer = new MutationObserver((list, observer) => {
+                    electron.webFrame.setZoomFactor(zoom)
+                    if(store().showUI) changeScaleViewUIValue()
+                });
+
+                observer.observe(document.querySelector('.notion-frame'), {
+                    childList: true
+                });
 
-                document.defaultView.addEventListener('keydown', (event) => {
-                    if (event.key == '+' && event.ctrlKey){
-                        zoomPlus()
-                        if(store().showUI) changeScaleViewUIValue()
-                    }
-                        
-                    if (event.key == '-' && event.ctrlKey){
-                        zoomMinus()
-                        if(store().showUI) changeScaleViewUIValue()
-                    }
-                })
-        
                 function zoomPlus() {
                     if(zoom + offset > maxZoom) return
                     zoom += offset