diff --git a/src/assets/main.scss b/src/assets/main.scss
index 0dd65d3a..d7cef171 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -112,7 +112,7 @@ body {
   font-weight: normal;
   text-transform: uppercase;
   line-height: 16px;
-  padding-bottom: 1em !important;
+  padding-bottom: 1em;
 }
 
 .custom-button {
diff --git a/src/components/ConfirmPaymentModal.vue b/src/components/ConfirmPaymentModal.vue
index c49cfe27..2c2552be 100644
--- a/src/components/ConfirmPaymentModal.vue
+++ b/src/components/ConfirmPaymentModal.vue
@@ -8,13 +8,14 @@
             {
               transactionDetail: $gettext("Transaction details"),
               paymentConfirmation: $gettext("Payment confirmation"),
+              topup: $gettext("Top-up details"),
             }[$modal.args?.value[0].type]
           }}
         </p>
         <button
           class="delete"
           aria-label="close"
-          @click="$modal.close()"
+          @click="closeAndRefresh()"
         ></button>
       </header>
 
@@ -27,14 +28,22 @@
                   ? $gettext("Transaction sent")
                   : $gettext("Transaction processed"),
                 paymentConfirmation: $gettext("Payment sent"),
+                topup: $gettext("Top-up requested"),
               }[$modal.args?.value[0].type]
             }}
           </p>
-          <div class="confirm-icon-container">
+          <div
+            v-if="$modal.args?.value[0].type == 'topup'"
+            class="confirm-icon-container mb-2"
+          >
+            <fa-icon icon="plus-circle" class="confirm-icon fa-thin" />
+          </div>
+          <div v-else class="confirm-icon-container">
             <fa-icon icon="fa-check" class="confirm-icon fa-thin" />
           </div>
 
           <p
+            v-if="$modal.args?.value[0].type != 'topup'"
             class="
               amount
               custom-card-destinataire
@@ -53,8 +62,37 @@
                     }))($modal.args?.value[0].transaction)
             }}
           </p>
-
-          <h2 class="frame3-sub-title">
+          <p
+            v-else
+            class="
+              amount
+              custom-card-destinataire
+              has-text-weight-bold
+              is-size-4
+            "
+          >
+            {{
+              ((t) =>
+                $gettext("Requested %{amount}", {
+                  amount: `${numericFormat(t.amount)} ${t.currency}`,
+                }))($modal.args?.value[0].transaction)
+            }}
+          </p>
+          <h2
+            v-if="$modal.args?.value[0].type == 'topup'"
+            class="frame3-sub-title"
+          >
+            {{
+              $modal.args?.value[0].transaction.paid
+                ? $gettext(
+                    "This top-up request is waiting for an administrator of your local currency to validate it"
+                  )
+                : $gettext(
+                    "This top-up request is waiting for you to pay it or cancel it"
+                  )
+            }}
+          </h2>
+          <h2 v-else class="frame3-sub-title">
             {{
               $modal.args?.value[0].transaction.amount < 0
                 ? $gettext("to")
@@ -84,10 +122,32 @@
           is-justify-content-flex-end
         "
       >
+        <div
+          v-if="
+            $modal.args?.value[0].type == 'topup' &&
+            !$modal.args?.value[0].transaction.paid
+          "
+          class="ml-2 mr-2"
+        >
+          <button
+            class="button custom-button-modal has-text-weight-medium"
+            :title="$gettext('Cancel')"
+            @click="cancelTopUpRequest"
+          >
+            <span>{{ $gettext("Cancel") }}</span>
+          </button>
+          <button
+            class="button custom-button-modal has-text-weight-medium"
+            :title="$gettext('Pay')"
+            @click="payTopUpRequest"
+          >
+            <span>{{ $gettext("Pay") }}</span>
+          </button>
+        </div>
         <button
           class="button custom-button-modal has-text-weight-medium"
           :title="$gettext('Ok')"
-          @click="$modal.close()"
+          @click="closeAndRefresh()"
         >
           <span>{{ $gettext("Ok") }}</span>
         </button>
@@ -99,6 +159,7 @@
   import { Options, Vue } from "vue-class-component"
   import { mapGetters } from "vuex"
   import moment from "moment"
+  import { UIError } from "../exception"
 
   @Options({
     name: "ConfirmPaymentModal",
@@ -110,6 +171,38 @@
         ).format("YYYY-MM-DD HH:mm:ssZ")
       },
     },
+    methods: {
+      payTopUpRequest(): void {
+        // XXXvlab: we would need to launch regular checks
+        // here to acknowledge the payment
+        window.open(
+          this.$modal.args?.value[0].transaction.jsonData.odoo.order_url,
+          "_blank"
+        )
+      },
+      async cancelTopUpRequest(): Promise<void> {
+        this.$loading.show()
+        try {
+          await this.$modal.args?.value[0].transaction.cancel()
+        } catch (err) {
+          throw new UIError(
+            this.$gettext(
+              "An error occured while deleting transaction, please try again or contact an administrator"
+            ),
+            err
+          )
+        } finally {
+          this.$loading.hide()
+          this.closeAndRefresh()
+        }
+      },
+      // XXXvlab: the refresh is unnecessary in most case, and
+      // should occur only when needed.
+      closeAndRefresh(): void {
+        this.$modal.close("refreshTopUpList")
+        this.$lokapi.flushBackendCaches()
+      },
+    },
   })
   export default class ConfirmPaymentModal extends Vue {}
 </script>
