diff --git a/index.html b/index.html
index 4300b10..d5c4516 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,6 @@
                 <div class="row  mt-5">
                     <form class="login-form">
                         <div class="row input-group input-group-sm">
-                            <!-- <div class="col-md-4 offset-md-10 col-auto ms-auto logout-btn-wrapper"> -->
                             <div class="col-auto ms-auto">
                                 <button type="button" class="btn btn-outline-dark input-logout-btn">Logout</button>
                             </div>
@@ -47,24 +46,34 @@ <h4 class="welcome-message" style="margin-left:0">Welcome to your Expense Tracke
             <section class="main">
                 <div class="row mt-5 justify-content-md-center">
                     <div class="mb-4 col-lg-4 col-md-12 col-sm-12 account-summary">
-                        <div class="card-widget card-widget-income">
+                        <div class="card-widget">
                             <div class="card-widget-body">
                                 <div class="dot me-3 bg-indigo"></div>
                                 <div class="text">
-                                    Income received: <span class="transaction-income"></span>
+                                    <span class="transaction-income transaction-summary-text"></span>
+                                    <span class="text-muted text-uppercase small">Income</span>
                                 </div>  
-                                <div class="col-auto ms-auto"><i class="bi bi-wallet"></i></div>
+                                <div class="col-auto ms-auto">
+                                    <div class="income-icon-background">
+                                        <i class="bi bi-wallet"></i>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="mb-4 col-lg-4 col-md-12 col-sm-12 account-summary">
-                        <div class="card-widget card-widget-expenses">
+                        <div class="card-widget">
                             <div class="card-widget-body">
                                 <div class="dot me-3 bg-red"></div>
                                 <div class="text">
-                                    Expenses: <span class="transaction-expenses"></span>
+                                    <span class="transaction-expenses transaction-summary-text"></span>
+                                    <span class="text-muted text-uppercase small">Expenses</span>
+                                </div>
+                                <div class="col-auto ms-auto">
+                                    <div class="expense-icon-background">
+                                        <i class="bi bi-cash-coin"></i>
+                                    </div>
                                 </div>
-                                <div class="col-auto ms-auto"><i class="bi bi-cash-coin"></i></div>
                             </div>
                         </div>
                     </div>
@@ -73,39 +82,32 @@ <h4 class="welcome-message" style="margin-left:0">Welcome to your Expense Tracke
                             <div class="card-widget-body">
                                 <div class="dot me-3 bg-green"></div>
                                 <div class="text">
-                                    Balance: <span class="transaction-balance"></span>
+                                    <span class="transaction-balance transaction-summary-text"></span>
+                                    <span class="text-muted text-uppercase small">Balance</span>
+                                </div>
+                                <div class="col-auto ms-auto">
+                                    <div class="balance-icon-background">
+                                        <i class="bi bi-wallet2"></i>
+                                    </div>
                                 </div>
-                                <div class="col-auto ms-auto"><strong><i class="bi bi-wallet2"></i></strong></div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="row mt-5 justify-content-md-center">
                     <div class="col-lg-7 mb-4 mb-lg-0 transaction-view">
-                        <div class="container card-widget card-widget-header-included">
+                        <div class="container card-widget card-widget-transactions card-widget-header-included">
                             <div class="row mb-2 ml-2">
                                 <h4 class="text-muted text-uppercase small">All Transactions</h4>
                             </div>
-                            <!-- <table>
-                            <thead class="thead-dark">
-                                <tr>
-                                     <th scope="col">Type</th>
-                                    <th scope="col">Category</th>
-                                    <th scope="col">Date</th>
-                                    <th scope="col">Amount</th>
-                                </tr>
-                                </thead>
-                            </table> -->
                             <div class="container">
                                 <div class="row thead-dark">
