diff --git a/quartz/components/Btn8831.tsx b/quartz/components/Btn8831.tsx
index a9fdda3..d2d4975 100644
--- a/quartz/components/Btn8831.tsx
+++ b/quartz/components/Btn8831.tsx
@@ -23,9 +23,9 @@ export default (() => {
                 {/* Render buttons of the current type */}
                 <div class="button-group">
                   {buttons.map((button, idx) => (
-                    <a href={button.url} key={idx}>
-                      <img src={button.image} alt={button.alt} title={button.title} />
-                    </a>
+                    <div key={idx} class="button-item">
+                      {renderButtonContent(button)}
+                    </div>
                   ))}
                 </div>
                 {/* Add a horizontal line after the group except for the last one */}
@@ -35,15 +35,6 @@ export default (() => {
           }
           return null
         })}
-        {/* Include the iframe if needed */}
-        <iframe
-          src="//incr.easrng.net/badge?key=changeme"
-          style="background: url(//incr.easrng.net/bg.gif)"
-          title="increment badge"
-          width="88"
-          height="31"
-          frameborder="0"
-        ></iframe>
       </div>
     )
   }
@@ -66,6 +57,25 @@ export default (() => {
     return groups
   }
 
+  // Function to render button content based on contentType
+  function renderButtonContent(button) {
+    const contentType = button.contentType || "image" // Default to 'image'
+
+    if (contentType === "image") {
+      return (
+        <a href={button.url}>
+          <img src={button.image} alt={button.alt} title={button.title} />
+        </a>
+      )
+    } else if (contentType === "iframe") {
+      const iframeAttrs = button.iframeAttributes || {}
+      return <iframe src={button.url} title={button.title} {...iframeAttrs}></iframe>
+    } else {
+      // Handle other content types if necessary
+      return null
+    }
+  }
+
   // Use the existing style and add any additional styles if necessary
   Btn8831.css = style
 
diff --git a/quartz/components/buttons.json b/quartz/components/buttons.json
index 11b3a1d..3e99c93 100644
--- a/quartz/components/buttons.json
+++ b/quartz/components/buttons.json
@@ -4,13 +4,28 @@
     "url": "https://smolderg.xyz",
     "alt": "\"They so small!\" in large letters accompanied by an arrow pointing at a tiny dragon in the corner of the image, surrounded by the smaller bits of text \"Wow!\" \"Look!\" and \"Pet them!\"",
     "title": "\"They so small!\" in large letters accompanied by an arrow pointing at a tiny dragon in the corner of the image, surrounded by the smaller bits of text \"Wow!\" \"Look!\" and \"Pet them!\"",
-    "fren": true
+    "type": "friend",
+    "contentType": "image"
+  },
+  {
+    "url": "//incr.easrng.net/badge?key=changeme",
+    "alt": "Increment Badge",
+    "title": "Increment Badge",
+    "type": "misc",
+    "contentType": "iframe",
+    "iframeAttributes": {
+      "style": "background: url(//incr.easrng.net/bg.gif)",
+      "width": "88",
+      "height": "31",
+      "frameborder": "0"
+    }
   },
   {
     "image": "https://assets.derg.cz/buttons/sirlan.png",
     "url": "https://dragon-vi.be",
     "alt": "Button with the text Sirlan which points to dragon-vi.be",
     "title": "Sirlan, the adorable eastern derg",
-    "fren": true
+    "type": "friend",
+    "contentType": "image"
   }
 ]
diff --git a/quartz/components/styles/buttons8831.scss b/quartz/components/styles/buttons8831.scss
index 7193fea..f67f382 100644
--- a/quartz/components/styles/buttons8831.scss
+++ b/quartz/components/styles/buttons8831.scss
@@ -6,7 +6,7 @@
   margin: 0 auto;
   opacity: 1.0;
 }
-.button-group a {
+.button-group a, .button-group iframe {
   margin: 5px;
   opacity: 1;
 }