diff --git a/.gitignore b/.gitignore
index 8f7d792..00c36cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,11 +12,9 @@ dist
 dist-ssr
 *.local
 *-lock.json
+pnpm-lock.yaml
 
 # Editor directories and files
-.vscode
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
diff --git a/.storybook/document.tsx b/.storybook/document.tsx
deleted file mode 100644
index 1cab29a..0000000
--- a/.storybook/document.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { DocsPage, DocsContainer } from "@storybook/addon-docs";
-import { Source } from "@storybook/blocks";
-
-const CustomDocsPage = (props) => {
-    const { context } = props;
-
-    const importStatement = `
-  // Import statement
-  import <<comp>> from '@react-noxui';
-  `;
-
-    return (
-        <DocsContainer context={context}>
-            <DocsPage />
-            <Source code={importStatement} language="jsx" dark />
-        </DocsContainer>
-    );
-};
-
-export default CustomDocsPage;
diff --git a/.storybook/main.ts b/.storybook/main.ts
index d730b22..84f5700 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,19 +1,19 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: [
-        "@storybook/addon-onboarding",
-        "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "@storybook/addon-styling-webpack",
-    ],
-    framework: {
-        name: "@storybook/react-vite",
-        options: {},
-    },
-    staticDirs: ["../public"],
-    previewHead: (head) => `
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  previewHead: head => `
   ${head}
   ${`<link
       href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 9802b7b..3ea19f8 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,6 +1,7 @@
 import { addons } from "@storybook/manager-api";
+
 import theme from "./theme";
 
 addons.setConfig({
-    theme: theme,
+  theme,
 });
diff --git a/.storybook/preview.css b/.storybook/preview.css
index 9eb7fe0..9dae85e 100644
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@@ -27,4 +27,4 @@
 /* Style for the value column in the props panel */
 #storybook-panel-root .css-1wjen9k .css-1p3m7a8 {
   min-width: 300px !important;
-}
\ No newline at end of file
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index ceaab25..65c72dd 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,102 +1,105 @@
-import React, { useState, useEffect } from "react";
+import type { Preview } from "@storybook/react";
+
 import "../src/style/main.css";
 import "@fontsource/inter";
+
 import "./preview.css";
 
-import type { Preview } from "@storybook/react";
+import React, { useEffect, useState } from "react";
 
 const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-            expanded: true,
-        },
-        layout: "fullscreen",
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+      expanded: true,
     },
+    layout: "fullscreen",
+  },
 };
 
-const withJsonEditor = (Story, context) => {
-    const { args } = context;
-    const { oldValue, newValue } = args;
+function withJsonEditor(Story, context) {
+  const { args } = context;
+  const { oldValue, newValue } = args;
 
-    const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
-    const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
-    const [oldJsonError, setOldJsonError] = useState("");
-    const [newJsonError, setNewJsonError] = useState("");
-    const [parsedOldValue, setParsedOldValue] = useState(oldValue);
-    const [parsedNewValue, setParsedNewValue] = useState(newValue);
+  const [oldJson, setOldJson] = useState(JSON.stringify(oldValue, null, 2));
+  const [newJson, setNewJson] = useState(JSON.stringify(newValue, null, 2));
+  const [oldJsonError, setOldJsonError] = useState("");
+  const [newJsonError, setNewJsonError] = useState("");
+  const [parsedOldValue, setParsedOldValue] = useState(oldValue);
+  const [parsedNewValue, setParsedNewValue] = useState(newValue);
 
-    const validateJson = (jsonString: string) => {
-        try {
-            return { error: "", parsed: JSON.parse(jsonString) };
-        } catch (error) {
-            return { error: "Invalid JSON format", parsed: null };
-        }
-    };
+  const validateJson = (jsonString: string) => {
+    try {
+      return { error: "", parsed: JSON.parse(jsonString) };
+    }
+    catch {
+      return { error: "Invalid JSON format", parsed: null };
+    }
+  };
 
-    useEffect(() => {
-        const { error, parsed } = validateJson(oldJson);
-        setOldJsonError(error);
-        if (!error) {
-            setParsedOldValue(parsed);
-        }
-    }, [oldJson]);
+  useEffect(() => {
+    const { error, parsed } = validateJson(oldJson);
+    setOldJsonError(error);
+    if (!error) {
+      setParsedOldValue(parsed);
+    }
+  }, [oldJson]);
 
-    useEffect(() => {
-        const { error, parsed } = validateJson(newJson);
-        setNewJsonError(error);
-        if (!error) {
-            setParsedNewValue(parsed);
-        }
-    }, [newJson]);
+  useEffect(() => {
+    const { error, parsed } = validateJson(newJson);
+    setNewJsonError(error);
+    if (!error) {
+      setParsedNewValue(parsed);
+    }
+  }, [newJson]);
 
-    return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-            <div style={{ display: "flex", gap: "20px" }}>
-                <div style={{ flex: 1 }}>
-                    <h3>Old Value</h3>
-                    <textarea
-                        style={{
-                            width: "100%",
-                            height: "200px",
-                            padding: "10px",
-                            fontFamily: "monospace",
-                            backgroundColor: "#f5f5f5",
-                            border: oldJsonError ? "1px solid red" : "1px solid #ddd",
-                            borderRadius: "4px",
-                        }}
-                        value={oldJson}
-                        onChange={(e) => setOldJson(e.target.value)}
-                    />
-                    {oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
-                </div>
-                <div style={{ flex: 1 }}>
-                    <h3>New Value</h3>
-                    <textarea
-                        style={{
-                            width: "100%",
-                            height: "200px",
-                            padding: "10px",
-                            fontFamily: "monospace",
-                            backgroundColor: "#f5f5f5",
-                            border: newJsonError ? "1px solid red" : "1px solid #ddd",
-                            borderRadius: "4px",
-                        }}
-                        value={newJson}
-                        onChange={(e) => setNewJson(e.target.value)}
-                    />
-                    {newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
-                </div>
-            </div>
-            {!oldJsonError && !newJsonError && (
-                <Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
-            )}
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+      <div style={{ display: "flex", gap: "20px" }}>
+        <div style={{ flex: 1 }}>
+          <h3>Old Value</h3>
+          <textarea
+            style={{
+              width: "100%",
+              height: "200px",
+              padding: "10px",
+              fontFamily: "monospace",
+              backgroundColor: "#f5f5f5",
+              border: oldJsonError ? "1px solid red" : "1px solid #ddd",
+              borderRadius: "4px",
+            }}
+            value={oldJson}
+            onChange={e => setOldJson(e.target.value)}
+          />
+          {oldJsonError && <div style={{ color: "red" }}>{oldJsonError}</div>}
         </div>
-    );
-};
+        <div style={{ flex: 1 }}>
+          <h3>New Value</h3>
+          <textarea
+            style={{
+              width: "100%",
+              height: "200px",
+              padding: "10px",
+              fontFamily: "monospace",
+              backgroundColor: "#f5f5f5",
+              border: newJsonError ? "1px solid red" : "1px solid #ddd",
+              borderRadius: "4px",
+            }}
+            value={newJson}
+            onChange={e => setNewJson(e.target.value)}
+          />
+          {newJsonError && <div style={{ color: "red" }}>{newJsonError}</div>}
+        </div>
+      </div>
+      {!oldJsonError && !newJsonError && (
+        <Story {...context} args={{ ...context.args, oldValue: parsedOldValue, newValue: parsedNewValue }} />
+      )}
+    </div>
+  );
+}
 
 export const decorators = [withJsonEditor];
 
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index a928970..44cb5ea 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -1,41 +1,41 @@
 import { create } from "@storybook/theming/create";
 
 export default create({
-    base: "light",
-    brandTitle: "Virtual React Json Diff",
-    brandUrl: "https://virtual-react-json-diff.netlify.app",
-    // brandImage: "./image.png",
-    brandTarget: "_self",
-    gridCellSize: 20,
+  base: "light",
+  brandTitle: "Virtual React Json Diff",
+  brandUrl: "https://virtual-react-json-diff.netlify.app",
+  // brandImage: "./image.png",
+  brandTarget: "_self",
+  gridCellSize: 20,
 
-    // Typography
-    fontBase: '"Open Sans", sans-serif',
-    fontCode: "monospace",
+  // Typography
+  fontBase: "\"Open Sans\", sans-serif",
+  fontCode: "monospace",
 
-    //
-    colorPrimary: "#3A10E5",
-    colorSecondary: "#585C6D",
+  //
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
 
-    // UI
-    appBg: "#ffffff",
-    appContentBg: "#ffffff",
-    appPreviewBg: "#ffffff",
-    appBorderColor: "#585C6D",
-    appBorderRadius: 4,
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#585C6D",
+  appBorderRadius: 4,
 
-    // Text colors
-    textColor: "#10162F",
-    textInverseColor: "#ffffff",
+  // Text colors
+  textColor: "#10162F",
+  textInverseColor: "#ffffff",
 
-    // Toolbar default and active colors
-    barTextColor: "#9E9E9E",
-    barSelectedColor: "#585C6D",
-    barHoverColor: "#585C6D",
-    barBg: "#ffffff",
+  // Toolbar default and active colors
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#585C6D",
+  barHoverColor: "#585C6D",
+  barBg: "#ffffff",
 
-    // Form colors
-    inputBg: "#ffffff",
-    inputBorder: "#10162F",
-    inputTextColor: "#10162F",
-    inputBorderRadius: 2,
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#10162F",
+  inputTextColor: "#10162F",
+  inputBorderRadius: 2,
 });
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a9d8561
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,52 @@
+{
+  "cSpell.words": ["Iconify", "persistor"],
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}
diff --git a/README.md b/README.md
index 70ca549..3cc0f02 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,6 @@ A high-performance React component for visually comparing large JSON objects. Bu
 
 This component is developed for dealing with thousands of lines of Json Files, and seamlessly compare then render them on UI
 
-
 ## 🚀 Features
 
 - **Compare Large JSON Objects** – Handles big files without freezing the UI
@@ -25,7 +24,7 @@ This component is developed for dealing with thousands of lines of Json Files, a
 - **Mini Map** – A minimap of Json Diff, scaled to better see comparison result
 - **Customizable Styles** – Add your own class names and styles easily (checkout JsonDiffCustomTheme.css)
 
-## Demo 
+## Demo
 
 To see how it works, demo available here: https://virtual-react-json-diff.netlify.app
 
@@ -35,7 +34,9 @@ To see how it works, demo available here: https://virtual-react-json-diff.netlif
 npm install virtual-react-json-diff
 # or
 yarn add virtual-react-json-diff
-``` 
+# or
+pnpm add virtual-react-json-diff
+```
 
 ## Example Screenshot
 
@@ -46,6 +47,7 @@ The theme is fully customizable, all colors can be changed. (And soon new themes
 ## Usage
 
 To change Diff methods please see DifferOptions. By default virtual-react-json-diff uses following configuration
+
 ```
 new Differ({
   detectCircular: true,
@@ -79,11 +81,12 @@ export default function App() {
 ```
 
 The component exposes a root container with the class:
+
 ```
 <div class="diff-viewer-container">...</div>
 ```
-You can pass your own class name via the className prop to apply custom themes.
 
+You can pass your own class name via the className prop to apply custom themes.
 
 ## 🙌 Acknowledgements
 
@@ -98,8 +101,6 @@ MIT © Utku Akyüz
 Pull requests, suggestions, and issues are welcome!
 Check out the issues or open a PR.
 
-
 [npm-url]: https://npmjs.org/package/virtual-react-json-diff
 [npm-image]: https://img.shields.io/npm/v/virtual-react-json-diff.svg
-
 [download-badge]: https://img.shields.io/npm/dm/virtual-react-json-diff.svg
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..3c372a0
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,26 @@
+import antfu from "@antfu/eslint-config";
+
+export default antfu({
+  type: "app",
+  typescript: true,
+  formatters: true,
+  stylistic: {
+    indent: 2,
+    semi: true,
+    quotes: "double",
+  },
+}, {
+  rules: {
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+    "no-unused-vars": "off",
+    "ts/no-redeclare": "off",
+    "ts/consistent-type-definitions": ["error", "type"],
+    "no-console": ["warn"],
+    "antfu/no-top-level-await": ["off"],
+    "node/prefer-global/process": ["off"],
+    "node/no-process-env": ["error"],
+    "perfectionist/sort-imports": ["error", {
+      tsconfigRootDir: ".",
+    }],
+  },
+});
diff --git a/package.json b/package.json
index a70a756..a2dc16c 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,13 @@
 {
   "name": "virtual-react-json-diff",
+  "type": "module",
   "version": "1.0.3",
   "description": "Fast, virtualized React component for visually comparing large JSON objects. Includes search, theming, and minimap.",
-  "main": "dist/cjs/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "bun run rollup",
-    "prepublishOnly": "bun run build",
-    "rollup": "rollup -c --bundleConfigAsCjs",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+  "author": {
+    "name": "Utku Akyüz"
   },
+  "license": "MIT",
+  "homepage": "https://virtual-react-json-diff.netlify.app",
   "repository": {
     "type": "git",
     "url": "https://github.com/utkuakyuz/virtual-react-json-diff"
@@ -21,12 +15,6 @@
   "bugs": {
     "url": "https://github.com/utkuakyuz/virtual-react-json-diff/issues"
   },
-  "homepage": "https://virtual-react-json-diff.netlify.app",
-  "author": {
-    "name": "Utku Akyüz"
-  },
-  "license": "MIT",
-  "type": "module",
   "keywords": [
     "react",
     "json",
@@ -42,7 +30,30 @@
     "compare json",
     "react diff viewer"
   ],
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run rollup",
+    "prepublishOnly": "bun run build",
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "json-diff-kit": "^1.0.32",
+    "react-window": "^1.8.11"
+  },
   "devDependencies": {
+    "@antfu/eslint-config": "^5.2.1",
+    "@eslint-react/eslint-plugin": "^1.52.6",
     "@fontsource/inter": "^5.1.1",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-image": "^3.0.3",
@@ -59,22 +70,26 @@
     "@types/node": "^22.14.1",
     "@types/react": "^18.2.15",
     "@types/react-window": "^1.8.8",
+    "eslint": "^9.33.0",
+    "eslint-plugin-format": "^1.0.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "lint-staged": "^16.1.5",
     "postcss": "^8.5.1",
-    "prettier": "^2.5.1",
     "react": "^18.2.0",
     "rollup": "^3.26.3",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "simple-git-hooks": "^2.13.1",
     "storybook": "8.6.0-alpha.0",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6"
   },
-  "peerDependencies": {
-    "react": "^18.0.0"
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
   },
-  "dependencies": {
-    "json-diff-kit": "^1.0.32",
-    "react-window": "^1.8.11"
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,vue,html,md,json,yaml,css,scss}": "eslint --fix"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 9f632f4..2ef7117 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,32 +1,32 @@
-import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
+import image from "@rollup/plugin-image";
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import image from "@rollup/plugin-image";
 import postcss from "rollup-plugin-postcss";
 
 const packageJson = require("./package.json");
 
 export default [
-    {
-        input: "src/index.ts",
-        output: [
-            {
-                file: packageJson.main,
-                format: "esm",
-                sourcemap: true,
-                inlineDynamicImports: true,
-            },
-        ],
-        external: [...Object.keys(packageJson.peerDependencies || {}), "formik"],
-        plugins: [postcss(), image(), typescript(), peerDepsExternal(), resolve(), commonjs(), terser()],
-    },
-    {
-        input: "dist/cjs/types/src/index.d.ts",
-        output: [{ file: "dist/index.d.ts", format: "esm" }],
-        plugins: [dts.default()],
-        external: [/\.css$/],
-    },
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "esm",
+        sourcemap: true,
+        inlineDynamicImports: true,
+      },
+    ],
+    external: [...Object.keys(packageJson.peerDependencies || {}), "formik"],
+    plugins: [postcss(), image(), typescript(), peerDepsExternal(), resolve(), commonjs(), terser()],
+  },
+  {
+    input: "dist/cjs/types/src/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
 ];
diff --git a/src/components/DiffViewer/Diff.stories.tsx b/src/components/DiffViewer/Diff.stories.tsx
index 800a6eb..3c1a431 100644
--- a/src/components/DiffViewer/Diff.stories.tsx
+++ b/src/components/DiffViewer/Diff.stories.tsx
@@ -1,246 +1,247 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import type { DifferOptions } from "json-diff-kit";
+
 import { VirtualDiffViewer } from "../..";
 import json1 from "./testJsons/json1.json";
 import json2 from "./testJsons/json2.json";
-import type { DifferOptions } from "json-diff-kit";
 
 // Extend the component props to include individual differ options for Storybook
 type StoryProps = React.ComponentProps<typeof VirtualDiffViewer> & {
-    // Individual differ options for better Storybook controls
-    detectCircular?: boolean;
-    maxDepth?: number;
-    showModifications?: boolean;
-    arrayDiffMethod?: DifferOptions["arrayDiffMethod"];
-    compareKey?: string;
-    ignoreCase?: boolean;
-    ignoreCaseForKey?: boolean;
-    recursiveEqual?: boolean;
-    preserveKeyOrder?: DifferOptions["preserveKeyOrder"];
+  // Individual differ options for better Storybook controls
+  detectCircular?: boolean;
+  maxDepth?: number;
+  showModifications?: boolean;
+  arrayDiffMethod?: DifferOptions["arrayDiffMethod"];
+  compareKey?: string;
+  ignoreCase?: boolean;
+  ignoreCaseForKey?: boolean;
+  recursiveEqual?: boolean;
+  preserveKeyOrder?: DifferOptions["preserveKeyOrder"];
 };
 
 const meta: Meta<StoryProps> = {
-    title: "Example/VirtualDiffViewer",
-    component: VirtualDiffViewer,
-    parameters: {
-        layout: "padded",
-    },
-    tags: ["autodocs"],
-    argTypes: {
-        searchTerm: {
-            description: "CSS class name for the diff viewer container",
-            control: "text",
-            table: {
-                disable: true,
-                category: "Main Configuration",
-            },
-        },
-        onSearchMatch: {
-            description: "CSS class name for the diff viewer container",
-            control: "text",
-            table: {
-                disable: true,
-                category: "Main Configuration",
-            },
-        },
-        className: {
-            description: "CSS class name for the diff viewer container",
-            control: "text",
-            table: { category: "Main Configuration" },
-        },
-        leftTitle: {
-            description: "Title for the left side of the diff viewer",
-            control: "text",
-            table: { category: "Main Configuration" },
-        },
-        rightTitle: {
-            description: "Title for the right side of the diff viewer",
-            control: "text",
-            table: { category: "Main Configuration" },
-        },
-        hideSearch: {
-            description: "Whether to hide the search functionality",
-            control: "boolean",
-            table: { category: "Main Configuration" },
-        },
-        height: {
-            description: "Height of the diff viewer in pixels",
-            control: "number",
-            table: { category: "Main Configuration" },
-        },
-        oldValue: {
-            description: "The original JSON object to compare",
-            control: "object",
-            table: {
-                disable: true,
-                category: "Main Configuration",
-            },
-        },
-        newValue: {
-            description: "The new JSON object to compare against",
-            control: "object",
-            table: {
-                disable: true,
-            },
-        },
+  title: "Example/VirtualDiffViewer",
+  component: VirtualDiffViewer,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    searchTerm: {
+      description: "CSS class name for the diff viewer container",
+      control: "text",
+      table: {
+        disable: true,
+        category: "Main Configuration",
+      },
+    },
+    onSearchMatch: {
+      description: "CSS class name for the diff viewer container",
+      control: "text",
+      table: {
+        disable: true,
+        category: "Main Configuration",
+      },
+    },
+    className: {
+      description: "CSS class name for the diff viewer container",
+      control: "text",
+      table: { category: "Main Configuration" },
+    },
+    leftTitle: {
+      description: "Title for the left side of the diff viewer",
+      control: "text",
+      table: { category: "Main Configuration" },
+    },
+    rightTitle: {
+      description: "Title for the right side of the diff viewer",
+      control: "text",
+      table: { category: "Main Configuration" },
+    },
+    hideSearch: {
+      description: "Whether to hide the search functionality",
+      control: "boolean",
+      table: { category: "Main Configuration" },
+    },
+    height: {
+      description: "Height of the diff viewer in pixels",
+      control: "number",
+      table: { category: "Main Configuration" },
+    },
+    oldValue: {
+      description: "The original JSON object to compare",
+      control: "object",
+      table: {
+        disable: true,
+        category: "Main Configuration",
+      },
+    },
+    newValue: {
+      description: "The new JSON object to compare against",
+      control: "object",
+      table: {
+        disable: true,
+      },
+    },
 
-        // Break down differOptions into individual controls
-        detectCircular: {
-            name: "🔍 Detect circular references",
-            description: "Whether to detect circular reference in source objects before diff starts",
-            control: "boolean",
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        maxDepth: {
-            name: "📏 Max depth",
-            description: "Maximum depth for comparison (Infinity means no limit)",
-            control: { type: "number", min: 1, max: 100, step: 1 },
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        showModifications: {
-            name: "✏️ Show modifications",
-            description: "Support recognizing modifications (* modified sign)",
-            control: "boolean",
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        arrayDiffMethod: {
-            name: "📊 Array diff method",
-            description: "The way to diff arrays",
-            control: {
-                type: "select",
-            },
-            options: ["normal", "lcs", "unorder-normal", "unorder-lcs", "compare-key"],
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        compareKey: {
-            name: "🔑 Compare key",
-            description: "Key to use for matching objects in arrays (only for compare-key method)",
-            control: "text",
-            if: { arg: "arrayDiffMethod", eq: "compare-key" },
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        ignoreCase: {
-            name: "🔤 Ignore case",
-            description: "Whether to ignore case when comparing strings",
-            control: "boolean",
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        ignoreCaseForKey: {
-            name: "🔤 Ignore case for key",
-            description: "Whether to ignore case when comparing object keys",
-            control: "boolean",
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        recursiveEqual: {
-            name: "🔄 Recursive equal",
-            description: "Whether to use recursive equal to compare objects",
-            control: "boolean",
-            table: {
-                category: "Differ Configuration",
-            },
-        },
-        preserveKeyOrder: {
-            name: "📑 Preserve key order",
-            description: "Whether to preserve key order from input objects",
-            control: {
-                type: "select",
-            },
-            options: [undefined, "before", "after"],
-            mapping: {
-                "Sort (default)": undefined,
-                Before: "before",
-                After: "after",
-            },
-            table: {
-                category: "Differ Configuration",
-            },
-        },
+    // Break down differOptions into individual controls
+    detectCircular: {
+      name: "🔍 Detect circular references",
+      description: "Whether to detect circular reference in source objects before diff starts",
+      control: "boolean",
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    maxDepth: {
+      name: "📏 Max depth",
+      description: "Maximum depth for comparison (Infinity means no limit)",
+      control: { type: "number", min: 1, max: 100, step: 1 },
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    showModifications: {
+      name: "✏️ Show modifications",
+      description: "Support recognizing modifications (* modified sign)",
+      control: "boolean",
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    arrayDiffMethod: {
+      name: "📊 Array diff method",
+      description: "The way to diff arrays",
+      control: {
+        type: "select",
+      },
+      options: ["normal", "lcs", "unorder-normal", "unorder-lcs", "compare-key"],
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    compareKey: {
+      name: "🔑 Compare key",
+      description: "Key to use for matching objects in arrays (only for compare-key method)",
+      control: "text",
+      if: { arg: "arrayDiffMethod", eq: "compare-key" },
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    ignoreCase: {
+      name: "🔤 Ignore case",
+      description: "Whether to ignore case when comparing strings",
+      control: "boolean",
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    ignoreCaseForKey: {
+      name: "🔤 Ignore case for key",
+      description: "Whether to ignore case when comparing object keys",
+      control: "boolean",
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    recursiveEqual: {
+      name: "🔄 Recursive equal",
+      description: "Whether to use recursive equal to compare objects",
+      control: "boolean",
+      table: {
+        category: "Differ Configuration",
+      },
+    },
+    preserveKeyOrder: {
+      name: "📑 Preserve key order",
+      description: "Whether to preserve key order from input objects",
+      control: {
+        type: "select",
+      },
+      options: [undefined, "before", "after"],
+      mapping: {
+        "Sort (default)": undefined,
+        "Before": "before",
+        "After": "after",
+      },
+      table: {
+        category: "Differ Configuration",
+      },
+    },
 
-        // Hide the original differOptions control since we're breaking it down
-        differOptions: {
-            table: {
-                disable: true,
-            },
-        },
+    // Hide the original differOptions control since we're breaking it down
+    differOptions: {
+      table: {
+        disable: true,
+      },
     },
+  },
 };
 
 export default meta;
 type Story = StoryObj<StoryProps>;
 
 export const Primary: Story = {
-    args: {
-        className: "diff-viewer-container",
-        leftTitle: "Left Title",
-        rightTitle: "Right Title",
-        hideSearch: false,
-        height: 500,
-        oldValue: json1,
-        newValue: json2,
+  args: {
+    className: "diff-viewer-container",
+    leftTitle: "Left Title",
+    rightTitle: "Right Title",
+    hideSearch: false,
+    height: 500,
+    oldValue: json1,
+    newValue: json2,
 
-        // Default values for differ configuration
-        detectCircular: true,
-        maxDepth: 999, // Use 999 instead of Infinity for better control compatibility
-        showModifications: true,
-        arrayDiffMethod: "lcs",
-        compareKey: "oid",
-        ignoreCase: false,
-        ignoreCaseForKey: false,
-        recursiveEqual: false,
-        preserveKeyOrder: undefined,
-    },
-    // Transform the individual controls back into differOptions object
-    render: (args) => {
-        const {
-            detectCircular,
-            maxDepth,
-            showModifications,
-            arrayDiffMethod,
-            compareKey,
-            ignoreCase,
-            ignoreCaseForKey,
-            recursiveEqual,
-            preserveKeyOrder,
-            ...otherArgs
-        } = args;
+    // Default values for differ configuration
+    detectCircular: true,
+    maxDepth: 999, // Use 999 instead of Infinity for better control compatibility
+    showModifications: true,
+    arrayDiffMethod: "lcs",
+    compareKey: "oid",
+    ignoreCase: false,
+    ignoreCaseForKey: false,
+    recursiveEqual: false,
+    preserveKeyOrder: undefined,
+  },
+  // Transform the individual controls back into differOptions object
+  render: (args) => {
+    const {
+      detectCircular,
+      maxDepth,
+      showModifications,
+      arrayDiffMethod,
+      compareKey,
+      ignoreCase,
+      ignoreCaseForKey,
+      recursiveEqual,
+      preserveKeyOrder,
+      ...otherArgs
+    } = args;
 
-        const differOptions: DifferOptions = {
-            detectCircular,
-            maxDepth,
-            showModifications,
-            arrayDiffMethod,
-            ...(arrayDiffMethod === "compare-key" ? { compareKey } : {}),
-            ignoreCase,
-            ignoreCaseForKey,
-            recursiveEqual,
-            ...(preserveKeyOrder ? { preserveKeyOrder } : {}),
-        };
+    const differOptions: DifferOptions = {
+      detectCircular,
+      maxDepth,
+      showModifications,
+      arrayDiffMethod,
+      ...(arrayDiffMethod === "compare-key" ? { compareKey } : {}),
+      ignoreCase,
+      ignoreCaseForKey,
+      recursiveEqual,
+      ...(preserveKeyOrder ? { preserveKeyOrder } : {}),
+    };
 
-        const optionsKey = JSON.stringify({
-            detectCircular,
-            maxDepth,
-            showModifications,
-            arrayDiffMethod,
-            compareKey,
-            ignoreCase,
-            ignoreCaseForKey,
-            recursiveEqual,
-            preserveKeyOrder,
-        });
+    const optionsKey = JSON.stringify({
+      detectCircular,
+      maxDepth,
+      showModifications,
+      arrayDiffMethod,
+      compareKey,
+      ignoreCase,
+      ignoreCaseForKey,
+      recursiveEqual,
+      preserveKeyOrder,
+    });
 
-        return <VirtualDiffViewer {...otherArgs} differOptions={differOptions} key={optionsKey} />;
-    },
+    return <VirtualDiffViewer {...otherArgs} differOptions={differOptions} key={optionsKey} />;
+  },
 };
diff --git a/src/components/DiffViewer/components/DiffMinimap.tsx b/src/components/DiffViewer/components/DiffMinimap.tsx
index 5280b6a..939fa77 100644
--- a/src/components/DiffViewer/components/DiffMinimap.tsx
+++ b/src/components/DiffViewer/components/DiffMinimap.tsx
@@ -1,5 +1,6 @@
-import React, { useRef, useEffect, useCallback, useMemo } from "react";
-import { DiffMinimapProps, DiffRowOrCollapsed } from "../types";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+
+import type { DiffMinimapProps, DiffRowOrCollapsed } from "../types";
 
 const ROW_HEIGHT = 20;
 const SEARCH_HIGHLIGHT_COLOR = "#ffd700";
@@ -16,233 +17,249 @@ const MINIMAP_HOVER_SCROLL_COLOR = "#7B7B7Bcc";
 const MINIMAP_SCROLL_COLOR = "#7B7B7B80";
 
 export const DiffMinimap: React.FC<DiffMinimapProps> = ({
-    leftDiff,
-    rightDiff,
-    height,
-    onScroll,
-    miniMapWidth = 20,
-    currentScrollTop,
-    searchResults = [],
-    currentMatchIndex = -1,
+  leftDiff,
+  rightDiff,
+  height,
+  onScroll,
+  miniMapWidth = 20,
+  currentScrollTop,
+  searchResults = [],
+  currentMatchIndex = -1,
 }) => {
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const isDragging = useRef(false);
-
-    // Memoize expensive calculations
-    const { totalLines, viewportHeight } = useMemo(() => {
-        const totalShownLines = height / ROW_HEIGHT;
-        const totalLines = Math.max(leftDiff.length, rightDiff.length) || totalShownLines;
-        const aRatio = 1 / (totalLines / totalShownLines);
-        const viewportHeight = height * aRatio;
-
-        return {
-            totalLines,
-            viewportHeight,
-        };
-    }, [height, leftDiff.length, rightDiff.length, leftDiff]);
-
-    // Memoize the drawLine function since it's used in a loop
-    const drawLine = useCallback((ctx: CanvasRenderingContext2D, line: DiffRowOrCollapsed, y: number, x: number, width: number) => {
-        if (line.type === "collapsed") {
-            ctx.fillStyle = EQUAL_LINE_COLOR;
-        } else {
-            switch (line.type) {
-                case "equal":
-                    ctx.fillStyle = EQUAL_LINE_COLOR;
-                    break;
-                case "add":
-                    ctx.fillStyle = ADD_LINE_COLOR;
-                    break;
-                case "remove":
-                    ctx.fillStyle = REMOVE_LINE_COLOR;
-                    break;
-                case "modify":
-                    ctx.fillStyle = MODIFY_LINE_COLOR;
-                    break;
-            }
-        }
-        ctx.fillRect(x, y, width, ROW_HEIGHT);
-    }, []);
-
-    // Draw the differences -> This will be called in drawScrollBox method
-    const drawDifferencesInMinimap = (ctx: CanvasRenderingContext2D) => {
-        const scale = height / totalLines;
-
-        if (currentMatchIndex >= 0 && searchResults[currentMatchIndex] !== undefined) {
-            const y = searchResults[currentMatchIndex] * scale;
-            const lineHeight = Math.max(1, scale);
-            ctx.fillStyle = CURRENT_MATCH_COLOR;
-            ctx.fillRect(0, y, miniMapWidth, lineHeight);
-        }
-
-        leftDiff.forEach((line, index) => {
-            const y = index * scale;
-            drawLine(ctx, line, y, 0, miniMapWidth / 2);
-        });
-
-        rightDiff.forEach((line, index) => {
-            const y = index * scale;
-            drawLine(ctx, line, y, miniMapWidth / 2, miniMapWidth / 2);
-        });
-
-        searchResults.forEach((index) => {
-            const y = index * scale;
-            const lineHeight = Math.max(1, scale);
-            ctx.fillStyle = SEARCH_HIGHLIGHT_COLOR;
-            ctx.fillRect(0, y, miniMapWidth, lineHeight);
-        });
-    };
-
-    // Draw the scroll box and also differences in minimapo
-    const drawScrollBox = (ctx: CanvasRenderingContext2D, color: string) => {
-        const totalContentHeight = totalLines * ROW_HEIGHT;
-        const viewportTop = (currentScrollTop / totalContentHeight) * height;
-
-        drawDifferencesInMinimap(ctx);
-
-        ctx.fillStyle = color;
-        ctx.fillRect(0, viewportTop, miniMapWidth, viewportHeight);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  // Memoize expensive calculations
+  const { totalLines, viewportHeight } = useMemo(() => {
+    const totalShownLines = height / ROW_HEIGHT;
+    const totalLines = Math.max(leftDiff.length, rightDiff.length) || totalShownLines;
+    const aRatio = 1 / (totalLines / totalShownLines);
+    const viewportHeight = height * aRatio;
+
+    return {
+      totalLines,
+      viewportHeight,
     };
-
-    const drawMinimap = useCallback(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-
+  }, [height, leftDiff.length, rightDiff.length, leftDiff]);
+
+  // Memoize the drawLine function since it's used in a loop
+  const drawLine = useCallback((ctx: CanvasRenderingContext2D, line: DiffRowOrCollapsed, y: number, x: number, width: number) => {
+    if (line.type === "collapsed") {
+      ctx.fillStyle = EQUAL_LINE_COLOR;
+    }
+    else {
+      switch (line.type) {
+        case "equal":
+          ctx.fillStyle = EQUAL_LINE_COLOR;
+          break;
+        case "add":
+          ctx.fillStyle = ADD_LINE_COLOR;
+          break;
+        case "remove":
+          ctx.fillStyle = REMOVE_LINE_COLOR;
+          break;
+        case "modify":
+          ctx.fillStyle = MODIFY_LINE_COLOR;
+          break;
+      }
+    }
+    ctx.fillRect(x, y, width, ROW_HEIGHT);
+  }, []);
+
+  // Draw the differences -> This will be called in drawScrollBox method
+  const drawDifferencesInMinimap = (ctx: CanvasRenderingContext2D) => {
+    const scale = height / totalLines;
+
+    if (currentMatchIndex >= 0 && searchResults[currentMatchIndex] !== undefined) {
+      const y = searchResults[currentMatchIndex] * scale;
+      const lineHeight = Math.max(1, scale);
+      ctx.fillStyle = CURRENT_MATCH_COLOR;
+      ctx.fillRect(0, y, miniMapWidth, lineHeight);
+    }
+
+    leftDiff.forEach((line, index) => {
+      const y = index * scale;
+      drawLine(ctx, line, y, 0, miniMapWidth / 2);
+    });
+
+    rightDiff.forEach((line, index) => {
+      const y = index * scale;
+      drawLine(ctx, line, y, miniMapWidth / 2, miniMapWidth / 2);
+    });
+
+    searchResults.forEach((index) => {
+      const y = index * scale;
+      const lineHeight = Math.max(1, scale);
+      ctx.fillStyle = SEARCH_HIGHLIGHT_COLOR;
+      ctx.fillRect(0, y, miniMapWidth, lineHeight);
+    });
+  };
+
+  // Draw the scroll box and also differences in minimapo
+  const drawScrollBox = (ctx: CanvasRenderingContext2D, color: string) => {
+    const totalContentHeight = totalLines * ROW_HEIGHT;
+    const viewportTop = (currentScrollTop / totalContentHeight) * height;
+
+    drawDifferencesInMinimap(ctx);
+
+    ctx.fillStyle = color;
+    ctx.fillRect(0, viewportTop, miniMapWidth, viewportHeight);
+  };
+
+  const drawMinimap = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!isDragging.current) {
+      drawScrollBox(ctx, MINIMAP_SCROLL_COLOR);
+    }
+    else {
+      drawScrollBox(ctx, MINIMAP_HOVER_SCROLL_COLOR);
+    }
+  }, [leftDiff, rightDiff, height, currentScrollTop, searchResults, currentMatchIndex, drawLine, viewportHeight]);
+
+  useEffect(() => {
+    drawMinimap();
+  }, [drawMinimap]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      isDragging.current = true;
+      if (!containerRef.current)
+        return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const relativeY = e.clientY - rect.top;
+
+      if (height <= 0 || totalLines <= 0)
+        return;
+
+      const canvas = canvasRef.current;
+      if (!canvas)
+        return;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx)
+        return;
+      drawScrollBox(ctx, "rgba(33, 150, 243, 0.8)");
+
+      const viewportCenter = relativeY - viewportHeight / 2;
+      const scrollTop = (viewportCenter / height) * totalLines * ROW_HEIGHT;
+
+      if (!Number.isNaN(scrollTop) && Number.isFinite(scrollTop)) {
+        onScroll(Math.max(0, scrollTop));
+      }
+    },
+    [height, totalLines, viewportHeight, onScroll],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!containerRef.current)
+        return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const relativeY = e.clientY - rect.top; // e.client y - rect top (120)
+      const viewportCenter = relativeY - viewportHeight / 2; // 0 when mouse is at the center of the drag square
+      const scrollTop = (viewportCenter / height) * totalLines * ROW_HEIGHT;
+
+      const totalContentHeight = totalLines * ROW_HEIGHT;
+      const scrollSquareTop = (currentScrollTop / totalContentHeight) * height;
+
+      const isHovering = relativeY > scrollSquareTop && relativeY < scrollSquareTop + viewportHeight;
+
+      const canvas = canvasRef.current;
+
+      drawMinimap();
+
+      if (canvas) {
         const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        if (!isDragging.current) {
-            drawScrollBox(ctx, MINIMAP_SCROLL_COLOR);
-        } else {
-            drawScrollBox(ctx, MINIMAP_HOVER_SCROLL_COLOR);
+        if (!ctx)
+          return;
+        if (isHovering) {
+          // This is active when box is hovered
+          drawScrollBox(ctx, MINIMAP_HOVER_SCROLL_COLOR);
         }
-    }, [leftDiff, rightDiff, height, currentScrollTop, searchResults, currentMatchIndex, drawLine, viewportHeight]);
-
-    useEffect(() => {
-        drawMinimap();
-    }, [drawMinimap]);
-
-    const handleMouseDown = useCallback(
-        (e: React.MouseEvent) => {
-            isDragging.current = true;
-            if (!containerRef.current) return;
-
-            const rect = containerRef.current.getBoundingClientRect();
-            const relativeY = e.clientY - rect.top;
-
-            if (height <= 0 || totalLines <= 0) return;
+      }
 
-            const canvas = canvasRef.current;
-            if (!canvas) return;
+      if (!isDragging.current)
+        return;
 
-            const ctx = canvas.getContext("2d");
-            if (!ctx) return;
-            drawScrollBox(ctx, "rgba(33, 150, 243, 0.8)");
+      if (height <= 0 || totalLines <= 0)
+        return;
 
-            const viewportCenter = relativeY - viewportHeight / 2;
-            const scrollTop = (viewportCenter / height) * totalLines * ROW_HEIGHT;
+      if (Number.isNaN(scrollTop) || !Number.isFinite(scrollTop))
+        return;
 
-            if (!isNaN(scrollTop) && isFinite(scrollTop)) {
-                onScroll(Math.max(0, scrollTop));
-            }
-        },
-        [height, totalLines, viewportHeight, onScroll]
-    );
+      const maximumBottomLimit = e.clientY + viewportHeight / 2;
 
-    const handleMouseMove = useCallback(
-        (e: React.MouseEvent) => {
-            if (!containerRef.current) return;
-            const rect = containerRef.current.getBoundingClientRect();
-            const relativeY = e.clientY - rect.top; // e.client y - rect top (120)
-            const viewportCenter = relativeY - viewportHeight / 2; // 0 when mouse is at the center of the drag square
-            const scrollTop = (viewportCenter / height) * totalLines * ROW_HEIGHT;
+      if (maximumBottomLimit > rect.bottom) {
+        const maximumScrollToBottom = rect.bottom - viewportHeight / 2 - rect.top;
+        const forcedScrollTop = (maximumScrollToBottom / height) * totalLines * ROW_HEIGHT;
 
-            const totalContentHeight = totalLines * ROW_HEIGHT;
-            const scrollSquareTop = (currentScrollTop / totalContentHeight) * height;
-
-            const isHovering = relativeY > scrollSquareTop && relativeY < scrollSquareTop + viewportHeight;
-
-            const canvas = canvasRef.current;
-
-            drawMinimap();
-
-            if (canvas) {
-                const ctx = canvas.getContext("2d");
-                if (!ctx) return;
-                if (isHovering) {
-                    // This is active when box is hovered
-                    drawScrollBox(ctx, MINIMAP_HOVER_SCROLL_COLOR);
-                }
-            }
-
-            if (!isDragging.current) return;
-
-            if (height <= 0 || totalLines <= 0) return;
-
-            if (isNaN(scrollTop) || !isFinite(scrollTop)) return;
-
-            const maximumBottomLimit = e.clientY + viewportHeight / 2;
-
-            if (maximumBottomLimit > rect.bottom) {
-                const maximumScrollToBottom = rect.bottom - viewportHeight / 2 - rect.top;
-                const forcedScrollTop = (maximumScrollToBottom / height) * totalLines * ROW_HEIGHT;
-
-                if (!isNaN(forcedScrollTop) && isFinite(forcedScrollTop)) {
-                    onScroll(Math.max(0, forcedScrollTop - 250));
-                }
-            } else {
-                onScroll(Math.max(0, scrollTop));
-            }
-        },
-        [height, totalLines, viewportHeight, onScroll]
-    );
-
-    const handleMouseUp = useCallback(() => {
-        isDragging.current = false;
-    }, []);
-
-    const handleMouseLeave = () => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-
-        if (isDragging.current) {
-            isDragging.current = false;
+        if (!Number.isNaN(forcedScrollTop) && Number.isFinite(forcedScrollTop)) {
+          onScroll(Math.max(0, forcedScrollTop - 250));
         }
-        drawMinimap(); // resets full state
-    };
-
-    useEffect(() => {
-        window.addEventListener("mouseup", handleMouseUp);
-        return () => window.removeEventListener("mouseup", handleMouseUp);
-    }, [handleMouseUp]);
-
-    return (
-        <div
-            ref={containerRef}
-            style={{
-                width: miniMapWidth,
-                height,
-                position: "relative",
-                cursor: "pointer",
-            }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-        >
-            <canvas
-                ref={canvasRef}
-                width={miniMapWidth}
-                height={height}
-                style={{
-                    width: "100%",
-                    height: "100%",
-                }}
-            />
-        </div>
-    );
+      }
+      else {
+        onScroll(Math.max(0, scrollTop));
+      }
+    },
+    [height, totalLines, viewportHeight, onScroll],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+
+  const handleMouseLeave = () => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return;
+
+    if (isDragging.current) {
+      isDragging.current = false;
+    }
+    drawMinimap(); // resets full state
+  };
+
+  useEffect(() => {
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, [handleMouseUp]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: miniMapWidth,
+        height,
+        position: "relative",
+        cursor: "pointer",
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      <canvas
+        ref={canvasRef}
+        width={miniMapWidth}
+        height={height}
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    </div>
+  );
 };
diff --git a/src/components/DiffViewer/components/VirtualizedDiffViewer.tsx b/src/components/DiffViewer/components/VirtualizedDiffViewer.tsx
index 049112e..826bda5 100644
--- a/src/components/DiffViewer/components/VirtualizedDiffViewer.tsx
+++ b/src/components/DiffViewer/components/VirtualizedDiffViewer.tsx
@@ -1,11 +1,16 @@
-import React, { useEffect, useMemo, useState, useRef, useCallback } from "react";
-import { VariableSizeList as List, type ListChildComponentProps, type ListOnScrollProps } from "react-window";
-import { type DiffResult, Differ, Viewer } from "json-diff-kit";
-import { DiffMinimap } from "./DiffMinimap";
-import { VirtualizedDiffViewerProps, SegmentItem, SearchState, DiffRowOrCollapsed } from "../types";
-import { performSearch, highlightMatches } from "../utils/diffSearchUtils";
-import { generateSegments, buildViewFromSegments } from "../utils/preprocessDiff";
+import type { DiffResult } from "json-diff-kit";
+import type { ListChildComponentProps, ListOnScrollProps } from "react-window";
+
+import { Differ, Viewer } from "json-diff-kit";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { VariableSizeList as List } from "react-window";
+
+import type { DiffRowOrCollapsed, SearchState, SegmentItem, VirtualizedDiffViewerProps } from "../types";
+
 import { SearchIcon } from "../../SearchIcon";
+import { highlightMatches, performSearch } from "../utils/diffSearchUtils";
+import { buildViewFromSegments, generateSegments } from "../utils/preprocessDiff";
+import { DiffMinimap } from "./DiffMinimap";
 import "../styles/JsonDiffCustomTheme.css";
 
 const ROW_HEIGHT = 20;
@@ -13,317 +18,326 @@ const COLLAPSED_ROW_HEIGHT = 20;
 const SEARCH_DEBOUNCE_MS = 300;
 const DIFF_VIEWER_CLASS = "json-diff-viewer-theme-custom";
 
-const isCollapsed = (line: any): line is { type: "collapsed"; segmentIndex: number } =>
-    line && typeof line === "object" && "type" in line && line.type === "collapsed";
+function isCollapsed(line: any): line is { type: "collapsed"; segmentIndex: number } {
+  return line && typeof line === "object" && "type" in line && line.type === "collapsed";
+}
 
-const ViewerRow = ({
-    index,
-    style,
-    data,
+function ViewerRow({
+  index,
+  style,
+  data,
 }: ListChildComponentProps<{
-    leftDiff: DiffRowOrCollapsed[];
-    rightDiff: DiffRowOrCollapsed[];
-    onExpand: (segmentIndex: number) => void;
-    searchTerm?: string;
-}>) => {
-    const { onExpand, searchTerm } = data;
-    const originalLeftLine = data.leftDiff[index];
-    const originalRightLine = data.rightDiff[index];
-
-    if (isCollapsed(originalLeftLine)) {
-        return (
-            <div className="collapsed-button" style={style}>
-                <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
-                    Show Hidden Lines
-                </button>
-            </div>
-        );
-    }
-
-    const leftLine = { ...originalLeftLine } as DiffResult;
-    const rightLine = { ...originalRightLine } as DiffResult;
-
+  leftDiff: DiffRowOrCollapsed[];
+  rightDiff: DiffRowOrCollapsed[];
+  onExpand: (segmentIndex: number) => void;
+  searchTerm?: string;
+}>) {
+  const { onExpand, searchTerm } = data;
+  const originalLeftLine = data.leftDiff[index];
+  const originalRightLine = data.rightDiff[index];
+
+  if (isCollapsed(originalLeftLine)) {
     return (
-        <div style={style}>
-            <Viewer
-                indent={1}
-                className={`${DIFF_VIEWER_CLASS} ${searchTerm ? "has-search" : ""}`}
-                lineNumbers
-                diff={[[leftLine], [rightLine]]}
-                highlightInlineDiff
-                inlineDiffOptions={{ mode: "word" }}
-                syntaxHighlight={{ theme: "monokai" }}
-            />
-        </div>
+      <div className="collapsed-button" style={style}>
+        <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
+          Show Hidden Lines
+        </button>
+      </div>
     );
-};
+  }
+
+  const leftLine = { ...originalLeftLine } as DiffResult;
+  const rightLine = { ...originalRightLine } as DiffResult;
+
+  return (
+    <div style={style}>
+      <Viewer
+        indent={1}
+        className={`${DIFF_VIEWER_CLASS} ${searchTerm ? "has-search" : ""}`}
+        lineNumbers
+        diff={[[leftLine], [rightLine]]}
+        highlightInlineDiff
+        inlineDiffOptions={{ mode: "word" }}
+        syntaxHighlight={{ theme: "monokai" }}
+      />
+    </div>
+  );
+}
 
 export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
-    oldValue,
-    newValue,
-    height,
-    searchTerm,
-    leftTitle,
-    rightTitle,
-    hideSearch,
-    onSearchMatch,
-    differOptions,
-    className,
-    miniMapWidth,
+  oldValue,
+  newValue,
+  height,
+  searchTerm,
+  leftTitle,
+  rightTitle,
+  hideSearch,
+  onSearchMatch,
+  differOptions,
+  className,
+  miniMapWidth,
 }) => {
-    const listRef = useRef<List>(null);
-    const searchTimeoutRef = useRef<NodeJS.Timeout>();
-    const [scrollTop, setScrollTop] = useState(0);
-
-    const [segments, setSegments] = useState<SegmentItem[]>([]);
-    const [searchState, setSearchState] = useState<SearchState>({
-        term: "",
-        results: [],
-        currentIndex: 0,
-    });
-
-    const differ = useMemo(
-        () =>
-            new Differ({
-                detectCircular: true,
-                maxDepth: 20,
-                showModifications: true,
-                arrayDiffMethod: "lcs",
-                preserveKeyOrder: "before",
-                ...differOptions,
-            }),
-        []
-    );
+  const listRef = useRef<List>(null);
+  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const [segments, setSegments] = useState<SegmentItem[]>([]);
+  const [searchState, setSearchState] = useState<SearchState>({
+    term: "",
+    results: [],
+    currentIndex: 0,
+  });
+
+  const differ = useMemo(
+    () =>
+      new Differ({
+        detectCircular: true,
+        maxDepth: 20,
+        showModifications: true,
+        arrayDiffMethod: "lcs",
+        preserveKeyOrder: "before",
+        ...differOptions,
+      }),
+    [differOptions],
+  );
+
+  const diffData = useMemo(() => {
+    if (!oldValue || !newValue)
+      return [[], []];
+    return differ.diff(oldValue, newValue);
+  }, [oldValue, newValue, differ]);
+
+  const [rawLeftDiff, rawRightDiff] = diffData;
+  const [leftView, setLeftView] = useState<DiffRowOrCollapsed[]>([]);
+  const [rightView, setRightView] = useState<DiffRowOrCollapsed[]>([]);
+
+  useEffect(() => {
+    const generatedSegments = generateSegments(rawLeftDiff);
+    setSegments(generatedSegments);
+  }, [rawLeftDiff]);
+
+  useEffect(() => {
+    const leftBuilt = buildViewFromSegments(segments, rawLeftDiff);
+    const rightBuilt = buildViewFromSegments(segments, rawRightDiff);
+    setLeftView(leftBuilt);
+    setRightView(rightBuilt);
+  }, [segments, rawLeftDiff, rawRightDiff]);
+
+  useEffect(() => {
+    listRef.current?.resetAfterIndex(0);
+  }, [leftView]);
+
+  const handleSearch = useCallback(
+    (term: string) => {
+      setSearchState(prev => ({ ...prev, term }));
+
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+
+      searchTimeoutRef.current = setTimeout(() => {
+        const results = performSearch(term, leftView);
+        setSearchState(prev => ({ ...prev, results, currentIndex: 0 }));
+      }, SEARCH_DEBOUNCE_MS);
+    },
+    [leftView],
+  );
+
+  const navigateToMatch = useCallback(
+    (direction: "next" | "prev") => {
+      if (searchState.results.length === 0)
+        return;
+
+      const newIndex
+                = direction === "next"
+                  ? (searchState.currentIndex + 1) % searchState.results.length
+                  : (searchState.currentIndex - 1 + searchState.results.length) % searchState.results.length;
+
+      setSearchState(prev => ({ ...prev, currentIndex: newIndex }));
+      const matchIndex = searchState.results[newIndex];
+
+      listRef.current?.scrollToItem(matchIndex, "center");
+      if (onSearchMatch) {
+        onSearchMatch(matchIndex);
+      }
+    },
+    [searchState.results, searchState.currentIndex, onSearchMatch],
+  );
+
+  useEffect(() => {
+    if (searchTerm !== undefined) {
+      handleSearch(searchTerm);
+    }
+  }, [searchTerm, handleSearch]);
 
-    const diffData = useMemo(() => {
-        if (!oldValue || !newValue) return [[], []];
-        return differ.diff(oldValue, newValue);
-    }, [oldValue, newValue, differ]);
-
-    const [rawLeftDiff, rawRightDiff] = diffData;
-    const [leftView, setLeftView] = useState<DiffRowOrCollapsed[]>([]);
-    const [rightView, setRightView] = useState<DiffRowOrCollapsed[]>([]);
-
-    useEffect(() => {
-        const generatedSegments = generateSegments(rawLeftDiff);
-        setSegments(generatedSegments);
-    }, [rawLeftDiff]);
-
-    useEffect(() => {
-        const leftBuilt = buildViewFromSegments(segments, rawLeftDiff);
-        const rightBuilt = buildViewFromSegments(segments, rawRightDiff);
-        setLeftView(leftBuilt);
-        setRightView(rightBuilt);
-    }, [segments, rawLeftDiff, rawRightDiff]);
-
-    useEffect(() => {
-        listRef.current?.resetAfterIndex(0);
-    }, [leftView]);
-
-    const handleSearch = useCallback(
-        (term: string) => {
-            setSearchState((prev) => ({ ...prev, term }));
-
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-
-            searchTimeoutRef.current = setTimeout(() => {
-                const results = performSearch(term, leftView);
-                setSearchState((prev) => ({ ...prev, results, currentIndex: 0 }));
-            }, SEARCH_DEBOUNCE_MS);
-        },
-        [leftView]
-    );
+  useEffect(() => {
+    highlightMatches(searchState.term, DIFF_VIEWER_CLASS);
 
-    const navigateToMatch = useCallback(
-        (direction: "next" | "prev") => {
-            if (searchState.results.length === 0) return;
+    const observer = new MutationObserver(() => highlightMatches(searchState.term, DIFF_VIEWER_CLASS));
+    const config = { childList: true, subtree: true };
 
-            const newIndex =
-                direction === "next"
-                    ? (searchState.currentIndex + 1) % searchState.results.length
-                    : (searchState.currentIndex - 1 + searchState.results.length) % searchState.results.length;
+    const viewer = document.querySelector(`.${DIFF_VIEWER_CLASS}`);
+    if (viewer) {
+      observer.observe(viewer, config);
+    }
 
-            setSearchState((prev) => ({ ...prev, currentIndex: newIndex }));
-            const matchIndex = searchState.results[newIndex];
+    const listContainer = document.querySelector(".virtual-json-diff-list-container");
+    if (listContainer) {
+      const handleScroll = () => {
+        setTimeout(() => highlightMatches(searchState.term, DIFF_VIEWER_CLASS), 100);
+      };
 
-            listRef.current?.scrollToItem(matchIndex, "center");
-            if (onSearchMatch) {
-                onSearchMatch(matchIndex);
-            }
-        },
-        [searchState.results, searchState.currentIndex, onSearchMatch]
-    );
+      listContainer.addEventListener("scroll", handleScroll);
 
-    useEffect(() => {
-        if (searchTerm !== undefined) {
-            handleSearch(searchTerm);
-        }
-    }, [searchTerm, handleSearch]);
+      return () => {
+        observer.disconnect();
+        listContainer.removeEventListener("scroll", handleScroll);
+      };
+    }
 
-    useEffect(() => {
-        highlightMatches(searchState.term, DIFF_VIEWER_CLASS);
+    return () => {
+      observer.disconnect();
+    };
+  }, [searchState.term]);
 
-        const observer = new MutationObserver(() => highlightMatches(searchState.term, DIFF_VIEWER_CLASS));
-        const config = { childList: true, subtree: true };
+  const handleExpand = useCallback((segmentIndex: number) => {
+    setSegments((prev) => {
+      const updated = [...prev];
+      const seg = updated[segmentIndex];
 
-        const viewer = document.querySelector(`.${DIFF_VIEWER_CLASS}`);
-        if (viewer) {
-            observer.observe(viewer, config);
-        }
+      if (!seg || !seg.isEqual)
+        return prev;
 
-        const listContainer = document.querySelector(".virtual-json-diff-list-container");
-        if (listContainer) {
-            const handleScroll = () => {
-                setTimeout(() => highlightMatches(searchState.term, DIFF_VIEWER_CLASS), 100);
-            };
+      const expandedSegment = {
+        ...seg,
+        isExpanded: true,
+        originalStart: seg.start,
+        originalEnd: seg.end,
+        start: seg.start,
+        end: seg.end,
+      };
 
-            listContainer.addEventListener("scroll", handleScroll);
+      updated[segmentIndex] = expandedSegment;
 
-            return () => {
-                observer.disconnect();
-                listContainer.removeEventListener("scroll", handleScroll);
-            };
+      return updated;
+    });
+  }, []);
+
+  const handleHideAll = useCallback(() => {
+    setSegments((prev) => {
+      return prev.map((seg) => {
+        if (seg.isEqual && seg.isExpanded) {
+          return {
+            ...seg,
+            isExpanded: false,
+            start: seg.originalStart ?? seg.start,
+            end: seg.originalEnd ?? seg.end,
+          };
         }
-
-        return () => {
-            observer.disconnect();
-        };
-    }, [searchState.term]);
-
-    const handleExpand = useCallback((segmentIndex: number) => {
-        setSegments((prev) => {
-            const updated = [...prev];
-            const seg = updated[segmentIndex];
-
-            if (!seg || !seg.isEqual) return prev;
-
-            const expandedSegment = {
-                ...seg,
-                isExpanded: true,
-                originalStart: seg.start,
-                originalEnd: seg.end,
-                start: seg.start,
-                end: seg.end,
-            };
-
-            updated[segmentIndex] = expandedSegment;
-
-            return updated;
-        });
-    }, []);
-
-    const handleHideAll = useCallback(() => {
-        setSegments((prev) => {
-            return prev.map((seg) => {
-                if (seg.isEqual && seg.isExpanded) {
-                    return {
-                        ...seg,
-                        isExpanded: false,
-                        start: seg.originalStart ?? seg.start,
-                        end: seg.originalEnd ?? seg.end,
-                    };
-                }
-                return seg;
-            });
-        });
-    }, []);
-
-    const getItemSize = useCallback(
-        (index: number) => {
-            const leftLine = leftView[index];
-            return isCollapsed(leftLine) ? COLLAPSED_ROW_HEIGHT : ROW_HEIGHT;
-        },
-        [leftView]
-    );
-
-    const hasExpandedSegments = useMemo(() => segments.some((seg) => seg.isEqual && seg.isExpanded), [segments]);
-
-    const listData = useMemo(
-        () => ({
-            leftDiff: leftView,
-            rightDiff: rightView,
-            onExpand: handleExpand,
-            searchTerm: searchState.term,
-        }),
-        [leftView, rightView, handleExpand, searchState.term]
-    );
-
-    return (
-        <div className={`diff-viewer-container${className ? ` ${className}` : ""}`}>
-            <div className="json-diff-header">
-                {!hideSearch && (
-                    <div className="search-container">
-                        <div className="search-input-container">
-                            <span role="img" aria-label="search">
-                                <SearchIcon />
-                            </span>
-                            <input
-                                type="text"
-                                placeholder="Search in JSON..."
-                                value={searchState.term}
-                                onChange={(e) => handleSearch(e.target.value)}
-                            />
-                        </div>
-                        {searchState.results.length > 0 && (
-                            <div className="search-results">
-                                <span>
-                                    {searchState.currentIndex + 1} of {searchState.results.length} matches
-                                </span>
-                                <button onClick={() => navigateToMatch("prev")}>Previous</button>
-                                <button onClick={() => navigateToMatch("next")}>Next</button>
-                            </div>
-                        )}
-                    </div>
-                )}
-                <div className="json-diff-title-container">
-                    <div>
-                        <span>{leftTitle}</span>
-                    </div>
-                    <div>
-                        <span>{rightTitle}</span>
-                    </div>
-                </div>
-            </div>
-            <div style={{ display: "flex", gap: "8px" }}>
-                <List
-                    ref={listRef}
-                    className="virtual-json-diff-list-container"
-                    height={height}
-                    itemCount={Math.max(leftView.length, rightView.length)}
-                    itemSize={getItemSize}
-                    overscanCount={28}
-                    width="100%"
-                    itemData={listData}
-                    onScroll={({ scrollOffset }: ListOnScrollProps) => {
-                        setScrollTop(scrollOffset);
-                    }}
-                >
-                    {ViewerRow}
-                </List>
-                <div>
-                    <DiffMinimap
-                        leftDiff={leftView}
-                        rightDiff={rightView}
-                        height={height}
-                        onScroll={(scrollTop) => {
-                            listRef.current?.scrollTo(scrollTop);
-                        }}
-                        currentScrollTop={scrollTop}
-                        miniMapWidth={miniMapWidth}
-                        searchResults={searchState.results}
-                        currentMatchIndex={searchState.currentIndex}
-                    />
-                </div>
+        return seg;
+      });
+    });
+  }, []);
+
+  const getItemSize = useCallback(
+    (index: number) => {
+      const leftLine = leftView[index];
+      return isCollapsed(leftLine) ? COLLAPSED_ROW_HEIGHT : ROW_HEIGHT;
+    },
+    [leftView],
+  );
+
+  const hasExpandedSegments = useMemo(() => segments.some(seg => seg.isEqual && seg.isExpanded), [segments]);
+
+  const listData = useMemo(
+    () => ({
+      leftDiff: leftView,
+      rightDiff: rightView,
+      onExpand: handleExpand,
+      searchTerm: searchState.term,
+    }),
+    [leftView, rightView, handleExpand, searchState.term],
+  );
+
+  return (
+    <div className={`diff-viewer-container${className ? ` ${className}` : ""}`}>
+      <div className="json-diff-header">
+        {!hideSearch && (
+          <div className="search-container">
+            <div className="search-input-container">
+              <span role="img" aria-label="search">
+                <SearchIcon />
+              </span>
+              <input
+                type="text"
+                placeholder="Search in JSON..."
+                value={searchState.term}
+                onChange={e => handleSearch(e.target.value)}
+              />
             </div>
-            {hasExpandedSegments && (
-                <div className="hide-all-button">
-                    <button onClick={handleHideAll}>Hide All Expanded Lines</button>
-                </div>
+            {searchState.results.length > 0 && (
+              <div className="search-results">
+                <span>
+                  {searchState.currentIndex + 1}
+                  {" "}
+                  of
+                  {searchState.results.length}
+                  {" "}
+                  matches
+                </span>
+                <button onClick={() => navigateToMatch("prev")}>Previous</button>
+                <button onClick={() => navigateToMatch("next")}>Next</button>
+              </div>
             )}
+          </div>
+        )}
+        <div className="json-diff-title-container">
+          <div>
+            <span>{leftTitle}</span>
+          </div>
+          <div>
+            <span>{rightTitle}</span>
+          </div>
         </div>
-    );
+      </div>
+      <div style={{ display: "flex", gap: "8px" }}>
+        <List
+          ref={listRef}
+          className="virtual-json-diff-list-container"
+          height={height}
+          itemCount={Math.max(leftView.length, rightView.length)}
+          itemSize={getItemSize}
+          overscanCount={28}
+          width="100%"
+          itemData={listData}
+          onScroll={({ scrollOffset }: ListOnScrollProps) => {
+            setScrollTop(scrollOffset);
+          }}
+        >
+          {ViewerRow}
+        </List>
+        <div>
+          <DiffMinimap
+            leftDiff={leftView}
+            rightDiff={rightView}
+            height={height}
+            onScroll={(scrollTop) => {
+              listRef.current?.scrollTo(scrollTop);
+            }}
+            currentScrollTop={scrollTop}
+            miniMapWidth={miniMapWidth}
+            searchResults={searchState.results}
+            currentMatchIndex={searchState.currentIndex}
+          />
+        </div>
+      </div>
+      {hasExpandedSegments && (
+        <div className="hide-all-button">
+          <button onClick={handleHideAll}>Hide All Expanded Lines</button>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default VirtualizedDiffViewer;
diff --git a/src/components/DiffViewer/styles/JsonDiffCustomTheme.css b/src/components/DiffViewer/styles/JsonDiffCustomTheme.css
index 891449b..4cd26a7 100644
--- a/src/components/DiffViewer/styles/JsonDiffCustomTheme.css
+++ b/src/components/DiffViewer/styles/JsonDiffCustomTheme.css
@@ -6,13 +6,13 @@
 }
 
 .virtual-json-diff-list-container {
-  --sb-track-color: #232E33;
+  --sb-track-color: #232e33;
   --sb-thumb-color: #4560f8;
   --sb-size: 6px;
 }
 
 .virtual-json-diff-list-container::-webkit-scrollbar {
-  width: var(--sb-size)
+  width: var(--sb-size);
 }
 
 .virtual-json-diff-list-container::-webkit-scrollbar-track {
@@ -23,18 +23,15 @@
 .virtual-json-diff-list-container::-webkit-scrollbar-thumb {
   background: var(--sb-thumb-color);
   border-radius: 3px;
-  
 }
 
 @supports not selector(::-webkit-scrollbar) {
   .virtual-json-diff-list-container {
-    scrollbar-color: var(--sb-thumb-color)
-                     var(--sb-track-color);
+    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
   }
 }
 
-
-.diff-viewer-container  {
+.diff-viewer-container {
   button {
     border-radius: 4px;
     border: 1px solid transparent;
@@ -53,18 +50,16 @@
   button:focus-visible {
     outline: 4px auto -webkit-focus-ring-color;
   }
-  
 }
 
-
 .json-diff-header {
   background: #2f323e;
   padding: 10px;
   border-bottom: 1px solid #353846;
   color: #ffffffe5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .json-diff-header .search-container {
@@ -79,13 +74,13 @@
 }
 
 .json-diff-header .json-diff-title-container div {
-  flex: 0.47
+  flex: 0.47;
 }
 
 .json-diff-header .search-input-container {
   display: flex;
   align-items: center;
-  gap: 10px
+  gap: 10px;
 }
 
 .json-diff-header .search-input-container svg {
@@ -126,7 +121,6 @@
   white-space: pre;
 }
 
-
 .json-diff-viewer-virtual pre::-webkit-scrollbar {
   display: none;
 }
@@ -135,16 +129,12 @@
   background: #282a36;
   color: #f8f8f2;
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.json-diff-viewer.json-diff-viewer-theme-custom.has-search
-  tr
-  td
-  pre
-  span.token.search-match {
+.json-diff-viewer.json-diff-viewer-theme-custom.has-search tr td pre span.token.search-match {
   background-color: #ffeb3b;
   color: #000;
   padding: 0 2px;
@@ -163,9 +153,9 @@
 .json-diff-viewer.json-diff-viewer-theme-custom tr td pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .json-diff-viewer.json-diff-viewer-theme-custom tr:hover {
diff --git a/src/components/DiffViewer/types/index.ts b/src/components/DiffViewer/types/index.ts
index 95eff8c..de55ab7 100644
--- a/src/components/DiffViewer/types/index.ts
+++ b/src/components/DiffViewer/types/index.ts
@@ -1,58 +1,58 @@
-import { DiffResult, DifferOptions } from "json-diff-kit";
+import type { DifferOptions, DiffResult } from "json-diff-kit";
 
-export interface DiffRow extends DiffResult {
-    originalIndex: number;
-}
+export type DiffRow = {
+  originalIndex: number;
+} & DiffResult;
 
 export type DiffRowOrCollapsed = DiffRow | CollapsedLine;
 
-export interface SegmentItem {
-    start: number;
-    end: number;
-    isEqual: boolean;
-    isExpanded?: boolean;
-    originalStart?: number;
-    originalEnd?: number;
-}
+export type SegmentItem = {
+  start: number;
+  end: number;
+  isEqual: boolean;
+  isExpanded?: boolean;
+  originalStart?: number;
+  originalEnd?: number;
+};
 
-export interface HiddenUnchangedLinesInfo extends SegmentItem {
-    hasLinesBefore: boolean;
-    hasLinesAfter: boolean;
-}
-export interface CollapsedLine {
-    type: "collapsed";
-    segmentIndex: number;
-    originalIndex: number;
-    level: number;
-    text: string;
-}
-export interface SearchState {
-    term: string;
-    results: number[];
-    currentIndex: number;
-}
+export type HiddenUnchangedLinesInfo = {
+  hasLinesBefore: boolean;
+  hasLinesAfter: boolean;
+} & SegmentItem;
+export type CollapsedLine = {
+  type: "collapsed";
+  segmentIndex: number;
+  originalIndex: number;
+  level: number;
+  text: string;
+};
+export type SearchState = {
+  term: string;
+  results: number[];
+  currentIndex: number;
+};
 
-export interface VirtualizedDiffViewerProps {
-    oldValue: object;
-    newValue: object;
-    height: number;
-    hideSearch?: boolean;
-    searchTerm?: string;
-    leftTitle?: string;
-    rightTitle?: string;
-    onSearchMatch?: (index: number) => void;
-    differOptions?: DifferOptions;
-    className?: string;
-    miniMapWidth?: number;
-}
+export type VirtualizedDiffViewerProps = {
+  oldValue: object;
+  newValue: object;
+  height: number;
+  hideSearch?: boolean;
+  searchTerm?: string;
+  leftTitle?: string;
+  rightTitle?: string;
+  onSearchMatch?: (index: number) => void;
+  differOptions?: DifferOptions;
+  className?: string;
+  miniMapWidth?: number;
+};
 
-export interface DiffMinimapProps {
-    leftDiff: DiffRowOrCollapsed[];
-    rightDiff: DiffRowOrCollapsed[];
-    height: number;
-    onScroll: (scrollTop: number) => void;
-    currentScrollTop: number;
-    searchResults?: number[];
-    currentMatchIndex?: number;
-    miniMapWidth?: number;
-}
+export type DiffMinimapProps = {
+  leftDiff: DiffRowOrCollapsed[];
+  rightDiff: DiffRowOrCollapsed[];
+  height: number;
+  onScroll: (scrollTop: number) => void;
+  currentScrollTop: number;
+  searchResults?: number[];
+  currentMatchIndex?: number;
+  miniMapWidth?: number;
+};
diff --git a/src/components/DiffViewer/utils/diffSearchUtils.ts b/src/components/DiffViewer/utils/diffSearchUtils.ts
index b94b47c..aea81a3 100644
--- a/src/components/DiffViewer/utils/diffSearchUtils.ts
+++ b/src/components/DiffViewer/utils/diffSearchUtils.ts
@@ -1,37 +1,39 @@
-import { DiffRowOrCollapsed } from "../types";
+import type { DiffRowOrCollapsed } from "../types";
 
-export const performSearch = (term: string, leftView: DiffRowOrCollapsed[]): number[] => {
-    if (!term) return [];
+export function performSearch(term: string, leftView: DiffRowOrCollapsed[]): number[] {
+  if (!term)
+    return [];
 
-    const results: number[] = [];
-    const searchRegex = new RegExp(term, "gi");
+  const results: number[] = [];
+  const searchRegex = new RegExp(term, "gi");
 
-    leftView.forEach((line, index) => {
-        if (typeof line === "object" && "text" in line && searchRegex.test(line.text)) {
-            results.push(index);
-        }
-    });
+  leftView.forEach((line, index) => {
+    if (typeof line === "object" && "text" in line && searchRegex.test(line.text)) {
+      results.push(index);
+    }
+  });
 
-    return results;
-};
+  return results;
+}
 
-export const highlightMatches = (term: string, className: string = "json-diff-viewer-theme-custom"): void => {
-    if (!term) {
-        const elements = document.querySelectorAll(`.${className} span.token.search-match`);
-        elements.forEach((element) => element.classList.remove("search-match"));
-        return;
-    }
+export function highlightMatches(term: string, className: string = "json-diff-viewer-theme-custom"): void {
+  if (!term) {
+    const elements = document.querySelectorAll(`.${className} span.token.search-match`);
+    elements.forEach(element => element.classList.remove("search-match"));
+    return;
+  }
 
-    const termToUse = term.replaceAll("(", "").replaceAll(")", "");
-    const regex = new RegExp(termToUse, "gi");
-    const elements = document.querySelectorAll(`.${className} span.token`);
+  const termToUse = term.replaceAll("(", "").replaceAll(")", "");
+  const regex = new RegExp(termToUse, "gi");
+  const elements = document.querySelectorAll(`.${className} span.token`);
 
-    elements.forEach((element) => {
-        const text = element.textContent || "";
-        if (regex.test(text)) {
-            element.classList.add("search-match");
-        } else {
-            element.classList.remove("search-match");
-        }
-    });
-};
+  elements.forEach((element) => {
+    const text = element.textContent || "";
+    if (regex.test(text)) {
+      element.classList.add("search-match");
+    }
+    else {
+      element.classList.remove("search-match");
+    }
+  });
+}
diff --git a/src/components/DiffViewer/utils/preprocessDiff.ts b/src/components/DiffViewer/utils/preprocessDiff.ts
index 6b5a692..f05340b 100644
--- a/src/components/DiffViewer/utils/preprocessDiff.ts
+++ b/src/components/DiffViewer/utils/preprocessDiff.ts
@@ -1,181 +1,186 @@
-import { DiffResult } from "json-diff-kit";
-import { DiffRow, SegmentItem, CollapsedLine, DiffRowOrCollapsed } from "../types";
+import type { DiffResult } from "json-diff-kit";
+
+import type { CollapsedLine, DiffRow, DiffRowOrCollapsed, SegmentItem } from "../types";
 
 const DEFAULT_CONTEXT_SIZE = 3;
 const DEFAULT_COLLAPSE_THRESHOLD = 10;
 
-const shouldAddTopContext = (index: number, segments: SegmentItem[], currentSegment: SegmentItem): boolean => {
-    return index === 0 || (segments[index - 1].end < currentSegment.start && segments[index - 1].isEqual);
-};
+function shouldAddTopContext(index: number, segments: SegmentItem[], currentSegment: SegmentItem): boolean {
+  return index === 0 || (segments[index - 1].end < currentSegment.start && segments[index - 1].isEqual);
+}
 
-const isNonEmptyEqualLine = (line: DiffResult): boolean => {
-    return line.type === "equal" && line.text !== "";
-};
+function isNonEmptyEqualLine(line: DiffResult): boolean {
+  return line.type === "equal" && line.text !== "";
+}
 
 export function preprocessDiffs(
-    diff: DiffResult[],
-    contextSize: number = DEFAULT_CONTEXT_SIZE,
-    collapseThreshold: number = DEFAULT_COLLAPSE_THRESHOLD
+  diff: DiffResult[],
+  contextSize: number = DEFAULT_CONTEXT_SIZE,
+  collapseThreshold: number = DEFAULT_COLLAPSE_THRESHOLD,
 ): DiffRowOrCollapsed[] {
-    if (!Array.isArray(diff)) {
-        throw new Error("Diff input must be an array");
-    }
-
-    const result: DiffRowOrCollapsed[] = [];
-    let i = 0;
-
-    while (i < diff.length) {
-        if (isNonEmptyEqualLine(diff[i])) {
-            let j = i;
-            while (j < diff.length && isNonEmptyEqualLine(diff[j])) j++;
-            const blockSize = j - i;
-
-            if (blockSize > collapseThreshold) {
-                const top = diff.slice(i, i + contextSize).map(
-                    (line, idx) =>
-                        ({
-                            ...line,
-                            originalIndex: i + idx,
-                        } as DiffRow)
-                );
-                const bottom = diff.slice(j - contextSize, j).map(
-                    (line, idx) =>
-                        ({
-                            ...line,
-                            originalIndex: j - contextSize + idx,
-                        } as DiffRow)
-                );
-
-                result.push(...top);
-
-                if (blockSize > contextSize * 2) {
-                    result.push({
-                        type: "collapsed",
-                        segmentIndex: result.length,
-                        originalIndex: result.length,
-                        level: 0,
-                        text: "",
-                    } as CollapsedLine);
-                }
-
-                result.push(...bottom);
-            } else {
-                result.push(
-                    ...diff.slice(i, j).map(
-                        (line, idx) =>
-                            ({
-                                ...line,
-                                originalIndex: i + idx,
-                            } as DiffRow)
-                    )
-                );
-            }
-            i = j;
-        } else {
-            result.push({
-                ...diff[i],
-                originalIndex: i,
-            } as DiffRow);
-            i++;
+  if (!Array.isArray(diff)) {
+    throw new TypeError("Diff input must be an array");
+  }
+
+  const result: DiffRowOrCollapsed[] = [];
+  let i = 0;
+
+  while (i < diff.length) {
+    if (isNonEmptyEqualLine(diff[i])) {
+      let j = i;
+      while (j < diff.length && isNonEmptyEqualLine(diff[j])) j++;
+      const blockSize = j - i;
+
+      if (blockSize > collapseThreshold) {
+        const top = diff.slice(i, i + contextSize).map(
+          (line, idx) =>
+            ({
+              ...line,
+              originalIndex: i + idx,
+            } as DiffRow),
+        );
+        const bottom = diff.slice(j - contextSize, j).map(
+          (line, idx) =>
+            ({
+              ...line,
+              originalIndex: j - contextSize + idx,
+            } as DiffRow),
+        );
+
+        result.push(...top);
+
+        if (blockSize > contextSize * 2) {
+          result.push({
+            type: "collapsed",
+            segmentIndex: result.length,
+            originalIndex: result.length,
+            level: 0,
+            text: "",
+          } as CollapsedLine);
         }
+
+        result.push(...bottom);
+      }
+      else {
+        result.push(
+          ...diff.slice(i, j).map(
+            (line, idx) =>
+              ({
+                ...line,
+                originalIndex: i + idx,
+              } as DiffRow),
+          ),
+        );
+      }
+      i = j;
+    }
+    else {
+      result.push({
+        ...diff[i],
+        originalIndex: i,
+      } as DiffRow);
+      i++;
     }
+  }
 
-    return result;
+  return result;
 }
 
 export function generateSegments(diff: DiffResult[], contextSize: number = DEFAULT_CONTEXT_SIZE): SegmentItem[] {
-    if (!Array.isArray(diff)) {
-        throw new Error("Diff input must be an array");
+  if (!Array.isArray(diff)) {
+    throw new TypeError("Diff input must be an array");
+  }
+
+  const segments: SegmentItem[] = [];
+  let i = 0;
+
+  // Handle the first contextSize lines separately
+  if (i < diff.length && isNonEmptyEqualLine(diff[i])) {
+    let firstContextEnd = Math.min(i + contextSize, diff.length);
+    while (firstContextEnd < diff.length && isNonEmptyEqualLine(diff[firstContextEnd])) {
+      firstContextEnd++;
     }
+    segments.push({ start: i, end: firstContextEnd, isEqual: true });
+    i = firstContextEnd;
+  }
 
-    const segments: SegmentItem[] = [];
-    let i = 0;
+  while (i < diff.length) {
+    if (isNonEmptyEqualLine(diff[i])) {
+      let j = i;
+      while (j < diff.length && isNonEmptyEqualLine(diff[j])) j++;
 
-    // Handle the first contextSize lines separately
-    if (i < diff.length && isNonEmptyEqualLine(diff[i])) {
-        let firstContextEnd = Math.min(i + contextSize, diff.length);
-        while (firstContextEnd < diff.length && isNonEmptyEqualLine(diff[firstContextEnd])) {
-            firstContextEnd++;
-        }
-        segments.push({ start: i, end: firstContextEnd, isEqual: true });
-        i = firstContextEnd;
+      segments.push({ start: i, end: j, isEqual: true });
+      i = j;
     }
+    else {
+      const start = Math.max(0, i - contextSize);
+      const end = Math.min(diff.length, i + 1 + contextSize);
 
-    while (i < diff.length) {
-        if (isNonEmptyEqualLine(diff[i])) {
-            let j = i;
-            while (j < diff.length && isNonEmptyEqualLine(diff[j])) j++;
-            const blockSize = j - i;
-
-            segments.push({ start: i, end: j, isEqual: true });
-            i = j;
-        } else {
-            const start = Math.max(0, i - contextSize);
-            const end = Math.min(diff.length, i + 1 + contextSize);
-
-            if (start < i && (segments.length === 0 || segments[segments.length - 1].end <= start)) {
-                segments.push({ start, end: i, isEqual: true });
-            }
+      if (start < i && (segments.length === 0 || segments[segments.length - 1].end <= start)) {
+        segments.push({ start, end: i, isEqual: true });
+      }
 
-            segments.push({ start: i, end: i + 1, isEqual: false });
+      segments.push({ start: i, end: i + 1, isEqual: false });
 
-            if (i + 1 < end) {
-                segments.push({ start: i + 1, end, isEqual: true });
-            }
+      if (i + 1 < end) {
+        segments.push({ start: i + 1, end, isEqual: true });
+      }
 
-            i = end;
-        }
+      i = end;
     }
+  }
 
-    return segments;
+  return segments;
 }
 
 export function buildViewFromSegments(
-    segments: SegmentItem[],
-    diff: DiffResult[],
-    contextSize: number = DEFAULT_CONTEXT_SIZE
+  segments: SegmentItem[],
+  diff: DiffResult[],
+  contextSize: number = DEFAULT_CONTEXT_SIZE,
 ): DiffRowOrCollapsed[] {
-    if (!Array.isArray(segments) || !Array.isArray(diff)) {
-        throw new Error("Both segments and diff must be arrays");
+  if (!Array.isArray(segments) || !Array.isArray(diff)) {
+    throw new TypeError("Both segments and diff must be arrays");
+  }
+
+  const result: DiffRowOrCollapsed[] = [];
+
+  segments.forEach((segment, index) => {
+    if (!segment.isEqual) {
+      for (let i = segment.start; i < segment.end; i++) {
+        result.push({ ...diff[i], originalIndex: i } as DiffRow);
+      }
     }
+    else {
+      const segmentLength = segment.end - segment.start;
 
-    const result: DiffRowOrCollapsed[] = [];
-
-    segments.forEach((segment, index) => {
-        if (!segment.isEqual) {
-            for (let i = segment.start; i < segment.end; i++) {
-                result.push({ ...diff[i], originalIndex: i } as DiffRow);
-            }
-        } else {
-            const segmentLength = segment.end - segment.start;
-
-            if (segmentLength <= contextSize * 2 || segment.isExpanded) {
-                for (let i = segment.start; i < segment.end; i++) {
-                    result.push({ ...diff[i], originalIndex: i } as DiffRow);
-                }
-            } else {
-                if (shouldAddTopContext(index, segments, segment)) {
-                    for (let i = segment.start; i < Math.min(segment.start + contextSize, segment.end); i++) {
-                        result.push({ ...diff[i], originalIndex: i } as DiffRow);
-                    }
-                }
-
-                if (segment.end - (segment.start + contextSize) > contextSize) {
-                    result.push({
-                        type: "collapsed",
-                        segmentIndex: index,
-                        originalIndex: result.length,
-                        level: 0,
-                        text: "",
-                    } as CollapsedLine);
-                }
-
-                for (let i = Math.max(segment.end - contextSize, segment.start + contextSize); i < segment.end; i++) {
-                    result.push({ ...diff[i], originalIndex: i } as DiffRow);
-                }
-            }
+      if (segmentLength <= contextSize * 2 || segment.isExpanded) {
+        for (let i = segment.start; i < segment.end; i++) {
+          result.push({ ...diff[i], originalIndex: i } as DiffRow);
         }
-    });
+      }
+      else {
+        if (shouldAddTopContext(index, segments, segment)) {
+          for (let i = segment.start; i < Math.min(segment.start + contextSize, segment.end); i++) {
+            result.push({ ...diff[i], originalIndex: i } as DiffRow);
+          }
+        }
+
+        if (segment.end - (segment.start + contextSize) > contextSize) {
+          result.push({
+            type: "collapsed",
+            segmentIndex: index,
+            originalIndex: result.length,
+            level: 0,
+            text: "",
+          } as CollapsedLine);
+        }
+
+        for (let i = Math.max(segment.end - contextSize, segment.start + contextSize); i < segment.end; i++) {
+          result.push({ ...diff[i], originalIndex: i } as DiffRow);
+        }
+      }
+    }
+  });
 
-    return result;
+  return result;
 }
diff --git a/src/components/SearchIcon.tsx b/src/components/SearchIcon.tsx
index 8df492f..217c61f 100644
--- a/src/components/SearchIcon.tsx
+++ b/src/components/SearchIcon.tsx
@@ -1,11 +1,13 @@
-export const SearchIcon = () => (
+export function SearchIcon() {
+  return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
+      <path
+        d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
-);
+  );
+}
diff --git a/src/image.d.ts b/src/image.d.ts
index 88997c8..299760f 100644
--- a/src/image.d.ts
+++ b/src/image.d.ts
@@ -1,9 +1,9 @@
 declare module "*.svg" {
-    const content: string;
-    export default content;
+  const content: string;
+  export default content;
 }
 
 declare module "*.png" {
-    const content: string;
-    export default content;
+  const content: string;
+  export default content;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index a9579ac..9da9c64 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 };
diff --git a/tsconfig.json b/tsconfig.json
index 5cbf02a..4976060 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,21 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "jsx": "react-jsx",
+    "rootDir": ".",
     "module": "ESNext",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
     "strict": true,
-    "skipLibCheck": true,
-    "rootDir": ".",
-    "jsx": "react-jsx",
     "declaration": true,
     "declarationDir": "types",
-    "sourceMap": true,
+    "emitDeclarationOnly": true,
     "outDir": "dist",
-    "moduleResolution": "Node",
+    "sourceMap": true,
     "allowSyntheticDefaultImports": true,
-    "emitDeclarationOnly": true,
-    "resolveJsonModule": true
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
   }
 }