diff --git a/src/components/MoneyCreditModal.vue b/src/components/MoneyCreditModal.vue
index e535ffc2..8d2a529e 100644
--- a/src/components/MoneyCreditModal.vue
+++ b/src/components/MoneyCreditModal.vue
@@ -180,6 +180,7 @@
 <script lang="ts">
   import { Options, Vue } from "vue-class-component"
   import { mapGetters } from "vuex"
+  import { UIError } from "../exception"
 
   import BankAccountItem from "./BankAccountItem.vue"
 
@@ -193,6 +194,7 @@
         creditOrderUrl: "",
         selectedCreditAccount: null,
         showCreditRefreshNotification: false,
+        willRequireTransactionRefresh: false,
         amount: "",
       }
     },
@@ -273,16 +275,19 @@
             this.amount
           )
           this.creditOrderUrl = url.order_url
-        } catch (error) {
-          console.log("Payment failed:", error)
-          this.$msg.error(
+        } catch (err) {
+          throw new UIError(
             this.$gettext(
               "An unexpected issue occurred while attempting to top up your account"
-            )
+            ),
+            err
           )
         } finally {
           this.$loading.hide()
         }
+        this.$lokapi.flushBackendCaches()
+        this.$store.dispatch("fetchAccounts")
+        this.willRequireTransactionRefresh = true
       },
       navigateToCreditOrder(): void {
         window.open(this.creditOrderUrl, "_blank")
@@ -291,13 +296,14 @@
         this.showCreditRefreshNotification = true
       },
       closeAndRefresh(): void {
-        this.close(true)
+        this.willRequireTransactionRefresh = true
+        this.close()
         this.$lokapi.flushBackendCaches()
         this.$store.dispatch("fetchAccounts")
       },
