diff --git a/quartz/components/Btn8831.tsx b/quartz/components/Btn8831.tsx
index aad14ab..2429c64 100644
--- a/quartz/components/Btn8831.tsx
+++ b/quartz/components/Btn8831.tsx
@@ -3,52 +3,51 @@ import baseStyle from "./styles/footer.scss"
 import { useEffect, useState } from "preact/hooks"
 
 // Import the JSON data
-import buttonsData from "./buttons.json"
+import buttonsData from "../buttons.json"
 
-// Define the component
-const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
-  // Since the data is static, you can directly use buttonsData
-  const [buttons, setButtons] = useState(buttonsData)
+export default (() => {
+  // Define the component
+  const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    // Since the data is static, you can directly use buttonsData
+    const [buttons, setButtons] = useState(buttonsData)
 
-  // Optional: If you need to perform any data manipulation or sorting, you can do it here
-  // For example, if buttonsData isn't sorted, but you need to sort it:
-  // useEffect(() => {
-  //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
-  //   setButtons(sortedButtons);
-  // }, []);
+    // Optional: If you need to perform any data manipulation or sorting, you can do it here
+    // For example, if buttonsData isn't sorted, but you need to sort it:
+    // useEffect(() => {
+    //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
+    //   setButtons(sortedButtons);
+    // }, []);
 
-  return (
-    <div class={`btn8831-container ${displayClass ?? ""}`}>
-      {buttons.map((button, index) => (
-        <a href={button.url} key={index}>
-          <img src={button.image} alt={button.alt} />
-        </a>
-      ))}
-    </div>
-  )
-}
-
-// Define custom styles
-const customStyle = `
-  .btn8831-container {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 60%;
-    margin: 0 auto;
-    opacity: 1;
-    justify-content: center;
+    return (
+      <div class={`btn8831-container ${displayClass ?? ""}`}>
+        {buttons.map((button, index) => (
+          <a href={button.url} key={index}>
+            <img src={button.image} alt={button.alt} />
+          </a>
+        ))}
+      </div>
+    )
   }
-  .btn8831-container a {
-    margin: 5px;
-  }
-  .btn8831-container img {
-    width: 88px;
-    height: 31px;
-  }
-`
 
-// Combine base styles with custom styles
-Btn8831.css = customStyle
+  // Define custom styles
+  const customStyle = `
+    .btn8831-container {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 60%;
+      margin: 0 auto;
+    }
+    .btn8831-container a {
+      margin: 5px;
+    }
+    .btn8831-container img {
+      width: 88px;
+      height: 31px;
+    }
+  `
 
+  // Combine base styles with custom styles
+  Btn8831.css = baseStyle + customStyle
 
-export default (() =>  Btn8831) satisfies QuartzComponentConstructor
+  return Btn8831
+})() satisfies QuartzComponentConstructor