diff --git a/4-bank-project/solution.md b/4-bank-project/solution.md
new file mode 100644
index 0000000..ca8d3c7
--- /dev/null
+++ b/4-bank-project/solution.md
@@ -0,0 +1,189 @@
+# Bank-project
+
+## 1-template-route
+
+### Challenge
+```
+
+ Credits
+ Credit
+ Developed by : Mihir
+ All rights reserved for Mihir.
+
+
+const routes = {
+ '/credits': {templateId:'credits',title:'Bank credits'},
+};
+```
+### Assignment
+```
+const routes = {
+ '/login': { templateId: 'login' ,title:'Bank login'},
+ '/dashboard': { templateId: 'dashboard',title:'Bank dashboard', init: refresh },
+ '/credits': {templateId:'credits',title:'Bank credits'},
+};
+```
+Set the title elements text to this using the following piece of code in updateroute()
+```
+document.getElementById('title').innerText = route.title;
+```
+console.log for the printing 'Dashboard is shown'.
+```
+function updateRoute() {
+ const path = window.location.pathname;
+ const route = routes[path];
+ if (!route) {
+ return navigate('/dashboard');
+ }
+ if(path=='/dashboard'){
+ console.log("Dashboard is shown")
+ }
+}
+```
+
+## 2-forms
+
+### Challenge
+If the account already exists using js it display error messages to the user.
+```
+
+
+const result = await createAccount(jsonData);
+if (result.error) {
+ return updateElement('regerror', result.error);
+}
+```
+
+### Assignment
+```
+h1, .title {
+ text-align: center;
+ color: hsl(233, 52%, 33%);
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.box {
+ margin: auto;
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+ width: 100%;
+ max-width: 700px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+input {
+ border-color: azure;
+ height: 30px;
+ width: 98%;
+}
+
+button {
+ border-radius: 10px;
+ height: 40px;
+ width: 98%;
+ background-color: #d6eaf8;
+ border: 1px solid black;
+}
+
+button:hover {
+ background-color: #a3e4d7;
+}
+```
+
+## 3-data
+
+### Challenge
+```
+@media (orientation: landscape) {
+ #table, #btable {
+ width: 200px;
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+ display: block;
+ }
+
+ #btable {
+ background-color: #3d49a3;
+ }
+
+ #table tr {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 10px;
+ }
+
+ #table td {
+ padding: 5px 0;
+ }
+}
+```
+
+### Assignment
+I have completed the refactoring of the code and added the comments in app.js file.
+
+## 4-state-management
+
+### Challenge
+I have changed the init function to store only name and transactions
+```
+const currentaccount = localStorage.getItem(storageKey);
+const data = {
+ user: state.account.user,
+ transactions: state.account.transactions,
+};
+if (currentaccount) {
+ updateState('account', JSON.parse(data));
+}
+```
+
+### Assignment
+HTML
+```
+
+```
+
+Javascript
+```
+let user = "";
+async function trans(event) {
+ event.preventDefault();
+ const form = new FormData(document.getElementById('transform'));
+ const jsonData = JSON.stringify(Object.fromEntries(form));
+ await confirmtrans(jsonData);
+ console.log("Transaction done");
+ updateState('account', state.account);
+ updateDashboard();
+}
+async function confirmtrans(data) {
+ await fetch(`http://localhost:5000/api/accounts/${user}/transactions`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: data
+ });
+}
+document.getElementById('transform').addEventListener('submit', trans);
+```