diff --git a/quartz/components/Btn8831.tsx b/quartz/components/Btn8831.tsx
index 932b90a..4087bda 100644
--- a/quartz/components/Btn8831.tsx
+++ b/quartz/components/Btn8831.tsx
@@ -1,5 +1,5 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import baseStyle from "./styles/footer.scss"
+import style from "./styles/buttons8831.scss"
 import { useEffect, useState } from "preact/hooks"
 
 // Import the JSON data
@@ -29,25 +29,8 @@ export default (() => {
     )
   }
 
-  // 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
+  Btn8831.css = style
 
   return Btn8831
 })() satisfies QuartzComponentConstructor
diff --git a/quartz/styles/buttons8831.scss b/quartz/styles/buttons8831.scss
new file mode 100644
index 0000000..5301e01
--- /dev/null
+++ b/quartz/styles/buttons8831.scss
@@ -0,0 +1,15 @@
+.btn8831-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 60%;
+  margin: 0 auto;
+  opacity: 1.0;
+}
+.btn8831-container a {
+  margin: 5px;
+}
+.btn8831-container img {
+  width: 88px;
+  height: 31px;
+}
\ No newline at end of file