-                                    <!-- <div class="col ">2 deposit</div> -->
                                     <div class="col-md-2 offset-md-3">Category</div>
                                     <div class="col-md-3 offset-md-1 transaction-header">Date</div>
                                     <div class="col-md-3 transaction-header">Amount</div>
                                 </div>
                             </div>
                             <div class="container movements container-movements card-body pt-0">
-                            <!-- <div class="container"> -->
                                 <div class="card-widget-body h-100">
                                     <div class="row my-1">
                                             <div class="col movements-type movements-type-deposit">2 deposit</div>
@@ -125,7 +127,7 @@ <h4 class="text-muted text-uppercase small">All Transactions</h4>
                         
                     </div>
                     <div class="col-lg-5 mb-4 mb-lg-0 operation-view">
-                        <div class="container deposits operations-display p-2 card-widget">
+                        <div class="container deposits operations-display p-2 card-widget card-widget-income">
                             <div class="h-50 pb-4 pb-lg-2">
                                 <div class="card-body">
                                     <div class="row mb-2">
@@ -135,10 +137,10 @@ <h4 class="text-muted text-uppercase small">Deposit income into account</h4>
                                         <form id="form-deposits">
                                             <div class="form-row align-items-center input-group input-group-sm">
                                                 <div class="col">
-                                                    <input type="date" class=" form-control input-date-income" placeholder="Date" aria-required="true">
+                                                    <input type="date" class=" form-control input-date-income input-income-border" placeholder="Date" aria-required="true">
                                                 </div>
                                                 <div class="col mx-2">
-                                                    <input type="amount" class=" form-control input-amount-income" placeholder="R400" aria-required="true">
+                                                    <input type="amount" class=" form-control input-amount-income input-income-border" placeholder="R400" aria-required="true">
                                                 </div>
                                                 <div class="col">
                                                     <button type="button" class="btn btn-outline-dark submit-income" style="width:100%">Submit</button>
@@ -149,7 +151,7 @@ <h4 class="text-muted text-uppercase small">Deposit income into account</h4>
                                 </div>
                             </div>
                         </div>
-                        <div class="container withdrawals operations-display mt-2 p-2 card-widget">
+                        <div class="container withdrawals operations-display mt-2 p-2 card-widget card-widget-expenses">
                             <div class="h-50 pb-4 pb-lg-2">
                                 <div class="card-body">
                                     <div class="row mb-2">
@@ -159,7 +161,7 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
                                         <form id="form-expenses" class="input-group input-group-sm">
                                             <div class="form-row">
                                                 <div class="mb-1">
-                                                    <select class="form-control input-type-expense" required="true">
+                                                    <select class="form-control input-type-expense expense-income-border" required="true">
                                                         <option value="" disabled selected hidden>-Please Select-</option>
                                                         <option>Food</option>
                                                         <option>Petrol</option>
@@ -170,10 +172,10 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
                                             </div>
                                             <div class="form-row align-items-center input-group input-group-sm">
                                                 <div class="col">
-                                                    <input type="date" class=" form-control input-date-expense" placeholder="Date" required="true">
+                                                    <input type="date" class=" form-control input-date-expense expense-income-border" placeholder="Date" required="true">
                                                 </div>
                                                 <div class="col mx-2">
-                                                    <input type="amount" class=" form-control input-amount-expense" placeholder="R400" required="true">
+                                                    <input type="amount" class=" form-control input-amount-expense expense-income-border" placeholder="R400" required="true">
                                                 </div>
                                                 <div class="col">
                                                     <button type="button" class="btn btn-outline-dark submit-expense" style="width:100%">Submit</button>
@@ -184,7 +186,7 @@ <h4 class="text-muted text-uppercase small">Add an Expense to account</h4>
                                 </div>
                             </div> 
                         </div>
-                        <div class="container close-account operations-display mt-2 p-2 card-widget">
+                        <div class="container close-account operations-display mt-2 p-2 card-widget card-widget-close">
                             <div class="h-50 pb-4 pb-lg-2  container closure p-2">
                                 <div class="card-body">
                                     <div class="row">
