diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache
new file mode 100644
index 0000000..d0076ff
--- /dev/null
+++ b/.firebase/hosting.cHVibGlj.cache
@@ -0,0 +1,2 @@
+index.html,1639197671433,cb28bcedfa5298c2ddee09c62c272657328775ae951e372209d166f505c798ad
+favicon.ico,1639122716339,682d6968805db4fd6e11e95e9dc02ab78ae1a5e4cbb7d73cd9c2a192e839ceae
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..bdac102
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "jm-expense"
+  }
+}
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 0000000..b9bd1f7
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,26 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run build
+
+# navigate into the build output directory
+cd dist
+
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f https://github.com/<USERNAME>/<USERNAME>.GitHub.io.git master
+
+# if you are deploying to https://<USERNAME>.Github.io/<REPO>
+# git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
+git push -f https://github.com/KarolChang/jm-expense-vue-ts.git master:gh-pages
+
+cd -
\ No newline at end of file
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..6564edd
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,12 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index a135d84..5414574 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,12 @@
       "name": "jm-expense-vue-ts",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.24.0",
+        "bootstrap": "^5.1.3",
         "core-js": "^3.6.5",
+        "dotenv": "^10.0.0",
+        "pinia": "^2.0.6",
+        "sweetalert2": "^11.3.0",
         "vue": "^3.0.0",
         "vue-class-component": "^8.0.0-0",
         "vue-router": "^4.0.0-0"
@@ -1749,6 +1754,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -2970,6 +2985,15 @@
         }
       }
     },
+    "node_modules/@vue/cli-service/node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@vue/cli-shared-utils": {
       "version": "4.5.15",
       "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.15.tgz",
@@ -3840,6 +3864,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4197,6 +4229,18 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6410,10 +6454,9 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true,
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
       "engines": {
         "node": ">=10"
       }
@@ -7639,7 +7682,6 @@
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
       "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -11476,6 +11518,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.6.tgz",
+      "integrity": "sha512-01mP4+KapIcTNSYLhQESy6GW0N8vY5wX3UqOwkC87e7DPjEusNJ8bENrKqdvZaRHbB2rDMOONeAbwMa3+n1/rw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.20.1",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -14184,6 +14276,14 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
+      "integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow==",
+      "funding": {
+        "url": "https://sweetalert2.github.io/#donations"
+      }
+    },
     "node_modules/table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -14855,7 +14955,7 @@
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
       "integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17840,6 +17940,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -18699,7 +18805,8 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -18763,6 +18870,14 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+          "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+          "dev": true
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -18925,7 +19040,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/reactivity": {
       "version": "3.2.24",
@@ -19193,7 +19309,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -19223,13 +19340,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -19496,6 +19615,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -19788,6 +19915,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -21573,10 +21706,9 @@
       }
     },
     "dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -22567,8 +22699,7 @@
     "follow-redirects": {
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true
+      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -25566,6 +25697,23 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.6.tgz",
+      "integrity": "sha512-01mP4+KapIcTNSYLhQESy6GW0N8vY5wX3UqOwkC87e7DPjEusNJ8bENrKqdvZaRHbB2rDMOONeAbwMa3+n1/rw==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.20.1",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+          "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+          "requires": {}
+        }
+      }
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -27847,6 +27995,11 @@
         }
       }
     },
+    "sweetalert2": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
+      "integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -28369,7 +28522,7 @@
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
       "integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
