diff --git a/src/main/frontend/package-lock.json b/src/main/frontend/package-lock.json
index 5e47fbe..090f370 100644
--- a/src/main/frontend/package-lock.json
+++ b/src/main/frontend/package-lock.json
@@ -13,7 +13,9 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
@@ -24,6 +26,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.1",
         "react-router-dom": "^6.27.0",
+        "recharts": "^2.13.3",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8"
@@ -825,6 +828,45 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -889,6 +931,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
@@ -1151,6 +1207,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
+      "integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -1168,6 +1290,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz",
+      "integrity": "sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1728,6 +1879,60 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2791,9 +2996,118 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
@@ -2821,6 +3135,11 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2845,6 +3164,15 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3104,6 +3432,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3111,6 +3444,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -3421,6 +3762,14 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -3620,6 +3969,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3649,7 +4003,6 @@
       "version": "0.453.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
       "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
-      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
@@ -4096,6 +4449,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4179,6 +4547,11 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
@@ -4256,6 +4629,20 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -4278,6 +4665,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4299,6 +4701,36 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.13.3",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.3.tgz",
+      "integrity": "sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -4704,6 +5136,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4886,6 +5323,27 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
diff --git a/src/main/frontend/package.json b/src/main/frontend/package.json
index 2416465..1c32a74 100644
--- a/src/main/frontend/package.json
+++ b/src/main/frontend/package.json
@@ -15,7 +15,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -26,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.27.0",
+    "recharts": "^2.13.3",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
diff --git a/src/main/frontend/src/App.tsx b/src/main/frontend/src/App.tsx
index b15302b..f10eff6 100644
--- a/src/main/frontend/src/App.tsx
+++ b/src/main/frontend/src/App.tsx
@@ -66,7 +66,7 @@ function App() {
                     {accounts.map((account) => (
                         <TableRow key={account.id} onClick={() => {navigate(`/account/${account.id}`)}} className={"cursor-pointer"}>
                             <TableCell>{account.id}</TableCell>
-                            <TableCell>{account.userType}</TableCell>
+                            <TableCell>{account.isAdmin}</TableCell>
                             <TableCell>{account.username}</TableCell>
                             <TableCell>{account.password}</TableCell>
                             <TableCell>{account.email}</TableCell>
diff --git a/src/main/frontend/src/components/CreateAccountDialog.tsx b/src/main/frontend/src/components/CreateAccountDialog.tsx
new file mode 100644
index 0000000..bcb5fc5
--- /dev/null
+++ b/src/main/frontend/src/components/CreateAccountDialog.tsx
@@ -0,0 +1,134 @@
+import {
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {z} from "zod";
+import {zodResolver} from "@hookform/resolvers/zod";
+import {useForm} from "react-hook-form";
+import {Input} from "@/components/ui/input.tsx";
+
+const formSchema = z.object({
+    firstName: z.string(),
+    lastName: z.string(),
+    email: z.string().email(),
+    password: z.string(),
+});
+
+function CreateAccountDialog({toggle}: { toggle?: () => void }) {
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            firstName: "",
+            lastName: "",
+            email: "",
+            password: "",
+        },
+    });
+
+    const onSubmit = (data: z.infer<typeof formSchema>) => {
+        fetch("/api/account", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                email: data.email,
+                password: data.password,
+                username: `${data.firstName} ${data.lastName}`,
+            }),
+        }).then((response) => {
+            if (response.ok) {
+                form.reset();
+                if (toggle) {
+                    toggle();
+                }
+            } else {
+                console.error(response);
+            }
+        }).catch((error) => console.error(error));
+    };
+
+
+    return (
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)}>
+                            <DialogHeader className={"mb-5"}>
+                                <DialogTitle>New Account</DialogTitle>
+                                <DialogDescription>
+                                    Create a new account by filling out the form below.
+                                </DialogDescription>
+                            </DialogHeader>
+                            <FormField
+                                control={form.control}
+                                name="firstName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>First Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Joe" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lastName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Last Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Smith" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="email"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Email</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Password</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <DialogFooter className={"mt-2"}>
+                                <Button>Submit</Button>
+                                <Button type={"button"} variant="outline" onClick={toggle}>Cancel</Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+    )
+}
+
+export default CreateAccountDialog;
\ No newline at end of file
diff --git a/src/main/frontend/src/components/CreateLoanDialog.tsx b/src/main/frontend/src/components/CreateLoanDialog.tsx
index e4254be..26898d4 100644
--- a/src/main/frontend/src/components/CreateLoanDialog.tsx
+++ b/src/main/frontend/src/components/CreateLoanDialog.tsx
@@ -1,15 +1,12 @@
 import {
-    Dialog,
     DialogClose,
-    DialogContent,
     DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogTrigger
 } from "@/components/ui/dialog.tsx";
 import {Button} from "@/components/ui/button.tsx";