-      close(refreshTransactions: boolean): void {
+      close(): void {
         this.showCreditRefreshNotification = false
-        this.$modal.close(refreshTransactions)
+        this.$modal.close(this.willRequireTransactionRefresh)
       },
       setFocus() {
         this.$nextTick(() => {
diff --git a/src/components/PendingTopUp.vue b/src/components/PendingTopUp.vue
new file mode 100644
index 00000000..eaf88324
--- /dev/null
+++ b/src/components/PendingTopUp.vue
@@ -0,0 +1,123 @@
+<template>
+  <loading
+    v-if="!pendingPaidTopUpList.length && !pendingUnpaidTopUpList.length"
+    v-model:active="isPendingTopUpLoading"
+    :can-cancel="false"
+    :is-full-page="false"
+  />
+  <div class="section-card" v-if="pendingUnpaidTopUpList.length">
+    <h2 class="custom-card-title">
+      {{ $gettext("Unpaid top-up requests") }}
+    </h2>
+    <p class="top-up-info">
+      {{
+        $gettext("The following top up requests needs to be paid or canceled")
+      }}
+    </p>
+    <TransactionItem
+      v-for="topup in pendingUnpaidTopUpList"
+      :key="topup"
+      :transaction="topup"
+      @click="openModal(topup)"
+    />
+  </div>
+  <div class="section-card" v-if="pendingPaidTopUpList.length">
+    <h2 class="custom-card-title">
+      {{ $gettext("Top up waiting admin validation") }}
+    </h2>
+    <p class="top-up-info">
+      {{
+        $gettext(
+          "The following top up have been paid and are waiting for an administrator of your local currency to validate them."
+        )
+      }}
+    </p>
+    <TransactionItem
+      v-for="topup in pendingPaidTopUpList"
+      :key="topup"
+      :transaction="topup"
+      @click="openModal(topup)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { mapGetters } from "vuex"
+  import { Options, Vue } from "vue-class-component"
+  import Loading from "vue-loading-overlay"
+
+  import TransactionItem from "./TransactionItem.vue"
+  import { UIError } from "../exception"
+  import "vue-loading-overlay/dist/css/index.css"
+
+  @Options({
+    name: "PendingTopUp",
+    components: {
+      Loading,
+      TransactionItem,
+    },
+    props: {
+      refreshToggle: Boolean,
+      account: Object,
+    },
+    data(this: any) {
+      return {
+        pendingTopUpList: [],
+        isPendingTopUpLoading: false,
+      }
+    },
+    async mounted() {
+      await this.fetchTopUpList()
+    },
+    computed: {
+      pendingPaidTopUpList() {
+        return this.pendingTopUpList.filter((topup: any) => topup.paid)
+      },
+      pendingUnpaidTopUpList() {
+        return this.pendingTopUpList.filter((topup: any) => !topup.paid)
+      },
+      ...mapGetters(["numericFormat", "relativeDateFormat", "dateFormat"]),
+    },
+
+    methods: {
+      async fetchTopUpList() {
+        this.isPendingTopUpLoading = true
+        try {
+          this.pendingTopUpList = await this.account._obj.getPendingTopUp()
+        } catch (err) {
+          throw new UIError(
+            this.$gettext(
+              "unexpected server error occured while fetching pending topup list"
+            ),
+            err
+          )
+        } finally {
+          this.isPendingTopUpLoading = false
+        }
+      },
+      async openModal(transactionObject: any) {
+        const result = await this.$modal.open("ConfirmPaymentModal", {
+          transaction: transactionObject,
+          type: "topup",
+        })
+        if (result === "refreshTopUpList") {
+          this.fetchTopUpList()
+        }
+      },
+    },
+    watch: {
+      refreshToggle: async function () {
+        this.fetchTopUpList()
+      },
+      isPendingTopUpLoading(newVal: boolean) {
+        this.$emit("triggerTransactionRefresh", newVal)
+      },
+    },
+  })
+  export default class PendingTopUp extends Vue {}
+</script>
+<style lang="scss" scoped>
+  .top-up-info {
+    font-style: italic;
+  }
+</style>
diff --git a/src/components/TheBankAccountList.vue b/src/components/TheBankAccountList.vue
index 51a60b2a..987e5b17 100644
--- a/src/components/TheBankAccountList.vue
+++ b/src/components/TheBankAccountList.vue
@@ -51,7 +51,7 @@
         }}</router-link>
         {{ $gettext("to create one.") }}
       </p>
-      <div v-else-if="activeVirtualAccounts.length !== 0">
+      <div class="section-card" v-else-if="activeVirtualAccounts.length !== 0">
         <h2 class="custom-card-title">
           {{ $gettext("your accounts") }}
         </h2>
@@ -73,11 +73,14 @@
         </BankAccountItem>
       </div>
     </div>
-    <div class="inactive" v-if="inactiveVirtualAccounts.length > 0">
+    <div
+      class="inactive section-card"
+      v-if="inactiveVirtualAccounts.length > 0"
+    >
       <h2 class="custom-card-title">
         {{ $gettext("your pending accounts") }}
       </h2>
-      <div class="mb-4 ml-5 is-italic">
+      <p>
         {{
           $gettext(
             "The accounts listed below have been subjected to " +
@@ -85,7 +88,7 @@
               " approved, these accounts will become usable."
           )
         }}
-      </div>
+      </p>
       <BankAccountItem
         v-for="account in inactiveVirtualAccounts"
         :bal="account.bal"
@@ -166,7 +169,7 @@
   @import "../assets/custom-variables.scss";
 
   .refresh {
-    margin-top: -9px;
+    margin-top: -1.5em;
     z-index: 1;
   }
   .active-refresh-button {
diff --git a/src/components/TheTransactionList.vue b/src/components/TheTransactionList.vue
index b0292ce1..e1d16c7c 100644
--- a/src/components/TheTransactionList.vue
+++ b/src/components/TheTransactionList.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="card custom-card custom-card-padding">
-    <div
-      class="
-        is-flex-direction-column
-        is-align-items-center
-        is-justify-content-space-between
-      "
+    <span
+      :class="{
+        hide: !isTransactionsLoading,
+      }"
+      class="icon is-small is-default is-pulled-right is-rounded refresh"
     >
-      <TransactionListRecent
-        :refreshToggle="refreshToggle"
-        :account="account"
-      />
-    </div>
+      <fa-icon :class="{ refreshing: isTransactionsLoading }" icon="sync" />
+    </span>
+    <PendingTopUp
+      :account="account"
+      :refreshToggle="refreshToggle"
+      @triggerTransactionRefresh="trigger"
+    />
+    <TransactionListRecent
+      :account="account"
+      :refreshToggle="refreshToggle"
+      @triggerTransactionRefresh="trigger"
+    />
   </div>
 </template>
 
@@ -19,6 +25,7 @@
   import { Options, Vue } from "vue-class-component"
 
   import TransactionListRecent from "./TransactionListRecent.vue"
+  import PendingTopUp from "./PendingTopUp.vue"
 
   import { mapModuleState } from "@/utils/vuex"
 
@@ -26,19 +33,35 @@
     name: "TheTransactionList",
     components: {
       TransactionListRecent,
+      PendingTopUp,
     },
     props: {
       refreshToggle: Boolean,
       account: Object,
     },
+    data() {
+      return {
+        isTransactionsLoading: false,
+      }
+    },
     computed: {
       ...mapModuleState("lokapi", ["transactionsLoading", "lastTransactions"]),
     },
     mounted() {
       console.log("TransactionList", this.account)
     },
+    methods: {
+      trigger(value: boolean) {
+        this.isTransactionsLoading = value
+      },
+    },
   })
   export default class TheTransactionList extends Vue {}
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+  .custom-line-separator {
+    display: flex;
+    height: 5px;
+  }
+</style>
diff --git a/src/components/TransactionItem.vue b/src/components/TransactionItem.vue
index a10578b2..cf7df0df 100644
--- a/src/components/TransactionItem.vue
+++ b/src/components/TransactionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pb-3 pt-3 shadow-bottom">
+  <div class="pb-3 pt-3 shadow-bottom cursor-pointer">
     <div class="is-pulled-right">
       <h5 class="custom-card-destinataire has-text-right">
         {{ dateFormat(transaction.date) }}
