diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..8c58594
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,9 @@
+next.config.js
+tailwind.config.js
+postcss.config.js
+.next/*
+netlify/*
+node_modules/*
+out/*
+public/*
+wasm/*
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 6cfb878..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": [
-      "warn", {
-        "additionalHooks": "(useRecoilCallback|useRecoilTransaction_UNSTABLE)"
-      }
-    ]
-  }
-}
diff --git a/.eslintrc.yml b/.eslintrc.yml
new file mode 100644
index 0000000..a714962
--- /dev/null
+++ b/.eslintrc.yml
@@ -0,0 +1,45 @@
+env:
+  browser: true
+  es2022: true
+extends:
+  - plugin:react/recommended
+  - airbnb
+  - next/core-web-vitals
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: latest
+  sourceType: module
+plugins:
+  - react
+  - '@typescript-eslint'
+rules:
+  semi: [error, never]
+  arrow-body-style: off
+  import/prefer-default-export: off
+  max-len: off
+  no-unused-vars: off
+  '@typescript-eslint/no-unused-vars': error
+  no-undef: off
+  no-plusplus: [error, { allowForLoopAfterthoughts: true }]
+  default-case: off
+  no-case-declarations: off
+  import/extensions: [
+    error,
+    ignorePackages,
+    {
+      ts: never,
+      tsx: never,
+    }
+  ]
+  jsx-quotes: [error, prefer-single]
+  react/jsx-props-no-spreading: off
+  react/jsx-filename-extension: [error, { extensions: ['.tsx'] }]
+  react/function-component-definition: [error, { namedComponents: arrow-function }]
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: [
+    warn, {
+      additionalHooks: (useRecoilCallback|useRecoilTransaction_UNSTABLE) # https://recoiljs.org/docs/introduction/installation/#eslint
+    }
+  ]
diff --git a/next.config.js b/next.config.js
index a9a5f25..f40f113 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,6 +8,7 @@ const nextConfig = withPWA({
     disable: process.env.NODE_ENV === 'development',
   },
   eslint: {
+    dirs: ['src'],
     // Ignore eslint checks during `next build` run on CI, because it's checked on a separate step before
     ignoreDuringBuilds: process.env.NEXT_CI_BUILD === 'true',
   },
diff --git a/package-lock.json b/package-lock.json
index ee58b74..1cc1776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,9 +19,16 @@
         "@types/node": "18.0.0",
         "@types/react": "18.0.14",
         "@types/react-dom": "18.0.5",
+        "@typescript-eslint/eslint-plugin": "^5.30.4",
+        "@typescript-eslint/parser": "^5.30.4",
         "autoprefixer": "10.4.7",
-        "eslint": "8.18.0",
+        "eslint": "^8.19.0",
+        "eslint-config-airbnb": "^19.0.4",
         "eslint-config-next": "12.1.6",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "postcss": "8.4.14",
         "serve": "13.0.2",
         "tailwindcss": "3.1.4",
@@ -1540,10 +1547,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.0.tgz",
-      "integrity": "sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==",
-      "license": "MIT",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
+      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -2186,16 +2192,63 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.4.tgz",
+      "integrity": "sha512-xjujQISAIa4HAaos8fcMZXmqkuZqMx6icdxkI88jMM/eNe4J8AuTLYnLK+zdm0mBYLyctdFf//UE4/xFCcQzYQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/type-utils": "5.30.4",
+        "@typescript-eslint/utils": "5.30.4",
+        "debug": "^4.3.4",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.25.0.tgz",
-      "integrity": "sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.4.tgz",
+      "integrity": "sha512-/ge1HtU63wVoED4VnlU2o+FPFmi017bPYpeSrCmd8Ycsti4VSxXrmcpXXm7JpI4GT0Aa7qviabv1PEp6L5bboQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.25.0",
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/typescript-estree": "5.25.0",
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/typescript-estree": "5.30.4",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2215,14 +2268,31 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.25.0.tgz",
-      "integrity": "sha512-p4SKTFWj+2VpreUZ5xMQsBMDdQ9XdRvODKXN4EksyBjFp2YvQdLkyHqOffakYZPuWJUDNu3jVXtHALDyTv3cww==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.4.tgz",
+      "integrity": "sha512-DNzlQwGSiGefz71JwaHrpcaAX3zYkEcy8uVuan3YMKOa6qeW/y+7SaD8KIsIAruASwq6P+U4BjWBWtM2O+mwBQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/visitor-keys": "5.30.4"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.4.tgz",
+      "integrity": "sha512-55cf1dZviwwv+unDB+mF8vZkfta5muTK6bppPvenWWCD7slZZ0DEsXUjZerqy7Rq8s3J4SXdg4rMIY8ngCtTmA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/visitor-keys": "5.25.0"
+        "@typescript-eslint/utils": "5.30.4",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2230,14 +2300,21 @@
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz",
-      "integrity": "sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.4.tgz",
+      "integrity": "sha512-NTEvqc+Vvu8Q6JeAKryHk2eqLKqsr2St3xhIjhOjQv5wQUBhaTuix4WOSacqj0ONWfKVU12Eug3LEAB95GBkMA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -2247,14 +2324,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.25.0.tgz",
-      "integrity": "sha512-MrPODKDych/oWs/71LCnuO7NyR681HuBly2uLnX3r5i4ME7q/yBqC4hW33kmxtuauLTM0OuBOhhkFaxCCOjEEw==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.4.tgz",
+      "integrity": "sha512-V4VnEs6/J9/nNizaA12IeU4SAeEYaiKr7XndLNfV5+3zZSB4hIu6EhHJixTKhvIqA+EEHgBl6re8pivBMLLO1w==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/visitor-keys": "5.25.0",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/visitor-keys": "5.30.4",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2279,7 +2355,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -2290,14 +2365,59 @@
         "node": ">=10"
       }
     },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.4.tgz",
+      "integrity": "sha512-a+GQrJzOUhn4WT1mUumXDyam+22Oo4c5K/jnZ+6r/4WTQF3q8e4CsC9PLHb4SnOClzOqo/5GLZWvkE1aa5UGKQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/typescript-estree": "5.30.4",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.25.0.tgz",
-      "integrity": "sha512-yd26vFgMsC4h2dgX4+LR+GeicSKIfUvZREFLf3DDjZPtqgLx5AJZr6TetMNwFP9hcKreTTeztQYBTNbNoOycwA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.4.tgz",
+      "integrity": "sha512-ulKGse3mruSc8x6l8ORSc6+1ORyJzKmZeIaRTu/WpaF/jx3vHvEn5XZUKF9XaVg2710mFmTAUlLcLYLPp/Zf/Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "5.25.0",
+        "@typescript-eslint/types": "5.30.4",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -3276,6 +3396,12 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "license": "MIT"
     },
+    "node_modules/confusing-browser-globals": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
+      "dev": true
+    },
     "node_modules/content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
@@ -3702,9 +3828,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
-      "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.19.0.tgz",
+      "integrity": "sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.0",
@@ -3753,6 +3879,46 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-airbnb": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+      "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
+      "dev": true,
+      "dependencies": {
+        "eslint-config-airbnb-base": "^15.0.0",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5"
+      },
+      "engines": {
+        "node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0"
+      }
+    },
+    "node_modules/eslint-config-airbnb-base": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+      "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+      "dev": true,
+      "dependencies": {
+        "confusing-browser-globals": "^1.0.10",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.2"
+      }
+    },
     "node_modules/eslint-config-next": {
       "version": "12.1.6",
       "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
@@ -3866,7 +4032,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
       "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.4",
         "array.prototype.flat": "^1.2.5",
@@ -3907,24 +4072,24 @@
       "license": "MIT"
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
-      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.0.tgz",
+      "integrity": "sha512-kTeLuIzpNhXL2CwLlc8AHI0aFRwWHcg483yepO9VQiHzM9bZwJdzTkzBszbuPrbgGmq2rlX/FaT2fJQsjUSHsw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.16.3",
+        "@babel/runtime": "^7.18.3",
         "aria-query": "^4.2.2",
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.5",
         "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.3.5",
+        "axe-core": "^4.4.2",
         "axobject-query": "^2.2.0",
-        "damerau-levenshtein": "^1.0.7",
+        "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
         "has": "^1.0.3",
-        "jsx-ast-utils": "^3.2.1",
+        "jsx-ast-utils": "^3.3.1",
         "language-tags": "^1.0.5",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.1.2",
+        "semver": "^6.3.0"
       },
       "engines": {
         "node": ">=4.0"
@@ -3934,11 +4099,10 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.30.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
-      "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
+      "version": "7.30.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz",
+      "integrity": "sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.5",
         "array.prototype.flatmap": "^1.3.0",
@@ -3963,11 +4127,10 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
-      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -5240,13 +5403,12 @@
       }
     },
     "node_modules/jsx-ast-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
-      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.1.tgz",
+      "integrity": "sha512-pxrjmNpeRw5wwVeWyEAk7QJu2GnBO3uzPFmHCKJJFPKK2Cy0cWL23krGtLdnMmbIi6/FjlrQpPyfQI19ByPOhQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.5",
         "object.assign": "^4.1.2"
       },
       "engines": {
@@ -5387,7 +5549,6 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -9052,9 +9213,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.0.tgz",
-      "integrity": "sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
+      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -9498,42 +9659,81 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.4.tgz",
+      "integrity": "sha512-xjujQISAIa4HAaos8fcMZXmqkuZqMx6icdxkI88jMM/eNe4J8AuTLYnLK+zdm0mBYLyctdFf//UE4/xFCcQzYQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/type-utils": "5.30.4",
+        "@typescript-eslint/utils": "5.30.4",
+        "debug": "^4.3.4",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "@typescript-eslint/parser": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.25.0.tgz",
-      "integrity": "sha512-r3hwrOWYbNKP1nTcIw/aZoH+8bBnh/Lh1iDHoFpyG4DnCpvEdctrSl6LOo19fZbzypjQMHdajolxs6VpYoChgA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.4.tgz",
+      "integrity": "sha512-/ge1HtU63wVoED4VnlU2o+FPFmi017bPYpeSrCmd8Ycsti4VSxXrmcpXXm7JpI4GT0Aa7qviabv1PEp6L5bboQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.25.0",
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/typescript-estree": "5.25.0",
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/typescript-estree": "5.30.4",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.25.0.tgz",
-      "integrity": "sha512-p4SKTFWj+2VpreUZ5xMQsBMDdQ9XdRvODKXN4EksyBjFp2YvQdLkyHqOffakYZPuWJUDNu3jVXtHALDyTv3cww==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.4.tgz",
+      "integrity": "sha512-DNzlQwGSiGefz71JwaHrpcaAX3zYkEcy8uVuan3YMKOa6qeW/y+7SaD8KIsIAruASwq6P+U4BjWBWtM2O+mwBQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/visitor-keys": "5.30.4"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.4.tgz",
+      "integrity": "sha512-55cf1dZviwwv+unDB+mF8vZkfta5muTK6bppPvenWWCD7slZZ0DEsXUjZerqy7Rq8s3J4SXdg4rMIY8ngCtTmA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/visitor-keys": "5.25.0"
+        "@typescript-eslint/utils": "5.30.4",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz",
-      "integrity": "sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.4.tgz",
+      "integrity": "sha512-NTEvqc+Vvu8Q6JeAKryHk2eqLKqsr2St3xhIjhOjQv5wQUBhaTuix4WOSacqj0ONWfKVU12Eug3LEAB95GBkMA==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.25.0.tgz",
-      "integrity": "sha512-MrPODKDych/oWs/71LCnuO7NyR681HuBly2uLnX3r5i4ME7q/yBqC4hW33kmxtuauLTM0OuBOhhkFaxCCOjEEw==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.4.tgz",
+      "integrity": "sha512-V4VnEs6/J9/nNizaA12IeU4SAeEYaiKr7XndLNfV5+3zZSB4hIu6EhHJixTKhvIqA+EEHgBl6re8pivBMLLO1w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.25.0",
-        "@typescript-eslint/visitor-keys": "5.25.0",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/visitor-keys": "5.30.4",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -9552,13 +9752,45 @@
         }
       }
     },
+    "@typescript-eslint/utils": {
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.4.tgz",
+      "integrity": "sha512-a+GQrJzOUhn4WT1mUumXDyam+22Oo4c5K/jnZ+6r/4WTQF3q8e4CsC9PLHb4SnOClzOqo/5GLZWvkE1aa5UGKQ==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.30.4",
+        "@typescript-eslint/types": "5.30.4",
+        "@typescript-eslint/typescript-estree": "5.30.4",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+          "dev": true
+        }
+      }
+    },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.25.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.25.0.tgz",
-      "integrity": "sha512-yd26vFgMsC4h2dgX4+LR+GeicSKIfUvZREFLf3DDjZPtqgLx5AJZr6TetMNwFP9hcKreTTeztQYBTNbNoOycwA==",
+      "version": "5.30.4",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.4.tgz",
+      "integrity": "sha512-ulKGse3mruSc8x6l8ORSc6+1ORyJzKmZeIaRTu/WpaF/jx3vHvEn5XZUKF9XaVg2710mFmTAUlLcLYLPp/Zf/Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.25.0",
+        "@typescript-eslint/types": "5.30.4",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -10269,6 +10501,12 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
+    "confusing-browser-globals": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
@@ -10580,9 +10818,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
-      "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.19.0.tgz",
+      "integrity": "sha512-SXOPj3x9VKvPe81TjjUJCYlV4oJjQw68Uek+AM0X4p+33dj2HY5bpTZOgnQHcG2eAm1mtCU9uNMnJi7exU/kYw==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.3.0",
@@ -10633,6 +10871,29 @@
         }
       }
     },
+    "eslint-config-airbnb": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+      "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
+      "dev": true,
+      "requires": {
+        "eslint-config-airbnb-base": "^15.0.0",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5"
+      }
+    },
+    "eslint-config-airbnb-base": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+      "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+      "dev": true,
+      "requires": {
+        "confusing-browser-globals": "^1.0.10",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5",
+        "semver": "^6.3.0"
+      }
+    },
     "eslint-config-next": {
       "version": "12.1.6",
       "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
@@ -10756,29 +11017,30 @@
       }
     },
     "eslint-plugin-jsx-a11y": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
-      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.0.tgz",
+      "integrity": "sha512-kTeLuIzpNhXL2CwLlc8AHI0aFRwWHcg483yepO9VQiHzM9bZwJdzTkzBszbuPrbgGmq2rlX/FaT2fJQsjUSHsw==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.16.3",
+        "@babel/runtime": "^7.18.3",
         "aria-query": "^4.2.2",
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.5",
         "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.3.5",
+        "axe-core": "^4.4.2",
         "axobject-query": "^2.2.0",
-        "damerau-levenshtein": "^1.0.7",
+        "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
         "has": "^1.0.3",
-        "jsx-ast-utils": "^3.2.1",
+        "jsx-ast-utils": "^3.3.1",
         "language-tags": "^1.0.5",
-        "minimatch": "^3.0.4"
+        "minimatch": "^3.1.2",
+        "semver": "^6.3.0"
       }
     },
     "eslint-plugin-react": {
-      "version": "7.30.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
-      "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
+      "version": "7.30.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz",
+      "integrity": "sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.5",
@@ -10810,9 +11072,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
-      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
       "dev": true,
       "requires": {}
     },
@@ -11657,12 +11919,12 @@
       "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg=="
     },
     "jsx-ast-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
-      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.1.tgz",
+      "integrity": "sha512-pxrjmNpeRw5wwVeWyEAk7QJu2GnBO3uzPFmHCKJJFPKK2Cy0cWL23krGtLdnMmbIi6/FjlrQpPyfQI19ByPOhQ==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.5",
         "object.assign": "^4.1.2"
       }
     },
diff --git a/package.json b/package.json
index 2dbd0ad..7c10117 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,16 @@
     "@types/node": "18.0.0",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.4",
+    "@typescript-eslint/parser": "^5.30.4",
     "autoprefixer": "10.4.7",
-    "eslint": "8.18.0",
+    "eslint": "^8.19.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "12.1.6",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "8.4.14",
     "serve": "13.0.2",
     "tailwindcss": "3.1.4",
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index f73c4fb..0f03514 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -10,7 +10,7 @@ export const Layout: React.FC<LayoutProps> = ({
 }) => {
   return (
     <>
-      <Header/>
+      <Header />
       {children}
     </>
   )
diff --git a/src/components/layout/components/Header.tsx b/src/components/layout/components/Header.tsx
index d32f05d..9ed8f12 100644
--- a/src/components/layout/components/Header.tsx
+++ b/src/components/layout/components/Header.tsx
@@ -1,6 +1,6 @@
 export const Header = () => {
   return (
-    <header className={`fixed top-0 inset-x-0 h-16 z-10 bg-black/75 drop-shadow-2xl px-4 flex items-center justify-center md:justify-start`}>
+    <header className='fixed top-0 inset-x-0 h-16 z-10 bg-black/75 drop-shadow-2xl px-4 flex items-center justify-center md:justify-start'>
       <h1 className='text-2xl font-bold md:text-left'>DISPLACEMENT</h1>
     </header>
   )
diff --git a/src/components/pages/index/components/Canvas/Canvas.tsx b/src/components/pages/index/components/Canvas/Canvas.tsx
index f29f2cc..fd8d9cc 100644
--- a/src/components/pages/index/components/Canvas/Canvas.tsx
+++ b/src/components/pages/index/components/Canvas/Canvas.tsx
@@ -10,7 +10,7 @@ export const Canvas = () => {
 
     const width = DEFAULT_WIDTH
     const height = DEFAULT_HEIGHT
-    
+
     canvas.width = width
     canvas.height = height
   }, [canvasRef])
diff --git a/src/components/pages/index/components/Options/Options.tsx b/src/components/pages/index/components/Options/Options.tsx
index 3b4824f..08bde9c 100644
--- a/src/components/pages/index/components/Options/Options.tsx
+++ b/src/components/pages/index/components/Options/Options.tsx
@@ -23,7 +23,7 @@ export const Options = () => {
           state={backgroundBrightnessState}
         />
       </div>
-      <RenderAction/>
+      <RenderAction />
     </div>
   )
 }
diff --git a/src/components/pages/index/components/Options/components/Option.tsx b/src/components/pages/index/components/Options/components/Option.tsx
index 94d8f8b..b9a3e86 100644
--- a/src/components/pages/index/components/Options/components/Option.tsx
+++ b/src/components/pages/index/components/Options/components/Option.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import type { RecoilState } from 'recoil'
 import { useRecoilState } from 'recoil'
 import { Range } from '@/components/ui/Range'
diff --git a/src/components/pages/index/components/Options/components/RenderAction.tsx b/src/components/pages/index/components/Options/components/RenderAction.tsx
index 0c7e649..107480c 100644
--- a/src/components/pages/index/components/Options/components/RenderAction.tsx
+++ b/src/components/pages/index/components/Options/components/RenderAction.tsx
@@ -43,9 +43,9 @@ export const RenderAction = () => {
     if (!worker) {
       throw new Error('worker is not ready yet')
     }
-    
+
     setRenderInProgress(true)
-    
+
     const iterations = await snapshot.getPromise(iterationsState)
     const backgroundBrightness = await snapshot.getPromise(backgroundBrightnessState)
 
diff --git a/src/components/pages/index/index.tsx b/src/components/pages/index/index.tsx
index 4fff937..43fcfdc 100644
--- a/src/components/pages/index/index.tsx
+++ b/src/components/pages/index/index.tsx
@@ -6,8 +6,8 @@ import { Options } from './components/Options'
 export const Index: NextPage = () => {
   return (
     <LayoutDoubleSectioned
-      section1={<Canvas/>}  
-      section2={<Options/>}  
+      section1={<Canvas />}
+      section2={<Options />}
     />
   )
 }
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 233b79d..ed17a9c 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -7,6 +7,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   ...rest
 }, ref) => {
   return (
+    // eslint-disable-next-line react/button-has-type
     <button
       className='p-4 w-full bg-neutral-800/50 disabled:opacity-50 hover:bg-neutral-800/75 active:bg-neutral-800 transition-all outline outline-2 outline-transparent focus:outline-neutral-800 drop-shadow-xl'
       ref={ref}
diff --git a/src/components/ui/Range.tsx b/src/components/ui/Range.tsx
index 63177db..c416c1e 100644
--- a/src/components/ui/Range.tsx
+++ b/src/components/ui/Range.tsx
@@ -15,18 +15,17 @@ interface RangeProps extends Omit<
 export const Range = React.forwardRef<HTMLInputElement, RangeProps>(({
   min,
   max,
-  step = 1,
+  step,
   value,
   onValueChange,
   onChange,
   ...rest
 }, ref) => {
-
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const { value } = e.target
+    const { value: targetValue } = e.target
 
     if (onValueChange) {
-      onValueChange(Number(value))
+      onValueChange(Number(targetValue))
     }
 
     if (onChange) {
@@ -48,4 +47,9 @@ export const Range = React.forwardRef<HTMLInputElement, RangeProps>(({
   )
 })
 
+Range.defaultProps = {
+  step: 1,
+  onValueChange: undefined,
+}
+
 Range.displayName = 'Range'
diff --git a/src/context/CanvasContext.tsx b/src/context/CanvasContext.tsx
index afe8d9c..3586add 100644
--- a/src/context/CanvasContext.tsx
+++ b/src/context/CanvasContext.tsx
@@ -9,7 +9,7 @@ const defaultValue = React.createRef<HTMLCanvasElement>()
 export const CanvasContext = React.createContext<React.RefObject<HTMLCanvasElement>>(defaultValue)
 
 export const CanvasContextProvider: React.FC<CanvasContextProviderProps> = ({
-  children
+  children,
 }) => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
 
diff --git a/src/context/WASMContext.tsx b/src/context/WASMContext.tsx
index 5de86a3..41058fa 100644
--- a/src/context/WASMContext.tsx
+++ b/src/context/WASMContext.tsx
@@ -2,20 +2,20 @@ import React from 'react'
 import { WASMWorkerMessageType } from '../workers/wasm/types'
 import type { WASMWorker } from '../workers/wasm/types'
 
-type WASMContext = WASMWorker | null
+type IWASMContext = WASMWorker | null
 
 interface WASMContextProviderProps {
   children: React.ReactNode
 }
 
-const defaultValue: WASMContext = null
+const defaultValue: IWASMContext = null
 
-export const WASMContext = React.createContext<WASMContext>(defaultValue)
+export const WASMContext = React.createContext<IWASMContext>(defaultValue)
 
 export const WASMContextProvider: React.FC<WASMContextProviderProps> = ({
-  children
+  children,
 }) => {
-  const [context, setContext] = React.useState<WASMContext>(defaultValue)
+  const [context, setContext] = React.useState<IWASMContext>(defaultValue)
 
   React.useEffect(() => {
     const worker: WASMWorker = new Worker(new URL('../workers/wasm', import.meta.url))
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 7a9fa21..feb1856 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,4 +1,9 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from 'next/document'
 import { APP_DESCRIPTION, APP_NAME } from '../constants'
 
 const Document = () => {
@@ -12,9 +17,9 @@ const Document = () => {
         <meta name='apple-mobile-web-app-status-bar-style' content='default' />
         <meta name='apple-mobile-web-app-title' content={APP_NAME} />
         <meta name='description' content={APP_DESCRIPTION} />
-        <meta name="keywords" content="displacement, displacement maps, displacement generator, displacement maps generator" />
+        <meta name='keywords' content='displacement, displacement maps, displacement generator, displacement maps generator' />
         <meta name='theme-color' content='#000000' />
-        <link rel="icon" href="/favicon.ico" />
+        <link rel='icon' href='/favicon.ico' />
         <link rel='manifest' href='/manifest.json' crossOrigin='use-credentials' />
         {/* eslint-disable-next-line @next/next/google-font-display */}
         <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=block' />
