diff --git a/mods/view-scale/app.css b/mods/view-scale/app.css
index 737368d..12fcbc9 100644
--- a/mods/view-scale/app.css
+++ b/mods/view-scale/app.css
@@ -12,17 +12,17 @@
     
 }
 
-.notion-scale-contaienr{
+.notion-scale-container{
     border: 1px solid rgba(200, 200, 200, 0.5);
-    border-radius: 8px !important;
+    border-radius: 9999px !important;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 0px 2px;
+    margin: 0px 4px;
 }
 
-.notion-scale-contaienr div{
-    margin: 2px 2px;
+.notion-scale-container div{
+    margin: 2px 0px;
     cursor: pointer;
 }
 
@@ -37,8 +37,52 @@
     justify-content: center;
     font-size: 16px;
     font-weight: bold;
-    width: 30px;
-    height: 30px;
-    border-radius: 8px;
+    width: 28px;
+    height: 28px;
+    border-radius: 9999px;
+    transition: .5s;
+}
+
+.notion-scale-button:hover{
     background: var(--theme--interactive_hover);
+}
+
+.notion-scale-slider{
+    margin-left: 8px;
+    margin-right: 4px;
+}
+
+.notion-scale-slider[type="range"]{
+    -webkit-appearance: none;
+    outline: 0;
+	border: 0px;
+    overflow:hidden;    
+    width:150px;
+    height:20px;
+    cursor: ew-resize;
+    border-radius: 9999px; 
+}
+
+.notion-scale-slider[type="range"]::-webkit-slider-runnable-track {
+    height:20px;
+    -webkit-appearance: none;
+    background-color: #ddd;
+}
+
+.notion-scale-slider[type="range"]::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    position: relative;   
+    width:20px;
+    height:20px;
+    border-radius: 9999px;
+    border: 0px;
+    background: #1597ff;
+    box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 20px #1597ff;
+    filter: drop-shadow(0px 0px 2px rgba(87, 50, 50, 0.3));
+    transition:.2s;     
+}
+
+.notion-scale-slider[type=range]:active::-webkit-slider-thumb {
+    background: #fff;
+    box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 2px #1597ff;
 }
\ No newline at end of file
diff --git a/mods/view-scale/mod.js b/mods/view-scale/mod.js
index ee122f9..88c0f78 100644
--- a/mods/view-scale/mod.js
+++ b/mods/view-scale/mod.js
@@ -87,21 +87,28 @@ module.exports = {
                 let maxZoom = 2
 
                 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 $scaleSet = createElement('<div class="notion-scale-container"></div>');
+                const $scaleSilder = createElement('<input class="notion-scale-slider" type="range" min="50" max="200" value="100"></input>');
                 const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
+                const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
                 const $scaleMinusButton = createElement('<div class="notion-scale-button">－</div>');
 
+
                 if(store().show_ui){
+                    $scaleSilder.addEventListener('input',()=>{
+                        zoom = $scaleSilder.value/100
+                        changeScaleViewUIValue()
+                    })
+                    $scaleSilder.addEventListener('change',()=> electron.webFrame.setZoomFactor(zoom))
                     $scalePlusButton.addEventListener('click',()=> zoomPlus())
                     $scaleMinusButton.addEventListener('click',()=> zoomMinus())
     
-                    $scaleSet.append($scalePlusButton)
+                    $scaleSet.append($scaleSilder)
                     $scaleSet.append($scaleView)
+                    $scaleSet.append($scalePlusButton)
                     $scaleSet.append($scaleMinusButton)
                     
                     $topBarActionShareMenu.before($scaleSet);
-
                     changeScaleViewUIValue()
                 }