-import {CalendarIcon, FilePlus2} from "lucide-react";
+import {CalendarIcon} from "lucide-react";
 import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form.tsx";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover.tsx";
 import {cn} from "@/lib/utils.ts";
@@ -31,7 +28,7 @@ const formSchema = z.object({
     date: z.date(),
 });
 
-function CreateLoanDialog() {
+function CreateLoanDialog({ toggle, submit }: { toggle?: () => void, submit?: () => void }) {
     const [accountPopOverOpen, setAccountPopOverOpen] = useState(false);
 
     const form = useForm<z.infer<typeof formSchema>>({
@@ -65,7 +62,7 @@ function CreateLoanDialog() {
                 throw new Error("Failed to create loan");
             }
         }).then(() => {
-        //  Do something
+            submit && submit();
         }).catch((error) => {
             console.error(error);
         });
@@ -82,19 +79,14 @@ function CreateLoanDialog() {
     const [calendarDialogOpen, setCalendarDialogOpen] = useState(false);
 
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant={"outline"}>Create Loan<FilePlus2/></Button>
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>New Loan</DialogTitle>
-                    <DialogDescription>
-                        Create a new loan by filling out the form below.
-                    </DialogDescription>
-                </DialogHeader>
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)}>
+                        <DialogHeader className={"mb-5"}>
+                            <DialogTitle>New Loan</DialogTitle>
+                            <DialogDescription>
+                                Create a new loan by filling out the form below.
+                            </DialogDescription>
+                        </DialogHeader>
                         <FormField
                             control={form.control}
                             name={"id"}
@@ -125,7 +117,7 @@ function CreateLoanDialog() {
                                                     placeholder="Search for an account..."
                                                     className="w-full"
                                                 />
-                                                <Button className=" my-1 mx-1" variant="outline" size={"sm"}>
+                                                <Button className=" my-1 mx-1" variant="outline" size={"sm"} onClick={toggle}>
                                                     Create Account
                                                 </Button>
                                                 <CommandList>
@@ -250,8 +242,6 @@ function CreateLoanDialog() {
                         </DialogFooter>
                     </form>
                 </Form>
-            </DialogContent>
-        </Dialog>
     )
 }
 
diff --git a/src/main/frontend/src/components/DialogSwitcher.tsx b/src/main/frontend/src/components/DialogSwitcher.tsx
new file mode 100644
index 0000000..6d00cdc
--- /dev/null
+++ b/src/main/frontend/src/components/DialogSwitcher.tsx
@@ -0,0 +1,32 @@
+import React, {cloneElement} from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogTrigger
+} from "@/components/ui/dialog.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {FilePlus2} from "lucide-react";
+
+
+function DialogSwitcher({ children }: { children: React.ReactNode }) {
+    const [content, setContent] = React.useState(true);
+
+    const toggleContent = () => {
+        setContent(prev => !prev);
+    };
+
+    const validChildren = React.Children.toArray(children).filter(React.isValidElement);
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant={"outline"}>Create Loan<FilePlus2/></Button>
+            </DialogTrigger>
+            <DialogContent>
+                {content ? cloneElement(validChildren[0] as React.ReactElement, { toggle: toggleContent }) : cloneElement(validChildren[1] as React.ReactElement, { toggle: toggleContent })}
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default DialogSwitcher;
\ No newline at end of file
diff --git a/src/main/frontend/src/components/EditAccountDialog.tsx b/src/main/frontend/src/components/EditAccountDialog.tsx
new file mode 100644
index 0000000..25f6758
--- /dev/null
+++ b/src/main/frontend/src/components/EditAccountDialog.tsx
@@ -0,0 +1,138 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import {Input} from "@/components/ui/input.tsx";
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import {useState} from "react";
+
+
+const formSchema = z.object({
+    email: z.string().email().or(z.literal("")),
+    phoneNumber: z.string().regex(new RegExp("^\\d{3}-\\d{3}-\\d{4}$"), {
+        message: "Phone number must be in the format 123-456-7890",
+    }).or(z.literal("")),
+    routingNumber: z.string().regex(new RegExp("^\\d{9}$"), {
+        message: "Routing number must be 9 digits",
+    }).or(z.literal("")),
+    accountNumber: z.string().regex(new RegExp("^\\d{10}$"), {
+        message: "Account number must be 10 digits",
+    }).or(z.literal("")),
+})
+
+function EditAccountDialog({ submit }: { submit: (updateValues: any) => void }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        mode: "onBlur",
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            phoneNumber: "",
+            routingNumber: "",
+            accountNumber: "",
+        },
+    });
+
+    function onSubmit(values: z.infer<typeof formSchema>) {
+        form.reset();
+        setIsOpen(false);
+        submit(values);
+    }
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline">Edit Profile</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+                        <DialogHeader>
+                            <DialogTitle>Edit profile</DialogTitle>
+                            <DialogDescription>
+                                Make changes to your profile here. Click save when you're done.
+                            </DialogDescription>
+                        </DialogHeader>
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="phoneNumber"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Phone Number</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="routingNumber"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Routing Number</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="accountNumber"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Account Number</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <DialogFooter>
+                            <Button>Save changes</Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default EditAccountDialog;
+
diff --git a/src/main/frontend/src/components/ui/card.tsx b/src/main/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/src/main/frontend/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/main/frontend/src/components/ui/chart.tsx b/src/main/frontend/src/components/ui/chart.tsx
new file mode 100644
index 0000000..b6ae1e6
--- /dev/null
+++ b/src/main/frontend/src/components/ui/chart.tsx
@@ -0,0 +1,373 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import {
+  NameType,
+  Payload,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+      valueFormatter?: (value: ValueType) => string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+      valueFormatter,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+      valueFormatter,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground ml-5">
+                            {valueFormatter
+                                ? valueFormatter(item.value)
+                                : item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/src/main/frontend/src/components/ui/separator.tsx b/src/main/frontend/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/src/main/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/main/frontend/src/components/ui/tabs.tsx b/src/main/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..85d83be
--- /dev/null
+++ b/src/main/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/main/frontend/src/lib/api.ts b/src/main/frontend/src/lib/api.ts
index 71d5f3c..c49f1de 100644
--- a/src/main/frontend/src/lib/api.ts
+++ b/src/main/frontend/src/lib/api.ts
@@ -1,5 +1,5 @@
-export function getLoans() {
-    return fetch("/api/loans")
+export async function getLoans() {
+    return await fetch("/api/loans")
         .then((response) => response.json())
         .catch((error) => console.error(error));
 }
@@ -8,4 +8,10 @@ export function getAccounts() {
     return fetch("/api/accounts")
         .then((response) => response.json())
         .catch((error) => console.error(error));
+}
+
+export function getAccountLoans(id: string | undefined) {
+    return fetch(`/api/account/${id}/loans`)
+        .then((response) => response.json())
+        .catch((error) => console.error(error));
 }
\ No newline at end of file
diff --git a/src/main/frontend/src/main.tsx b/src/main/frontend/src/main.tsx
index ec5bf28..be963e0 100644
--- a/src/main/frontend/src/main.tsx
+++ b/src/main/frontend/src/main.tsx
@@ -15,7 +15,7 @@ const router = createBrowserRouter(
             <Route index element={<Navigate to={"login"} replace />} />
             <Route path={"login"} element={<Login />} />
             <Route path={"register"} element={<h1>HELLO OTHER ROUTE</h1>} />
-            <Route path={"/"} element={<ProtectedRoute />}>
+            <Route element={<ProtectedRoute />}>
                 <Route path={"app-demo"} element={<AdminTable />} />
                 <Route path={"account/:id"} element={<CustomerPage />} />
             </Route>
diff --git a/src/main/frontend/src/routes/AdminTable.tsx b/src/main/frontend/src/routes/AdminTable.tsx
index 0adda12..a22876e 100644
--- a/src/main/frontend/src/routes/AdminTable.tsx
+++ b/src/main/frontend/src/routes/AdminTable.tsx
@@ -19,6 +19,8 @@ import {
 import {useNavigate} from "react-router-dom";
 
 import CreateLoanDialog from "@/components/CreateLoanDialog.tsx";
+import DialogSwitcher from "@/components/DialogSwitcher.tsx";
+import CreateAccountDialog from "@/components/CreateAccountDialog.tsx";
 
 function AdminTable() {
   const [data, setData] = useState<Loan[]>([]);
@@ -45,7 +47,10 @@ function AdminTable() {
     <>
         <div className={"mb-2 flex justify-between w-5/6"}>
             <h1 className={"text-4xl"}>Loans</h1>
-            <CreateLoanDialog />
+            <DialogSwitcher>
+                <CreateLoanDialog submit={getLoans} />
+                <CreateAccountDialog />
+            </DialogSwitcher>
         </div>
         {loading ? (
             <p>Loading...</p>
@@ -62,13 +67,15 @@ function AdminTable() {
                         </TableRow>
                     </TableHeader>
                     <TableBody>
-                        {data.map((loan) => {
+                        {[...data, ...new Array(10 - data.length)].map((loan) => {
+                            if (!loan) {
+                                return (<TableRow key={Math.random()} className={"h-[45px]"}><TableCell/><TableCell/><TableCell/><TableCell/><TableCell/></TableRow>);
+                            }
                             const date = new Date(loan.date);
-                            console.log(loan);
                             return (
-                                <TableRow key={loan.id} onClick={() => {navigate(`/account/${loan.account?.id}`)}} className={"cursor-pointer"}>
+                                <TableRow key={loan.id} onClick={() => {navigate(`/account/${loan.account?.id}?loan=${loan.id}`)}} className={"cursor-pointer"}>
                                     <TableCell>{loan.account?.email}</TableCell>
-                                    <TableCell>{date.getMonth() + "/" + date.getDay() + "/" + date.getFullYear()}</TableCell>
+                                    <TableCell>{date.toLocaleDateString("en-US")}</TableCell>
                                     <TableCell>{loan.originAmount.toLocaleString(undefined, {style: "currency", currency: "USD"})}</TableCell>
                                     <TableCell>{loan.currentAmount.toLocaleString(undefined, {style: "currency", currency: "USD"})}</TableCell>
                                     <TableCell>{loan.interestRate.toFixed(2) + "%"}</TableCell>
diff --git a/src/main/frontend/src/routes/CustomerPage.tsx b/src/main/frontend/src/routes/CustomerPage.tsx
index 774f73a..7dbc81f 100644
--- a/src/main/frontend/src/routes/CustomerPage.tsx
+++ b/src/main/frontend/src/routes/CustomerPage.tsx
@@ -1,37 +1,190 @@
-import { useParams } from "react-router-dom";
+import {useParams, useSearchParams} from "react-router-dom";
 import {useCallback, useEffect, useState} from "react";
+import {getAccountLoans} from "@/lib/api.ts";
+import {Separator} from "@/components/ui/separator.tsx";
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "@/components/ui/chart.tsx";
+import {Area, AreaChart, CartesianGrid, XAxis} from "recharts";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import EditAccountDialog from "@/components/EditAccountDialog.tsx";
 
 
 function CustomerPage() {
-    const { id } = useParams();
+    const { id } = useParams<string>();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const loanId = Number(searchParams.get("loan"));
 
-    const [customer, setCustomer] = useState<Account | null>(null);
+    const [account, setAccount] = useState<Account | null>(null);
+    const [accountLoans, setAccountLoans] = useState<Loan[]>([]);
+    const [payments, setPayments] = useState<any[]>([]);
 
-    const getCustomer = useCallback(() => {
+    const getAccount = useCallback(() => {
         fetch(`/api/account/${id}`)
             .then((response) => response.json())
             .then((data) => {
-                setCustomer(data);
+                setAccount(data);
             })
             .catch((error) => console.error(error));
     }
     , [id]);
 
+    const getPayments = useCallback((loanId: number) => {
+        return fetch(`/api/payments/${loanId}`)
+            .then((response) => response.json())
+            .catch((error) => console.error(error));
+    }, []);
+
+    const changeLoan = async (value: string) => {
+        //setCurrentLoan(Number(value));
+        setSearchParams({ loan: value });
+        const payments = await getPayments(Number(value));
+        setPayments(payments);
+    };
+
+    const formatCurreny = (amount: number) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+        }).format(amount);
+    }
+
+    const formatPercent = (percent: number) => {
+        return `${percent}%`;
+    }
+
+    const updateAccount = (updateValues: any) => {
+        fetch(`/api/account/${id}`, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(updateValues),
+        }).then((response) => {
+            if (response.ok) {
+                return response.json();
+            } else {
+                console.error(response);
+            }
+        }).then((data) => {
+            setAccount(data);
+        }).catch((error) => {
+            console.error(error);
+        });
+    }
+
     useEffect(() => {
-        getCustomer();
+        const getThings = async () => {
+            try {
+                const loans: Loan[] = await getAccountLoans(id);
+                setAccountLoans(loans);
+                // if (loans.sort((a, b) => a.id - b.id)[0].id !== loanId)
+                const payments = await getPayments(loans.sort((a, b) => a.id - b.id)[0].id);
+                setPayments(payments);
+            } catch (error) {
+                console.error(error);
+            }
+        }
+
+        getAccount();
+
+        getThings();
     }, []);
 
+    let amountLessPayments = accountLoans[accountLoans.findIndex((val) => val.id == loanId)]?.originAmount
+    const chartData = [
+        {
+            month: accountLoans[accountLoans.findIndex((val) => val.id == loanId)]?.date,
+            principal: amountLessPayments,
+        },
+        ...payments.map((payment) => {
+            amountLessPayments -= payment.paymentAmount;
+            return {
+                month: payment.paymentDate,
+                principal: amountLessPayments,
+            }
+        })
+    ];
+
+    const chartConfig = {
+        desktop: {
+            label: "Desktop",
+            color: "hsl(var(--chart-2))",
+        },
+    } satisfies ChartConfig
+
   return (
-    <div>
-      <h1>{`Customer: ${id}`}</h1>
-        {customer ? (
-            <div>
-                <p>{JSON.stringify(customer)}</p>
-            </div>
-        ) : (
-            <p>Loading...</p>
-        )}
-    </div>
+      <div className={"flex"}>
+          <div className={"rounded-xl floating-shadow p-5 mr-4"}>
+              <h1>{account?.username}</h1>
+              <p className={"text-slate-400"}>{account?.email}</p>
+              <p className={"text-slate-400"}>{account?.phoneNumber}</p>
+              <p className={"font-bold"}>BANK INFO</p>
+              <p>ROUTING: <span className={"text-slate-400"}>{account?.routingNumber ? " XXXXXX" + account?.routingNumber.slice(-4) : "not on file"}</span></p>
+              <p>ACCOUNT: <span className={"text-slate-400"}>{account?.accountNumber ? "XXXXXX" + account?.accountNumber.slice(-4) : "not on file"}</span></p>
+              <EditAccountDialog submit={updateAccount}/>
+          </div>
+          <div>
+              <Tabs defaultValue={loanId.toString()} onValueChange={changeLoan} className={"rounded-xl floating-shadow p-2 mb-3 "}>
+                  <TabsList>
+                      {
+                          accountLoans.map((loan) => (
+                                <TabsTrigger key={loan.id} value={loan.id.toString()}>{"Loan #" + loan.id}</TabsTrigger>
+                            ))
+                      }
+                  </TabsList>
+              </Tabs>
+              <div className={"rounded-xl floating-shadow p-4 w-[700px]"}>
+                  <div className={"flex justify-between"}>
+                      <h1>{formatCurreny(accountLoans[accountLoans.findIndex((val) => val.id == loanId)]?.currentAmount)}</h1>
+                      <div className={"text-slate-400 text-right"}>
+                          <p>{formatCurreny(accountLoans[accountLoans.findIndex((val) => val.id == loanId)]?.originAmount)}</p>
+                          <p>{formatPercent(accountLoans[accountLoans.findIndex((val) => val.id == loanId)]?.interestRate)}</p>
+                      </div>
+
+                  </div>
+                  <Separator className={"my-2"}/>
+                  {payments.length > 1 ?
+                      (<ChartContainer config={chartConfig}>
+                          <AreaChart
+                              accessibilityLayer
+                              data={chartData}
+                              margin={{
+                                  left: 12,
+                                  right: 12,
+                                  top: 12,
+                              }}
+                          >
+                              <CartesianGrid vertical={false} horizontal={false}/>
+                              <XAxis
+                                  dataKey="month"
+                                  tickLine={false}
+                                  axisLine={false}
+                                  tickMargin={8}
+                                  tickFormatter={(value) => new Date(value).toLocaleDateString("en-US", {
+                                      month: "short",
+                                      day: "numeric"
+                                  })}
+                              />
+                              <ChartTooltip
+                                  cursor={false}
+                                  content={<ChartTooltipContent hideLabel
+                                                                valueFormatter={(value) => formatCurreny(value as number)}/>}
+                              />
+                              <Area
+                                  dataKey="principal"
+                                  type="linear"
+                                  fill="var(--color-desktop)"
+                                  fillOpacity={0.4}
+                                  stroke="var(--color-desktop)"
+                              />
+                          </AreaChart>
+                      </ChartContainer>
+                      ) : (
+                          <p>No payments have been made yet</p>
+                      )
+                  }
+              </div>
+          </div>
+      </div>
   );
 }
 
diff --git a/src/main/frontend/src/routes/Login.tsx b/src/main/frontend/src/routes/Login.tsx
index 4abb75e..d36ca75 100644
--- a/src/main/frontend/src/routes/Login.tsx
+++ b/src/main/frontend/src/routes/Login.tsx
@@ -46,10 +46,14 @@ function Login() {
             if (!response.ok) {
                 throw new Error("Password is incorrect")
             }
-        }).then(() => {
-            console.log(data);
+            return response.json();
+        }).then((account: Account) => { //Todo: auth code here not fully protected
             signIn(data);
-            navigate("/app-demo");
+            if (account.admin) {
+                navigate("/app-demo");
+            } else {
+                navigate("/account/" + account.id + "?loan=1");
+            }
         }).catch((error) => {
             form.setError(
                 "password",
diff --git a/src/main/frontend/src/vite-env.d.ts b/src/main/frontend/src/vite-env.d.ts
index c99f413..cc3d650 100644
--- a/src/main/frontend/src/vite-env.d.ts
+++ b/src/main/frontend/src/vite-env.d.ts
@@ -12,11 +12,13 @@ interface AuthContextType {
 
 interface Account {
     id: number;
-    isAdmin: boolean;
+    admin: boolean;
     username: string;
     password: string;
     email: string;
     phoneNumber: string;
+    routingNumber: string;
+    accountNumber: string;
 }
 
 interface Loan {
diff --git a/src/main/java/com/avengers/example/config/TestDatabaseConfig.java b/src/main/java/com/avengers/example/config/TestDatabaseConfig.java
index d9f5f68..a307622 100644
--- a/src/main/java/com/avengers/example/config/TestDatabaseConfig.java
+++ b/src/main/java/com/avengers/example/config/TestDatabaseConfig.java
@@ -23,11 +23,16 @@ public class TestDatabaseConfig {
     CommandLineRunner initDatabase(AccountRepository repository, LoanRepository loanRepository, PaymentRepository paymentRepository) {
         return args -> {
             logger.info("Preloading {}", repository.save(new Account(true, "Tony Stark", "test", "test@mail.com", "123-456-7890")));
-            logger.info("Preloading {}", repository.save(new Account(false, "Steve Rogers", "1234", "cap@mail.com", "123-123-1234")));
+            logger.info("Preloading {}", repository.save(new Account(false, "Steve Rogers", "1234", "cap@mail.com", "123-123-1234", "123456789", "987654321")));
             logger.info("Preloading {}", loanRepository.save(new Loan(1000, 0.05, 12f, new Date(), repository.findById(2L).orElse(null))));
             logger.info("Preloading {}", loanRepository.save(new Loan(50000, 3270.75, 6.99f, new Date(), repository.findById(2L).orElse(null))));
             logger.info("Preloading {}", paymentRepository.save(new Payment(100, new Date(), loanRepository.findById(1L).orElse(null))));
             logger.info("Preloading {}", paymentRepository.save(new Payment(80, new Date(), loanRepository.findById(1L).orElse(null))));
+            logger.info("Preloading {}", paymentRepository.save(new Payment(80, new Date(), loanRepository.findById(1L).orElse(null))));
+            logger.info("Preloading {}", paymentRepository.save(new Payment(400, new Date(), loanRepository.findById(1L).orElse(null))));
+            logger.info("Preloading {}", paymentRepository.save(new Payment(300, new Date(), loanRepository.findById(1L).orElse(null))));
+            logger.info("Preloading {}", paymentRepository.save(new Payment(19.95f, new Date(), loanRepository.findById(1L).orElse(null))));
+
         };
     }
 
diff --git a/src/main/java/com/avengers/example/controller/AccountController.java b/src/main/java/com/avengers/example/controller/AccountController.java
index 7de3fe4..5e82e75 100644
--- a/src/main/java/com/avengers/example/controller/AccountController.java
+++ b/src/main/java/com/avengers/example/controller/AccountController.java
@@ -1,6 +1,7 @@
 package com.avengers.example.controller;
 
 import com.avengers.example.domain.Account;
+import com.avengers.example.domain.AccountUpdate;
 import com.avengers.example.service.AccountService;
 import lombok.AllArgsConstructor;
 import org.springframework.http.HttpStatus;
@@ -25,6 +26,13 @@ public ResponseEntity<?> save(@RequestBody Account account)
         return new ResponseEntity<>(accountService.create(account), HttpStatus.CREATED);
     }
 
+    //post route to update account
+    @PutMapping("/account/{id}")
+    public ResponseEntity<?> update(@PathVariable long id, @RequestBody AccountUpdate account)
+    {
+        return new ResponseEntity<>(accountService.update(id, account), HttpStatus.OK);
+    }
+
     /**
      * @return A response object containing all accounts from the database.
      */
diff --git a/src/main/java/com/avengers/example/controller/LoanController.java b/src/main/java/com/avengers/example/controller/LoanController.java
index 9487088..bf8888f 100644
--- a/src/main/java/com/avengers/example/controller/LoanController.java
+++ b/src/main/java/com/avengers/example/controller/LoanController.java
@@ -5,10 +5,9 @@
 import lombok.AllArgsConstructor;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Optional;
 
 @AllArgsConstructor
 @RestController
@@ -36,4 +35,19 @@ public ResponseEntity<?> findAll()
     {
         return new ResponseEntity<>(loanService.findAll(), HttpStatus.OK);
     }
+
+    /**
+     * @param id The id of the loan to be retrieved.
+     * @return A response object containing the loan with the specified id.
+     */
+    @GetMapping("/loan/{id}")
+    public ResponseEntity<?> findById(@PathVariable Long id)
+    {
+        Optional<Loan> loan = loanService.findById(id);
+        if (loan.isPresent()) {
+            return ResponseEntity.ok(loan.get());
+        } else {
+            return ResponseEntity.notFound().build();
+        }
+    }
 }
diff --git a/src/main/java/com/avengers/example/controller/LoginController.java b/src/main/java/com/avengers/example/controller/LoginController.java
index b621a32..67669a0 100644
--- a/src/main/java/com/avengers/example/controller/LoginController.java
+++ b/src/main/java/com/avengers/example/controller/LoginController.java
@@ -1,6 +1,8 @@
 package com.avengers.example.controller;
 
+import com.avengers.example.domain.Account;
 import com.avengers.example.domain.Login;
+import com.avengers.example.service.AccountService;
 import com.avengers.example.service.LoginService;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
@@ -12,14 +14,17 @@
 @RestController
 public class LoginController {
     private final LoginService loginService;
+    private final AccountService accountService;
 
-    public LoginController(LoginService loginService) {
+    public LoginController(LoginService loginService, AccountService accountService) {
         this.loginService = loginService;
+        this.accountService = accountService;
     }
 
     @PostMapping("/login")
     public ResponseEntity<?> login(@RequestBody Login login) {
         boolean isValid = loginService.isLoginValid(login.email(), login.password());
-        return new ResponseEntity<>(isValid ? HttpStatus.OK : HttpStatus.UNAUTHORIZED);
+        Account account = accountService.findByEmailAndPassword(login.email(), login.password());
+        return new ResponseEntity<>(account, isValid ? HttpStatus.OK : HttpStatus.UNAUTHORIZED);
     }
 }
diff --git a/src/main/java/com/avengers/example/domain/Account.java b/src/main/java/com/avengers/example/domain/Account.java
index 578a068..6ef6ec3 100644
--- a/src/main/java/com/avengers/example/domain/Account.java
+++ b/src/main/java/com/avengers/example/domain/Account.java
@@ -2,6 +2,7 @@
 
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.Getter;
 import lombok.Setter;
@@ -29,6 +30,12 @@ public class Account
 
     private String phoneNumber;
 
+    @Setter
+    private String routingNumber;
+
+    @Setter
+    private String accountNumber;
+
     @OneToMany(mappedBy = "account", cascade = CascadeType.ALL, orphanRemoval = true)
     @JsonIgnore
     private List<Loan> loans = new ArrayList<>();
@@ -40,6 +47,17 @@ public Account()
     {
     }
 
+    public Account(boolean isAdmin, String username, String password, String email, String phoneNumber, String routingNumber, String accountNumber)
+    {
+        this.isAdmin = isAdmin;
+        this.username = username;
+        this.password = password;
+        this.email = email;
+        this.phoneNumber = phoneNumber;
+        this.routingNumber = routingNumber;
+        this.accountNumber = accountNumber;
+    }
+
     public Account(boolean isAdmin, String username, String password, String email, String phoneNumber)
     {
         this.isAdmin = isAdmin;
diff --git a/src/main/java/com/avengers/example/domain/AccountUpdate.java b/src/main/java/com/avengers/example/domain/AccountUpdate.java
new file mode 100644
index 0000000..c174f80
--- /dev/null
+++ b/src/main/java/com/avengers/example/domain/AccountUpdate.java
@@ -0,0 +1,5 @@
+package com.avengers.example.domain;
+
+public record AccountUpdate(String email, String phoneNumber, String routingNumber, String accountNumber)
+{
+}
diff --git a/src/main/java/com/avengers/example/service/AccountService.java b/src/main/java/com/avengers/example/service/AccountService.java
index da36250..b59e87e 100644
--- a/src/main/java/com/avengers/example/service/AccountService.java
+++ b/src/main/java/com/avengers/example/service/AccountService.java
@@ -1,6 +1,7 @@
 package com.avengers.example.service;
 
 import com.avengers.example.domain.Account;
+import com.avengers.example.domain.AccountUpdate;
 import com.avengers.example.domain.Loan;
 import com.avengers.example.repository.AccountRepository;
 import jakarta.transaction.Transactional;
@@ -45,4 +46,34 @@ public List<Loan> findLoansByAccountId(long id)
         }
         return account.getLoans();
     }
+
+    public Account update(long id, AccountUpdate account)
+    {
+        Account existingAccount = accountRepository.findById(id).orElse(null);
+        if (null == existingAccount)
+        {
+            return null;
+        }
+
+        if (null != account.email() && !account.email().isEmpty())
+        {
+            existingAccount.setEmail(account.email());
+        }
+
+        if (null != account.phoneNumber() && !account.phoneNumber().isEmpty())
+        {
+            existingAccount.setPhoneNumber(account.phoneNumber());
+        }
+
+        if (null != account.routingNumber() && !account.routingNumber().isEmpty())
+        {
+            existingAccount.setRoutingNumber(account.routingNumber());
+        }
+
+        if (null != account.accountNumber() && !account.accountNumber().isEmpty())
+        {
+            existingAccount.setAccountNumber(account.accountNumber());
+        }
+        return accountRepository.save(existingAccount);
+    }
 }
diff --git a/src/main/java/com/avengers/example/service/LoanService.java b/src/main/java/com/avengers/example/service/LoanService.java
index dd33070..7886065 100644
--- a/src/main/java/com/avengers/example/service/LoanService.java
+++ b/src/main/java/com/avengers/example/service/LoanService.java
@@ -7,6 +7,7 @@
 import org.springframework.stereotype.Service;
 
 import java.util.List;
+import java.util.Optional;
 
 @AllArgsConstructor
 @Service
@@ -24,4 +25,9 @@ public List<Loan> findAll()
     {
         return loanRepository.findAll();
     }
+
+    public Optional<Loan> findById(Long id)
+    {
+        return loanRepository.findById(id);
+    }
 }