diff --git a/src/utils/calcAspectRatio.ts b/src/utils/calcAspectRatio.ts
index 23ba84f..94e0cd6 100644
--- a/src/utils/calcAspectRatio.ts
+++ b/src/utils/calcAspectRatio.ts
@@ -1,4 +1,4 @@
 export const calcAspectRatio = (
   width: number,
-  height: number
+  height: number,
 ): number => width / height
diff --git a/src/utils/random.ts b/src/utils/random.ts
index f6679c3..781c135 100644
--- a/src/utils/random.ts
+++ b/src/utils/random.ts
@@ -1,5 +1,5 @@
 export const randomInt = (min: number, max: number): number => {
-  min = Math.ceil(min)
-  max = Math.floor(max)
+  min = Math.ceil(min) // eslint-disable-line no-param-reassign
+  max = Math.floor(max) // eslint-disable-line no-param-reassign
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
diff --git a/src/workers/wasm/worker.ts b/src/workers/wasm/worker.ts
index cc36e89..7a823d3 100644
--- a/src/workers/wasm/worker.ts
+++ b/src/workers/wasm/worker.ts
@@ -6,16 +6,16 @@ import type {
   WASMWorkerRenderCompletedMessage,
 } from './types'
 
-declare var self: IDedicatedWorkerGlobalScope<WASMWorkerMessage>
+declare const self: IDedicatedWorkerGlobalScope<WASMWorkerMessage>
 
-(async() => {
+(async () => {
   const wasm = await import('wasm/wasm_bg.wasm')
 
   const pointer = wasm.getBufferPointer()
-  const buffer = wasm.memory.buffer
+  const { buffer } = wasm.memory
 
   self.onmessage = (event) => {
-    switch(event.data.type) {
+    switch (event.data.type) {
       case WASMWorkerMessageType.render:
         const {
           width,
@@ -63,7 +63,7 @@ declare var self: IDedicatedWorkerGlobalScope<WASMWorkerMessage>
   }
 
   const readyMessage: WASMWorkerReadyMessage = {
-    type: WASMWorkerMessageType.ready
+    type: WASMWorkerMessageType.ready,
   }
 
   self.postMessage(readyMessage)