diff --git a/src/widgets/side/QuizSideButton.tsx b/src/widgets/side/QuizSideButton.tsx
index ad3ea43..f08bf92 100644
--- a/src/widgets/side/QuizSideButton.tsx
+++ b/src/widgets/side/QuizSideButton.tsx
@@ -10,9 +10,10 @@ const PADDING = 10;
 interface Props {
     quizId: string;
     position: "left" | "right";
+    buttonColor?: string;
 }
 
-export default function QuizSideButton({ quizId, position }: Props) {
+export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
 
     return createPortal(
@@ -53,6 +54,7 @@ export default function QuizSideButton({ quizId, position }: Props) {
                             position: "fixed",
                             height: "70px",
                             width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
+                            color: buttonColor,
                         },
                         position === "left" && {
                             bottom: PADDING,
diff --git a/src/widgets/side/SideWidget.tsx b/src/widgets/side/SideWidget.tsx
index f42f47b..1d8192e 100644
--- a/src/widgets/side/SideWidget.tsx
+++ b/src/widgets/side/SideWidget.tsx
@@ -7,7 +7,9 @@ export class SideWidget {
     root: Root | undefined;
     element = document.createElement("div");
 
-    constructor({ quizId, position }: ComponentPropsWithoutRef<typeof QuizSideButton>) {
+    constructor({ quizId, position, buttonColor }: ComponentPropsWithoutRef<typeof QuizSideButton> & {
+        buttonColor?: string;
+    }) {
         this.element.style.setProperty("display", "none");
         document.body.appendChild(this.element);
 
@@ -17,6 +19,7 @@ export class SideWidget {
             <QuizSideButton
                 quizId={quizId}
                 position={position}
+                buttonColor={buttonColor}
             />
         );
     }