@@ -7,6 +7,7 @@
       <h5 class="status card-paiement-defaut-carte has-text-right mt-1">
         {{ relativeDateFormat(transaction.date) }}
         <fa-icon
+          v-if="transaction.pending"
           :class="{
             hide: transaction.pending,
           }"
@@ -18,7 +19,7 @@
     <div class="is-flex-direction-column">
       <h3
         :class="[
-          transaction.amount.charAt(0) == '-'
+          transaction.amount.toString().charAt(0) == '-'
             ? 'custom-card-destinataire has-text-danger'
             : 'custom-card-destinataire has-text-success',
         ]"
@@ -26,7 +27,10 @@
         {{ numericFormat(parseFloat(transaction.amount)) }}
         {{ transaction.currency }}
       </h3>
-      <h4 class="custom-card-destinataire">{{ transaction.related }}</h4>
+
+      <h4 class="custom-card-destinataire">
+        {{ transaction.related }}
+      </h4>
       <h5 class="has-text-grey-light transaction-desc">
         {{ transaction.description }}
       </h5>
@@ -54,6 +58,7 @@
 <style lang="scss" scoped>
   @import "../assets/custom-variables.scss";
   h4.custom-card-destinataire {
+    min-height: 1rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -84,4 +89,7 @@
   .shadow-bottom {
     box-shadow: 0 3px 6px -6px black;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
 </style>
diff --git a/src/components/TransactionListRecent.vue b/src/components/TransactionListRecent.vue
index 9ed5bab3..1e1e268a 100644
--- a/src/components/TransactionListRecent.vue
+++ b/src/components/TransactionListRecent.vue
@@ -6,17 +6,11 @@
     :is-full-page="false"
   />
   <div
+    class="section-card"
     id="the-transaction-list"
     v-if="!isTransactionsLoading || transactions.length"
   >
-    <span
-      :class="{
-        hide: !isTransactionsLoading,
-      }"
-      class="icon is-small is-default is-pulled-right is-rounded refresh"
-    >
-      <fa-icon :class="{ refreshing: isTransactionsLoading }" icon="sync" />
-    </span>
+    <h2 class="custom-card-title">{{ $gettext("Transactions") }}</h2>
     <div
       class="notification is-danger is-light"
       v-if="isTransactionsLoadingError"
@@ -42,7 +36,6 @@
       {{ $gettext("No previous transactions in your history.") }}
     </p>
     <div v-else>
-      <h2 class="custom-card-title">{{ $gettext("Transactions") }}</h2>
       <TransactionItem
         v-for="transaction in transactions"
         :key="transaction"
@@ -168,6 +161,9 @@
       refreshToggle: function () {
         this.resetTransactionsGen()
       },
+      isTransactionsLoading(newVal: boolean) {
+        this.$emit("triggerTransactionRefresh", newVal)
+      },
     },
   })
   export default class TransactionListRecent extends Vue {}
