diff --git a/package-lock.json b/package-lock.json
index 67303d1..1a243de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,15 +11,18 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/vue-fontawesome": "^3.0.5",
+        "@jobinsjp/vue3-datatable": "^1.0.15",
         "@rushstack/eslint-patch": "^1.6.1",
         "@vue/eslint-config-typescript": "^12.0.0",
         "d3": "^7.8.5",
+        "jwt-decode": "^4.0.0",
         "vue": "^3.3.4",
         "vue-cookies": "^1.8.3",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@types/d3": "^7.4.3",
+        "@types/jwt-decode": "^3.1.0",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-prettier": "^8.0.0",
         "eslint": "^8.56.0",
@@ -31,6 +34,7 @@
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
         "vite-plugin-eslint": "^1.8.1",
+        "vite-plugin-mkcert": "^1.17.1",
         "vue-tsc": "^1.8.16"
       }
     },
@@ -569,6 +573,18 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
     },
+    "node_modules/@jobinsjp/vue3-datatable": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@jobinsjp/vue3-datatable/-/vue3-datatable-1.0.15.tgz",
+      "integrity": "sha512-9qAyEiuCy3kHWjJhOcZxAUQJg1xc5pO977DujG0Vghv3jOEW1FXzsd1usvSgmvMVEWF7guH2PKbewjYN+fmi9A==",
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -606,6 +622,161 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.0.2.tgz",
+      "integrity": "sha512-cZUy1gUvd4vttMic7C0lwPed8IYXWYp8kHIMatyhY8t8n3Cpw2ILczkV5pGMPqef7v0bLo0pOHrEHarsau2Ydg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.0.0",
+        "@octokit/request": "^8.0.2",
+        "@octokit/request-error": "^5.0.0",
+        "@octokit/types": "^12.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.4.tgz",
+      "integrity": "sha512-DWPLtr1Kz3tv8L0UvXTDP1fNwM0S+z6EJpRcvH66orY6Eld4XBMCSYsaWp4xIm61jTWxK68BrR7ibO+vSDnZqw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.0.2.tgz",
+      "integrity": "sha512-OJ2iGMtj5Tg3s6RaXH22cJcxXRi7Y3EBqbHTBRq+PQAqfaS8f/236fUrWhfSn8P4jovyzqucxme7/vWSSZBX2Q==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^8.0.1",
+        "@octokit/types": "^12.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-19.1.0.tgz",
+      "integrity": "sha512-6G+ywGClliGQwRsjvqVYpklIfa7oRPA0vyhPQG/1Feh+B+wU0vGH1JiJ5T25d3g1JZYBHzR2qefLi9x8Gt+cpw==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-9.1.5.tgz",
+      "integrity": "sha512-WKTQXxK+bu49qzwv4qKbMMRXej1DU2gq017euWyKVudA6MldaSSQuxtz+vGbhxV4CjxpUxjZu6rM2wfc1FiWVg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=5"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.0.tgz",
+      "integrity": "sha512-2uJI1COtYCq8Z4yNSnM231TgH50bRkheQ9+aH8TnZanB6QilOnx8RMD2qsnamSOXtDj0ilxvevf5fGsBhBBzKA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=5"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-10.2.0.tgz",
+      "integrity": "sha512-ePbgBMYtGoRNXDyKGvr9cyHjQ163PbwD0y1MkDJCpkO2YH4OeXX40c4wYHKikHGZcpGPbcRLuy0unPUuafco8Q==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.3.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=5"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "8.1.6",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.1.6.tgz",
+      "integrity": "sha512-YhPaGml3ncZC1NfXpP3WZ7iliL1ap6tLkAp6MvbK2fTTPytzVUyUesBBogcdMm86uRYO5rHaM1xIWxigWZ17MQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.0",
+        "@octokit/request-error": "^5.0.0",
+        "@octokit/types": "^12.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.0.1.tgz",
+      "integrity": "sha512-X7pnyTMV7MgtGmiXBwmO6M5kIPrntOXdyKZLigNfQWSEQzVxR4a4vo49vJjTWX70mPndj8KhfT4Dx+2Ng3vnBQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.0.2.tgz",
+      "integrity": "sha512-Ux8NDgEraQ/DMAU1PlAohyfBBXDwhnX2j33Z1nJNziqAfHi70PuxkFYIcIt8aIAxtRE7KVuKp8lSR8pA0J5iOQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/core": "^5.0.0",
+        "@octokit/plugin-paginate-rest": "^9.0.0",
+        "@octokit/plugin-request-log": "^4.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "^10.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-12.4.0.tgz",
+      "integrity": "sha512-FLWs/AvZllw/AGVs+nJ+ELCDZZJk+kY0zMen118xhL2zD0s1etIUHm1odgjP7epxYU1ln7SZxEUWYop5bhsdgQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^19.1.0"
+      }
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
@@ -930,6 +1101,16 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/jwt-decode": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-3.1.0.tgz",
+      "integrity": "sha512-tthwik7TKkou3mVnBnvVuHnHElbjtdbM63pdBCbZTirCt3WAdM73Y79mOri7+ljsS99ZVwUFZHLMxJuJnv/z1w==",
+      "deprecated": "This is a stub types definition. jwt-decode provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "jwt-decode": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -1528,6 +1709,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -1540,11 +1727,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+      "dev": true
+    },
     "node_modules/big-integer": {
       "version": "1.6.52",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
@@ -1659,6 +1863,18 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -2183,6 +2399,21 @@
         "robust-predicates": "^3.0.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2841,6 +3072,26 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2850,6 +3101,20 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3594,6 +3859,14 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3686,6 +3959,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -4100,6 +4394,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4777,6 +5077,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+      "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==",
+      "dev": true
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
@@ -4884,6 +5190,24 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.1.tgz",
+      "integrity": "sha512-/OxFqPXF3yTuikjn5Lbgt0WWm6Yq0KBWkFj68MZTV/icv3tO+7Y/HS+8+4v9vyx0TDzkSTVyaC/4J7Qtnh/PIw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/rest": "^20.0.2",
+        "axios": "^1.6.2",
+        "debug": "^4.3.4",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=v16.7.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
     "node_modules/vscode-json-languageservice": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.2.1.tgz",
diff --git a/package.json b/package.json
index 59db540..7af8e88 100644
--- a/package.json
+++ b/package.json
@@ -14,15 +14,18 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@jobinsjp/vue3-datatable": "^1.0.15",
     "@rushstack/eslint-patch": "^1.6.1",
     "@vue/eslint-config-typescript": "^12.0.0",
     "d3": "^7.8.5",
+    "jwt-decode": "^4.0.0",
     "vue": "^3.3.4",
     "vue-cookies": "^1.8.3",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
+    "@types/jwt-decode": "^3.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^8.0.0",
     "eslint": "^8.56.0",
@@ -34,6 +37,7 @@
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-mkcert": "^1.17.1",
     "vue-tsc": "^1.8.16"
   }
 }
