diff --git a/src/app/Display/Bank.ts b/src/app/Display/Bank.ts
index fb979fe..4191c35 100644
--- a/src/app/Display/Bank.ts
+++ b/src/app/Display/Bank.ts
@@ -19,7 +19,7 @@ class Account {
     withdraw(amount: number): void {
         if (amount > 0 && amount <= this.balance) {
             this.balance -= amount;
-            console.log(`Wit hdrawn ${amount}. New balance: ${this.balance}`);
+            console.log(`Withdrawn ${amount}. New balance: ${this.balance}`);
         } else {
             console.log("Invalid withdrawal amount or insufficient funds.");
         }
@@ -33,11 +33,16 @@ class Account {
         return this.accountNumber;
     }
 
-    transfer(amount: number): boolean {
+    transfer(amount: number, toAccount: Account): boolean {
         if (amount > 0 && amount <= this.balance) {
-            this.balance -= amount;
+            this.withdraw(amount);
+            toAccount.deposit(amount);
+            console.log(
+                `Transferred ${amount} to account ${toAccount.getAccountNumber()}.`,
+            );
             return true;
         } else {
+            console.log("Invalid transfer amount or insufficient funds.");
             return false;
         }
     }
@@ -89,26 +94,55 @@ export class Bank {
         }
     }
 
-    getBalance(accountNumber: string): void {
+    getBalance(accountNumber: string): number {
         const account = this.findAccount(accountNumber);
         if (account) {
             console.log(
                 `Balance for account ${accountNumber}: ${account.getBalance()}`,
             );
+            return account.getBalance();
         } else {
             console.log("Account not found.");
+            return 0; // or throw an error or return null to indicate account not found
         }
     }
+
+    getBalancee(accountNumber: string): number {
+        return this.getBalance(accountNumber);
+    }
+
+    transfer(
+        fromAccountNumber: string,
+        toAccountNumber: string,
+        amount: number,
+    ): void {
+        const fromAccount = this.findAccount(fromAccountNumber);
+        const toAccount = this.findAccount(toAccountNumber);
+        if (fromAccount && toAccount) {
+            fromAccount.transfer(amount, toAccount);
+        } else {
+            console.log("One or both accounts not found.");
+        }
+    }
+
+    getAccount() {
+        return this.accounts;
+    }
 }
 
-//Working test cases
+// Working test cases
 
 const bank = new Bank();
 bank.createAccount("1234567890", 1000);
 bank.deposit("1234567890", 500);
 bank.withdraw("1234567890", 200);
 bank.getBalance("1234567890");
+
 bank.createAccount("0987654321");
 bank.deposit("0987654321", 2000);
 bank.getBalance("0987654321");
-bank.withdraw("0987654321", 3000);
+bank.withdraw("0987654321", 3000); // This will trigger "Invalid withdrawal amount or insufficient funds."
+
+bank.transfer("1234567890", "0987654321", 300);
+bank.getBalance("1234567890");
+bank.getBalance("0987654321");
diff --git a/src/app/Display/Display.component.css b/src/app/Display/Display.component.css
index e69de29..ec1dcf6 100644
--- a/src/app/Display/Display.component.css
+++ b/src/app/Display/Display.component.css
@@ -0,0 +1,90 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+    color: #343a40;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #007bff;
+    margin-bottom: 40px;
+}
+
+.section {
+    margin-bottom: 40px;
+}
+
+.section h2 {
+    color: #007bff;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007bff;
+    padding-bottom: 10px;
+}
+
+form {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 10px;
+}
+
+form label {
+    align-self: center;
+}
+
+form input[type="text"],
+form input[type="number"],
+form button {
+    padding: 10px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+}
+
+form input[type="text"]:focus,
+form input[type="number"]:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
+}
+
+form button {
+    grid-column: span 2;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}
+
+#display,
+#balance-result {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #e9ecef;
+    border-radius: 4px;
+    border: 1px solid #ced4da;
+}
+
+@media (max-width: 600px) {
+    form {
+        grid-template-columns: 1fr;
+    }
+
+    form button {
+        grid-column: span 1;
+    }
+}
diff --git a/src/app/Display/Display.component.html b/src/app/Display/Display.component.html
index 88d8743..39ae090 100644
--- a/src/app/Display/Display.component.html
+++ b/src/app/Display/Display.component.html
@@ -5,12 +5,18 @@ <h1>Bank Account Management System</h1>
         <h2>Create Account</h2>
         <form id="create-account-form">
             <label for="create-account-number">Account Number:</label>
