diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index 9e78eeab..14749708 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -50,16 +50,15 @@ const ExpensePage = () => {
               <div className="col-7 col-sm-8 text-end gap-2">
                 <button
                   type="button"
-                  className="btn btn-sm btn-primary me-2"
-                  onClick={() =>
-                    setExpenseModal({
-                      isOpen: true,
-                     ExpEdit:null
-                    })
-                  }
+                  data-bs-toggle="tooltip"
+                  data-bs-offset="0,8"
+                  data-bs-placement="top"
+                  data-bs-custom-class="tooltip"
+                  title="Add New Expense"
+                  className={`p-1 me-2 bg-primary rounded-circle `}
+                    onClick={() => setNewExpense(true)}
                 >
-                  <span className="icon-base bx bx-plus-circle me-1"></span>
-                  Add New
+                  <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
               </div>
             </div>