diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 9875939..2561996 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -6,20 +6,23 @@
       "label": "install",
       "type": "shell",
       "command": "npm",
-      "args": ["install"]
+      "args": ["install"],
+      "problemMatcher": []
     },
     {
       "label": "update",
       "type": "shell",
       "command": "npm",
-      "args": ["update"]
+      "args": ["update"],
+      "problemMatcher": []
     },
     {
       "label": "build",
       "type": "shell",
       "group": "build",
       "command": "npm",
-      "args": ["run", "watch"]
+      "args": ["run", "watch"],
+      "problemMatcher": []
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
index 148c272..4f79c2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,9 +18,9 @@
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
         "copy-webpack-plugin": "^11.0.0",
-        "css-loader": "^6.7.2",
+        "css-loader": "^6.7.3",
         "prettier": "^2.8.1",
-        "sass": "^1.56.2",
+        "sass": "^1.57.0",
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
         "ts-loader": "^9.4.2",
@@ -188,9 +188,9 @@
       "dev": true
     },
     "node_modules/@types/har-format": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.9.tgz",
-      "integrity": "sha512-rffW6MhQ9yoa75bdNi+rjZBAvu2HhehWJXlhuWXnWdENeuKe82wUgAwxYOb7KRKKmxYN+D/iRKd2NDQMLqlUmg==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.10.tgz",
+      "integrity": "sha512-o0J30wqycjF5miWDKYKKzzOU1ZTLuA42HZ4HE7/zqTOc/jTLdQ5NhYWvsRQo45Nfi1KHoRdNhteSI4BAxTF1Pg==",
       "dev": true
     },
     "node_modules/@types/json-schema": {
@@ -200,9 +200,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "version": "18.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
+      "integrity": "sha512-6T7P5bDkRhqRxrQtwj7vru+bWTpelgtcETAZEUSdq0YISKz8WKdoBukQLYQQ6DFHvU9JRsbFq0JH5C51X2ZdnA==",
       "dev": true
     },
     "node_modules/@types/prop-types": {
@@ -526,9 +526,9 @@
       }
     },
     "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -594,9 +594,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001431",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
-      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
+      "version": "1.0.30001439",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz",
+      "integrity": "sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==",
       "dev": true,
       "funding": [
         {
@@ -756,13 +756,13 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz",
-      "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.18",
+        "postcss": "^8.4.19",
         "postcss-modules-extract-imports": "^3.0.0",
         "postcss-modules-local-by-default": "^4.0.0",
         "postcss-modules-scope": "^3.0.0",
@@ -818,9 +818,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
-      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -959,9 +959,9 @@
       }
     },
     "node_modules/fastq": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
-      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
       "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
@@ -992,6 +992,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -1017,9 +1031,9 @@
       "dev": true
     },
     "node_modules/globby": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
-      "integrity": "sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==",
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
+      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
       "dev": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
@@ -1075,9 +1089,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
+      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -1374,9 +1388,9 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
+      "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -1488,9 +1502,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
       "dev": true,
       "funding": [
         {
@@ -1571,9 +1585,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -1790,9 +1804,9 @@
       ]
     },
     "node_modules/sass": {
-      "version": "1.56.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
-      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.0.tgz",
+      "integrity": "sha512-IZNEJDTK1cF5B1cGA593TPAV/1S0ysUDxq9XHjX/+SMy0QfUny+nfUsq5ZP7wWSl4eEf7wDJcEZ8ABYFmh3m/w==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -2018,9 +2032,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
-      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
@@ -2559,9 +2573,9 @@
       "dev": true
     },
     "@types/har-format": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.9.tgz",
-      "integrity": "sha512-rffW6MhQ9yoa75bdNi+rjZBAvu2HhehWJXlhuWXnWdENeuKe82wUgAwxYOb7KRKKmxYN+D/iRKd2NDQMLqlUmg==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.10.tgz",
+      "integrity": "sha512-o0J30wqycjF5miWDKYKKzzOU1ZTLuA42HZ4HE7/zqTOc/jTLdQ5NhYWvsRQo45Nfi1KHoRdNhteSI4BAxTF1Pg==",
       "dev": true
     },
     "@types/json-schema": {
@@ -2571,9 +2585,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "version": "18.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
+      "integrity": "sha512-6T7P5bDkRhqRxrQtwj7vru+bWTpelgtcETAZEUSdq0YISKz8WKdoBukQLYQQ6DFHvU9JRsbFq0JH5C51X2ZdnA==",
       "dev": true
     },
     "@types/prop-types": {
@@ -2845,9 +2859,9 @@
       }
     },
     "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
@@ -2888,9 +2902,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001431",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
-      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
+      "version": "1.0.30001439",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz",
+      "integrity": "sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==",
       "dev": true
     },
     "chalk": {
@@ -3000,13 +3014,13 @@
       }
     },
     "css-loader": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz",
-      "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.18",
+        "postcss": "^8.4.19",
         "postcss-modules-extract-imports": "^3.0.0",
         "postcss-modules-local-by-default": "^4.0.0",
         "postcss-modules-scope": "^3.0.0",
@@ -3043,9 +3057,9 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
-      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -3152,9 +3166,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
-      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -3179,6 +3193,13 @@
         "path-exists": "^4.0.0"
       }
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -3201,9 +3222,9 @@
       "dev": true
     },
     "globby": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
-      "integrity": "sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==",
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
+      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
       "dev": true,
       "requires": {
         "dir-glob": "^3.0.1",
@@ -3242,9 +3263,9 @@
       "requires": {}
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
+      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true
     },
     "immutable": {
@@ -3462,9 +3483,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
+      "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==",
       "dev": true
     },
     "normalize-path": {
@@ -3543,9 +3564,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
@@ -3590,9 +3611,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
@@ -3721,9 +3742,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.56.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
-      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.0.tgz",
+      "integrity": "sha512-IZNEJDTK1cF5B1cGA593TPAV/1S0ysUDxq9XHjX/+SMy0QfUny+nfUsq5ZP7wWSl4eEf7wDJcEZ8ABYFmh3m/w==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -3860,9 +3881,9 @@
       "dev": true
     },
     "terser": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
-      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dev": true,
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
diff --git a/package.json b/package.json
index 61322ac..dd2abda 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,9 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
     "prettier": "^2.8.1",
-    "sass": "^1.56.2",
+    "sass": "^1.57.0",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
diff --git a/src/content_script/config.ts b/src/content_script/config.ts
index 6d5946c..e10e750 100644
--- a/src/content_script/config.ts
+++ b/src/content_script/config.ts
@@ -47,6 +47,26 @@ export const defaultConfigs: Array<config> = [
     value: true,
     type: "checkbox",
   },
+  {
+    key: "投稿者コメント",
+    value: false,
+    type: "checkbox",
+  },
+  {
+    key: "通常コメント",
+    value: true,
+    type: "checkbox",
+  },
+  {
+    key: "かんたんコメント",
+    value: false,
+    type: "checkbox",
+  },
+  {
+    key: "自動スクロールの実行間隔 (ミリ秒)",
+    value: 120,
+    type: "number",
+  },
 ];
 
 /**
@@ -59,18 +79,13 @@ export const getConfig = (
   callback: (value: string | number | boolean) => void
 ) => {
   chrome.storage.local.get([key]).then((result) => {
+    const defaultValue = defaultConfigs.find((item) => item.key === key)?.value;
     if (result[key] === undefined || null) {
-      console.log(
-        `${key} (${result[key]}) ${
-          defaultConfigs.find((item) => item.key === key)?.value
-        }`
-      );
+      console.log(`${key} (${result[key]}) ${defaultValue}`);
     } else {
       console.log(key, result[key]);
     }
-    callback(
-      result[key] ?? defaultConfigs.find((item) => item.key === key)?.value
-    );
+    callback(result[key] ?? defaultValue);
   });
 };
 
diff --git a/src/content_script/play/fire.ts b/src/content_script/play/fire.ts
index 3533dc6..04ff662 100644
--- a/src/content_script/play/fire.ts
+++ b/src/content_script/play/fire.ts
@@ -33,7 +33,9 @@ const fire = async (movieId: string, data: string) => {
    */
   const setD = (message: string, code: string | null) => {
     d.style.display = "block";
-    code ? (d.innerText = `${message}\n${code}`) : (d.innerHTML = `${message}`);
+    code
+      ? (d.innerText = `${message}\nエラーコード : ${code}`)
+      : (d.innerHTML = `${message}`);
     container.appendChild(b);
     return;
   };