diff --git a/src/i18n/fr-FR/app.po b/src/i18n/fr-FR/app.po
index 25187a06..49f71df7 100644
--- a/src/i18n/fr-FR/app.po
+++ b/src/i18n/fr-FR/app.po
@@ -90,6 +90,14 @@ msgstr "Montant"
 msgid "Amount to send must be greater than 0"
 msgstr "Le montant à transférer doit être un nombre positif"
 
+#: src/components/ConfirmPaymentModal.vue:189
+msgid ""
+"An error occured while deleting transaction, please try again or contact an "
+"administrator"
+msgstr ""
+"Une erreur s'est produite lors de la suppression de la transaction, veuillez "
+"ré-éssayer ou contacter votre administrateur"
+
 #: src/components/MoneyTransferModal.vue:341
 msgid "An error occured while searching recipient"
 msgstr "Il y a eu un problème lors de la recherche du destinataire"
@@ -109,7 +117,7 @@ msgstr ""
 
 #: src/components/TransactionListModal.vue:342
 #: src/components/TransactionListModal.vue:399
-#: src/components/TransactionListRecent.vue:142
+#: src/components/TransactionListRecent.vue:135
 msgid "An unexpected issue occured while downloading transaction list"
 msgstr ""
 "Il y a eu un problème lors de la tentative de téléchargement de la liste des "
@@ -131,13 +139,13 @@ msgstr ""
 "Il y a eu un problème lors de la tentative de validation de l'utilisateur "
 "%{ name }"
 
-#: src/components/MoneyCreditModal.vue:279
+#: src/components/MoneyCreditModal.vue:280
 msgid "An unexpected issue occurred while attempting to top up your account"
 msgstr ""
 "La requête s'est terminée de façon inattendue, impossible de joindre le "
 "serveur distant."
 
-#: src/components/TransactionListRecent.vue:26
+#: src/components/TransactionListRecent.vue:20
 msgid ""
 "An unexpected issue occurred while loading the last transactions. Sorry for "
 "the inconvenience."
@@ -205,6 +213,11 @@ msgstr "Identification biométrique désactivée"
 msgid "Biometric login successfully set up"
 msgstr "Identification biométrique mise en place"
 
