preloader
rechage
Rechargio

Personal Info

Personal Info

Personal information
imgEdit
  • NameLeslie Alexander
  • Date of Birth12/07/1993
  • Account StatusActive
  • Emailexample.example@gamil.com
  • Mobile(205) 555-0100
  • CountryUS
  • Address3605 Perker Rd.
  • Customer Service IDcust_FXFlIvl8h1TA7o
      <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link active">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-6 col-xl-6 col-lg-8">
         <div className="personal__infobody">
            <div className="personal__info__box">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     Personal information
                  </h5>
                  <Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
                     <span className="icon">
                        <img src="/img/svg/edits.svg" alt="img"/>
                     </span>
                     <span className="fz-18 fw-600">
                        Edit
                     </span>
                  </Link>
               </div>
               <ul className="personal__details__name">
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Name
                     </span>
                     <span>
                        Leslie Alexander
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Date of Birth
                     </span>
                     <span>
                        12/07/1993
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Account Status
                     </span>
                     <span className="actbe">
                        Active
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Email
                     </span>
                     <span>
                        example.example@gamil.com
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Mobile
                     </span>
                     <span>
                        (205) 555-0100
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Country
                     </span>
                     <span>
                        US
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Address 
                     </span>
                     <span>
                        3605 Perker Rd.
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Customer Service ID 
                     </span>
                     <span>
                        cust_FXFlIvl8h1TA7o
                     </span>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Login/Security

Login and security
imgEdit
  • LanguageEnglish (United States)
  • Time Zone(GMT-06:00) US
  • Password********
  • 2-step verificationAdd an extra layer of security to your account by using a one-time security code in adLinkition to your password each time you log in. Setup
  • Stay logged in for faster purchesesAdd an extra layer of security to your account by using a one-time security code in addition to your password each time you log in. Update
  • Security qustion********
  • Address3605 Perker Rd.
  • Account typeBusiness
closeClose Account
      <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link active">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-6 col-xl-6 col-lg-6">
         <div className="personal__infobody">
            <div className="personal__info__box">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     Login and security
                  </h5>
                  <Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
                     <span className="icon">
                        <img src="/img/svg/edits.svg" alt="img"/>
                     </span>
                     <span className="fz-18 fw-600">
                        Edit
                     </span>
                  </Link>
               </div>
               <ul className="personal__details__name">
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Language
                     </span>
                     <span>
                        English (United States)
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Time Zone
                     </span>
                     <span>
                        (GMT-06:00) US
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Password
                     </span>
                     <span className="actbe">
                        ********
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        2-step verification
                     </span>
                     <span>
                        Add an extra layer of security to your account by using a one-time security code in addition to your password each time you log in.  <Link href="/javascript:void(0)">Setup</Link>
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Stay logged in for faster purcheses
                     </span>
                     <span>
                        Add an extra layer of security to your account by using a one-time security code in addition to your password each time you log in. Update
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Security qustion
                     </span>
                     <span className="actbe">
                        ********
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Address 
                     </span>
                     <span>
                        3605 Perker Rd.
                     </span>
                  </li>
                  <li>
                     <span className="namebold fz-18 fw-600">
                        Account type
                     </span>
                     <span>
                        Business
                     </span>
                  </li>
               </ul>
               <Link href="/javascript:void(0)" className="closeaccount d-flex align-items-center">
                  <span className="icon">
                     <i className="material-symbols-outlined">
                        close
                     </i>
                  </span>
                  <span className="fz-18 fw-600">
                     Close Account
                  </span>
               </Link>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Favourites

