diff --git a/public/css/hud.css b/public/css/hud.css
index 3335bca..e2a87fb 100644
--- a/public/css/hud.css
+++ b/public/css/hud.css
@@ -213,6 +213,24 @@
   justify-content: center;
 }
 
+/* Blauer Kristall / Gems – Bild aus der Datenbank */
+.hud-res-icon-gem {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hud-res-icon-gem img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
 /* Silbermünze – Bild aus der Datenbank */
 .hud-res-icon-silver {
   width: 20px;
diff --git a/public/css/mine.css b/public/css/mine.css
index 206beb7..81fbd9d 100644
--- a/public/css/mine.css
+++ b/public/css/mine.css
@@ -85,6 +85,24 @@
   justify-content: center;
 }
 
+/* Blauer Kristall / Gems – Bild aus der Datenbank */
+.mine-resource-icon-gem {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mine-resource-icon-gem img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
+  display: block;
+}
+
 /* Silbermünze – Bild aus der Datenbank */
 .mine-resource-icon-silver {
   width: 24px;