Asthetic Changes

- Margin on all sides for grid
- Margin for card content

src/components/Dashboard/AttendanceChart.jsx

@@ -99,9 +99,7 @@ const AttendanceOverview = () => {
   };
 
   return (
-    <div
+    <div className="bg-white p-4 rounded shadow d-flex flex-column">
-      className="bg-white p-4 rounded shadow d-flex flex-column"
-    >
       {/* Header */}
       <div className="d-flex justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
@@ -119,18 +117,22 @@ const AttendanceOverview = () => {
             <option value={30}>Last 30 Days</option>
           </select>
           <button
-            className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
+            className={`btn btn-sm p-1 ${
+              view === "chart" ? "btn-primary" : "btn-outline-primary"
+            }`}
             onClick={() => setView("chart")}
             title="Chart View"
           >
             <i className="bx bx-bar-chart-alt-2"></i>
           </button>
           <button
-            className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
+            className={`btn btn-sm p-1 ${
+              view === "table" ? "btn-primary" : "btn-outline-primary"
+            }`}
             onClick={() => setView("table")}
             title="Table View"
           >
-            <i className="bx bx-task text-success"></i>
+            <i class="bx bx-list-ul fs-5"></i>
           </button>
         </div>
       </div>

src/components/Tenant/TenantsList.jsx

@@ -128,7 +128,7 @@ const TenantsList = ({
   if (isError)
     return (
       <div className="">
-          <div className="card text-center my-4 p-2">
+        <div className="text-center my-4 p-2">
           <i className="fa-solid fa-triangle-exclamation fs-5"></i>
           <p>{error.message}</p>
         </div>
@@ -136,7 +136,7 @@ const TenantsList = ({
     );
   return (
     <>
-      <div className="card p-2 mt-3">
+      <div className="p-2 mt-3">
         <div className="card-datatable text-nowrap table-responsive">
           <table className="table border-top dataTable text-nowrap">
             <thead>

src/pages/Activities/AttendancePage.jsx

@@ -118,10 +118,10 @@ const AttendancePage = () => {
           ]}
         ></Breadcrumb>
 
-        <div className="nav-align-top nav-tabs-shadow">
+        <div className="nav-align-top nav-tabs-shadow ">
           {/* Tabs */}
-          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom">
+          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
-            <div className="row align-items-center g-0 mb-3 mb-md-0">
+            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
               {/* Tabs */}
               <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">
@@ -182,11 +182,11 @@ const AttendancePage = () => {
             </div>
           </div>
 
-          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
+          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
             {selectedProject ? (
               <>
                 {activeTab === "all" && (
-                  <div className="tab-pane fade show active py-0">
+                  <div className="tab-pane fade show active py-0 mx-5">
                     <Attendance
                       handleModalData={handleModalData}
                       getRole={getRole}
@@ -214,7 +214,6 @@ const AttendancePage = () => {
               </div>
             )}
           </div>
-
         </div>
       </div>
     </>

src/pages/Directory/DirectoryPage.jsx

@@ -161,7 +161,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 </ul>
               </div>
 
-            <div className="mb-1 px-2">
+              <div className="mb-1 px-2 py-3">
                 <div className="d-flex align-items-center justify-content-between">
                   <div className="d-flex align-items-center gap-3">
                     {activeTab === "notes" && (

src/pages/Home/LandingPage.jsx

@@ -13,8 +13,6 @@ import "swiper/css/navigation";
 import SwaperSlideContent from "./SwaperSlideContent";
 import SwaperBlogContent from "./SwaperBlogContent";
 
-
-
 const swiperConfig = {
   spaceBetween: 30,
   centeredSlides: true,
@@ -110,7 +108,7 @@ const LandingPage = () => {
                   </a>
                 </li>
                 <li className="nav-item">
-                  <a className="nav-link fw-medium" href="#landingReviews">
+                  <a className="nav-link fw-medium" href="#sectionBlog">
                     Blogs
                   </a>
                 </li>
@@ -296,10 +294,7 @@ const LandingPage = () => {
             <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/laptop.svg" alt="laptop charging" />
-                    src="/img/icons/laptop.svg"
-                    alt="laptop charging"
-                  />
                 </div>
                 <h5 className="mb-2">Project & Task Management</h5>
                 <p className="features-icon-description">
@@ -309,10 +304,7 @@ const LandingPage = () => {
               </div>
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/rocket.svg" alt="transition up" />
-                    src="/img/icons/rocket.svg"
-                    alt="transition up"
-                  />
                 </div>
                 <h5 className="mb-2">Attendance & Leave Tracking</h5>
                 <p className="features-icon-description">
@@ -332,10 +324,7 @@ const LandingPage = () => {
               </div>
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/check.svg" alt="3d select solid" />
-                    src="/img/icons/check.svg"
-                    alt="3d select solid"
-                  />
                 </div>
                 <h5 className="mb-2">Expense & Budget Tracking</h5>
                 <p className="features-icon-description">
@@ -355,10 +344,7 @@ const LandingPage = () => {
               </div>
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
-                    src="/img/icons/keyboard.svg"
-                    alt="keyboard"
-                  />
                 </div>
                 <h5 className="mb-2">Document Management</h5>
                 <p className="features-icon-description">
@@ -368,10 +354,7 @@ const LandingPage = () => {
               </div>
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
-                    src="/img/icons/keyboard.svg"
-                    alt="keyboard"
-                  />
                 </div>
                 <h5 className="mb-2">
                   Service Provider & Subcontractor Tracking
@@ -383,10 +366,7 @@ const LandingPage = () => {
               </div>{" "}
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img
+                  <img src="/img/icons/inventory.svg" alt="keyboard" />
-                    src="/img/icons/inventory.svg"
-                    alt="keyboard"
-                  />
                 </div>
                 <h5 className="mb-2">Inventory Management</h5>
                 <p className="features-icon-description">
@@ -396,10 +376,7 @@ const LandingPage = () => {
             </div>
             <div className="col-lg-3 col-sm-4 text-center features-icon-box">
               <div className="text-center mb-4">
-                <img
+                <img src="/img/icons/keyboard.svg" alt="keyboard" />
-                  src="/img/icons/keyboard.svg"
-                  alt="keyboard"
-                />
               </div>
               <h5 className="mb-2">Directory</h5>
               <p className="features-icon-description">
@@ -411,10 +388,11 @@ const LandingPage = () => {
         </section>
         {/*  Useful features: End */}
 
-        {/* <!-- Real customers reviews: Start --> */}
+        {/* <!-- Real blog/ case studies: Start --> */}
         <section
-          id="landingReviews"
+          id="sectionBlog"
           class="section-py bg-body landing-reviews pb-0"
+          hidden
         >
           {/* <!-- What people say slider: Start --> */}
           <div class="container">
@@ -1186,7 +1164,7 @@ const LandingPage = () => {
                               href="tel:+1234-568-963"
                               className="text-heading"
                             >
-                              +1234 568 963
+                              +91 70288 83755
                             </a>
                           </h6>
                         </div>
@@ -1516,10 +1494,7 @@ const LandingPage = () => {
               <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
                 <h6 className="footer-title mt-3">Download our app</h6>
                 <a href="javascript:void(0);">
-                  <img
+                  <img src="/img/icons/apple-icon.png" alt="apple icon" />
-                    src="/img/icons/apple-icon.png"
-                    alt="apple icon"
-                  />
                 </a>
                 <a
                   href="https://play.google.com/store/apps/details?id=com.marco.aiotstage&pcampaignid=web_share"
@@ -1554,26 +1529,17 @@ const LandingPage = () => {
                 className="me-4"
                 target="_blank"
               >
-                <img
+                <img src="/img/icons/facebook.svg" alt="facebook icon" />
-                  src="/img/icons/facebook.svg"
-                  alt="facebook icon"
-                />
               </a>
               <a
                 href="https://twitter.com/marcoaiot"
                 className="me-4"
                 target="_blank"
               >
-                <img
+                <img src="/img/icons/twitter.svg" alt="twitter icon" />
-                  src="/img/icons/twitter.svg"
-                  alt="twitter icon"
-                />
               </a>
               <a href="https://www.instagram.com/marcoaiot/" target="_blank">
-                <img
+                <img src="/img/icons/instagram.svg" alt="google icon" />
-                  src="/img/icons/instagram.svg"
-                  alt="google icon"
-                />
               </a>
             </div>
           </div>

src/pages/Tenant/TenantPage.jsx

@@ -121,10 +121,10 @@ const TenantPage = () => {
             { label: "Tenant", link: null },
           ]}
         />
-
+        <div className="card text-center my-4 p-5 pb-10">
           {/* Super Tenant Actions */}
           {isSuperTenant && (
-          <div className="card d-flex p-2">
+            <div className="p-0">
               <div className="row align-items-center">
                 {/* Search */}
                 <div className="col-6 col-md-6 col-lg-3 mb-md-0">
@@ -132,7 +132,7 @@ const TenantPage = () => {
                     type="search"
                     value={searchText}
                     onChange={(e) => setSearchText(e.target.value)}
-                  className="form-control form-control-sm"
+                    className="form-control form-control"
                     placeholder="Search Tenant"
                   />
                 </div>
@@ -174,7 +174,7 @@ const TenantPage = () => {
               setRefetchFn={setRefetchFn}
             />
           ) : !isSelfTenant ? (
-          <div className="card text-center my-4 p-2">
+            <div className="text-center my-4 p-2">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>
               <p>
                 Access Denied: You don't have permission to perform this action!
@@ -182,6 +182,7 @@ const TenantPage = () => {
             </div>
           ) : null}
         </div>
+      </div>
     </TenantContext.Provider>
   );
 };

src/pages/employee/EmployeeList.jsx

@@ -176,9 +176,11 @@ const EmployeeList = () => {
   useEffect(() => {
     if (!loading && Array.isArray(employees)) {
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${
+          a.lastName || ""
         }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${
+          b.lastName || ""
         }`.toLowerCase();
         return nameA?.localeCompare(nameB);
       });
@@ -266,7 +268,8 @@ const EmployeeList = () => {
               ? "Suspend Employee"
               : "Reactivate Employee"
           }
-          message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
+          message={`Are you sure you want to ${
+            selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
           } this employee?`}
           onSubmit={(id) =>
             suspendEmployee({
@@ -291,11 +294,11 @@ const EmployeeList = () => {
         {ViewTeamMember ? (
           // <div className="row">
           <div className="card p-1">
-            <div className="card-datatable table-responsive pt-2">
+            <div className="card-datatable table-responsive pt-5 mx-5 py-10">
               <div
                 id="DataTables_Table_0_wrapper"
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
-                style={{ width: "98%" }}
+                style={{ width: "100%" }}
               >
                 <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                   {/* Switches: All Employees + Inactive */}
@@ -315,7 +318,7 @@ const EmployeeList = () => {
                           className="form-check-label ms-0"
                           htmlFor="allEmployeesCheckbox"
                         >
-                          All Employees
+                          Show All Employees
                         </label>
                       </div>
                     )}
@@ -351,7 +354,7 @@ const EmployeeList = () => {
                           value={searchText}
                           onChange={handleSearch}
                           className="form-control form-control-sm"
-                          placeholder="Search User"
+                          placeholder="Search Employee"
                           aria-controls="DataTables_Table_0"
                         />
                       </label>
@@ -499,7 +502,8 @@ const EmployeeList = () => {
                         Status
                       </th>
                       <th
-                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
+                        className={`sorting_disabled  ${
+                          !Manage_Employee && "d-none"
                         }`}
                         rowSpan="1"
                         colSpan="1"
@@ -578,7 +582,7 @@ const EmployeeList = () => {
                               </span>
                             ) : (
                               <span className="text-truncate text-italic">
-                                NA
+                                -
                               </span>
                             )}
                           </td>
@@ -627,7 +631,9 @@ const EmployeeList = () => {
                                 <div className="dropdown-menu dropdown-menu-end">
                                   {/* View always visible */}
                                   <button
-                                    onClick={() => navigate(`/employee/${item.id}`)}
+                                    onClick={() =>
+                                      navigate(`/employee/${item.id}`)
+                                    }
                                     className="dropdown-item py-1"
                                   >
                                     <i className="bx bx-detail bx-sm"></i> View
@@ -638,9 +644,12 @@ const EmployeeList = () => {
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() => handleEmployeeModel(item.id)}
+                                        onClick={() =>
+                                          handleEmployeeModel(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-edit bx-sm"></i> Edit
+                                        <i className="bx bx-edit bx-sm"></i>{" "}
+                                        Edit
                                       </button>
 
                                       {/* Suspend only when active */}
@@ -649,7 +658,8 @@ const EmployeeList = () => {
                                           className="dropdown-item py-1"
                                           onClick={() => handleOpenDelete(item)}
                                         >
-                                          <i className="bx bx-task-x bx-sm"></i> Suspend
+                                          <i className="bx bx-task-x bx-sm"></i>{" "}
+                                          Suspend
                                         </button>
                                       )}
 
@@ -658,11 +668,13 @@ const EmployeeList = () => {
                                         type="button"
                                         data-bs-toggle="modal"
                                         data-bs-target="#managerole-modal"
-                                        onClick={() => setEmpForManageRole(item.id)}
+                                        onClick={() =>
+                                          setEmpForManageRole(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-cog bx-sm"></i> Manage Role
+                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        Manage Role
                                       </button>
-
                                     </>
                                   )}
 
@@ -672,7 +684,8 @@ const EmployeeList = () => {
                                       className="dropdown-item py-1"
                                       onClick={() => handleOpenDelete(item)}
                                     >
-                                      <i className="bx bx-refresh bx-sm me-1"></i> Re-activate
+                                      <i className="bx bx-refresh bx-sm me-1"></i>{" "}
+                                      Re-activate
                                     </button>
                                   )}
                                 </div>
@@ -691,7 +704,8 @@ const EmployeeList = () => {
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li
-                        className={`page-item ${currentPage === 1 ? "disabled" : ""
+                        className={`page-item ${
+                          currentPage === 1 ? "disabled" : ""
                         }`}
                       >
                         <button
@@ -705,7 +719,8 @@ const EmployeeList = () => {
                       {[...Array(totalPages)]?.map((_, index) => (
                         <li
                           key={index}
-                          className={`page-item ${currentPage === index + 1 ? "active" : ""
+                          className={`page-item ${
+                            currentPage === index + 1 ? "active" : ""
                           }`}
                         >
                           <button
@@ -718,7 +733,8 @@ const EmployeeList = () => {
                       ))}
 
                       <li
-                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                        className={`page-item ${
+                          currentPage === totalPages ? "disabled" : ""
                         }`}
                       >
                         <button

src/pages/master/MasterPage.jsx

@@ -5,7 +5,10 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import MasterModal from "../../components/master/MasterModal";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import MasterTable from "./MasterTable";
-import useMaster, { useDeleteMasterItem, useMasterMenu } from "../../hooks/masterHook/useMaster";
+import useMaster, {
+  useDeleteMasterItem,
+  useMasterMenu,
+} from "../../hooks/masterHook/useMaster";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
@@ -14,11 +17,22 @@ import GlobalModel from "../../components/common/GlobalModel";
 const MasterPage = () => {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
-  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+  const selectedMaster = useSelector(
+    (store) => store.localVariables.selectedMaster
+  );
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
 
-  const { data: menuData, isLoading: menuLoading, isError: menuErrorFlag, error: menuError } = useMasterMenu();
+  const {
-  const { data: masterData = [], loading, isError: isMasterError } = useMaster();
+    data: menuData,
+    isLoading: menuLoading,
+    isError: menuErrorFlag,
+    error: menuError,
+  } = useMasterMenu();
+  const {
+    data: masterData = [],
+    loading,
+    isError: isMasterError,
+  } = useMaster();
   const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
 
   const [modalConfig, setModalConfig] = useState(null);
@@ -26,7 +40,8 @@ const MasterPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
 
   const displayData = useMemo(() => {
-    const dataSource = queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
+    const dataSource =
+      queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
     if (!searchTerm) return dataSource;
     return dataSource.filter((item) =>
       Object.values(item).some((val) =>
@@ -37,7 +52,10 @@ const MasterPage = () => {
 
   const columns = useMemo(() => {
     if (!displayData.length) return [];
-    return Object.keys(displayData[0]).map((key) => ({ key, label: key.toUpperCase() }));
+    return Object.keys(displayData[0]).map((key) => ({
+      key,
+      label: key.toUpperCase(),
+    }));
   }, [displayData]);
 
   const handleModalData = (type, item = null, masterType = selectedMaster) => {
@@ -47,18 +65,24 @@ const MasterPage = () => {
 
   const handleDeleteSubmit = () => {
     if (!deleteData) return;
-    DeleteMaster({ masterType: deleteData.masterType, item: deleteData.item }, {
+    DeleteMaster(
+      { masterType: deleteData.masterType, item: deleteData.item },
+      {
         onSuccess: () => setDeleteData(null),
-    });
+      }
+    );
   };
 
   if (menuErrorFlag || isMasterError)
     return (
       <div className="d-flex flex-column align-items-center justify-content-center py-5">
         <h4 className="mb-3">
-          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred
+          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
+          occurred
         </h4>
-        <p className="text-muted">{menuError?.message || "Error fetching master data"}</p>
+        <p className="text-muted">
+          {menuError?.message || "Error fetching master data"}
+        </p>
       </div>
     );
 
@@ -66,11 +90,20 @@ const MasterPage = () => {
     <>
       {modalConfig && (
         <GlobalModel
-          size={["Application Role", "Edit-Application Role"].includes(modalConfig.masterType) ? "lg" : "md"}
+          size={
+            ["Application Role", "Edit-Application Role"].includes(
+              modalConfig.masterType
+            )
+              ? "lg"
+              : "md"
+          }
           isOpen={!!modalConfig}
           closeModal={() => setModalConfig(null)}
         >
-          <MasterModal modaldata={modalConfig} closeModal={() => setModalConfig(null)} />
+          <MasterModal
+            modaldata={modalConfig}
+            closeModal={() => setModalConfig(null)}
+          />
         </GlobalModel>
       )}
 
@@ -85,40 +118,58 @@ const MasterPage = () => {
       />
 
       <div className="container-fluid">
-        <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} />
+        <Breadcrumb
+          data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
+        />
 
         <div className="row">
           <div className="card">
-            <div className="card-datatable table-responsive py-4">
+            <div
+              className="card-datatable table-responsive py-10 mx-5 "
+              style={{ overflow: "hidden" }}
+            >
               <div className="row mb-2">
                 <div className="col-md-3 col-sm-6">
                   <select
                     className="form-select py-1 px-2"
-                    style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                    style={{
+                      fontSize: "0.875rem",
+                      height: "32px",
+                      width: "190px",
+                    }}
                     value={selectedMaster}
                     onChange={(e) => dispatch(changeMaster(e.target.value))}
                   >
                     {menuLoading ? (
                       <option value="">Loading...</option>
                     ) : (
-                      menuData?.map((item) => <option key={item.id} value={item.name}>{item.name}</option>)
+                      menuData?.map((item) => (
+                        <option key={item.id} value={item.name}>
+                          {item.name}
+                        </option>
+                      ))
                     )}
                   </select>
                 </div>
                 <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
-                  <div className="w-25"><input
+                  <div className="w-25">
+                    <input
                       type="search"
                       className="form-control form-control-sm"
                       placeholder="Search"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                  /></div>
+                    />
+                  </div>
                   {hasMasterPermission && (
                     <button
                       className="btn btn-sm btn-primary"
-                      onClick={() => handleModalData(selectedMaster, null, selectedMaster)}
+                      onClick={() =>
+                        handleModalData(selectedMaster, null, selectedMaster)
+                      }
                     >
-                      <i className="bx bx-plus-circle me-2"></i>Add {selectedMaster}
+                      <i className="bx bx-plus-circle me-2"></i>Add{" "}
+                      {selectedMaster}
                     </button>
                   )}
                 </div>

src/pages/master/MasterTable.jsx

@@ -179,8 +179,9 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                           aria-label="Delete"
                           type="button"
                           className="btn p-0 dropdown-toggle hide-arrow"
-                          onClick={() => handleModalData("delete", item, selectedMaster)}
+                          onClick={() =>
-
+                            handleModalData("delete", item, selectedMaster)
+                          }
                         >
                           <i className="bx bx-trash me-1 text-danger"></i>
                         </button>