-            <input type="text" id="create-account-number" required />
+            <input
+                type="number"
+                id="create-account-number"
+                pattern="\d{10}"
+                title="Account number must be exactly 10 digits"
+                required
+            />
             <label for="create-account-holder">Holder Name:</label>
             <input type="text" id="create-account-holder" required />
             <label for="create-account-balance">Initial Deposit:</label>
             <input type="number" id="create-account-balance" required />
-            <button id="submitt" type="submit">Create Account</button>
+            <button id="submitt" type="button">Create Account</button>
         </form>
         <div id="display"></div>
     </div>
@@ -19,10 +25,10 @@ <h2>Create Account</h2>
         <h2>Deposit</h2>
         <form id="deposit-form">
             <label for="deposit-account-number">Account Number:</label>
-            <input type="text" id="deposit-account-number" required />
+            <input type="number" id="deposit-account-number" required />
             <label for="deposit-amount">Amount:</label>
             <input type="number" id="deposit-amount" required />
-            <button type="submit">Deposit</button>
+            <button id="depositt" type="button">Deposit</button>
         </form>
     </div>
 
@@ -30,10 +36,10 @@ <h2>Deposit</h2>
         <h2>Withdraw</h2>
         <form id="withdraw-form">
             <label for="withdraw-account-number">Account Number:</label>
-            <input type="text" id="withdraw-account-number" required />
+            <input type="number" id="withdraw-account-number" required />
             <label for="withdraw-amount">Amount:</label>
             <input type="number" id="withdraw-amount" required />
-            <button type="submit">Withdraw</button>
+            <button id="withdraww" type="button">Withdraw</button>
         </form>
     </div>
 
@@ -41,8 +47,24 @@ <h2>Withdraw</h2>
         <h2>Check Balance</h2>
         <form id="balance-form">
             <label for="balance-account-number">Account Number:</label>
-            <input type="text" id="balance-account-number" required />
-            <button id="Check" type="submit">Check Balance</button>
+            <input type="number" id="balance-account-number" required />
+            <button id="Check" type="button">Check Balance</button>
+        </form>
+        <div id="balance-result"></div>
+    </div>
+
+    <div class="section">
+        <h2>Transfer</h2>
+        <form id="balance-form">
+            <label for="transfer-from-account-number"
+                >Account Number from:</label
+            >
+            <input type="number" id="transfer-from-account-number" required />
+            <label for="transfer-to-account-number">Account Number to:</label>
+            <input type="number" id="transfer-to-account-number" required />
+            <label for="withdraw-amount">Amount:</label>
+            <input type="number" id="transfer-amount" required />
+            <button id="transfer" type="button">Transfer</button>
         </form>
         <div id="balance-result"></div>
     </div>
