diff --git a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx
index ed3e17017..f0375f3d6 100644
--- a/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx
+++ b/app/frontend/src/javascript/components/pricing/configure-packs-button.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { PrepaidPack } from '../../models/prepaid-pack';
 import { FabModal } from '../base/fab-modal';
+import { useTranslation } from 'react-i18next';
 
 interface ConfigurePacksButtonProps {
   packs: Array<PrepaidPack>,
@@ -12,6 +13,7 @@ interface ConfigurePacksButtonProps {
  * When clicked, it opens a modal dialog to configure (add/delete/edit/remove) prepaid-packs.
  */
 export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ packs, onError }) => {
+  const { t } = useTranslation('admin');
   const [showList, setShowList] = useState<boolean>(false);
   const [addPackModal, setAddPackModal] = useState<boolean>(false);
 
@@ -28,12 +30,23 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
   }
 
   return (
-    <div className="configure-packs-button" onMouseOver={toggleShowList} onClick={handleAddPack}>
-      <i className="fas fa-box-open" />
-      {packs && showList && <div className="packs-overview">
-        {packs.map(p => <div>{p.minutes / 60}h - {p.amount}</div>)}
+    <div className="configure-packs-button" onClick={toggleShowList}>
+      <button className="packs-button">
+        <i className="fas fa-box" />
+      </button>
+      {showList && <div className="packs-popover">
+        <div className="popover-title">
+          <h3>{t('app.admin.configure_packs_button.packs')}</h3>
+          <button className="add-pack-button" onClick={handleAddPack}><i className="fas fa-plus"/></button>
+        </div>
+        <div className="popover-content">
+          <ul>
+            {packs?.map(p => <li key={p.id}>{p.minutes / 60}h - {p.amount}</li>)}
+          </ul>
+          {packs?.length === 0 && <span>{t('app.admin.configure_packs_button.no_packs')}</span>}
+        </div>
       </div>}
-      <FabModal isOpen={addPackModal} toggleModal={toggleAddPackModal}>NEW PACK</FabModal>
+    <FabModal isOpen={addPackModal} toggleModal={toggleAddPackModal}>NEW PACK</FabModal>
     </div>
   );
 }
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index 4844eee5c..716b49fc5 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -57,5 +57,6 @@
 @import "modules/user/avatar";
 @import "modules/pricing/machines-pricing";
 @import "modules/pricing/editable-price";
+@import "modules/pricing/configure-packs-button";
 
 @import "app.responsive";
diff --git a/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss b/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss
new file mode 100644
index 000000000..28de9dc5a
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss
@@ -0,0 +1,82 @@
+.configure-packs-button {
+  display: inline-block;
+  margin-left: 6px;
+  position: relative;
+
+  .packs-button {
+    border: 1px solid #d0cccc;
+    border-radius: 50%;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    padding: 2px 6px;
+    box-shadow: 0 1px 1px 0 #abaaaa;
+
+    &:hover  {
+      background-color: #b9b9b9;
+      color: white;
+    }
+  }
+
+  .packs-popover {
+    & {
+      position: absolute;
+      width: 276px;
+      border: 1px solid rgba(0,0,0,.2);
+      border-radius: .3rem;
+      top: 35px;
+      left: -125px;
+      z-index: 1;
+    }
+
+    &::before {
+      content: "";
+      background-color: transparent;
+      position: absolute;
+      left: 132px;
+      top: -7px;
+      height: 7px;
+      width: 12px;
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+      border-bottom: 7px solid #ccc;
+    }
+    &::after {
+      content: "";
+      background-color: transparent;
+      position: absolute;
+      left: 133px;
+      top: -6px;
+      height: 6px;
+      width: 10px;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid #f0f0f0;
+    }
+    .popover-title {
+      padding: .5rem 1rem;
+      margin-bottom: 0;
+      font-size: 1rem;
+      background-color: #f0f0f0;
+      border-bottom: 1px solid rgba(0,0,0,.2);
+      border-top-left-radius: calc(.3rem - 1px);
+      border-top-right-radius: calc(.3rem - 1px);
+
+      & > h3 {
+        margin: 2px;
+      }
+
+      & > .add-pack-button {
+        position: absolute;
+        right: 5px;
+        top: 10px;
+      }
+    }
+    .popover-content {
+      padding: 1rem 1rem;
+      color: #212529;
+      background-color: white;
+    }
+  }
+}
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index f3b2700d8..e1c854a42 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -374,6 +374,9 @@ en:
         you_can_override: "You can override this duration for each availability you create in the agenda. The price will then be adjusted accordingly."
         machines: "Machines"
         price_updated: "Price successfully updated"
+      configure_packs_button:
+        packs: "Prepaid packs"
+        no_packs: "No packs for now"
       #ajouter un code promotionnel
       coupons_new:
         add_a_coupon: "Add a coupon"