@@ -60,7 +62,9 @@ const fire = async (movieId: string, data: string) => {
     } else {
       setD("コメントの取得に失敗しました。", null);
     }
-  } else {
+  }
+  // サーバーからコメントを取得するとき
+  else {
     // サーバーから動画情報を取得する
     chrome.runtime
       .sendMessage({
diff --git a/src/content_script/play/init.ts b/src/content_script/play/init.ts
index 4c2e3ec..945b9b4 100644
--- a/src/content_script/play/init.ts
+++ b/src/content_script/play/init.ts
@@ -84,7 +84,7 @@ const init = () => {
   b.textContent = "サイドバーを閉じる";
   b.setAttribute("type", "button");
   b.addEventListener("click", () => {
-    b.parentElement?.remove();
+    container.remove();
   });
 
   return { b, s, container, d, video };
diff --git a/src/content_script/play/play.ts b/src/content_script/play/play.ts
index 21ee539..82e3350 100644
--- a/src/content_script/play/play.ts
+++ b/src/content_script/play/play.ts
@@ -20,12 +20,38 @@ import * as Config from "../config";
 const status = {
   /** スクロールモードかどうか */
   isScrollMode: false,
-  /** 設定「スクロールモードを利用可能にする」の値 */
-  ScrollConfig: true,
   /** コメントコンテナ上にマウスカーソルがあるか */
   isMouseOver: false,
+  /** コメントリストのUlをスクール中か */
+  isUlScrolling: false,
   /** 作品再生時刻 */
   time: "",
+  /** ページのURL */
+  href: window.location.href,
+  /** ビューポートの高さ */
+  windowHeight: window.innerHeight,
+  /** コメント欄のスクロール必要量 */
+  scrollHeight: 0,
+  /** コメント欄のスクロール量 */
+  scrolledHeight: 0,
+};
+
+const configs = {
+  /** 設定「スクロールモードを利用可能にする」の値 */
+  ScrollConfig: true,
+  /** 設定「自動スクロールの実行間隔 (ミリ秒)」の値 */
+  autoScrollInterval: 600,
+  /** 投稿者コメントを表示するか */
+  ownerThread: false,
+  /** 通常コメントを表示するか */
+  mainThread: false,
+  /** かんたんコメントを表示するか */
+  easyThread: false,
+};
+
+const global = {
+  comments: [] as any,
+  lists: [] as HTMLElement[],
 };
 
 /**
@@ -51,27 +77,129 @@ const play = (
   chrome.storage.onChanged.addListener((changes, namespace) => {
     for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
       console.log(
-        `設定 ${key} (namespace "${namespace}" ) が更新されました`,
+        `設定 ${key} (${namespace}) が更新されました`,
         `\n更新前 : ${oldValue} | 更新後 : ${newValue}`
       );
       switch (key) {
         case "スクロールモードを利用可能にする":
-          status.ScrollConfig = newValue;
+          configs.ScrollConfig = newValue;
+          break;
+        case "自動スクロールの実行間隔 (ミリ秒)":
+          configs.autoScrollInterval = newValue;
           break;
         case "コメント欄の幅 (px)":
           container.style.width = String(newValue) + "px";
           break;
+        case "投稿者コメント": {
+          configs.ownerThread = newValue;
+          showComments();
+          break;
+        }
+        case "通常コメント": {
+          configs.mainThread = newValue;
+          showComments();
+          break;
+        }
+        case "かんたんコメント": {
+          configs.easyThread = newValue;
+          showComments();
+          break;
+        }
       }
     }
   });
+  window.addEventListener(
+    "resize",
+    () => {
+      status.windowHeight = window.innerHeight;
+    },
+    { passive: true }
+  );
+
+  /**
+   * ステータスに設定値を設定する
+   */
   Config.getConfig("スクロールモードを利用可能にする", (value) => {
-    status.ScrollConfig = value as boolean;
+    configs.ScrollConfig = value as boolean;
+  });
+  Config.getConfig("自動スクロールの実行間隔 (ミリ秒)", (value) => {
+    configs.autoScrollInterval = value as number;
+  });
+  Config.getConfig("投稿者コメント", (value) => {
+    configs.ownerThread = value as boolean;
+  });
+  Config.getConfig("通常コメント", (value) => {
+    configs.mainThread = value as boolean;
+  });
+  Config.getConfig("かんたんコメント", (value) => {
+    configs.easyThread = value as boolean;
+    showComments();
   });
 
+  /**
+   * コメントリストのUl
+   */
+  const ul = document.createElement("ul");
+  container.appendChild(ul);
+  ul.style.display = "none";
+  status.scrolledHeight = ul.scrollTop;
+  ul.addEventListener(
+    "scroll",
+    () => {
+      if (!status.isUlScrolling) {
+        status.isUlScrolling = true;
+        window.requestAnimationFrame(() => {
+          status.scrolledHeight = ul.scrollTop;
+          status.isUlScrolling = false;
+        });
+      }
+    },
+    { passive: true }
+  );
+  ul.addEventListener(
+    "mouseover",
+    () => {
+      status.isMouseOver = true;
+      checkIsScrollModeEnabled();
+    },
+    { passive: true }
+  );
+  ul.addEventListener(
+    "mouseleave",
+    () => {
+      status.isMouseOver = false;
+      checkIsScrollModeEnabled();
+    },
+    { passive: true }
+  );
+
+  /**
+   * スクロールモード
+   */
+  const checkIsScrollModeEnabled = () => {
+    if (configs.ScrollConfig === true) {
+      if (status.isMouseOver) {
+        status.isScrollMode = true;
+        s.innerText = "スクロールモード";
+        s.style.background = "#eb5528";
+        s.style.color = "#ffffff";
+      } else {
+        s.innerHTML = status.time;
+        status.isScrollMode = false;
+        s.style.background = "#000000cc";
+      }
+    } else {
+      status.isScrollMode = false;
+      s.innerHTML = status.time;
+      status.isScrollMode = false;
+      s.style.background = "#000000cc";
+    }
+  };
+
   /**
    * 再生時刻
    */
-  setTimeout(function main() {
+  const setCurrentTime = () => {
     if (!status.isScrollMode) {
       const hours = `${
         Math.floor(video.currentTime / 3600) > 0
@@ -89,11 +217,12 @@ const play = (
         s.innerHTML = status.time;
       }
     }
-    setTimeout(main, 120);
-  }, 120);
+    window.requestAnimationFrame(setCurrentTime);
+  };
+  window.requestAnimationFrame(setCurrentTime);
 
   /**
-   * 任意のスレッドのコメントを表示する
+   * 任意のスレッドのコメントを返す
    * @param fork コメントの fork
    * @returns コメント
    */
@@ -105,22 +234,42 @@ const play = (
       .map((thread: any) => {
         return thread;
       });
+    // main thread が二つある場合があり、この時 thread[1] を返す
     if (threads.length > 1) {
       return threads[1]["comments"];
     }
     return threads[0]["comments"];
   };
 
-  //const ownerThread = getThreadComments("owner");
-  const mainThread = getThreadComments("main");
-  //const easyThread = getThreadComments("easy");
+  /**
+   * 指定されたコメントを返す
+   * @param Callback
+   */
+  const getComments = async (callback: (comments: any) => any) => {
+    const a = async () => {
+      global.comments.length = 0;
+      configs.ownerThread && global.comments.push(getThreadComments("owner"));
+    };
+    const b = async () => {
+      configs.mainThread && global.comments.push(getThreadComments("main"));
+    };
+    const c = async () => {
+      configs.easyThread && global.comments.push(getThreadComments("easy"));
+    };
+    const d = async () => {
+      callback(global.comments.flat(1));
+    };
+    a()
+      .then(() => b())
+      .then(() => c())
+      .then(() => d());
+  };
 
   /**
    * コメントを再生時刻でソートする
    * @returns コメント
    */
-  const getComments = async () => {
-    const comments = mainThread;
+  const sortComments = async (comments) => {
     comments.filter((comment: { [x: string]: number }) => {
       return comment["score"] > 0;
     });
@@ -131,87 +280,51 @@ const play = (
   };
 
   /**
-   * コメントリストのUl
-   */
-  const ul = document.createElement("ul");
-  container.appendChild(ul);
-
-  /**
-   * スクロールモード
-   */
-  const checkIsScrollModeEnabled = () => {
-    if (status.ScrollConfig === true) {
-      if (status.isMouseOver) {
-        status.isScrollMode = true;
-        s.innerText = "スクロールモード";
-        s.style.background = "#eb5528";
-        s.style.color = "#ffffff";
-      } else {
-        s.innerHTML = status.time;
-        status.isScrollMode = false;
-        s.style.background = "#000000cc";
-      }
-    } else {
-      status.isScrollMode = false;
-      s.innerHTML = status.time;
-      status.isScrollMode = false;
-      s.style.background = "#000000cc";
-    }
-  };
-  ul.addEventListener("mouseover", () => {
-    status.isMouseOver = true;
-    checkIsScrollModeEnabled();
-  });
-  ul.addEventListener("mouseleave", () => {
-    status.isMouseOver = false;
-    checkIsScrollModeEnabled();
-  });
-
-  /**
-   * コメントを取得して表示する
+   * コメントリストを設置する
    */
-  getComments().then((comments) => {
-    d.innerText = "";
-    d.style.display = "none";
-    b.remove();
-
+  const setComments = (comments) => {
+    global.lists.length = 0;
     const contents = async (comments: any[]) => {
-      const lists = [] as HTMLElement[];
       comments.map((comment: { [x: string]: string; body: string }) => {
         const li = document.createElement("li");
         li.innerText = comment.body;
         li.setAttribute("data-time", comment["vposMs"]);
-        lists.push(li);
+        global.lists.push(li);
       });
-      return lists;
+      return global.lists;
     };
     contents(comments).then((lists) => {
       const df = document.createDocumentFragment();
       lists.map((list) => {
         df.appendChild(list);
       });
+      while (ul.firstChild) {
+        ul.removeChild(ul.firstChild);
+      }
       ul.appendChild(df);
     });
+  };
 
-    /*
-    URLの変更を監視する
-    URLが変更されたら作品パートが変更されたと判断し、コメントの再読み込みを促す
-    */
-    let href = new Object();
-    href = window.location.href;
-    setInterval(() => {
-      if (href !== location.href) {
-        ul.remove();
-        d.style.display = "block";
-        d.innerText =
-          "作品パートが変更されました。\nコメントを再取得してください。";
-        container.appendChild(b);
-        href = location.href;
-      }
-    }, 1000);
+  /**
+   * URLの変更を監視する
+   * URLが変更されたら作品パートが変更されたと判断し、コメントの再読み込みを促す
+   */
+  const checkLocationNow = () => {
+    if (status.href !== location.href) {
+      ul.remove();
+      d.style.display = "block";
+      d.innerText =
+        "作品パートが変更されました。\nコメントを再取得してください。";
+      container.appendChild(b);
+      status.href = location.href;
+    }
+    window.requestAnimationFrame(checkLocationNow);
+  };
+  window.requestAnimationFrame(checkLocationNow);
 
-    // コメントを再生時刻に合わせてスクロールする
-    setTimeout(function main() {
+  /** コメントを再生時刻に合わせてスクロールする */
+  const scroll = (callBack) => {
+    if ((Math.round(callBack / 10) * 10) % configs.autoScrollInterval === 0) {
       const currentTime = Math.round(video.currentTime * 1000);
       const li = ul.querySelectorAll(
         "li[data-time]"
@@ -228,20 +341,12 @@ const play = (
       const target =
         (list[li.length - 1] as HTMLElement) ?? (list[0] as HTMLElement);
       if (target && !status.isScrollMode) {
-        const scrollHeight = target.offsetTop - ul.offsetHeight;
+        status.scrollHeight = target.offsetTop - ul.offsetHeight;
 
-        let windowHeight = window.innerHeight;
-        window.addEventListener("resize", () => {
-          windowHeight = window.innerHeight;
-        });
-
-        let scrolledHeight = ul.scrollTop;
-        ul.addEventListener("scroll", () => {
-          scrolledHeight = ul.scrollTop;
-        });
-
-        const scrollLength = Math.abs(scrollHeight - scrolledHeight);
-        if (windowHeight / 2 - scrollLength > 0) {
+        const scrollLength = Math.abs(
+          status.scrollHeight - status.scrolledHeight
+        );
+        if (status.windowHeight / 2 - scrollLength > 0) {
           target.scrollIntoView({
             behavior: "smooth",
             block: "end",
@@ -249,14 +354,39 @@ const play = (
           });
         } else {
           ul.scroll({
-            top: scrollHeight,
+            top: status.scrollHeight,
             behavior: "instant" as ScrollBehavior,
           });
         }
       }
-      setTimeout(main, 100);
-    }, 100);
-  });
+    }
+    window.requestAnimationFrame(scroll);
+  };
+
+  /**
+   * コメントリストを表示する
+   */
+  const showComments = () => {
+    getComments((comments) => {
+      if (comments.length > 0) {
+        sortComments(comments).then((comments) => {
+          setComments(comments);
+          d.innerText = "";
+          d.style.display = "none";
+          b.remove();
+          ul.style.display = "block";
+          window.requestAnimationFrame(scroll);
+        });
+      } else {
+        d.style.display = "block";
+        d.innerText = "表示できるコメントはありません。";
+        while (ul.firstChild) {
+          ul.removeChild(ul.firstChild);
+        }
+        ul.style.display = "none";
+      }
+    });
+  };
 };
 
 export default play;
diff --git a/src/content_script/play/style.ts b/src/content_script/play/style.ts
index 7b85d61..f259bcf 100644
--- a/src/content_script/play/style.ts
+++ b/src/content_script/play/style.ts
@@ -45,6 +45,7 @@ style.innerHTML = `
               display:none;
             }
             #d-comments-container #d-comments-status {
+              border-bottom:0.1px solid #484848;
               text-align:center;
               padding:4px;
             }
@@ -63,7 +64,6 @@ style.innerHTML = `
               cursor:pointer;
             }
             #d-comments-container ul {
-              border-top:0.1px solid #484848;
               margin-block-start:0px;
               margin-block-end:0px;
               padding-inline-start:0px;
diff --git a/src/options/editor.tsx b/src/options/editor.tsx
index fb1257d..b0f877c 100644
--- a/src/options/editor.tsx
+++ b/src/options/editor.tsx
@@ -24,8 +24,9 @@ type Editor = {
 };
 const Editor = (props: Editor) => {
   const { p, o } = props;
-  const type = o.find((i) => i.key === p)?.type;
-  const value = o.find((i) => i.key === p)?.value;
+  const v = o.find((i) => i.key === p);
+  const type = v?.type;
+  const value = v?.value;
 
   return (
     <div className="editor" key={p}>
diff --git a/src/options/options.tsx b/src/options/options.tsx
index 5746455..b514dc0 100644
--- a/src/options/options.tsx
+++ b/src/options/options.tsx
@@ -95,6 +95,11 @@ const Options = () => {
             o={options}
             update={onChange}
           />
+          <Editor
+            p="自動スクロールの実行間隔 (ミリ秒)"
+            o={options}
+            update={onChange}
+          />
           <h2>作品ページ</h2>
           <Editor
             p="作品ページに「コメントを表示しながら再生」ボタンを追加する"
@@ -106,6 +111,10 @@ const Options = () => {
             o={options}
             update={onChange}
           />
+          <h2>コメントの種類</h2>
+          <Editor p="投稿者コメント" o={options} update={onChange} />
+          <Editor p="通常コメント" o={options} update={onChange} />
+          <Editor p="かんたんコメント" o={options} update={onChange} />
         </div>
       </main>
       <footer>