diff --git a/src/app/Display/Display.component.ts b/src/app/Display/Display.component.ts
index 9bb2a96..ebe623d 100644
--- a/src/app/Display/Display.component.ts
+++ b/src/app/Display/Display.component.ts
@@ -11,15 +11,25 @@ import css from "./Display.component.css";
 import { Bank } from "./Bank";
 
 export class DisplayComponent extends EzComponent {
-    protected createe1: string = "";
-    protected name: string = "";
-    protected amountt: number = 0;
+    private createe1: string = "";
+    private name: string = "";
+    private amountt: number = 0;
+    private bank: Bank;
+    private depositnum: string = "";
+    private depositam: number = 0;
+    private withdrawnum: string = "";
+    private withdrawam: number = 0;
+    private checkbal: string = "";
+    private transfrom: string = "";
+    private transto: string = "";
+    private amounttransfer: number = 0;
 
     @BindValue("display")
     protected valuee: string = "";
 
     constructor() {
         super(html, css);
+        this.bank = new Bank();
     }
 
     @Input("create-account-number")
@@ -39,12 +49,32 @@ export class DisplayComponent extends EzComponent {
 
     @Click("submitt")
     creataccount() {
-        const bank: Bank = new Bank();
+        if (this.createe1.length <= 9 || this.createe1.length > 10) {
+            EzDialog.popup(
+                this,
+                `Account number must be exactly 10 digits`,
+                "Account Info",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+
+        if (this.bank.findAccount(this.createe1)) {
+            EzDialog.popup(
+                this,
+                `Account ${this.createe1} exists`,
+                "Account Info",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
         if (this.createe1 && this.name && this.amountt) {
-            bank.createAccount(this.createe1, this.amountt);
+            this.bank.createAccount(this.createe1, this.amountt);
             EzDialog.popup(
                 this,
-                `${this.name} your account has been succesfully created`,
+                `Account ${this.createe1} created`,
                 "Account Info",
                 ["Ok"],
                 "btn btn-primary",
@@ -53,8 +83,8 @@ export class DisplayComponent extends EzComponent {
         } else {
             EzDialog.popup(
                 this,
-                `Your account was not succesfully created`,
-                "Fill in all required fields",
+                `Your account was not successfully created`,
+                "Empty Fields",
                 ["Ok"],
                 "btn btn-primary",
             );
@@ -64,43 +94,279 @@ export class DisplayComponent extends EzComponent {
 
     @Input("deposit-account-number")
     deposit1(e: ValueEvent) {
-        return e.value.toString();
+        this.depositnum = e.value.toString();
     }
 
     @Input("deposit-amount")
     deposit2(e: ValueEvent) {
-        return Number(e.value);
+        this.depositam = Number(e.value);
     }
 
-    deposit(e1: ValueEvent, e2: ValueEvent) {
-        const bank: Bank = new Bank();
-        const accountNumber = this.deposit1(e1);
-        const amount = this.deposit2(e2);
+    getAccountbalance(accountNumber: string): number {
+        const account = this.bank.findAccount(accountNumber);
+        if (account) {
+            return account.getBalance();
+        }
+        return 0; // or throw an error or return null to indicate account not found
+    }
 
-        bank.deposit(accountNumber, amount);
+    @Click("depositt")
+    deposit() {
+        if (this.depositnum.length <= 9 || this.depositnum.length > 10) {
+            EzDialog.popup(
+                this,
+                `Account number must be exactly 10 digits`,
+                "Account Info",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+
+        if (this.depositam <= 0) {
+            EzDialog.popup(
+                this,
+                `Invalid deposit amount`,
+                "Unsuccessful",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (!this.depositnum || !this.depositam) {
+            EzDialog.popup(
+                this,
+                `Unsuccessful`,
+                "Empty Fields",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (this.bank.findAccount(this.depositnum)) {
+            this.bank.deposit(this.depositnum, this.depositam);
+            EzDialog.popup(
+                this,
+                `Deposited ${this.depositam}. New balance: ${this.getAccountbalance(this.depositnum)}`,
+                "Successful",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        } else {
+            EzDialog.popup(
+                this,
+                `Account does not exist`,
+                "Error Occurred",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
     }
 
     @Input("withdraw-account-number")
     input1(e: ValueEvent) {
-        return e.value.toString();
+        this.withdrawnum = e.value.toString();
     }
 
     @Input("withdraw-amount")
     input2(e: ValueEvent) {
-        return Number(e.value);
+        this.withdrawam = Number(e.value);
     }
 
-    withdraw(e1: ValueEvent, e2: ValueEvent) {
-        const bank = new Bank();
-        const accountNumber = this.input1(e1);
-        const amount = this.input2(e2);
+    @Click("withdraww")
+    withdraw() {
+        if (this.withdrawnum.length <= 9 || this.withdrawnum.length > 10) {
+            EzDialog.popup(
+                this,
+                `Account number must be exactly 10 digits`,
+                "Account Info",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+
+        if (!this.withdrawnum || !this.withdrawam) {
+            EzDialog.popup(
+                this,
+                `Unsuccessful`,
+                "Empty Fields",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
 
-        bank.withdraw(accountNumber, amount);
+        if (this.withdrawam <= 0) {
+            EzDialog.popup(
+                this,
+                `Invalid withdrawal amount`,
+                "Error Occurred",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+
+        const account = this.bank.findAccount(this.withdrawnum);
+        if (account) {
+            if (this.withdrawam > account.getBalance()) {
+                EzDialog.popup(
+                    this,
+                    `Insufficient funds`,
+                    "Error Occurred",
+                    ["Ok"],
+                    "btn btn-primary",
+                );
+                return;
+            }
+            this.bank.withdraw(this.withdrawnum, this.withdrawam);
+            EzDialog.popup(
+                this,
+                `Withdrawn ${this.withdrawam}. New balance: ${this.getAccountbalance(this.withdrawnum)}`,
+                "Successful",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        } else {
+            EzDialog.popup(
+                this,
+                `Account does not exist`,
+                "Error Occurred",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
     }
 
     @Input("balance-account-number")
     input(e: ValueEvent) {
-        const bank: Bank = new Bank();
-        bank.getBalance(e.value);
+        return (this.checkbal = e.value);
+    }
+
+    @Click("Check")
+    checkbaal() {
+        if (this.checkbal.length <= 9 || this.checkbal.length > 10) {
+            EzDialog.popup(
+                this,
+                `Account number must be exactly 10 digits`,
+                "Account Info",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (!this.checkbal) {
+            EzDialog.popup(
+                this,
+                `Empty Field`,
+                "Error Occured",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (!this.bank.findAccount(this.checkbal)) {
+            EzDialog.popup(
+                this,
+                `Account ${this.checkbal} does not exist`,
+                "Error Occured",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        } else {
+            EzDialog.popup(
+                this,
+                `Balance for account ${this.checkbal}: ${this.getAccountbalance(this.checkbal)}`,
+                "Successful",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+    }
+
+    @Input("transfer-from-account-number")
+    from(e: ValueEvent) {
+        this.transfrom = e.value;
+    }
+
+    @Input("transfer-to-account-number")
+    to(e: ValueEvent) {
+        this.transto = e.value;
+    }
+
+    @Input("transfer-amount")
+    amounttrans(e: ValueEvent) {
+        this.amounttransfer = Number(e.value);
+    }
+
+    @Click("transfer")
+    transfer() {
+        const account = this.bank.findAccount(this.transfrom);
+        if (account) {
+            if (this.amounttransfer > account.getBalance()) {
+                EzDialog.popup(
+                    this,
+                    `Insifficient fund or Invalid amount`,
+                    "Error Occured",
+                    ["Ok"],
+                    "btn btn-primary",
+                );
+                return;
+            }
+        }
+        if (this.amounttransfer < 0) {
+            EzDialog.popup(
+                this,
+                `Insifficient fund or Invalid amount`,
+                "Error Occured",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (!this.transfrom || !this.transto || !this.amounttransfer) {
+            EzDialog.popup(
+                this,
+                `One or more Empty field`,
+                "Error Occured",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
+        if (
+            !this.bank.findAccount(this.transfrom) ||
+            !this.bank.findAccount(this.transto)
+        ) {
+            EzDialog.popup(
+                this,
+                `One or both accounts not found.`,
+                "Error Occured",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        } else {
+            this.bank.transfer(
+                this.transfrom,
+                this.transto,
+                this.amounttransfer,
+            );
+            EzDialog.popup(
+                this,
+                `Amount succesfully transferred to ${this.transto}`,
+                "Successful",
+                ["Ok"],
+                "btn btn-primary",
+            );
+            return;
+        }
     }
 }