Your Saved Connections
OparetorTransactionNumberPurchaseEdit
imgMobile Recharge(406) 555-0120Recharge Nowimg
imgElectric Bill4600Paymentimg
imgGas Bill8829Paymentimg
imgFlight Booking9151Paymentimg
     <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link active">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-8 col-xl-8 col-lg-8">
         <div className="personal__favorites">
            <div className="personal__info__box">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     Your Saved Connections
                  </h5>
               </div>
               <div className="table__system">
                  <table className="table1">
                     <thead>
                     <tr>
                        <th>Oparetor</th>
                        <th>Transaction</th>
                        <th>Number</th>
                        <th>Purchase</th>
                        <th>Edit</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr>
                        <td>
                           <span className="oparetor">
                              <img src="/img/payment/verizon.png" alt="img"/>
                           </span>
                        </td>
                        <td>Mobile Recharge</td>
                        <td>(406) 555-0120</td>
                        <td>
                           <Link href="/payment.html" className="purchase">
                              <span>
                                 Recharge Now
                                 </span>
                              </Link>
                           </td>
                           <td>
                              <Link href="/javascript:void(0)" className="edit">
                                 <img src="/img/svg/edits.svg" alt="img"/>
                              </Link>
                           </td>
                     </tr>
                     <tr>
                        <td>
                        <span className="oparetor">
                           <img src="/img/payment/met.png" alt="img"/>
                        </span>
                        </td>
                        <td>Electric Bill</td>
                        <td>4600</td>
                        <td>
                           <Link href="/payment.html" className="purchase">
                              <span>
                                 Payment
                              </span>
                           </Link>
                        </td>
                        <td>
                           <Link href="/javascript:void(0)" className="edit">
                              <img src="/img/svg/edits.svg" alt="img"/>
                           </Link>
                        </td>
                     </tr>
                     <tr>
                        <td>
                        <span className="oparetor">
                           <img src="/img/payment/sprint.png" alt="img"/>
                        </span>
                        </td>
                        <td>Gas Bill</td>
                        <td>8829</td>
                        <td>
                           <Link href="/payment.html" className="purchase">
                              <span>
                                 Payment
                              </span>
                           </Link>
                        </td>
                        <td>
                           <Link href="/javascript:void(0)" className="edit">
                              <img src="/img/svg/edits.svg" alt="img"/>
                           </Link>
                        </td>
                     </tr>
                     <tr>
                        <td>
                        <span className="oparetor">
                           <img src="/img/payment/ata5g.png" alt="img"/>
                        </span>
                        </td>
                        <td>Flight Booking</td>
                        <td>9151</td>
                        <td>
                           <Link href="/payment.html" className="purchase">
                              <span>
                                 Payment
                              </span>
                           </Link>
                        </td>
                        <td>
                           <Link href="/javascript:void(0)" className="edit">
                              <img src="/img/svg/edits.svg" alt="img"/>
                           </Link>
                        </td>
                     </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Credit/Debit Cards

     <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link active">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-7 col-xl-7 col-lg-7">
         <div className="personal__infobody">
            <div className="personal__info__box">
               <div className="per__ittle border__bottom pb__20 d-flex align-items-center">
                  <h5>
                     Credit or Debit Cards
                  </h5>
                  <Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
                     <span className="icon delete">
                        <i className="material-symbols-outlined">
                           delete
                        </i>
                     </span>
                     <span className="fz-18 fw-600">
                        Delete Card
                     </span>
                  </Link>
               </div>
               <div className="debit__creadit d-flex align-items-center">
                  <div className="card__box">
                     <img src="/img/payment/cr3.png" alt="img"/>
                  </div>
                  <div className="card__box">
                     <img src="/img/payment/cr1.png" alt="img"/>
                  </div>
                  <div className="card__box">
                     <img src="/img/payment/cr2.png" alt="img"/>
                  </div>
                  <Link href="/javascript:void(0)" className="card__boxed">
                     <img src="/img/payment/payplus.png" alt="img"/>
                     <span>
                        Add New Card
                     </span>
                  </Link>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Transaction

