diff --git a/client/src/components/PageContainer.tsx b/client/src/components/PageContainer.tsx
index f12f740..3624824 100644
--- a/client/src/components/PageContainer.tsx
+++ b/client/src/components/PageContainer.tsx
@@ -55,13 +55,16 @@ export const PageContainer = ({
             <div className="grid grid-cols-3 gap-6 pt-4">
               {badges &&
                 Object.values(badges).map((badge) => {
-                  const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(badge.name);
+                  const { name, description, icon } = badge;
+                  const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(name);
                   const style = { width: "90px", filter: "none" };
                   if (!hasBadge) style.filter = "grayscale(1)";
                   return (
-                    <div className="tooltip" key={badge.id}>
-                      <span className="tooltip-content">{badge.name}</span>
-                      <img src={badge.icon} alt={badge.name} style={style} />
+                    <div className="tooltip" key={name}>
+                      <span className="tooltip-content" style={{ width: "115px" }}>
+                        {name} {description && `- ${description}`}
+                      </span>
+                      <img src={icon} alt={name} style={style} />
                     </div>
                   );
                 })}