@@ -195,10 +197,10 @@ <h4 class="text-muted text-uppercase small">Close your account</h4>
                                     <form>
                                         <div class="form-row align-items-center input-group input-group-sm">
                                             <div class="col">
-                                                <input type="text" class=" form-control input-account-username" placeholder="username">
+                                                <input type="text" class=" form-control input-account-username input-account-border" placeholder="username">
                                             </div>
                                             <div class="col mx-2">
-                                                <input type="password" class=" form-control input-account-password" placeholder="password">
+                                                <input type="password" class=" form-control input-account-password input-account-border" placeholder="password">
                                             </div>
                                             <div class="col">
                                                 <button type="button" class="btn btn-outline-dark submit-delete-account" style="width:100%">Submit</button>
diff --git a/styles.css b/styles.css
index 22f0abb..185a410 100644
--- a/styles.css
+++ b/styles.css
@@ -5,33 +5,63 @@
 .input-logout-btn{
   opacity: 0;
 }
+.transaction-summary-text{
+  font-size:28px;
+}
 .dot {
-  width: 10px;
-  height: 10px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.income-icon-background{
+  width: 55px;
+  height: 55px;
   border-radius: 50%;
   flex-grow: 0;
   flex-shrink: 0;
+  background-color: rgb(129,171,221);
+}
+.expense-icon-background{
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  background-color: rgb(197,114,194);
+}
+.balance-icon-background{
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  background-color: #35b653;;
+}
+.bi{
+  font-size:33px;
 }
 .bg-indigo {
-  background-color: #6610f2;
+  background-color: rgb(129,171,221);
 }
 .bi-wallet{
-  color:#6610f2;
-  font-size: x-large;
+  color:#fff;
+  margin-left: 10px;
 }
 .bg-red {
-  background-color: #dc3545;
+  background-color: rgb(197,114,194);
 }
 .bi-cash-coin{
-  color:#dc3545;
-  font-size: x-large;
+  color:#fff;
+  margin-left: 10px;
 }
 .bg-green {
   background-color: #35b653;
 }
 .bi-wallet2{
-  color:#35b653;
-  font-size: x-large;
+  color:#fff;
+  margin-left: 10px;
 }
 .me-3 {
   margin-right: 1rem !important;
@@ -39,6 +69,7 @@
 .card-widget {
   padding: 1.5rem;
   border-radius: 50rem;
+  /* border: solid #6610f2; */
   background: #fff;
   -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
@@ -50,13 +81,20 @@
   align-items: center;
 }
 .card-widget-income{
-  background-color:rgb(102 16 242 / 5%);
+  /* background-color:rgb(102 16 242 / 5%); */
+  border: solid rgb(129,171,221) !important;
 }
 .card-widget-expenses{
-  background-color:rgb(220 53 69/ 5%);
+  /* background-color:rgb(220 53 69/ 5%); */
+  border: solid rgb(197,114,194) !important;
+}
+.card-widget-close{
+  /* background-color:rgb(53 182 83 / 5%); */
+  border: solid rgb(220 53 69)!important;
 }
-.card-widget-balance{
-  background-color:rgb(53 182 83 / 5%);
+.card-widget-transactions{
+  /* background-color:rgb(53 182 83 / 5%); */
+  border: solid rgb(53 182 83 / 45%);
 }
 .card {
   position: relative;
@@ -89,7 +127,15 @@
   flex: 1 1 auto;
   padding: 2rem;
 }
-
+.input-income-border{
+  border: solid rgb(129 171 221 / 85%) !important;
+}
+.expense-income-border{
+  border: solid rgb(197,114,194) !important;
+}
+.input-account-border{
+  border: solid rgb(220 53 69)!important;
+}
 /* Listed Transactions on Account */
 .container-movements {
   overflow: auto;