-      "dev": true
+      "devOptional": true
     },
     "uglify-js": {
       "version": "3.4.10",
@@ -28734,7 +28887,8 @@
     "vue-class-component": {
       "version": "8.0.0-rc.1",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-      "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ=="
+      "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
+      "requires": {}
     },
     "vue-eslint-parser": {
       "version": "7.11.0",
diff --git a/package.json b/package.json
index ca70bd4..c8d3dfd 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
     "core-js": "^3.6.5",
+    "dotenv": "^10.0.0",
+    "pinia": "^2.0.6",
+    "sweetalert2": "^11.3.0",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0"
@@ -41,7 +46,13 @@
     "parserOptions": {
       "parser": "@typescript-eslint/parser"
     },
-    "rules": {}
+    "rules": {},
+    "globals": {
+      "defineProps": "readonly",
+      "defineEmits": "readonly",
+      "defineExpose": "readonly",
+      "withDefaults": "readonly"
+    }
   },
   "browserslist": [
     "> 1%",
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..a58cfec
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://kit.fontawesome.com/ccfd93e9a7.js" crossorigin="anonymous"></script>
+    <script>
+      sessionStorage.redirect = location.href;
+    </script>
+    <meta http-equiv="refresh" content="0;URL='/jm-expense-vue-ts'"></meta>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
+        enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..5aa2159 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 3e5a139..8bebdba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,29 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://kit.fontawesome.com/ccfd93e9a7.js" crossorigin="anonymous"></script>
   </head>
   <body>
+    <script>
+      ;(function () {
+        let redirect = sessionStorage.redirect
+        delete sessionStorage.redirect
+        if (redirect && redirect !== location.href) {
+          history.replaceState(null, null, redirect)
+        }
+      })()
+    </script>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
+        enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index b964355..46398b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,82 @@
+<script setup lang="ts">
+import Navbar from './components/Navbar.vue'
+// import { useStore } from './store/index'
+// const store = useStore()
+// const getRecords = store.fetchRecords
+// getRecords()
+</script>
+
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+  <div>
+    <Navbar>
+      <template #main>
+        <router-view v-slot="{ Component }">
+          <transition name="fade-fast" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </template>
+    </Navbar>
   </div>
-  <router-view/>
 </template>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
+
+body {
+  background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20190222/ourmid/pngtree-minimalistic-cat-claws-seamless-background-design-backgroundpinkcat-clawseamless-backgroundbanner-image_57663.jpg');
+}
+
+/* .is-primary {
+  color: hsl(150, 50%, 50%);
+} */
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  font-family: 'Zen Maru Gothic', sans-serif;
 }
 
-#nav {
-  padding: 30px;
+/* transition */
+.slide-x-enter-active {
+  transition: transform 0.3s ease-out;
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
+.slide-x-leave-active {
+  transition: transform 0.2s ease-in;
 }
 
-#nav a.router-link-exact-active {
-  color: #42b983;
+.slide-x-enter-from {
+  transform: translateX(-100%);
+}
+.slide-x-enter-to {
+  transform: translateX(0);
+}
+
+.slide-x-leave-from {
+  transform: translateX(0);
+}
+.slide-x-leave-to {
+  transform: translateX(-100%);
+}
+
+.fade-fast-enter-active,
+.fade-fast-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-fast-enter-from,
+.fade-fast-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-fast-enter-active,
+  .fade-fast-leave-active {
+    transition: none;
+  }
 }
 </style>
diff --git a/src/apis/expense.ts b/src/apis/expense.ts
new file mode 100644
index 0000000..3abc647
--- /dev/null
+++ b/src/apis/expense.ts
@@ -0,0 +1,27 @@
+import { apiHelper } from './helper'
+import { RecordInput } from '../models/Record'
+import { MessageInput } from '../models/LineBot'
+
+export default {
+  getAll() {
+    return apiHelper.get('/record/all')
+  },
+  getOne(id: number) {
+    return apiHelper.get(`/record/${id}`)
+  },
+  create(data: RecordInput) {
+    return apiHelper.post('/record/create', data)
+  },
+  edit(id: number, data: RecordInput) {
+    return apiHelper.put(`/record/edit/${id}`, data)
+  },
+  close(data: { records: string; totalAmount: number; recorder: string }) {
+    return apiHelper.put('/close', data)
+  },
+  getLogs() {
+    return apiHelper.get('/log/all')
+  },
+  pushLineMsg(data: { to: string[]; messages: MessageInput[] }) {
+    return apiHelper.post('/lineBot/push', data)
+  }
+}
diff --git a/src/apis/helper.ts b/src/apis/helper.ts
new file mode 100644
index 0000000..a8b6ee5
--- /dev/null
+++ b/src/apis/helper.ts
@@ -0,0 +1,6 @@
+import axios from 'axios'
+
+const baseURL = 'http://jm-expense-mysql.herokuapp.com'
+export const apiHelper = axios.create({
+  baseURL
+})
diff --git a/src/assets/capoo.gif b/src/assets/capoo.gif
new file mode 100644
index 0000000..85bbd31
Binary files /dev/null and b/src/assets/capoo.gif differ
diff --git a/src/assets/jianmiau-login.png b/src/assets/jianmiau-login.png
new file mode 100644
index 0000000..6eaf3d7
Binary files /dev/null and b/src/assets/jianmiau-login.png differ
diff --git a/src/assets/jianmiau.jpeg b/src/assets/jianmiau.jpeg
new file mode 100644
index 0000000..5aa2159
Binary files /dev/null and b/src/assets/jianmiau.jpeg differ
diff --git a/src/assets/karol-login.png b/src/assets/karol-login.png
new file mode 100644
index 0000000..976f68d
Binary files /dev/null and b/src/assets/karol-login.png differ
diff --git a/src/assets/karol.png b/src/assets/karol.png
new file mode 100644
index 0000000..1ca82d6
Binary files /dev/null and b/src/assets/karol.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index c7d2103..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..92ffe1e
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Sidebar from './Sidebar.vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const sidebarOpen = ref(false)
+</script>
+
+<template>
+  <div class="d-flex">
+    <transition name="slide-x">
+      <Sidebar v-show="sidebarOpen" @open="sidebarOpen = false" />
+    </transition>
+
+    <div class="m-2" style="width: 100vw">
+      <div class="d-flex">
+        <i class="fas fa-bars fa-2x" @click="sidebarOpen = !sidebarOpen"></i>
+        <h4 class="ms-3">{{ route.meta.pageTitle }}</h4>
+      </div>
+      <div class="m-3">
+        <slot name="main" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..6f7cf5f
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { routes } from '../router/index'
+import { useRoute, RouteRecordRaw } from 'vue-router'
+import { useStore } from '../store/index'
+import Swal from 'sweetalert2'
+import { ConfirmBox } from '../utils/swal'
+const route = useRoute()
+const store = useStore()
+const getUser = store.switchUser
+const emit = defineEmits(['open'])
+
+const items = computed(() => {
+  return routes.filter((route: RouteRecordRaw) => route.meta?.show)
+})
+
+const changeItem = () => {
+  emit('open', false)
+}
+
+const switchModalOpen = async () => {
+  const { value: user } = await ConfirmBox.fire({
+    title: '切換使用者',
+    input: 'select',
+    inputOptions: { 建喵: '建喵', 豬涵: '豬涵' },
+    inputPlaceholder: 'who are you?',
+    showCancelButton: true
+  })
+  if (user) {
+    getUser(user)
+    Swal.fire(`使用者已切換至 [${user}]`)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 180px; height: 100vh">
+      <router-link
+        :to="{ name: 'Home' }"
+        class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"
+      >
+        <span class="fs-4"><i class="fas fa-star"></i> JM記帳 <i class="fas fa-star"></i></span>
+      </router-link>
+      <hr />
+      <ul class="nav nav-pills flex-column mb-auto">
+        <li class="nav-item" v-for="(item, index) in items" :key="index">
+          <router-link
+            :to="{ name: item.name }"
+            :class="'nav-link ' + (item.name === route.name ? 'text-info' : 'text-white')"
+            @click="changeItem"
+            >{{ item.meta?.pageTitle }}</router-link
+          >
+        </li>
+      </ul>
+      <hr />
+      <div class="dropdown">
+        <a
+          href="#"
+          class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
+          id="dropdownUser1"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          <img
+            v-if="store.currentUser === '建喵'"
+            src="../assets/jianmiau-login.png"
+            alt=""
+            width="50"
+            height="55"
+            class="rounded-circle me-2"
+          />
+          <img
+            v-else-if="store.currentUser === '豬涵'"
+            src="../assets/karol-login.png"
+            alt=""
+            width="50"
+            height="55"
+            class="rounded-circle me-2"
+          />
+          <img v-else src="../assets/capoo.gif" alt="" width="50" height="55" class="rounded-circle me-2" />
+          <strong>{{ store.currentUser ? store.currentUser : '未登入' }}</strong>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
+          <!-- <li><a class="dropdown-item" href="#">New project...</a></li>
+          <li><a class="dropdown-item" href="#">Settings</a></li>
+          <li><a class="dropdown-item" href="#">Profile</a></li> -->
+          <!-- <li><hr class="dropdown-divider" /></li> -->
+          <li><a class="dropdown-item" @click="switchModalOpen">切換帳號</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
new file mode 100644
index 0000000..7b2a3bf
--- /dev/null
+++ b/src/components/Spinner.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="spinner">
+    <div class="bouncing-loader">
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.spinner {
+  padding-top: 100px;
+}
+
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.bouncing-loader > div {
+  width: 1rem;
+  height: 1rem;
+  margin: 3rem 0.2rem;
+  background: #921aff;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+
+.bouncing-loader > div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.bouncing-loader > div:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes bouncing-loader {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translateY(-1rem);
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 3e79677..b06afe1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
 
-createApp(App).use(router).mount('#app')
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+createApp(App).use(router).use(createPinia()).mount('#app')
diff --git a/src/models/LineBot.ts b/src/models/LineBot.ts
new file mode 100644
index 0000000..6e59303
--- /dev/null
+++ b/src/models/LineBot.ts
@@ -0,0 +1,11 @@
+export interface MessageInput {
+  type: string
+  // text
+  text?: string
+  // sticker
+  packageId?: string
+  stickerId?: string
+  // image or video
+  originalContentUrl?: string
+  previewImageUrl?: string
+}
diff --git a/src/models/Log.ts b/src/models/Log.ts
new file mode 100644
index 0000000..0d17f1b
--- /dev/null
+++ b/src/models/Log.ts
@@ -0,0 +1,21 @@
+export type RecorderType = '建喵' | '豬涵'
+
+export type ActionType = '新增' | '編輯' | '結算'
+
+export class Log {
+  recorder!: RecorderType
+  action!: ActionType
+  item?: string
+  merchant?: string
+  amount?: number
+  date?: Date
+  itemBefore?: string
+  merchantBefore?: string
+  amountBefore?: number
+  dateBefore?: Date
+  closeAmount?: number
+  RecordId?: number
+  RecordIds?: string
+  createdAt!: Date
+  updatedAt!: Date
+}
diff --git a/src/models/Record.ts b/src/models/Record.ts
new file mode 100644
index 0000000..f1659c3
--- /dev/null
+++ b/src/models/Record.ts
@@ -0,0 +1,23 @@
+export type RecorderType = '建喵' | '豬涵'
+
+export class Record {
+  id!: number
+  date!: Date
+  item?: string
+  merchant?: string
+  amount!: number
+  recorder?: RecorderType
+  isClosed?: boolean
+  deletedAt?: Date | null
+  createdAt!: Date
+  updatedAt!: Date
+}
+
+export class RecordInput {
+  date!: Date
+  item!: string
+  merchant!: string
+  amount!: string
+  recorder?: RecorderType
+  editor?: RecorderType
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index b6ccb1b..f9f7053 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,16 +1,51 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue'
+const root = '/jm-expense-vue-ts'
 
-const routes: RouteRecordRaw[] = [
+export const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    redirect: `${root}/`
   },
   {
-    path: '/about',
-    name: 'About',
-    component: () => import('../views/About.vue')
+    path: `${root}/`,
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+    meta: {
+      pageTitle: '首頁',
+      show: true
+    }
+  },
+  {
+    path: `${root}/record`,
+    name: 'Record',
+    component: () => import('../views/Record.vue'),
+    meta: {
+      pageTitle: '未結算紀錄',
+      show: true
+    }
+  },
+  {
+    path: `${root}/closedRecord`,
+    name: 'ClosedRecord',
+    component: () => import('../views/ClosedRecord.vue'),
+    meta: {
+      pageTitle: '已結算紀錄',
+      show: true
+    }
+  },
+  {
+    path: `${root}/logs`,
+    name: 'Logs',
+    component: () => import('../views/Logs.vue'),
+    meta: {
+      pageTitle: '更動紀錄',
+      show: true
+    }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('../views/NotFound.vue')
   }
 ]
 
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..29f80b6
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useStore = defineStore('index', {
+  state: () => ({
+    currentUser: localStorage.getItem('jm-user')
+  }),
+  // getter: {}
+  actions: {
+    switchUser(user: string) {
+      localStorage.setItem('jm-user', user)
+      this.currentUser = user
+    }
+  }
+})
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
new file mode 100644
index 0000000..31e5772
--- /dev/null
+++ b/src/utils/helper.ts
@@ -0,0 +1,18 @@
+export const showWeekDay = (date: Date) => {
+  switch (new Date(date).getDay()) {
+    case 1:
+      return '一'
+    case 2:
+      return '二'
+    case 3:
+      return '三'
+    case 4:
+      return '四'
+    case 5:
+      return '五'
+    case 6:
+      return '六'
+    case 0:
+      return '日'
+  }
+}
diff --git a/src/utils/swal.ts b/src/utils/swal.ts
new file mode 100644
index 0000000..baf1d07
--- /dev/null
+++ b/src/utils/swal.ts
@@ -0,0 +1,13 @@
+import Swal from 'sweetalert2'
+
+export const Toast = Swal.mixin({
+  toast: true,
+  position: 'bottom-end',
+  showConfirmButton: false,
+  timer: 3000 // toast 停留多久
+})
+
+export const ConfirmBox = Swal.mixin({
+  showConfirmButton: true,
+  showCancelButton: true
+})
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/ClosedRecord.vue b/src/views/ClosedRecord.vue
new file mode 100644
index 0000000..e69d6de
--- /dev/null
+++ b/src/views/ClosedRecord.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import recordAPI from '../apis/expense'
+import { Record } from '../models/Record'
+import { showWeekDay } from '../utils/helper'
+import Spinner from '../components/Spinner.vue'
+type SearchMode = '月份' | '日期'
+
+// data
+const isLoading = ref<boolean>(true)
+const records = ref<Record[]>([])
+const searchMode = ref<SearchMode>('月份')
+const year = ref(new Date().getFullYear())
+const month = ref(new Date().getMonth() + 1)
+const startDate = ref<Date | string>('')
+const finishDate = ref<Date | string>('')
+
+// methods
+const fetchRecords = async function () {
+  try {
+    const { data } = await recordAPI.getAll()
+    records.value = data.filter((item: Record) => item.isClosed === true)
+    isLoading.value = false
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+const radioClick = (radio: SearchMode) => {
+  searchMode.value = radio
+}
+
+// computed
+const filteredRecord = computed(() => {
+  if (searchMode.value === '月份') {
+    return records.value?.filter(
+      (item: Record) =>
+        new Date(item.date).getFullYear() === year.value && new Date(item.date).getMonth() + 1 === month.value
+    )
+  } else {
+    if (!startDate.value && !finishDate.value) return []
+    if (startDate.value && !finishDate.value) {
+      return records.value?.filter(
+        (item: Record) => new Date(item.date).getTime() >= new Date(startDate.value).getTime()
+      )
+    } else if (!startDate.value && finishDate.value) {
+      return records.value?.filter(
+        (item: Record) => new Date(item.date).getTime() <= new Date(finishDate.value + ' 23:59:59').getTime()
+      )
+    } else {
+      return records.value?.filter(
+        (item: Record) =>
+          new Date(item.date).getTime() >= new Date(startDate.value).getTime() &&
+          new Date(item.date).getTime() <= new Date(finishDate.value + ' 23:59:59').getTime()
+      )
+    }
+  }
+})
+
+// created
+fetchRecords()
+</script>
+<template>
+  <div v-if="!isLoading">
+    <div class="d-flex mb-4">
+      <div class="m-2 me-5">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="flexRadioDefault"
+            id="flexRadioDefault1"
+            @click="radioClick('月份')"
+            checked
+          />
+          <label class="form-check-label" for="flexRadioDefault1">月份搜尋</label>
+        </div>
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="flexRadioDefault"
+            id="flexRadioDefault2"
+            @click="radioClick('日期')"
+          />
+          <label class="form-check-label" for="flexRadioDefault2">日期搜尋</label>
+        </div>
+      </div>
+      <template v-if="searchMode === '月份'">
+        <div>
+          <label for="year" class="form-label">西元年</label>
+          <select class="form-select" aria-label="Default select example" v-model="year">
+            <option v-for="n in 100" :key="n" :value="n + 2020">{{ n + 2020 }}年</option>
+          </select>
+        </div>
+        <div class="ms-3">
+          <label for="finishDate" class="form-label">月份</label>
+          <select class="form-select" aria-label="Default select example" v-model="month">
+            <option v-for="n in 12" :key="n" :value="n">{{ n }}月</option>
+          </select>
+        </div>
+      </template>
+      <template v-else>
+        <div>
+          <label for="startDate" class="form-label">開始日期</label>
+          <input
+            v-model="startDate"
+            type="date"
+            id="startDate"
+            class="form-control"
+            aria-describedby="passwordHelpInline"
+          />
+        </div>
+        <div class="ms-3">
+          <label for="finishDate" class="form-label">結束日期</label>
+          <input
+            v-model="finishDate"
+            type="date"
+            id="finishDate"
+            class="form-control"
+            aria-describedby="passwordHelpInline"
+          />
+        </div>
+      </template>
+    </div>
+    <table class="table table-striped table-info table-hover" v-if="filteredRecord.length">
+      <thead>
+        <tr>
+          <th scope="col">項目</th>
+          <th scope="col">商家</th>
+          <th scope="col">金額</th>
+          <th scope="col">日期</th>
+          <th scope="col" id="column-item">首次記錄者</th>
+          <th scope="col" id="column-item">首次記錄時間</th>
+          <th scope="col" id="column-item">更新時間</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(record, index) in filteredRecord" :key="index">
+          <td>
+            {{ record.item }}
+          </td>
+          <td>
+            {{ record.merchant }}
+          </td>
+          <td>
+            {{ record.amount }}
+          </td>
+          <td>
+            {{ new Date(record.date).toLocaleDateString() + ` (${showWeekDay(record.date)})` }}
+          </td>
+          <td id="column-item">
+            {{ record.recorder }}
+          </td>
+          <td id="column-item">{{ new Date(record.createdAt).toLocaleString() }}</td>
+          <td id="column-item">{{ new Date(record.updatedAt).toLocaleString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <img
+      v-else
+      class="img-fluid"
+      src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
+      alt=""
+    />
+  </div>
+  <Spinner v-else />
+</template>
+
+<style scoped>
+th,
+td {
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 400px) {
+  #column-item {
+    display: none;
+  }
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8bd6c57..e95802d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,137 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import recordAPI from '../apis/expense'
+// import lineBotAPI from '../apis/lineBot'
+import { Record } from '../models/Record'
+import Spinner from '../components/Spinner.vue'
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+class MonthData {
+  total!: number
+  closedAmount!: number
+  rate!: number
+}
 
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
+const isLoading = ref<boolean>(true)
+const records = ref<Record[]>([])
+const thisMonthData = ref<MonthData>(new MonthData())
+const lastMonthData = ref<MonthData>(new MonthData())
+
+// methods
+const fetchRecords = async function () {
+  try {
+    const { data } = await recordAPI.getAll()
+    records.value = data
+    // monthData
+    const nowYear = new Date().getFullYear()
+    const nowMonth = new Date().getMonth() + 1
+    thisMonthData.value = calculateMonthData(nowYear, nowMonth)
+    lastMonthData.value = calculateMonthData(
+      nowMonth - 1 === 0 ? nowYear - 1 : nowYear,
+      nowMonth - 1 === 0 ? 12 : nowMonth - 1
+    )
+    isLoading.value = false
+  } catch (error) {
+    console.error('error', error)
   }
 }
+
+// simple function
+const calculateMonthData = (year: number, month: number) => {
+  const recordsArr = records.value?.filter(
+    (record) => new Date(record.date).getFullYear() === year && new Date(record.date).getMonth() + 1 === month
+  )
+  let total = 0
+  let closedAmount = 0
+  for (let record of recordsArr) {
+    total += record.amount
+    if (record.isClosed === true) {
+      closedAmount += record.amount
+    }
+  }
+  let rate
+  if (total === 0) {
+    rate = 0
+  } else {
+    rate = Math.round(closedAmount / total) * 100
+  }
+  return {
+    total,
+    closedAmount,
+    rate
+  }
+}
+
+// test
+// const btnClick = async function () {
+//   try {
+//     const input = { message: 'HELLO', userId: 'Ub3557f7c812e4e78293959fe4fccd414' }
+//     const { data } = await lineBotAPI.pushMsg(input)
+//     console.log('data', data)
+//   } catch (error) {
+//     console.error('error', error)
+//   }
+// }
+
+fetchRecords()
 </script>
+
+<template>
+  <div v-if="!isLoading">
+    <!-- <button class="btn btn-info" @click="btnClick">Message</button> -->
+
+    <div class="list-group list-group-checkable">
+      <label class="list-group-item py-3 mb-3">
+        <div class="row">
+          <div class="col-8 text-start">
+            <h4>
+              本月總額 ＄<strong>{{ thisMonthData.total }}</strong>
+            </h4>
+            <div class="progress mt-2" style="height: 20px">
+              <div
+                class="progress-bar"
+                role="progressbar"
+                :style="`width: ${thisMonthData.rate}%`"
+                :aria-valuenow="thisMonthData.rate"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              >
+                {{ thisMonthData.rate }}%
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-start">
+            <div>未結算＄ {{ thisMonthData.total - thisMonthData.closedAmount }}</div>
+            <div>已結算＄ {{ thisMonthData.closedAmount }}</div>
+          </div>
+        </div>
+      </label>
+
+      <label class="list-group-item py-3 mb-3">
+        <div class="row">
+          <div class="col-8 text-start">
+            <h4>
+              上月總額 ＄<strong>{{ lastMonthData.total }}</strong>
+            </h4>
+            <div class="progress mt-2" style="height: 20px">
+              <div
+                class="progress-bar"
+                role="progressbar"
+                :style="`width: ${lastMonthData.rate}%`"
+                :aria-valuenow="lastMonthData.rate"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              >
+                {{ lastMonthData.rate }}%
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-start">
+            <div>未結算＄ {{ lastMonthData.total - lastMonthData.closedAmount }}</div>
+            <div>已結算＄ {{ lastMonthData.closedAmount }}</div>
+          </div>
+        </div>
+      </label>
+    </div>
+  </div>
+  <Spinner v-else />
+</template>
diff --git a/src/views/Logs.vue b/src/views/Logs.vue
new file mode 100644
index 0000000..c831c88
--- /dev/null
+++ b/src/views/Logs.vue
@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { showWeekDay } from '../utils/helper'
+import recordAPI from '../apis/expense'
+import { Log } from '../models/Log'
+import Swal from 'sweetalert2'
+import Spinner from '../components/Spinner.vue'
+
+const tabs = [
+  { title: '總覽', btnColor: 'secondary' },
+  { title: '新增', btnColor: 'primary' },
+  { title: '編輯', btnColor: 'success' },
+  { title: '結算', btnColor: 'danger' }
+]
+const isLoading = ref(false)
+const logs = ref<Log[]>([])
+const nowTab = ref('總覽')
+
+const filteredLogs = computed(() => {
+  if (nowTab.value === '總覽') return logs.value
+  return logs.value.filter((log) => log.action === nowTab.value)
+})
+
+const fetchLogs = async function () {
+  try {
+    const { data } = await recordAPI.getLogs()
+    logs.value = data
+    isLoading.value = false
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+const listIconClick = async (recordIds: string | undefined) => {
+  if (!recordIds) return
+  const recordIdArr = recordIds.split(',')
+  const recordArr = []
+  for (const id of recordIdArr) {
+    const { data } = await recordAPI.getOne(Number(id))
+    recordArr.push(data)
+  }
+  let html = `<table class="table"><thead><tr><th scope="col">項目</th><th scope="col">商家</th><th scope="col">金額</th><th scope="col">日期</th></tr></thead><tbody>`
+  for (const id of recordIdArr) {
+    const { data } = await recordAPI.getOne(Number(id))
+    html += `<tr><td>${data.item}</td><td>${data.merchant}</td><td>${data.amount}</td><td>${new Date(
+      data.date
+    ).toLocaleDateString()}</td></tr>`
+  }
+  html += `</tbody></table>${
+    document.documentElement.scrollWidth >= 500 ? '' : '<style>table{font-size:0.5em;}</style>'
+  }`
+  await Swal.fire({
+    title: '結算紀錄',
+    html
+  })
+}
+
+fetchLogs()
+</script>
+
+<template>
+  <div v-if="!isLoading && logs.length">
+    <template v-if="logs.length">
+      <div id="pc">
+        <div class="btn-group mb-3" role="group" aria-label="Basic radio toggle button group">
+          <template v-for="(tab, index) in tabs" :key="index">
+            <input
+              type="radio"
+              class="btn-check"
+              name="btnradio"
+              :id="tab.title"
+              autocomplete="off"
+              :checked="nowTab === tab.title"
+            />
+            <label :class="`btn btn-outline-${tab.btnColor}`" :for="tab.title" @click="nowTab = tab.title">{{
+              tab.title
+            }}</label>
+          </template>
+        </div>
+
+        <div class="row h-20 mb-3" v-for="(log, index) in filteredLogs" :key="index">
+          <div class="col-2 mt-4">
+            <div class="fw-bold">
+              {{ new Date(log.createdAt).toLocaleDateString() + ` (${showWeekDay(log.createdAt)})` }}
+            </div>
+            <div class="fw-bold">{{ new Date(log.createdAt).toLocaleTimeString() }}</div>
+          </div>
+          <div class="col-9">
+            <div class="bg-white border p-3">
+              <div class="d-flex">
+                <img
+                  v-if="log.recorder === '建喵'"
+                  src="../assets/jianmiau.jpeg"
+                  class="my-auto img-thumbnail me-2"
+                  width="60"
+                  height="60"
+                /><img v-else src="../assets/karol.png" class="my-auto img-thumbnail me-2" width="60" height="60" />
+                <div class="text-start mt-2">
+                  <strong class="px-1 me-1" style="background-color: yellow">{{ log.recorder }}</strong>
+                  <strong style="color: salmon">{{ log.action }}紀錄</strong>
+                  <i class="fas fa-chevron-right m-2"></i>
+                  <template v-if="log.action === '新增' || log.action === '編輯'">
+                    <strong style="color: blue">{{ log.item }}</strong> |
+                    <strong style="color: brown">{{ log.merchant }}</strong> |
+                    <strong style="color: orange">$ {{ log.amount }}</strong> |
+                    <strong style="color: green">{{ new Date(log.date || '').toLocaleDateString() }}</strong>
+                  </template>
+                  <template v-if="log.action === '編輯'">
+                    <br />
+                    <h6>
+                      原紀錄：<strong style="color: blue">{{ log.itemBefore }}</strong> |
+                      <strong style="color: brown">{{ log.merchantBefore }}</strong> |
+                      <strong style="color: orange">$ {{ log.amountBefore }}</strong> |
+                      <strong style="color: green">{{ new Date(log.dateBefore || '').toLocaleDateString() }}</strong>
+                    </h6>
+                  </template>
+                  <template v-if="log.action === '結算'">
+                    <span>
+                      結算金額
+                      <strong style="color: orange">$ {{ log.closeAmount }} </strong>
+                    </span>
+                    <i class="far fa-list-alt fa-lg ms-2" id="records" @click="listIconClick(log.RecordIds)"></i>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- mobile -->
+      <div id="mobile" class="card text-center">
+        <div class="card-header">
+          <ul class="nav nav-tabs card-header-tabs">
+            <li class="nav-item" v-for="tab in tabs" :key="tab.title" @click="nowTab = tab.title">
+              <span class="nav-link" :class="{ active: nowTab === tab.title }">{{ tab.title }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <div class="card-body">
+          <div class="card mb-3" v-for="(log, index) in filteredLogs" :key="index">
+            <div class="card-header">
+              {{
+                new Date(log.createdAt).toLocaleDateString() +
+                ` (${showWeekDay(log.createdAt)}) ` +
+                new Date(log.createdAt).toLocaleTimeString()
+              }}
+            </div>
+            <div class="card-body d-flex">
+              <img
+                v-if="log.recorder === '建喵'"
+                src="../assets/jianmiau.jpeg"
+                class="my-auto img-thumbnail me-2"
+                width="60"
+                height="60"
+              /><img v-else src="../assets/karol.png" class="my-auto img-thumbnail me-2" width="60" height="60" />
+              <div class="text-start mt-2">
+                <strong class="px-1 me-1" style="background-color: yellow">{{ log.recorder }}</strong>
+                <strong style="color: salmon">{{ log.action }}紀錄</strong>
+                <i class="fas fa-chevron-right m-2"></i>
+                <template v-if="log.action === '新增' || log.action === '編輯'">
+                  <h6>
+                    <strong style="color: blue">{{ log.item }}</strong> |
+                    <strong style="color: brown">{{ log.merchant }}</strong> |
+                    <strong style="color: orange">$ {{ log.amount }}</strong> |
+                    <strong style="color: green">{{ new Date(log.date || '').toLocaleDateString() }}</strong>
+                  </h6>
+                </template>
+                <template v-if="log.action === '編輯'">
+                  <h6>
+                    原紀錄：<strong style="color: blue">{{ log.itemBefore }}</strong> |
+                    <strong style="color: brown">{{ log.merchantBefore }}</strong> |
+                    <strong style="color: orange">$ {{ log.amountBefore }}</strong> |
+                    <strong style="color: green">{{ new Date(log.dateBefore || '').toLocaleDateString() }}</strong>
+                  </h6>
+                </template>
+                <template v-if="log.action === '結算'">
+                  <h6>
+                    <span>
+                      結算金額
+                      <strong style="color: orange">$ {{ log.closeAmount }} </strong>
+                    </span>
+                    <i class="far fa-list-alt fa-lg ms-2" id="records" @click="listIconClick(log.RecordIds)"></i>
+                  </h6>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <img
+      v-else
+      class="img-fluid"
+      src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
+      alt=""
+    />
+  </div>
+  <Spinner v-else />
+</template>
+
+<style scoped>
+#records:hover {
+  cursor: pointer;
+  color: salmon;
+}
+@media screen and (max-width: 499px) {
+  #pc {
+    display: none;
+  }
+}
+@media screen and (min-width: 500px) {
+  #mobile {
+    display: none;
+  }
+}
+</style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..f0122d9
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <img
+      src="https://www.lifewire.com/thmb/-zkZkHWjYJ1eAIRKzvAksPDMrzg=/3000x2000/filters:no_upscale():max_bytes(150000):strip_icc()/404-not-found-error-explained-2622936-Final-fde7be1b7e2e499c9f039d97183e7f52.jpg"
+      alt="404"
+      style="height: 70vh; width: 70vw"
+    />
+  </div>
+</template>
diff --git a/src/views/Record.vue b/src/views/Record.vue
new file mode 100644
index 0000000..8a0dba5
--- /dev/null
+++ b/src/views/Record.vue
@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import recordAPI from '../apis/expense'
+import { Record, RecordInput } from '../models/Record'
+import Swal from 'sweetalert2'
+import { Toast, ConfirmBox } from '../utils/swal'
+import { showWeekDay } from '../utils/helper'
+import Spinner from '../components/Spinner.vue'
+import { useStore } from '../store/index'
+const store = useStore()
+
+// data
+const isLoading = ref<boolean>(true)
+const records = ref<Record[]>([])
+const isCloseStatus = ref<boolean>(false)
+const closeRecords = ref<number[]>([])
+const closeRecordsAmount = ref<number>(0)
+
+// methods
+const fetchRecords = async function () {
+  try {
+    const { data } = await recordAPI.getAll()
+    records.value = data.filter((item: Record) => item.isClosed === false)
+    isLoading.value = false
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+const createBtnClick = async () => {
+  try {
+    const { value: formValues } = await ConfirmBox.fire({
+      title: '新增資料',
+      html: `
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-item" class="col-form-label">項目</label>
+        </div>
+        <div class="col-auto">
+          <input type="text" id="swal-item" class="form-control"/>
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-merchant" class="col-form-label">商家</label>
+        </div>
+        <div class="col-auto">
+          <input type="text" id="swal-merchant" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-amount" class="col-form-label">金額</label>
+        </div>
+        <div class="col-auto">
+          <input type="number" id="swal-amount" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-date" class="col-form-label">日期</label>
+        </div>
+        <div class="col-auto">
+          <input type="date" id="swal-date" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-recorder" class="col-form-label">紀錄者</label>
+        </div>
+        <div class="col-auto">
+          <select id="swal-recorder" class="form-select">
+            <option selected>${store.currentUser}</option>
+          </select>
+        </div>
+      </div>
+      `,
+      preConfirm: () => {
+        const item = (document.getElementById('swal-item') as HTMLInputElement).value
+        const merchant = (document.getElementById('swal-merchant') as HTMLInputElement).value
+        const amount = (document.getElementById('swal-amount') as HTMLInputElement).value
+        const date = new Date((document.getElementById('swal-date') as HTMLInputElement).value)
+        const recorder = (document.getElementById('swal-recorder') as HTMLInputElement).value
+        if (!item || !merchant || !amount || !date || !recorder) {
+          Swal.showValidationMessage('所有資料都是必填！若紀錄者為空，請登入~')
+        }
+        return {
+          input: {
+            item,
+            merchant,
+            amount,
+            date,
+            recorder
+          } as RecordInput
+        }
+      }
+    })
+    if (formValues) {
+      createRecord(formValues)
+    }
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+const createRecord = async function (formValues: { input: RecordInput }) {
+  try {
+    await recordAPI.create(formValues.input)
+    fetchRecords()
+    Toast.fire({
+      icon: 'success',
+      title: '成功建立資料！'
+    })
+    // line msg
+    const input = {
+      to: [process.env.VUE_APP_JIANMIAU_USERID, process.env.VUE_APP_KAROL_USERID],
+      messages: [
+        {
+          type: 'text',
+          text: `${store.currentUser}新增了一筆關於${formValues.input.item}的記帳`
+        }
+      ]
+    }
+    await recordAPI.pushLineMsg(input)
+  } catch (error) {
+    console.error('error', error)
+    Toast.fire({
+      icon: 'error',
+      title: '新增資料失敗！'
+    })
+  }
+}
+
+const editBtnClick = async function (id: number) {
+  try {
+    const { data } = await recordAPI.getOne(id)
+    const { value: formValues } = await ConfirmBox.fire({
+      title: '資料編輯',
+      html: `
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-item" class="col-form-label">項目</label>
+        </div>
+        <div class="col-auto">
+          <input value="${data.item}" type="text" id="swal-item" class="form-control"/>
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-merchant" class="col-form-label">商家</label>
+        </div>
+        <div class="col-auto">
+          <input value="${data.merchant}" type="text" id="swal-merchant" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-amount" class="col-form-label">金額</label>
+        </div>
+        <div class="col-auto">
+          <input value="${data.amount}" type="number" id="swal-amount" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-date" class="col-form-label">日期</label>
+        </div>
+        <div class="col-auto">
+          <input value="${new Date(data.date)
+            .toISOString()
+            .substring(0, 10)}" type="date" id="swal-date" class="form-control" >
+        </div>
+      </div>
+      <div class="d-flex mb-2">
+        <div class="col-auto me-3">
+          <label for="swal-editor" class="col-form-label">編輯者</label>
+        </div>
+        <div class="col-auto">
+          <select id="swal-editor" class="form-select">
+            <option selected>${store.currentUser}</option>
+          </select>
+        </div>
+      </div>
+      `,
+      preConfirm: () => {
+        const item = (document.getElementById('swal-item') as HTMLInputElement).value
+        const merchant = (document.getElementById('swal-merchant') as HTMLInputElement).value
+        const amount = (document.getElementById('swal-amount') as HTMLInputElement).value
+        const date = new Date((document.getElementById('swal-date') as HTMLInputElement).value)
+        const editor = (document.getElementById('swal-editor') as HTMLInputElement).value
+        if (!item || !merchant || !amount || !date || !editor) {
+          Swal.showValidationMessage('所有資料都是必填！若編輯者為空，請登入~')
+        }
+        return {
+          id: data.id as number,
+          input: {
+            item,
+            merchant,
+            amount,
+            date,
+            editor
+          } as RecordInput
+        }
+      }
+    })
+    if (formValues?.input) {
+      editRecord(formValues)
+    }
+  } catch (error) {
+    console.error('error', error)
+  }
+}
+
+const editRecord = async function (formValues: { id: number; input: RecordInput }) {
+  try {
+    await recordAPI.edit(formValues.id, formValues.input)
+    fetchRecords()
+    Toast.fire({
+      icon: 'success',
+      title: '成功編輯資料！'
+    })
+  } catch (error) {
+    console.error('error', error)
+    Toast.fire({
+      icon: 'error',
+      title: '編輯資料失敗！'
+    })
+  }
+}
+
+const closeBtnClick = () => {
+  if (!store.currentUser) {
+    Swal.fire('請先登入才能結算！', '', 'warning')
+    return
+  }
+  isCloseStatus.value = true
+  const recordIds = []
+  let total = 0
+  for (let record of records.value) {
+    recordIds.push(record.id)
+    total += record.amount
+  }
+  closeRecords.value = recordIds
+  closeRecordsAmount.value = total
+}
+
+const checkboxClick = (id: number, amount: number) => {
+  if (isCloseStatus.value) {
+    const index = closeRecords.value?.findIndex((recordId) => recordId === id)
+    if (index !== undefined) {
+      if (index !== -1) {
+        closeRecords.value?.splice(index, 1)
+        closeRecordsAmount.value -= amount
+      } else {
+        closeRecords.value?.push(id)
+        closeRecordsAmount.value += amount
+      }
+    }
+  }
+}
+
+const cancelBtnClick = () => {
+  isCloseStatus.value = false
+  closeRecords.value = []
+  closeRecordsAmount.value = 0
+}
+
+const toCloseBtnClick = async () => {
+  const { isConfirmed } = await ConfirmBox.fire({
+    icon: 'info',
+    title: '確定結算資料？',
+    text: `結算金額為 $${closeRecordsAmount.value} [結算者: ${store.currentUser}]`
+  })
+  if (isConfirmed) {
+    closeRecord(closeRecordsAmount.value)
+  }
+}
+
+const closeRecord = async (amount: number) => {
+  try {
+    if (store.currentUser) {
+      await recordAPI.close({
+        records: closeRecords.value.toString(),
+        totalAmount: amount,
+        recorder: store.currentUser
+      })
+      isCloseStatus.value = false
+      fetchRecords()
+      Toast.fire({
+        icon: 'success',
+        title: '成功結算資料！'
+      })
+    }
+  } catch (error) {
+    console.error('error', error)
+    Toast.fire({
+      icon: 'error',
+      title: '結算資料失敗！'
+    })
+  }
+}
+
+// created
+fetchRecords()
+</script>
+<template>
+  <div v-if="!isLoading">
+    <div class="d-flex justify-content-between mb-3" style="width: 100vw">
+      <button type="button" class="btn btn-primary text-end" @click="createBtnClick">新增資料</button>
+      <div>
+        <template v-if="isCloseStatus">
+          <span class="badge bg-info text-dark me-3 align-middle p-2">結算金額 ${{ closeRecordsAmount }}</span>
+          <button type="button" class="btn btn-secondary" @click="cancelBtnClick">取消結算</button>
+          <button type="button" class="btn btn-success ms-3" @click="toCloseBtnClick">確定結算</button>
+        </template>
+        <button v-else type="button" class="btn btn-danger" @click="closeBtnClick">開始結算</button>
+      </div>
+    </div>
+    <table class="table table-striped table-info table-hover" v-if="records.length">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">項目</th>
+          <th scope="col">商家</th>
+          <th scope="col">金額</th>
+          <th scope="col">日期</th>
+          <th scope="col" id="column-item">首次記錄者</th>
+          <th scope="col" id="column-item">首次記錄時間</th>
+          <th scope="col" id="column-item">更新時間</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(record, index) in records"
+          :key="index"
+          :class="{ 'table-warning': closeRecords?.includes(record.id) }"
+          @click="checkboxClick(record.id, record.amount)"
+        >
+          <td>
+            <input
+              v-if="isCloseStatus"
+              class="form-check-input"
+              type="checkbox"
+              :checked="closeRecords?.includes(record.id)"
+            />
+            <i v-else class="fas fa-edit" @click="editBtnClick(record.id)"></i>
+          </td>
+          <td>
+            {{ record.item }}
+          </td>
+          <td>
+            {{ record.merchant }}
+          </td>
+          <td>
+            {{ record.amount }}
+          </td>
+          <td>
+            {{ new Date(record.date).toLocaleDateString() + ` (${showWeekDay(record.date)})` }}
+          </td>
+          <td id="column-item">
+            {{ record.recorder }}
+          </td>
+          <td id="column-item">{{ new Date(record.createdAt).toLocaleString() }}</td>
+          <td id="column-item">{{ new Date(record.updatedAt).toLocaleString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <img
+      v-else
+      class="img-fluid"
+      src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
+      alt=""
+    />
+  </div>
+  <Spinner v-else />
+</template>
+
+<style scoped>
+th,
+td {
+  white-space: nowrap;
+}
+
+button,
+span {
+  font-size: 0.5em;
+}
+
+i[class~='fa-edit']:hover {
+  color: rgb(30, 197, 57);
+  cursor: pointer;
+}
+
+@media screen and (max-width: 400px) {
+  #column-item {
+    display: none;
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..d70e4ba
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production' ? '/jm-expense-vue-ts/' : '/'
+}