diff --git a/app/components/ConvertButton/ConvertButton.tsx b/app/components/ConvertButton/ConvertButton.tsx
index 1906e3a..c5ed075 100644
--- a/app/components/ConvertButton/ConvertButton.tsx
+++ b/app/components/ConvertButton/ConvertButton.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Button } from "antd";
 import { useAtom } from "jotai";
 import {
   filePathsAtom,
@@ -14,20 +13,6 @@ import {
 import { Modal } from "antd";
 import { convert } from "@/app/lib/utils";
 import "@ant-design/v5-patch-for-react-19";
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    button: css`
-      padding: 20px 16px;
-      font-weight: bold;
-      text-transform: uppercase;
-      color: ${token.colorPrimary};
-      letter-spacing: 0.1em;
-      font-size: 18px;
-    `
-  };
-});
 
 export default function ConvertButton() {
   const [filePaths] = useAtom(filePathsAtom);
@@ -37,12 +22,11 @@ export default function ConvertButton() {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
   const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
   const [, setTabSelected] = useAtom(tabSelectedAtom);
-  const { styles, } = useStyles();
   const [modal, contextHolder] = Modal.useModal();
 
   return (
     <>
-      <Button
+      <button
         onClick={() =>
           convert(
             setIsProcessing,
@@ -55,8 +39,8 @@ export default function ConvertButton() {
             setTabSelected
           )
         }
-        className={`${styles.button} ${
-          filePaths.length > 0 && !isProcessing ? "" : "cursor-not-allowed"
+        className={`bg-white font-bold text-lg uppercase text-primary border-none p-[8px_8px] tracking-wider hover:bg-[#b1fede] rounded-md transition-all duration-200 ${
+          filePaths.length > 0 && !isProcessing ? "" : "cursor-not-allowed opacity-50"
         }`}
         title={
           filePaths.length > 0 && !isProcessing
@@ -66,7 +50,7 @@ export default function ConvertButton() {
         disabled={filePaths.length === 0 || isProcessing}
       >
         Convert
-      </Button>
+      </button>
       {contextHolder}
     </>
   );
diff --git a/app/components/LoadingModal/LoadingModal.tsx b/app/components/LoadingModal/LoadingModal.tsx
index b0a9eda..b411f59 100644
--- a/app/components/LoadingModal/LoadingModal.tsx
+++ b/app/components/LoadingModal/LoadingModal.tsx
@@ -18,7 +18,7 @@ export default function LoadingModal() {
         isProcessing || isSaving ? "block" : "hidden"
       }`}
     >
-      <div className="bg-white rounded-lg px-6 py-6 min-w-[300px] flex flex-col gap-4 justify-center items-center">
+      <div className="bg-white rounded-lg px-6 py-6 min-w-[300px] flex flex-col gap-4 justify-center items-center modal-open-animation">
         <div className="flex flex-col gap-2 justify-center items-center">
           <Spin size="large"></Spin>
           <p className="text-lg font-medium text-[#00b96b]">
diff --git a/app/components/SettingsMenu/Quality.tsx b/app/components/SettingsMenu/Quality.tsx
index 84cdb3e..6fac4e7 100644
--- a/app/components/SettingsMenu/Quality.tsx
+++ b/app/components/SettingsMenu/Quality.tsx
@@ -21,6 +21,7 @@ const IntegerStep: React.FC = () => {
           min={1}
           max={100}
           onChange={onChange}
+          defaultValue={75}
           value={typeof inputValue === "number" ? inputValue : 0}
         />
       </Col>
@@ -28,6 +29,7 @@ const IntegerStep: React.FC = () => {
         <InputNumber
           min={1}
           max={100}
+          defaultValue={75}
           style={{ margin: "0 16px" }}
           value={inputValue}
           onChange={onChange}
diff --git a/app/components/WindowMenu/ContextMenu/FileMenu.tsx b/app/components/WindowMenu/ContextMenu/FileMenu.tsx
index 625ee59..d0e979f 100644
--- a/app/components/WindowMenu/ContextMenu/FileMenu.tsx
+++ b/app/components/WindowMenu/ContextMenu/FileMenu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button } from "antd";
+import { Dropdown } from "antd";
 import { useAtom } from "jotai";
 import {
   fileInfosAtom,
@@ -20,7 +20,6 @@ import { convert, openDialog, saveAll, saveSelected } from "@/app/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { Modal } from "antd";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
 
 const items: MenuProps["items"] = [
   {
@@ -53,7 +52,7 @@ const items: MenuProps["items"] = [
 
 export default function FileMenu() {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [isFocused, ] = useAtom(isFocusedAtom);
+  const [isFocused] = useAtom(isFocusedAtom);
   const fileButtonRef = useRef<HTMLButtonElement | null>(null);
   const [fileInfos, setFileInfos] = useAtom(fileInfosAtom);
   const [tabSelected, setTabSelected] = useAtom(tabSelectedAtom);
@@ -61,15 +60,12 @@ export default function FileMenu() {
     processedFilePathsSortedAtom
   );
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
   const [, setIsSaving] = useAtom(isSavingAtom);
-  const [quality, ] = useAtom(qualityAtom);
-  const [extensionType, ] = useAtom(extensionTypeAtom);
+  const [quality] = useAtom(qualityAtom);
+  const [extensionType] = useAtom(extensionTypeAtom);
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [modal, ] = Modal.useModal();
-  const { styles, } = useStyles();
+  const [modal] = Modal.useModal();
 
   function removeResult() {
     setProcessedFilePathsSorted([]);
@@ -160,13 +156,13 @@ export default function FileMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         ref={fileButtonRef}
         onClick={() => {}}
-        className={styles.button}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
       >
         File(F)
-      </Button>
+      </button>
     </Dropdown>
   );
 }
@@ -194,15 +190,13 @@ function FileOpen(): React.ReactNode {
 
 function FileRemoveAll(): React.ReactNode {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [tabSelected, ] = useAtom(tabSelectedAtom);
+  const [tabSelected] = useAtom(tabSelectedAtom);
   const [, setFileInfos] = useAtom(fileInfosAtom);
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
   const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
 
   function removeAll() {
     setFilePaths([]);
@@ -255,10 +249,8 @@ function FileRemoveAll(): React.ReactNode {
 
 function FileSaveAll(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted, ] = useAtom(
-    processedFilePathsSortedAtom
-  );
-  const [modal, ] = Modal.useModal();
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
+  const [modal] = Modal.useModal();
   return (
     <button
       className={`flex items-center justify-between leading-5 w-full ${
@@ -285,11 +277,9 @@ function FileSaveAll(): React.ReactNode {
 
 function FileSaveSelected(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted, ] = useAtom(
-    processedFilePathsSortedAtom
-  );
-  const [checkboxSelected, ] = useAtom(checkboxSelectedAtom);
-  const [modal, ] = Modal.useModal();
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
+  const [checkboxSelected] = useAtom(checkboxSelectedAtom);
+  const [modal] = Modal.useModal();
   return (
     <button
       className={`flex items-center justify-between leading-5 w-full ${
@@ -328,14 +318,12 @@ function FileSaveSelected(): React.ReactNode {
 
 function FileConvert(): React.ReactNode {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
-  const [modal, ] = Modal.useModal();
-  const [filePaths, ] = useAtom(filePathsAtom);
-  const [fileInfos, ] = useAtom(fileInfosAtom);
-  const [quality, ] = useAtom(qualityAtom);
-  const [extensionType, ] = useAtom(extensionTypeAtom);
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
+  const [modal] = Modal.useModal();
+  const [filePaths] = useAtom(filePathsAtom);
+  const [fileInfos] = useAtom(fileInfosAtom);
+  const [quality] = useAtom(qualityAtom);
+  const [extensionType] = useAtom(extensionTypeAtom);
   const [, setTabSelected] = useAtom(tabSelectedAtom);
   return (
     <button
diff --git a/app/components/WindowMenu/ContextMenu/HelpMenu.tsx b/app/components/WindowMenu/ContextMenu/HelpMenu.tsx
index cd6c7ac..d1ab3d0 100644
--- a/app/components/WindowMenu/ContextMenu/HelpMenu.tsx
+++ b/app/components/WindowMenu/ContextMenu/HelpMenu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button, Modal } from "antd";
+import { Dropdown, Modal } from "antd";
 import { useAtom } from "jotai";
 import { isFocusedAtom } from "@/app/lib/atom";
 import { useEffect, useRef, useState } from "react";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
+import "antd/dist/reset.css";
 
 const items: MenuProps["items"] = [
   {
@@ -18,7 +18,6 @@ const items: MenuProps["items"] = [
 export default function HelpMenu() {
   const [isFocused] = useAtom(isFocusedAtom);
   const helpButtonRef = useRef<HTMLButtonElement | null>(null);
-  const { styles, } = useStyles();
   useEffect(() => {
     const handleKeyDownSelectShortcut = async (event: KeyboardEvent) => {
       if (event.key === "h" && event.altKey && isFocused) {
@@ -37,13 +36,13 @@ export default function HelpMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         onClick={() => {}}
-        className={styles.button}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
         ref={helpButtonRef}
       >
         Help(H)
-      </Button>
+      </button>
     </Dropdown>
   );
 }
diff --git a/app/components/WindowMenu/ContextMenu/SelectMenu.tsx b/app/components/WindowMenu/ContextMenu/SelectMenu.tsx
index a8d0b9a..7f8ab46 100644
--- a/app/components/WindowMenu/ContextMenu/SelectMenu.tsx
+++ b/app/components/WindowMenu/ContextMenu/SelectMenu.tsx
@@ -1,29 +1,36 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button } from "antd";
+import { Dropdown } from "antd";
 import { useAtom } from "jotai";
-import { checkboxSelectedAtom, isFocusedAtom, processedFilePathsSortedAtom } from "@/app/lib/atom";
+import {
+  checkboxSelectedAtom,
+  isFocusedAtom,
+  processedFilePathsSortedAtom,
+} from "@/app/lib/atom";
 import { useEffect, useRef } from "react";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
 
 const items: MenuProps["items"] = [
   {
     label: <SelectAll />,
     key: "0",
-  }
+  },
 ];
 
 export default function SelectMenu() {
-  const [isFocused, ] = useAtom(isFocusedAtom);
+  const [isFocused] = useAtom(isFocusedAtom);
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [processedFilePathsSorted, ] = useAtom(processedFilePathsSortedAtom);
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
   const selectButtonRef = useRef<HTMLButtonElement | null>(null);
-  const { styles, } = useStyles();
   useEffect(() => {
     const handleKeyDownSelectShortcut = async (event: KeyboardEvent) => {
-      if (event.key === "a" && event.ctrlKey && isFocused && processedFilePathsSorted.length > 0) {
+      if (
+        event.key === "a" &&
+        event.ctrlKey &&
+        isFocused &&
+        processedFilePathsSorted.length > 0
+      ) {
         event.preventDefault();
         setCheckboxSelected((prev) =>
           prev.map((item) => ({
@@ -47,29 +54,31 @@ export default function SelectMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         onClick={() => {}}
-        className={styles.button}
         ref={selectButtonRef}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
       >
         Select(S)
-      </Button>
+      </button>
     </Dropdown>
   );
 }
 
 function SelectAll(): React.ReactNode {
   const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [processedFilePathsSorted, ] = useAtom(processedFilePathsSortedAtom);
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
   return (
     <button
       title="Select all files."
-      onClick={() => setCheckboxSelected((prev) =>
+      onClick={() =>
+        setCheckboxSelected((prev) =>
           prev.map((item) => ({
             ...item,
             checked: !item.checked,
           }))
-        )}
+        )
+      }
       onKeyDown={(e) => {
         if (e.key === "Enter") {
           setCheckboxSelected((prev) =>
@@ -81,7 +90,11 @@ function SelectAll(): React.ReactNode {
         }
       }}
       disabled={processedFilePathsSorted.length === 0}
-      className={`flex items-center justify-between leading-5 ${processedFilePathsSorted.length === 0 ? "text-gray-300 cursor-not-allowed" : ""}`}
+      className={`flex items-center justify-between leading-5 ${
+        processedFilePathsSorted.length === 0
+          ? "text-gray-300 cursor-not-allowed"
+          : ""
+      }`}
     >
       Select All
       <span className="text-xs pl-4 flex items-center justify-center pt-[1px]">
@@ -89,4 +102,4 @@ function SelectAll(): React.ReactNode {
       </span>
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/app/components/WindowMenu/WindowMenu.tsx b/app/components/WindowMenu/WindowMenu.tsx
index 7f5e7a8..d91ce73 100644
--- a/app/components/WindowMenu/WindowMenu.tsx
+++ b/app/components/WindowMenu/WindowMenu.tsx
@@ -13,16 +13,16 @@ import HelpMenu from "./ContextMenu/HelpMenu";
 import { BorderOutlined, MinusOutlined, CloseOutlined } from "@ant-design/icons";
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, css }) => ({
+export const useStyles = createStyles(({ css }) => ({
   button: css`
-    background-color: ${token.colorPrimary};
+    background-color: #00b96b;
     &:hover {
-      background-color: ${token.colorPrimaryHover};
-      color: ${token.colorPrimary};
+      background-color: #6cd9ac;
+      color: #00b96b;
     }
     color: white;
     border: none;
-    height: 99%;
+    height: 98%;
     padding: 2px 8px;
   `,
 }));
diff --git a/app/globals.css b/app/globals.css
index 5007521..f3e18a5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,6 +6,7 @@
   --background: #ffffff;
   --foreground: #171717;
   --primary: #00b96b;
+  --primary-hover: #9df8d2;
   --secondary: #f6ffed;
 }
 
@@ -20,4 +21,24 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
-}
\ No newline at end of file
+}
+
+.modal-open-animation {
+  transform-origin: center;
+  animation: modal-open 0.2s;
+}
+
+@keyframes modal-open {
+  0% {
+    scale: 0.8;
+  }
+  75% {
+    scale: 1.1;
+  }
+  90% {
+    scale: 0.98;
+  }
+  100% {
+    scale: 1;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 7afbbe4..e6da44e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,8 @@
+"use client";
+import "@ant-design/v5-patch-for-react-19";
 import { Roboto } from "next/font/google";
 import "./globals.css";
 import WindowMenu from "./components/WindowMenu/WindowMenu";
-import type { Metadata } from "next";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
 import { ConfigProvider } from "antd";
 
@@ -10,11 +11,6 @@ const roboto = Roboto({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "Tavif",
-  description: "Tavif is a tool to convert images to avif format.",
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -23,20 +19,20 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${roboto.className} antialiased`}>
-        <ConfigProvider
-          theme={{
-            token: {
-              colorPrimary: "#00b96b",
-              colorPrimaryHover: "#6cd9ac",
-              colorBgContainer: "#f6ffed",
-            },
-          }}
-        >
-          <AntdRegistry>
+        <AntdRegistry>
+          <ConfigProvider
+            theme={{
+              token: {
+                colorPrimary: "#00b96b",
+                colorPrimaryHover: "#6cd9ac",
+                colorBgContainer: "#f6ffed",
+              },
+            }}
+          >
             <WindowMenu />
             <main>{children}</main>
-          </AntdRegistry>
-        </ConfigProvider>
+          </ConfigProvider>
+        </AntdRegistry>
       </body>
     </html>
   );
diff --git a/package-lock.json b/package-lock.json
index a7e9703..ea338e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/nextjs-registry": "^1.0.2",
+        "@ant-design/static-style-extract": "^1.0.3",
         "@tauri-apps/api": "^2.2.0",
         "@tauri-apps/plugin-dialog": "^2.2.0",
         "@tauri-apps/plugin-fs": "^2.2.0",
@@ -36,11 +37,14 @@
         "@types/testing-library__user-event": "^4.1.1",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/coverage-v8": "^2.1.8",
+        "cross-env": "^7.0.3",
         "eslint": "^9",
         "eslint-config-next": "15.1.3",
         "jsdom": "^25.0.1",
         "postcss": "^8",
         "tailwindcss": "^3.4.1",
+        "ts-node": "^10.9.2",
+        "tslib": "^2.8.1",
         "typescript": "^5",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^2.1.8"
@@ -190,6 +194,30 @@
         "react": ">=16.9.0"
       }
     },
+    "node_modules/@ant-design/static-style-extract": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/static-style-extract/-/static-style-extract-1.0.3.tgz",
+      "integrity": "sha512-kFRfoC5M+DaZOSbnH+7CnjEUXoAwX/JZQgBFnHsaWtyh3HktUJ21Xwn/H1kD9NEMV/OLzx6Tb3WCKP8DrfsQig==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/cssinjs": "^1.8.1",
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-align": "^4.0.0",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.27.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "antd": "^5.3.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@ant-design/v5-patch-for-react-19": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@ant-design/v5-patch-for-react-19/-/v5-patch-for-react-19-1.0.3.tgz",
@@ -539,6 +567,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -2781,6 +2833,34 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -3429,6 +3509,19 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -4266,6 +4359,32 @@
         "node": ">= 6"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4515,6 +4634,16 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -4552,6 +4681,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==",
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7042,6 +7177,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -7907,6 +8049,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc-align": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.15.tgz",
+      "integrity": "sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^5.26.0",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/rc-cascader": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.32.0.tgz",
@@ -9775,6 +9934,57 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tsconfck": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz",
@@ -10003,6 +10213,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.4.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
@@ -10517,6 +10734,16 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 0d5f2c5..1b30292 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@ant-design/nextjs-registry": "^1.0.2",
+    "@ant-design/static-style-extract": "^1.0.3",
     "@tauri-apps/api": "^2.2.0",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "^2.2.0",
@@ -39,11 +40,14 @@
     "@types/testing-library__user-event": "^4.1.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
+    "cross-env": "^7.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
     "jsdom": "^25.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
     "typescript": "^5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f539aae..da38c07 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,6 +10,7 @@ export default {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: "var(--primary)",
+        primaryHover: "var(--primary-hover)",
         secondary: "var(--secondary)",
       },
     },
diff --git a/tsconfig.json b/tsconfig.json
index 07e723b..689c55c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,13 @@
     "paths": {
       "@/*": ["./*"]
     },
-    "types": ["@tauri-apps/api", "vitest", "jest", "@testing-library/jest-dom", "vitest/globals"]
+    "types": [
+      "@tauri-apps/api",
+      "vitest",
+      "jest",
+      "@testing-library/jest-dom",
+      "vitest/globals"
+    ]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "src-tauri"]