+#: src/components/ConfirmPaymentModal.vue:134
+#: src/components/ConfirmPaymentModal.vue:137
+msgid "Cancel"
+msgstr "Supprimer"
+
 #: src/components/TheBankAccountList.vue:50
 msgid "click here"
 msgstr "cliquez ici"
@@ -336,10 +349,10 @@ msgstr "pour le compte %{ name }"
 msgid "Forgot password ?"
 msgstr "Mot de passe oublié ?"
 
-#: src/components/ConfirmPaymentModal.vue:54
-#: src/components/ConfirmPaymentModal.vue:55
-#: src/components/ConfirmPaymentModal.vue:59
-#: src/components/ConfirmPaymentModal.vue:61
+#: src/components/ConfirmPaymentModal.vue:82
+#: src/components/ConfirmPaymentModal.vue:83
+#: src/components/ConfirmPaymentModal.vue:87
+#: src/components/ConfirmPaymentModal.vue:99
 msgid "from"
 msgstr "De"
 
@@ -432,7 +445,7 @@ msgstr "Non"
 msgid "No account pending for approval"
 msgstr "Aucun compte en attente de validation"
 
-#: src/components/TransactionListRecent.vue:42
+#: src/components/TransactionListRecent.vue:36
 msgid "No previous transactions in your history."
 msgstr "Aucune opération dans votre historique"
 
@@ -453,8 +466,8 @@ msgstr "Aucune transaction à afficher"
 msgid "No transactions found"
 msgstr "Aucune transaction à afficher"
 
-#: src/components/ConfirmPaymentModal.vue:89
-#: src/components/ConfirmPaymentModal.vue:92
+#: src/components/ConfirmPaymentModal.vue:149
+#: src/components/ConfirmPaymentModal.vue:152
 msgid "Ok"
 msgstr "Ok"
 
@@ -514,6 +527,8 @@ msgstr "Le mot de passe doit contenir au moins une lettre majuscule"
 msgid "Passwords do not match"
 msgstr "Le mot de passe entré n'est pas identique"
 
+#: src/components/ConfirmPaymentModal.vue:141
+#: src/components/ConfirmPaymentModal.vue:144
 #: src/components/TheDashboardFooter.vue:22
 msgid "Pay"
 msgstr "Payer"
@@ -522,7 +537,7 @@ msgstr "Payer"
 msgid "Payment confirmation"
 msgstr "Confirmation de paiement"
 
-#: src/components/ConfirmPaymentModal.vue:29
+#: src/components/ConfirmPaymentModal.vue:30
 msgid "Payment sent"
 msgstr "Paiement envoyé"
 
@@ -595,9 +610,10 @@ msgstr "Préferences"
 msgid "Profile"
 msgstr "Profil"
 
-#: src/components/ConfirmPaymentModal.vue:44
-#: src/components/ConfirmPaymentModal.vue:45
 #: src/components/ConfirmPaymentModal.vue:49
+#: src/components/ConfirmPaymentModal.vue:50
+#: src/components/ConfirmPaymentModal.vue:52
+#: src/components/ConfirmPaymentModal.vue:54
 msgid "Received %{amount}"
 msgstr "%{amount} reçu"
 
@@ -621,6 +637,13 @@ msgstr "La requête a échoué, impossible de joindre le serveur distant."
 msgid "Request refused by remote server. Contact your administrator"
 msgstr "Refus du serveur distant, contactez votre administrateur"
 
+#: src/components/ConfirmPaymentModal.vue:62
+#: src/components/ConfirmPaymentModal.vue:63
+#: src/components/ConfirmPaymentModal.vue:67
+#: src/components/ConfirmPaymentModal.vue:68
+msgid "Requested %{amount}"
+msgstr "%{amount} demandé"
+
 #: src/router/index.ts:38
 msgid "Reset my password"
 msgstr "Ré-initialiser mon mot de passe"
@@ -637,9 +660,9 @@ msgstr "Enregistrer"
 msgid "Security settings"
 msgstr "Préférences de sécurité"
 