All History
deleteClear Data
calendar_month
DateTransactionAmountFeeStatus
01 JanMobile Recharge$750.00-$50.00img
27 JanElectric Bill$320.00-$15.00img
24 FebCable TV Bill$410.00-$30.00img
7 MarFlight Booking$777.00-$20.00img
27 AprGas Bill$450.00-$5.00img
01 JunFlight Booking$440.00-$10.00img
     <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link active">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-8 col-xl-8 col-lg-8">
         <div className="personal__favorites">
            <div className="personal__info__box">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     All History
                  </h5>
                  <Link href="/javascript:void(0)" className="edit d-flex align-items-center gap-2">
                     <span className="icon delete">
                        <i className="material-symbols-outlined">
                           delete
                        </i>
                     </span>
                     <span className="fz-18 fw-600">
                        Clear Data
                     </span>
                  </Link>
               </div>
               <div className="calender__date">
                  <input type="text"id="datepicker" placeholder="01/01/2022 - 01/06/2023"/>
                  <i className="material-symbols-outlined">
                     calendar_month
                  </i>
               </div>
               <div className="table__system pb__24">
                  <table className="table1">
                     <thead>
                     <tr>
                        <th>Date</th>
                        <th>Transaction</th>
                        <th>Amount</th>
                        <th>Fee</th>
                        <th>Status</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr>
                        <td>01 Jan</td>
                        <td>Mobile Recharge</td>
                        <td>$750.00</td>
                        <td>-$50.00</td>
                        <td>
                           <Link href="/javascript:void(0)" className="edi">
                              <img src="/img/payment/g-check.png" alt="img"/>
                           </Link>
                        </td>
                     </tr>
                     <tr>
                        <td>27 Jan</td>
                        <td>Electric Bill</td>
                        <td>$320.00</td>
                        <td>-$15.00</td>
                     <td>
                        <Link href="/javascript:void(0)" className="edi">
                           <img src="/img/payment/g-cross.png" alt="img"/>
                        </Link>
                     </td>
                     </tr>
                     <tr>
                        <td>24 Feb</td>
                        <td>Cable TV Bill</td>
                        <td>$410.00</td>
                        <td>-$30.00</td>
                     <td>
                        <Link href="/javascript:void(0)" className="edi">
                           <img src="/img/payment/g-check.png" alt="img"/>
                        </Link>
                     </td>
                     </tr>
                     <tr>
                        <td>7 Mar</td>
                        <td>Flight Booking</td>
                        <td>$777.00</td>
                        <td>-$20.00</td>
                     <td>
                        <Link href="/javascript:void(0)" className="edi">
                           <img src="/img/payment/g-check.png" alt="img"/>
                        </Link>
                     </td>
                     </tr>
                     <tr>
                        <td>27 Apr</td>
                        <td>Gas Bill</td>
                        <td>$450.00</td>
                        <td>-$5.00</td>
                     <td>
                        <Link href="/javascript:void(0)" className="edi">
                           <img src="/img/payment/g-cross.png" alt="img"/>
                        </Link>
                     </td>
                     </tr>
                     <tr>
                        <td>01 Jun</td>
                        <td>Flight Booking</td>
                        <td>$440.00</td>
                        <td>-$10.00</td>
                     <td>
                        <Link href="/javascript:void(0)" className="edi">
                           <img src="/img/payment/g-worning.png" alt="img"/>
                        </Link>
                     </td>
                     </tr>
                     </tbody>
                  </table>
               </div>
               <ul className="pagination justify-content-end">
                  <li>
                     <Link href="/#">
                        <span className="icon">
                           <i className="material-symbols-outlined">
                              chevron_left
                           </i>
                        </span>
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        1
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        2
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        3
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        ...
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        30
                     </Link>
                  </li>
                  <li>
                     <Link href="/#">
                        <span className="icon">
                           <i className="material-symbols-outlined">
                              chevron_right
                           </i>
                        </span>
                     </Link>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Change Password

