diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100644
new mode 100755
diff --git a/.husky/pre-push b/.husky/pre-push
old mode 100644
new mode 100755
diff --git a/src/components/library/dropzone/Dropzone.tsx b/src/components/library/dropzone/Dropzone.tsx
index d45c0bf..b34e44e 100644
--- a/src/components/library/dropzone/Dropzone.tsx
+++ b/src/components/library/dropzone/Dropzone.tsx
@@ -1,27 +1,14 @@
 import type { ReactElement } from "react";
 import { DocumentArrowUpIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
-import { useDropzone } from "react-dropzone";
+import { useDropzone } from "./UseDropzone";
 
 export interface DropzoneProps {
   onDrop: (acceptedFiles: File[]) => void;
 }
 
 export function Dropzone({ onDrop }: DropzoneProps): ReactElement {
-  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
-    onDrop,
-    multiple: false,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
-    },
-  });
-
-  function getBackgroundClass(): string {
-    if (isDragAccept) return "bg-success dark:text-black";
-    if (isDragReject) return "bg-error dark:text-black";
-    if (isDragActive) return "bg-base-300";
-    return "bg-base-200";
-  }
+  const { getRootProps, getInputProps, getBackgroundClass } = useDropzone(onDrop);
 
   return (
     <div className="m-2 flex w-full max-w-screen-sm items-center justify-center md:min-w-96">
diff --git a/src/components/library/dropzone/UseDropzone.ts b/src/components/library/dropzone/UseDropzone.ts
new file mode 100644
index 0000000..663ec04
--- /dev/null
+++ b/src/components/library/dropzone/UseDropzone.ts
@@ -0,0 +1,34 @@
+import { useDropzone as useReactDropzone } from "react-dropzone";
+
+export function useDropzone(onDrop: (acceptedFiles: File[]) => void): {
+  getRootProps: (props?: Record<string, unknown>) => Record<string, unknown>;
+  getInputProps: (props?: Record<string, unknown>) => Record<string, unknown>;
+  isDragActive: boolean;
+  isDragAccept: boolean;
+  isDragReject: boolean;
+  getBackgroundClass: () => string;
+} {
+  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useReactDropzone({
+    onDrop,
+    multiple: false,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
+    },
+  });
+
+  function getBackgroundClass(): string {
+    if (isDragAccept) return "bg-success dark:text-black";
+    if (isDragReject) return "bg-error dark:text-black";
+    if (isDragActive) return "bg-base-300";
+    return "bg-base-200";
+  }
+
+  return {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    getBackgroundClass,
+  };
+}
diff --git a/src/components/library/editor/toolbar/ToolbarTools.tsx b/src/components/library/editor/toolbar/ToolbarTools.tsx
index 44103e8..e07df1e 100644
--- a/src/components/library/editor/toolbar/ToolbarTools.tsx
+++ b/src/components/library/editor/toolbar/ToolbarTools.tsx
@@ -18,7 +18,7 @@ export function ToolbarTools(): ReactElement {
   return (
     <div className="absolute max-md:bottom-0 max-md:left-0 md:top-0 z-10 mr-2 flex w-full justify-center p-4 md:mr-0">
       <div className="glass gap-1 md:gap-2 navbar h-10 min-h-0 w-auto rounded-box border border-neutral bg-base-300 bg-opacity-80 shadow-xl md:h-12 dark:bg-opacity-80 dark:bg-none">
-        <div className="tooltip tooltip-bottom" data-tip={lock ? undefined : "Lock image to center"}>
+        <div className="md:tooltip md:tooltip-bottom" data-tip={lock ? undefined : "Lock image to center"}>
           <button className={clsx("btn btn-square btn-ghost swap btn-sm", lock && "btn-active")} onClick={swapLock}>
             <input type="checkbox" checked={lock} onChange={swapLock} />
             <LockClosedIcon className="swap-on h-6 w-6" />
@@ -26,29 +26,29 @@ export function ToolbarTools(): ReactElement {
           </button>
         </div>
         <div className="divider divider-horizontal w-0 mx-0" />
-        <div className="tooltip tooltip-bottom mt-1" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
+        <div className="md:tooltip md:tooltip-bottom mt-1" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
           <button className="btn btn-square btn-ghost swap btn-sm" onClick={adjustZoom}>
             {showFitScreen ? <FullscreenIcon /> : <FitViewIcon />}
           </button>
         </div>
         <div className="divider divider-horizontal w-0 mx-0" />
         <div className="flex gap-1">
-          <div className="tooltip tooltip-bottom mt-1" data-tip="Rotate 90° left">
+          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° left">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-left")}>
               <RotateCcwIcon />
             </button>
           </div>
-          <div className="tooltip tooltip-bottom mt-1" data-tip="Rotate 90° right">
+          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° right">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-right")}>
               <RotateCwIcon />
             </button>
           </div>
-          <div className="tooltip tooltip-bottom mt-1" data-tip="Flip vertical">
+          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip vertical">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-vertical")}>
               <FlipVerticalIcon />
             </button>
           </div>
-          <div className="tooltip tooltip-bottom mt-1" data-tip="Flip horizontal">
+          <div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip horizontal">
             <button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-horizontal")}>
               <FlipHorizontalIcon />
             </button>
diff --git a/src/components/library/editor/toolbar/ToolbarZoom.tsx b/src/components/library/editor/toolbar/ToolbarZoom.tsx
index b9b9aa8..cebcd0d 100644
--- a/src/components/library/editor/toolbar/ToolbarZoom.tsx
+++ b/src/components/library/editor/toolbar/ToolbarZoom.tsx
@@ -7,16 +7,16 @@ export function ToolbarZoom(): ReactElement {
 
   return (
     <div className="absolute max-md:top-0 max-md:right-0 md:bottom-0 md:left-0 z-10 flex justify-center p-4">
-      <div className="glass navbar h-10 min-h-0 w-auto gap-4 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl md:h-12 dark:bg-neutral dark:bg-opacity-80 dark:bg-none">
-        <button className="btn btn-square btn-ghost btn-sm" onClick={zoomIn}>
+      <div className="glass navbar h-10 min-h-0 w-auto gap-1 md:gap-4 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl md:h-12 dark:bg-neutral dark:bg-opacity-80 dark:bg-none">
+        <button className="btn btn-square btn-ghost btn-xs md:btn-sm" onClick={zoomIn}>
           <PlusIcon />
         </button>
-        <div className="tooltip tooltip-top" data-tip="Reset zoom">
-          <button className="w-10" onClick={resetZoom}>
-            <h6>{zoom}%</h6>
+        <div className="md:tooltip md:tooltip-top" data-tip="Reset zoom">
+          <button className="w-8 md:w-10" onClick={resetZoom}>
+            <span className="text-sm">{zoom}%</span>
           </button>
         </div>
-        <button className="btn btn-square btn-ghost btn-sm" onClick={zoomOut}>
+        <button className="btn btn-square btn-ghost btn-xs md:btn-sm" onClick={zoomOut}>
           <MinusIcon />
         </button>
       </div>