diff --git a/eslint.config.mjs b/eslint.config.mjs
index f90fef4..d8bb4db 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,7 +6,7 @@ import vueParser from 'vue-eslint-parser'
 export default tseslint.config(
   { ignores: ['**/node_modules', '**/dist', '**/out'] },
   tseslint.configs.recommended,
-  eslintPluginVue.configs['flat/recommended'],
+  eslintPluginVue.configs['essential'],
   {
     files: ['**/*.vue'],
     languageOptions: {
diff --git a/package-lock.json b/package-lock.json
index 5b28984..d17b239 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "auto-caption",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "auto-caption",
-      "version": "1.0.0",
+      "version": "0.0.1",
       "hasInstallScript": true,
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",
-        "@electron-toolkit/utils": "^4.0.0"
+        "@electron-toolkit/utils": "^4.0.0",
+        "pinia": "^3.0.2"
       },
       "devDependencies": {
         "@electron-toolkit/eslint-config-prettier": "3.0.0",
@@ -181,7 +182,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -191,7 +191,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
       "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -225,7 +224,6 @@
       "version": "7.27.2",
       "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.27.2.tgz",
       "integrity": "sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.27.1"
@@ -301,7 +299,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.27.1.tgz",
       "integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -1575,7 +1572,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -2479,7 +2475,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
       "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
@@ -2493,7 +2488,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
       "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.13",
@@ -2504,7 +2498,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
       "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
@@ -2522,7 +2515,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
       "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
@@ -2540,6 +2532,39 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.6.tgz",
+      "integrity": "sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.6"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.6.tgz",
+      "integrity": "sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.6",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.6.tgz",
+      "integrity": "sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "2.2.10",
       "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.10.tgz",
@@ -2585,7 +2610,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.13.tgz",
       "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.13"
@@ -2595,7 +2619,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
       "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.13",
@@ -2606,7 +2629,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
       "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.13",
@@ -2619,7 +2641,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
       "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.13",
@@ -2633,7 +2654,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.13.tgz",
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@xmldom/xmldom": {
@@ -3092,6 +3112,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/birpc": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.3.0.tgz",
+      "integrity": "sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/bl/-/bl-4.1.0.tgz",
@@ -3857,6 +3886,21 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -3950,7 +3994,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/de-indent": {
@@ -4574,7 +4617,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -4983,7 +5025,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -5812,6 +5853,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -6161,6 +6208,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
@@ -6527,7 +6586,6 @@
       "version": "0.30.17",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",
       "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -6885,6 +6943,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -6915,7 +6979,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7421,11 +7484,16 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "license": "MIT"
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -7441,6 +7509,27 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.2.tgz",
+      "integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkce-challenge": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
@@ -7470,7 +7559,6 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7839,6 +7927,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -8301,7 +8395,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -8318,6 +8411,15 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.1.3.tgz",
@@ -8451,6 +8553,18 @@
         "node": ">= 8.0"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.2.tgz",
+      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -8746,7 +8860,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -9025,7 +9139,6 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.13.tgz",
       "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
diff --git a/package.json b/package.json
index fe78d02..7c189f6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
-    "@electron-toolkit/utils": "^4.0.0"
+    "@electron-toolkit/utils": "^4.0.0",
+    "pinia": "^3.0.2"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "3.0.0",
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 2ef1ba2..a427fa0 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,7 +1,9 @@
 <template>
-  <h1>Auto Caption</h1>
+  <ViedoPlayer />
+  <Caption />
 </template>
 
 <script setup lang="ts">
-
+import ViedoPlayer from './components/VideoPlayer.vue'
+import Caption from './components/Caption.vue'
 </script>
diff --git a/src/renderer/src/assets/Template.vue b/src/renderer/src/assets/Template.vue
new file mode 100644
index 0000000..b802c0a
--- /dev/null
+++ b/src/renderer/src/assets/Template.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/assets/styles/reset.css b/src/renderer/src/assets/styles/reset.css
new file mode 100644
index 0000000..93152d2
--- /dev/null
+++ b/src/renderer/src/assets/styles/reset.css
@@ -0,0 +1,5 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: black;
+}
\ No newline at end of file
diff --git a/src/renderer/src/assets/video/example-ja.mp4 b/src/renderer/src/assets/video/example-ja.mp4
new file mode 100644
index 0000000..2d91f78
Binary files /dev/null and b/src/renderer/src/assets/video/example-ja.mp4 differ
diff --git a/src/renderer/src/components/Caption.vue b/src/renderer/src/components/Caption.vue
new file mode 100644
index 0000000..cd2375a
--- /dev/null
+++ b/src/renderer/src/components/Caption.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="video-caption"
+    v-if="captionContent"
+    ref="captionTarget"
+    :style="{
+      color: captionFontColor,
+      fontSize: captionFontSize + 'px',
+      fontFamily: captionFontFamily
+    }"
+  >
+    {{ captionContent }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useCaptionStore } from '../stores/caption'
+const captionContent = ref<String>("これは確か、ずっと前に人からもらって。")
+const {captionFontColor, captionFontFamily, captionFontSize} = storeToRefs(useCaptionStore())
+const captionTarget = ref()
+
+window.electron.ipcRenderer.on('new-caption', (_, data) => {
+  captionContent.value = data
+})
+</script>
+
+<style scoped>
+.video-caption {
+  color: white;
+  background-color: rgba(99, 99, 99, 0.4);
+  display: inline-block;
+  max-width: 80%;
+  padding: 10px;
+  font-size: 32px;
+  font-weight: bold;
+  border-radius: 10px;
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/Settings.vue b/src/renderer/src/components/Settings.vue
new file mode 100644
index 0000000..03ff0a6
--- /dev/null
+++ b/src/renderer/src/components/Settings.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="settings">
+      <input type="color" v-model="captionFontColor">
+      <input type="text" v-model="captionFontFamily">
+      <input type="number" v-model="captionFontSize">
+    </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useCaptionStore } from '../stores/caption'
+const {captionFontColor, captionFontFamily, captionFontSize} = storeToRefs(useCaptionStore())
+</script>
+
+<style scoped>
+.settings {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  background-color: black;
+  box-sizing: border-box;
+}
+input {
+  height: 30px;
+  margin: auto 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/VideoPlayer.vue b/src/renderer/src/components/VideoPlayer.vue
new file mode 100644
index 0000000..8c072c3
--- /dev/null
+++ b/src/renderer/src/components/VideoPlayer.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="video-player">
+    <video src="../assets/video/example-ja.mp4" controls></video>
+    <Settings />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Settings from './Settings.vue'
+</script>
+
+<style scoped>
+.video-player {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+video {
+  width: 100%;
+  height: calc(100vh - 50px);
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index 01433bc..d8c9746 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -1,4 +1,8 @@
+import './assets/styles/reset.css'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')
\ No newline at end of file
diff --git a/src/renderer/src/stores/caption.ts b/src/renderer/src/stores/caption.ts
new file mode 100644
index 0000000..3027019
--- /dev/null
+++ b/src/renderer/src/stores/caption.ts
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCaptionStore = defineStore('caption', () => {
+  const captionFontFamily = ref<string>('sans-serif')
+  const captionFontSize = ref<number>(24)
+  const captionFontColor = ref<string>('#ffffff')
+  return { captionFontFamily, captionFontSize, captionFontColor }
+})
\ No newline at end of file