diff --git a/src-tauri/src/app/mod.rs b/src-tauri/src/app/mod.rs
index 635d91cb..64d41c97 100644
--- a/src-tauri/src/app/mod.rs
+++ b/src-tauri/src/app/mod.rs
@@ -262,7 +262,8 @@ pub fn main() {
       get_dev_data,
       get_app_asset,
       get_devs_apps,
-      get_arch
+      get_arch,
+      set_scale
     ])
     .menu(|handle| Menu::new(handle))
     .build(context)
@@ -343,6 +344,11 @@ pub fn main() {
 
 static mut COMMIT: Option<Commits> = None;
 
+#[tauri::command(async)]
+async fn set_scale(window: tauri::WebviewWindow, scale: f64) {
+  let _ = window.set_zoom(scale);
+}
+
 #[tauri::command(async)]
 async fn set_commit(commit: Commits) {
   unsafe {
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 0dbeaf5c..68d4af3c 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,7 +1,7 @@
 /*
 Native API
 */
-import { useEffect, useState } from "react";
+import { JSX, useEffect, useState } from "react";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 
 const appWindow = getCurrentWebviewWindow();
@@ -55,7 +55,6 @@ function Render(props: AppProps) {
     [autoUpdate, setUpdate] = useState(false),
     [debug, setDebug] = useState(false),
     [apps, setApps] = useState<any>([]),
-    [zoom, setZoom] = useState(localStorage.getItem("zoom") || "100%"),
     app: JSX.Element = <></>;
 
   useEffect(() => {
diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx
index ba0ab3b8..ef138a5a 100644
--- a/src/app/settings/index.tsx
+++ b/src/app/settings/index.tsx
@@ -31,6 +31,7 @@ import { TbZoomInArea } from "react-icons/tb";
 
 import "./styles.css";
 import { SiDaisyui, SiTailwindcss } from "react-icons/si";
+import setScale from "../zoom";
 
 interface InitProps {
   dark: boolean;
@@ -48,9 +49,21 @@ interface InitProps {
 }
 
 const zoom = [
+  "50%",
+  "55%",
+  "60%",
+  "65%",
+  "70%",
+  "75%",
+  "80%",
+  "85%",
+  "90%",
+  "95%",
   "100%",
   "125%",
   "150%",
+  "175%",
+  "200%"
 ];
 
 export default function Init(props: InitProps) {
@@ -163,9 +176,10 @@ export default function Init(props: InitProps) {
           klist="scale"
           list={zoom}
           Icon={TbZoomInArea}
-          initial={props.theme}
+          initial={localStorage.getItem("scale") || "100%"}
           onChange={(e) => {
-            (document.querySelector("html") as HTMLElement).style.zoom = e;
+            localStorage.setItem("scale", e);
+            setScale(e);
           }}
         />
 
diff --git a/src/app/zoom.ts b/src/app/zoom.ts
new file mode 100644
index 00000000..8f3f06bb
--- /dev/null
+++ b/src/app/zoom.ts
@@ -0,0 +1,15 @@
+import { invoke } from "@tauri-apps/api/core";
+
+export default function setScale(scale?: string) {
+  let val = 1.0;
+
+  try {
+    val = eval((scale || "100%").replace("%", "/100"));
+  } catch (_) {
+
+  }
+
+  invoke("set_scale", {
+    scale: val
+  });
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index da7219c1..78e02d69 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -57,6 +57,7 @@ import { TbExternalLink } from "react-icons/tb";
 import { GrUpdate } from "react-icons/gr";
 import { FaGithub } from "react-icons/fa6";
 import { MdLabelImportant } from "react-icons/md";
+import setScale from "./app/zoom";
 
 document.body.setAttribute("native-scrollbar", "0");
 
@@ -117,6 +118,9 @@ if ((window as { __TAURI_INTERNALS__?: string }).__TAURI_INTERNALS__ == null) {
   loadRender(true);
 } else {
   if (appWindow.label == "main") {
+    const scale = localStorage.getItem("scale") || "100%";
+    setScale(scale);
+
     initDeveloperConfiguration();
 
     (async () => {