diff --git a/src/module/treasure.js b/src/module/treasure.js
index 79973eb..db7190d 100644
--- a/src/module/treasure.js
+++ b/src/module/treasure.js
@@ -3,8 +3,8 @@ export const augmentTable = (table, html, data) => {
   let head = html.find(".sheet-header");
   const flag = table.object.getFlag("ose", "treasure");
   const treasure = flag
-    ? "<div class='toggle-treasure'><a><i class='fas fa-gem'></i></a></div>"
-    : "<div class='toggle-treasure'><a><i class='far fa-gem'></i></a></div>";
+    ? "<div class='toggle-treasure active'></div>"
+    : "<div class='toggle-treasure'></div>";
   head.append(treasure);
 
   html.find(".toggle-treasure").click((ev) => {
@@ -79,5 +79,5 @@ async function rollTreasure(table, options = {}) {
     "systems/ose/templates/chat/roll-treasure.html",
     templateData
   );
-  ChatMessage.create({ content: html });
+  ChatMessage.create({ content: html, sound: "/systems/ose/assets/coins.mp3" });
 }
diff --git a/src/scss/apps.scss b/src/scss/apps.scss
index 80d9413..40473ce 100644
--- a/src/scss/apps.scss
+++ b/src/scss/apps.scss
@@ -20,9 +20,19 @@
   .sheet-header {
     .toggle-treasure {
       flex: 0 0 30px;
-      font-size: 30px;
-      line-height: 30px;
-      margin: 0 8px;
+      font-size: 26px;
+      line-height: 25px;
+      color:white;
+      margin: 0 2px 5px 8px;
+      border-radius: 8px;
+      background: url("/systems/ose/assets/chest.png") no-repeat center;
+      background-size: cover;
+      padding: 5px 8px;
+      cursor: pointer;
+      filter: grayscale(1) opacity(0.5);
+      &.active,&:hover {
+        filter: none;
+      }
     }
   }
   @keyframes notify {