-#: src/components/TransactionListRecent.vue:58
-#: src/components/TransactionListRecent.vue:59
-#: src/components/TransactionListRecent.vue:63
+#: src/components/TransactionListRecent.vue:51
+#: src/components/TransactionListRecent.vue:52
+#: src/components/TransactionListRecent.vue:56
 msgid "See more"
 msgstr "Voir tout"
 
@@ -663,9 +686,10 @@ msgstr "Envoyer"
 msgid "Send money"
 msgstr "Envoyer de l'argent"
 
-#: src/components/ConfirmPaymentModal.vue:41
-#: src/components/ConfirmPaymentModal.vue:42
 #: src/components/ConfirmPaymentModal.vue:46
+#: src/components/ConfirmPaymentModal.vue:47
+#: src/components/ConfirmPaymentModal.vue:49
+#: src/components/ConfirmPaymentModal.vue:51
 msgid "Sent %{amount}"
 msgstr "%{amount} envoyé"
 
@@ -730,7 +754,7 @@ msgstr "Le compte destinataire du tranfert est désactivé."
 msgid "Terms of Service"
 msgstr "CGU"
 
-#: src/components/TheBankAccountList.vue:82
+#: src/components/TheBankAccountList.vue:85
 msgid ""
 "The accounts listed below have been subjected to a creation request. Once "
 "the creation request is approved, these accounts will become usable."
@@ -739,11 +763,23 @@ msgstr ""
 "Une fois la demande de création approuvée, ces comptes deviendront "
 "utilisables."
 
-#: src/components/MoneyCreditModal.vue:231
+#: src/components/PendingTopUp.vue:30
+msgid ""
+"The following top up have been paid and are waiting for an administrator of "
+"your local currency to validate them."
+msgstr ""
+"Les rechargements suivants ont été payés et attendent qu'un administrateur "
+"de votre monnaie locale les valide."
+
+#: src/components/PendingTopUp.vue:14
+msgid "The following top up requests needs to be paid or canceled"
+msgstr "Les demandes de rechargement suivantes doivent être payées ou annulées"
+
+#: src/components/MoneyCreditModal.vue:233
 msgid "The maximum top up amount must be equal or less than %{ amount }"
 msgstr "Le montant à créditer doit être égal ou inférieur à %{ amount }"
 
-#: src/components/MoneyCreditModal.vue:222
+#: src/components/MoneyCreditModal.vue:224
 msgid "The minimum top up amount must be equal or greater than %{ amount }"
 msgstr "Le montant à créditer doit être égal ou supérieur à %{ amount }"
 
@@ -764,10 +800,29 @@ msgstr ""
 "Ce mot de passe est différent de votre mot de passe Monujo, il concerne "
 "uniquement votre portefeuille %{ backend }."
 
-#: src/components/ConfirmPaymentModal.vue:53
-#: src/components/ConfirmPaymentModal.vue:54
-#: src/components/ConfirmPaymentModal.vue:58
-#: src/components/ConfirmPaymentModal.vue:60
+#: src/components/ConfirmPaymentModal.vue:70
+#: src/components/ConfirmPaymentModal.vue:71
+#: src/components/ConfirmPaymentModal.vue:75
+#: src/components/ConfirmPaymentModal.vue:84
+msgid ""
+"This top-up request is waiting for an administrator of your local currency "
+"to validate it"
+msgstr ""
+"Cette demande de recharge est en attente de validation par un administrateur "
+"de votre monnaie locale"
+
+#: src/components/ConfirmPaymentModal.vue:73
+#: src/components/ConfirmPaymentModal.vue:74
+#: src/components/ConfirmPaymentModal.vue:78
+#: src/components/ConfirmPaymentModal.vue:87
+msgid "This top-up request is waiting for you to pay it or cancel it"
+msgstr ""
+"Cette demande de recharge est en attente d'être payée ou annulée par vous"
+
+#: src/components/ConfirmPaymentModal.vue:81
+#: src/components/ConfirmPaymentModal.vue:82
+#: src/components/ConfirmPaymentModal.vue:86
+#: src/components/ConfirmPaymentModal.vue:98
 msgid "to"
 msgstr "à"
 
@@ -816,6 +871,18 @@ msgstr ""
 msgid "Top up requests await approval"
 msgstr "Opérations de crédit en attente de validation"
 
+#: src/components/PendingTopUp.vue:26
+msgid "Top up waiting admin validation"
+msgstr "Rechargement en attente de validation de la part d'un administrateur"
+
+#: src/components/ConfirmPaymentModal.vue:11
+msgid "Top-up details"
+msgstr "Détails de l'opération"
+
+#: src/components/ConfirmPaymentModal.vue:31
+msgid "Top-up requested"
+msgstr "Rechargement demandé"
+
 #: src/components/ConfirmPaymentModal.vue:9
 msgid "Transaction details"
 msgstr "Détails de l'opération"
@@ -841,11 +908,11 @@ msgstr "Liste des transactions du %{ begin } au %{ end }"
 msgid "Transaction list shared"
 msgstr "Liste des transactions partagée"
 
-#: src/components/ConfirmPaymentModal.vue:28
+#: src/components/ConfirmPaymentModal.vue:29
 msgid "Transaction processed"
 msgstr "Opération traitée"
 
-#: src/components/ConfirmPaymentModal.vue:27
+#: src/components/ConfirmPaymentModal.vue:28
 msgid "Transaction sent"
 msgstr "Opération envoyée"
 
@@ -853,7 +920,7 @@ msgstr "Opération envoyée"
 msgid "Transaction was refused due to insufficient balance"
 msgstr "Transaction refusée en raison de fonds insuffisants"
 
-#: src/components/TransactionListRecent.vue:45
+#: src/components/TransactionListRecent.vue:13
 msgid "Transactions"
 msgstr "Opérations"
 
@@ -879,6 +946,10 @@ msgstr ""
 "La requête s'est terminée de façon inattendue, impossible de joindre le "
 "serveur distant."
 
+#: src/components/PendingTopUp.vue:89
+msgid "unexpected server error occured while fetching pending topup list"
+msgstr "Il y a eu un problème lors de la tentative de téléchargement de la liste des demandes de rechargement"
+
 #: src/views/ResetPassword.vue:70
 msgid ""
 "Unknown user or email. Please make sure to provide a valid username or email."
@@ -886,6 +957,10 @@ msgstr ""
 "Utilisateur ou e-mail inconnu. Veuillez vous assurer de fournir un nom "
 "d'utilisateur ou une adresse e-mail valide."
 
+#: src/components/PendingTopUp.vue:10
+msgid "Unpaid top-up requests"
+msgstr "Demandes de crédit non payées"
+
 #: src/components/BiometryPrefs.vue:17
 msgid "Use biometry for login"
 msgstr "Activer le login biométrique"
@@ -953,7 +1028,7 @@ msgstr ""
 "administrateur."
 
 #: src/components/TheBankAccountList.vue:36
-#: src/components/TransactionListRecent.vue:34
+#: src/components/TransactionListRecent.vue:28
 #: src/views/admin/PendingAccounts.vue:27 src/views/admin/PendingCredits.vue:27
 msgid ""
 "You can try to refresh the page, if the issue persists, you may want to "
@@ -986,6 +1061,6 @@ msgstr "Vos identifiants seront enregistrés après votre prochaine connexion"
 msgid "Your password"
 msgstr "Votre mot de passe"
 
-#: src/components/TheBankAccountList.vue:78
+#: src/components/TheBankAccountList.vue:81
 msgid "your pending accounts"
 msgstr "vos comptes en attente de création"
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 6fb1453d..571e64e6 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -79,4 +79,20 @@
       bottom: 20px !important;
     }
   }
+  :deep(div.card div.section-card > p) {
+    margin-left: 1em;
+    margin-bottom: 0.5em;
+    font-style: italic;
+    color: #888;
+  }
+  :deep(div.card div.section-card > h2) {
+    border-bottom: 1px solid black;
+    padding-bottom: 0.2em;
+    margin-bottom: 0.5em;
+    font-weight: bold;
+    color: #666;
+  }
+  :deep(main > div > div > div > div.card div.section-card) {
+    margin-bottom: 2em;
+  }
 </style>