diff --git a/src/widgets/QuizDialog.tsx b/src/widgets/QuizDialog.tsx
index 44cf2eb..e2c5517 100644
--- a/src/widgets/QuizDialog.tsx
+++ b/src/widgets/QuizDialog.tsx
@@ -1,28 +1,52 @@
 import QuizAnswerer from "@/components/QuizAnswerer";
-import { Dialog } from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, IconButton, Slide, SlideProps, SxProps, Theme } from "@mui/material";
+import { forwardRef } from "react";
 
 
+const SlideTransition = forwardRef<unknown, SlideProps>((props, ref) => {
+    return (
+        <Slide direction="up" ref={ref} {...props} />
+    );
+});
+
 interface Props {
     open?: boolean;
     quizId: string;
+    paperSx?: SxProps<Theme>;
+    hideBackdrop?: boolean;
+    disableScrollLock?: boolean;
     onClose?: () => void;
 }
 
-export default function QuizDialog({ open = true, quizId, onClose }: Props) {
+export default function QuizDialog({
+    open = true,
+    quizId,
+    paperSx = [],
+    hideBackdrop,
+    disableScrollLock,
+    onClose
+}: Props) {
 
     return (
         <Dialog
             open={open}
             onClose={onClose}
             keepMounted
+            hideBackdrop={hideBackdrop}
+            disableScrollLock={disableScrollLock}
+            TransitionComponent={SlideTransition}
             PaperProps={{
-                sx: {
-                    backgroundColor: "transparent",
-                    width: "calc(min(100%, max(70%, 700px)))",
-                    height: "80%",
-                    maxWidth: "100%",
-                    m: "16px",
-                }
+                sx: [
+                    {
+                        backgroundColor: "transparent",
+                        width: "calc(min(100%, max(70%, 700px)))",
+                        height: "80%",
+                        maxWidth: "100%",
+                        m: "16px",
+                    },
+                    ...(Array.isArray(paperSx) ? paperSx : [paperSx])
+                ]
             }}
         >
             <QuizAnswerer
@@ -30,6 +54,25 @@ export default function QuizDialog({ open = true, quizId, onClose }: Props) {
                 changeFaviconAndTitle={false}
                 disableGlobalCss
             />
+            <IconButton
+                onClick={onClose}
+                sx={{
+                    position: "absolute",
+                    zIndex: 10,
+                    top: 0,
+                    right: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderTopRightRadius: "4px",
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: "4px",
+                    borderBottomRightRadius: 0,
+                    "&:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    },
+                }}
+            >
+                <CloseIcon sx={{ color: "white" }} />
+            </IconButton>
         </Dialog>
     );
 }
diff --git a/src/widgets/side/QuizSideButton.tsx b/src/widgets/side/QuizSideButton.tsx
index f08bf92..c8d7d4c 100644
--- a/src/widgets/side/QuizSideButton.tsx
+++ b/src/widgets/side/QuizSideButton.tsx
@@ -1,8 +1,8 @@
-import { QuizAnswerer } from "@/index";
 import lightTheme from "@/utils/themes/light";
-import { Box, Button, Grow, ThemeProvider } from "@mui/material";
+import { Button, ThemeProvider } from "@mui/material";
 import { useState } from "react";
 import { createPortal } from "react-dom";
+import QuizDialog from "../QuizDialog";
 
 
 const PADDING = 10;
@@ -10,65 +10,54 @@ const PADDING = 10;
 interface Props {
     quizId: string;
     position: "left" | "right";
-    buttonColor?: string;
+    buttonBackgroundColor?: string;
 }
 
-export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
+export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) {
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
 
     return createPortal(
         <ThemeProvider theme={lightTheme}>
-            {isQuizShown ? (
-                <Grow in={true}>
-                    <Box
-                        sx={[
-                            {
-                                position: "fixed",
-                                height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
-                                width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
-                            },
-                            position === "left" && {
-                                bottom: PADDING,
-                                left: PADDING,
-                            },
-                            position === "right" && {
-                                bottom: PADDING,
-                                right: PADDING,
-                            },
-                        ]}
-                    >
-                        <QuizAnswerer
-                            quizId={quizId}
-                            changeFaviconAndTitle={false}
-                            disableGlobalCss
-                        />
-                    </Box>
-                </Grow>
-            ) : (
-                <Button
-                    className="pena-quiz-widget-button"
-                    variant="contained"
-                    onClick={() => setIsQuizShown(true)}
-                    sx={[
-                        {
-                            position: "fixed",
-                            height: "70px",
-                            width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
-                            color: buttonColor,
-                        },
-                        position === "left" && {
-                            bottom: PADDING,
-                            left: PADDING,
-                        },
-                        position === "right" && {
-                            bottom: PADDING,
-                            right: PADDING,
-                        },
-                    ]}
-                >
-                    Пройти квиз
-                </Button>
-            )}
+            <QuizDialog
+                open={isQuizShown}
+                quizId={quizId}
+                onClose={() => setIsQuizShown(false)}
+                hideBackdrop
+                disableScrollLock
+                paperSx={{
+                    position: "absolute",
+                    bottom: PADDING,
+                    right: position === "right" ? PADDING : undefined,
+                    left: position === "left" ? PADDING : undefined,
+                    height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
+                    width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
+                    m: 0,
+                }}
+            />
+            <Button
+                className="pena-quiz-widget-button"
+                variant="contained"
+                onClick={() => setIsQuizShown(true)}
+                sx={[
+                    {
+                        display: isQuizShown ? "none" : "block",
+                        position: "fixed",
+                        height: "70px",
+                        width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
+                        backgroundColor: buttonBackgroundColor,
+                    },
+                    position === "left" && {
+                        bottom: PADDING,
+                        left: PADDING,
+                    },
+                    position === "right" && {
+                        bottom: PADDING,
+                        right: PADDING,
+                    },
+                ]}
+            >
+                Пройти квиз
+            </Button>
         </ThemeProvider>,
         document.body
     );