diff --git a/src/components/User/UserPanel.jsx b/src/components/User/UserPanel.jsx
index 831b904..898fdc9 100644
--- a/src/components/User/UserPanel.jsx
+++ b/src/components/User/UserPanel.jsx
@@ -1,24 +1,38 @@
 import React, { useEffect, useContext } from "react";
 import { coin } from "../../assets/index";
 import { UserContext } from "../../providers/UserProvider";
+import { CoinsModal } from "../Modals/index";
+import { useModal } from "../../hooks/index";
+
 import "./user.scss";
 
 const UserPanel = () => {
   const { user } = useContext(UserContext);
 
+  const [coinsModal, toggleCoinsModal] = useModal();
+
   useEffect(() => {
     if (!user) return;
   }, [user]);
 
+  const openCoinsModal = () => {
+    toggleCoinsModal();
+  };
+
   const { name, points } = user;
   return (
-    <div className="user-panel">
-      <div>{name}</div>
-      <div className="coins-user">
-        <img src={coin} alt="Coins" />
-        <span className="points">{points}</span>
+    <>
+      {coinsModal && (
+        <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
+      )}
+      <div className="user-panel">
+        <div>{name}</div>
+        <div className="coins-user">
+          <img src={coin} onClick={openCoinsModal} alt="Coins" />
+          <span className="points">{points}</span>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 export default UserPanel;
diff --git a/src/components/User/user.scss b/src/components/User/user.scss
index 22a6a84..52ba401 100644
--- a/src/components/User/user.scss
+++ b/src/components/User/user.scss
@@ -26,4 +26,9 @@
       color: gray;
     }
   }
+  img {
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }