src/pages/Expense/ExpensePage.jsx

@@ -46,11 +46,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={() => setNewExpense(true)}
+                  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>