diff --git a/src/@types/SessionIdentiferProps.ts b/src/@types/SessionIdentiferProps.ts
new file mode 100644
index 0000000..4d6e960
--- /dev/null
+++ b/src/@types/SessionIdentiferProps.ts
@@ -0,0 +1,3 @@
+export interface SessionIdentiferProps {
+  sessionIdentifier: string;
+}
diff --git a/src/@types/vue3-datatable/index.d.ts b/src/@types/vue3-datatable/index.d.ts
new file mode 100644
index 0000000..aca6e2c
--- /dev/null
+++ b/src/@types/vue3-datatable/index.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="node" />
+
+declare module "@jobinsjp/vue3-datatable" {
+  export interface DataTable {}
+}
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 7d19b96..aa2036b 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,7 +1,7 @@
 import { apiBaseUrl } from "../app.config.js";
-import type { SessionIdentifier } from "../types/index";
+import type { SessionIdentiferProps } from "../@types/SessionIdentiferProps";
 
-export function getAuthKeyFromProperties(props: SessionIdentifier) {
+export function getAuthKeyFromProperties(props: SessionIdentiferProps) {
   let authKey;
 
   if (props.sessionIdentifier && props.sessionIdentifier.length > 0) {
@@ -14,7 +14,7 @@ export function getAuthKeyFromProperties(props: SessionIdentifier) {
   return authKey;
 }
 
-export function getTenantProperty(key: string, props: SessionIdentifier) {
+export function getTenantProperty(key: string, props: SessionIdentiferProps) {
   return new Promise((resolve, reject) => {
     if (!props) {
       reject("no props provided for authentication");
diff --git a/src/router/index.ts b/src/router/index.ts
index 302170c..3fd9ce8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,12 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "../views/HomePage.vue";
 import TelephonyContext from "../views/TelephonyContext.vue";
+import DebugView from "../views/DebugView.vue";
 import { Component } from "vue";
 
 const routes = [
   { path: "/", component: Home as Component },
+  { path: "/debug", component: DebugView as Component },
   {
     path: "/telephonyContext/",
     name: "telephonyContext",
diff --git a/src/types/index.ts b/src/types/index.ts
deleted file mode 100644
index f25a208..0000000
--- a/src/types/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface SessionIdentifier {
-  sessionIdentifier: string;
-}
diff --git a/src/vendor.d.ts b/src/vendor.d.ts
new file mode 100644
index 0000000..7c01fd4
--- /dev/null
+++ b/src/vendor.d.ts
@@ -0,0 +1 @@
+declare module "@jobinsjp/vue3-datatable";
diff --git a/src/views/DebugView.vue b/src/views/DebugView.vue
new file mode 100644
index 0000000..a887fdf
--- /dev/null
+++ b/src/views/DebugView.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { inject, onMounted, ref } from "vue";
+import type { VueCookies } from "vue-cookies";
+import { DataTable } from "@jobinsjp/vue3-datatable";
+import "@jobinsjp/vue3-datatable/dist/style.css";
+
+import { jwtDecode } from "jwt-decode";
+
+const cookiePrefix = "__Host-VRNTOTCT";
+const $cookies = inject<VueCookies>("$cookies");
+const data = ref([{ name: "", value: "" }]);
+const authCookie = ref("");
+const jwtDecoded = ref("");
+
+onMounted(() => {
+  if ($cookies) {
+    data.value = $cookies?.keys().map(function (value) {
+      return {
+        name: value,
+        value: $cookies.get(value) as string,
+      };
+    });
+
+    $cookies.keys().forEach((key) => {
+      if (key.startsWith(cookiePrefix)) {
+        console.log(`Found ${key} cookie using value for token`);
+        authCookie.value = $cookies.get(key) as string;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        jwtDecoded.value = JSON.stringify(jwtDecode(authCookie.value), null, 2);
+        // console.log(`Decoded [${JSON.stringify(decoded, null, 2)}]`);
+      }
+    });
+  }
+});
+</script>
+<template>
+  <h1>Channel Automation Vua Applications - Debugging</h1>
+  <h2>Cookie information</h2>
+
+  <DataTable :rows="data"></DataTable>
+
+  <h3>VRNTOTCT authentication</h3>
+  <p>OIDC Token is {{ authCookie }}</p>
+  <h3>JWT Decoded</h3>
+  <pre>{{ jwtDecoded }}</pre>
+</template>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 0198b76..f50e1de 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -2,6 +2,9 @@
   <div>
     <h1>Home</h1>
     <ul>
+      <li>
+        <router-link to="/debug"> Debug </router-link>
+      </li>
       <li>
         <router-link
           to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=title&integrationCardDoc=doc&_sessionIdentifier=bc93f1fc"
diff --git a/src/views/TelephonyContext.vue b/src/views/TelephonyContext.vue
index 2f71018..420fd14 100644
--- a/src/views/TelephonyContext.vue
+++ b/src/views/TelephonyContext.vue
@@ -5,22 +5,25 @@ import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import ErrorMessage from "../components/ErrorMessage.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
 import DaVinciView from "./DaVinciView.vue";
+
 import type { VueCookies } from "vue-cookies";
-
-import type { SessionIdentifier } from "../types/index";
-
-var user = {
-  id: 1,
-  name: "Journal",
-  session: "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",
-};
+import type { SessionIdentiferProps } from "../@types/SessionIdentiferProps";
 
 const $cookies = inject<VueCookies>("$cookies");
 if ($cookies) {
-  $cookies.set("user", user);
-  // print user name
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  console.log($cookies.get("user").name);
+  const key = "__Host-VRNTOTCT404fdb6f";
+  $cookies.set(
+    key,
+    "eyJhbGciOiJSUzI1NiIsImtpZCI6IjM4MThlZDMxMmVkOGRhNTVkZWZkM2EzZmI0OGY1NjQzMWFjMWMwMmEzZjZkMmFkMjVjNDA5ZmEwOTA1NDU3ZTkiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOlsiZGVmYXVsdCJdLCJhenAiOiJkZWZhdWx0IiwiY29tLnZlcmludC5pc0V4dGVybmFsbHlBdXRoZW50aWNhdGVkIjpmYWxzZSwiY29tLnZlcmludC5sb2dpblJlc3VsdCI6MSwiY29tLnZlcmludC5zY3JlZW5IZWlnaHQiOiI5MTQiLCJjb20udmVyaW50LnNjcmVlbldpZHRoIjoiMTQxNCIsImNvbnRlbnRfZW50aXRsZW1lbnRzIjpbIlRlYW1FRDpjY2FnZW50dGVhbSIsIlRlYW1Sb2xlRUQ6Y2NhZ2VudHRlYW1yb2xlIiwiVGVhbUVEOkNsYWltcyIsIlJlZ2lzdGVyZWRVc2VyQ29udGVudCIsIlBhZ2VTZXRFeGVjdXRpb25FbnRpdGxlbWVudDAiXSwiY29udGV4dF9lbnRpdGxlbWVudHMiOlsiQ29udGV4dFVwZGF0ZXJBUElBY2Nlc3MiXSwiZW1fYXBpX2FjY2VzcyI6WyJlbWFpbF9vdXRnb2luZ19jcmVhdGUiLCJlbWFpbF9vdXRnb2luZ19mb3J3YXJkIiwiZW1haWxfb3V0Z29pbmdfcmVwbHkiLCJhY2Nlc3NfY2FzZV9jcmVhdGUiLCJhY2Nlc3NfYXR0YWNobWVudF9kb3dubG9hZCIsImFjY2Vzc19hdHRhY2htZW50X3VwbG9hZCIsImNhc2VfdXBkYXRlIiwiYWNjZXNzX2N1c3RvbWVyX2NyZWF0ZSIsImN1c3RvbWVyX3JlYWQiLCJjdXN0b21lcl9zZWFyY2giLCJlbWFpbG1haWxib3hfc2VhcmNoIiwiYWNjZXNzX21lc3NhZ2luZ19yZWFkIiwicHJlZmVyZW5jZXNfY29udGVudGxvY2FsZSIsInByZWZlcmVuY2VzX2Rlc2t0b3Bsb2NhbGUiLCJNZXNzYWdpbmciXSwiZXhwIjoxNzAzMDcwMjI3LCJpYXQiOjE3MDMwMzQyMjcsImlzcyI6Imh0dHBzOi8vZW0yMC52ZXJpbnQubGl2ZTo0NDMvb2lkYy10b2tlbi1zZXJ2aWNlL2RlZmF1bHQiLCJyZWFsbSI6Ii9kZWZhdWx0Iiwic3ViIjoiY2NhZ2VudCIsInpvbmVpbmZvIjoiQW1lcmljYS9DaGljYWdvIn0.hRQLzfOSp8eWMoDVXNPVNBsaSJLEbZtHfbAWHseTB76dvqVPtw6TYW6ZP8FPKX339ngpuHkHj9QtyaVPbriJnvoKkEK9mSgbDWkO1d8nkGtnzcCxkZoLz7MsAUllbIVaaBqED_jf17rio_dc73dfbRjDOIg44firKVnC4SbGMiLHw5796maP3qoIs7PAw1tG_7YrPc0_idMinsF5hA71hl-NgVq-BIz5m7Sjy0Jm4h162PxXGcNek-PxZkOIrQyrGi9D1e8xdZpzbXMvgRD6YoTYkMc45bzY4-aHf3TwYWKaE64hunuWe05KRnlInsHH2BJpPOqRkov9sJx6DGOlIQ",
+    "1d",
+    "/",
+    undefined,
+    true,
+    "Strict",
+  );
+
+  const value = $cookies.get(key) as string;
+  console.log(`Cookie with value [${value}]`);
 }
 
 const props = defineProps({
@@ -56,7 +59,7 @@ onMounted(() => {
 function setValueFromTPS(
   reference: { value: string },
   param: string,
-  props: SessionIdentifier,
+  props: SessionIdentiferProps,
 ) {
   if (param.startsWith("tps:")) {
     const tpsProperty = param.substring(4, param.length);
@@ -139,4 +142,4 @@ p {
   size: 24pt;
 }
 </style>
-../types/index
+../types/index ../@types/index
diff --git a/vite.config.ts b/vite.config.ts
index 8b74840..6833d09 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,13 @@
 import { defineConfig } from "vite";
 import eslintPlugin from "vite-plugin-eslint";
 import vue from "@vitejs/plugin-vue";
+import mkcert from "vite-plugin-mkcert";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   if (command === "build") {
     return { plugins: [vue()], base: "/ca_vue_apps/dist" };
   } else {
-    return { plugins: [eslintPlugin(), vue()] };
+    return { plugins: [eslintPlugin(), mkcert(), vue()] };
   }
 });