Change Password
     <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link active">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-6 col-xl-6 col-lg-6">
         <div className="personal__favorit">
            <div className="personal__info__boxtwo">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     Change Password
                  </h5>
               </div>
               <form action="javacript:void(0)" className="change__password">
                  <div className="form__grp mb__20">
                     <label htmlFor="present">Present Password</label>
                     <input type="text" id="present" placeholder="Present Password"/>
                  </div>
                  <div className="form__grp mb__20">
                     <label htmlFor="new">New Password</label>
                     <input type="text" id="new" placeholder="New Password"/>
                  </div>
                  <div className="form__grp mb__40">
                     <label htmlFor="confirm">Confirm Password</label>
                     <input type="text" id="confirm" placeholder="Confirm Password"/>
                  </div>
                  <div className="form__grp">
                     <button type="submit" className="cmn__btn">
                        <span>
                           Update Password
                        </span>
                     </button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>
</section>

Notifications

Notifications
Save Change
     <section className="personal__information pt__60 pb__60">
<div className="container">
   <div className="row justify-content-center">
      <div className="col-xxl-4 col-xl-4 col-lg-4">
         <div className="personal__infotabs">
            <ul className="nav">
               <li className="nav-item">
               <Link href="/personal-information.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Personal Information
                  </span>
                  </Link>
               </li>
               <li className="nav-item">
               <Link href="/login-security.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/log.svg" alt="login"/>
                  </span>
                  <span>
                     Login and security
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/favourites.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/badge.svg" alt="login"/>
                  </span>
                  <span>
                     Favourites
                  </span>
               </Link>
               </li>
               <li className="nav-item">
               <Link href="/debit-creadit.html" className="nav-link">
                  <span className="icon">
                     <img src="/img/svg/creadits.svg" alt="login"/>
                  </span>
                  <span>
                     Credit or Debit Cards
                  </span>
               </Link>
               </li>
               <li className="nav-item">
                  <Link href="/transaction.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/file-transfer.svg" alt="login"/>
                     </span>
                     <span>
                        Transaction
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/password-change.html" className="nav-link">
                     <span className="icon">
                        <img src="/img/svg/password-change.svg" alt="login"/>
                     </span>
                     <span>
                        Change Password
                     </span>
                  </Link>
               </li>
               <li className="nav-item">
                  <Link href="/notification.html" className="nav-link active">
                     <span className="icon">
                        <img src="/img/svg/notifications.svg" alt="login"/>
                     </span>
                     <span>
                        Notifications
                     </span>
                  </Link>
               </li>
            </ul>
         </div>
      </div>
      <div className="col-xxl-6 col-xl-6 col-lg-6">
         <div className="personal__favorit">
            <div className="personal__info__boxtwo">
               <div className="per__ittle d-flex align-items-center">
                  <h5>
                     Notifications
                  </h5>
               </div>
               <div className="notification__body mb__40">
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkon1" checked/>
                     <label className="form-check-label" htmlFor="checkon1">
                        <span className="announce fz-18 fw-600">
                           Announcements
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkof1"/>
                     <label className="form-check-label" htmlFor="checkof1">
                        <span className="announce fz-18 fw-600">
                           Mobile Recharge
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkon2" checked/>
                     <label className="form-check-label" htmlFor="checkon2">
                        <span className="announce fz-18 fw-600">
                           Bill Payment
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkof2"/>
                     <label className="form-check-label" htmlFor="checkof2">
                        <span className="announce fz-18 fw-600">
                           Booking
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkon3" checked/>
                     <label className="form-check-label" htmlFor="checkon3">
                        <span className="announce fz-18 fw-600">
                           Have a problem with a payment
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkof3"/>
                     <label className="form-check-label" htmlFor="checkof3">
                        <span className="announce fz-18 fw-600">
                           Special Offers
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
                  <div className="notification__item">
                     <input className="form-check-input" type="checkbox" id="checkon4" checked/>
                     <label className="form-check-label" htmlFor="checkon4">
                        <span className="announce fz-18 fw-600">
                           Reviews
                        </span>
                        <span className="pragrah fz-16 fw-400">
                           Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        </span>
                     </label>
                  </div>
               </div>
               <Link href="/javascript:void(0)" className="cmn__btn">
                  <span>
                     Save Change
                  </span>
               </Link>
            </div>
         </div>
      </div>
   </div>
</div>
</section>