diff --git a/package.json b/package.json
index c544f8ab..50ce7a0f 100755
--- a/package.json
+++ b/package.json
@@ -110,6 +110,6 @@
     "bracketSpacing": true,
     "arrowParens": "always",
     "jsxSingleQuote": false,
-    "singleAttributePerLine": false
+    "singleAttributePerLine": true
   }
 }
diff --git a/src/assets/banner-widget-preview.png b/src/assets/banner-widget-preview.png
index 7c00d7f1..7631e894 100644
Binary files a/src/assets/banner-widget-preview.png and b/src/assets/banner-widget-preview.png differ
diff --git a/src/assets/fixed-button-widget-preview.png b/src/assets/fixed-button-widget-preview.png
index b84a1aaa..af64082b 100644
Binary files a/src/assets/fixed-button-widget-preview.png and b/src/assets/fixed-button-widget-preview.png differ
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
index 19367730..dc1ab3d1 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
@@ -1,16 +1,10 @@
 import { WidgetType } from "@frontend/squzanswerer";
-import {
-  Box,
-  Button,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useState } from "react";
 import InstallationStepButton from "./InstallationStepButton";
 import BannerWidgetSetup from "./WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup";
-import ButtonWidgetSetup from "./WidgetSetupByType/ButtonWidgetSetup";
+import ButtonWidgetSetup from "./WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetSetup";
 import ContainerWidgetSetup from "./WidgetSetupByType/ContainerWidgetSetup";
 import PopupWidgetSetup from "./WidgetSetupByType/PopupWidgetSetup";
 import SideWidgetSetup from "./WidgetSetupByType/SideWidgetSetup/SideWidgetSetup";
@@ -30,16 +24,15 @@ export default function QuizInstallationCard() {
   const theme = useTheme();
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
   const quiz = useCurrentQuiz();
-  const [widgetSetupSettings, setWidgetSetupSettings] =
-    useState<WidgetSetupSettings>({ step: 1, widgetType: "container" });
+  const [widgetSetupSettings, setWidgetSetupSettings] = useState<WidgetSetupSettings>({
+    step: 1,
+    widgetType: "container",
+  });
 
   if (!quiz) return null;
 
   const nextButton = (
-    <Button
-      onClick={() => setWidgetSetupSettings((prev) => ({ ...prev, step: 3 }))}
-      variant="contained"
-    >
+    <Button onClick={() => setWidgetSetupSettings((prev) => ({ ...prev, step: 3 }))} variant="contained">
       Далее
     </Button>
   );
@@ -187,34 +180,19 @@ export default function QuizInstallationCard() {
       ) : (
         <>
           {widgetSetupSettings.widgetType === "container" && (
-            <ContainerWidgetSetup
-              step={widgetSetupSettings.step}
-              nextButton={nextButton}
-            />
+            <ContainerWidgetSetup step={widgetSetupSettings.step} nextButton={nextButton} />
           )}
           {widgetSetupSettings.widgetType === "button" && (
-            <ButtonWidgetSetup
-              step={widgetSetupSettings.step}
-              nextButton={nextButton}
-            />
+            <ButtonWidgetSetup step={widgetSetupSettings.step} nextButton={nextButton} />
           )}
           {widgetSetupSettings.widgetType === "banner" && (
-            <BannerWidgetSetup
-              step={widgetSetupSettings.step}
-              nextButton={nextButton}
-            />
+            <BannerWidgetSetup step={widgetSetupSettings.step} nextButton={nextButton} />
           )}
           {widgetSetupSettings.widgetType === "popup" && (
-            <PopupWidgetSetup
-              step={widgetSetupSettings.step}
-              nextButton={nextButton}
-            />
+            <PopupWidgetSetup step={widgetSetupSettings.step} nextButton={nextButton} />
           )}
           {widgetSetupSettings.widgetType === "side" && (
-            <SideWidgetSetup
-              step={widgetSetupSettings.step}
-              nextButton={nextButton}
-            />
+            <SideWidgetSetup step={widgetSetupSettings.step} nextButton={nextButton} />
           )}
         </>
       )}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewDesktop.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewDesktop.tsx
new file mode 100644
index 00000000..2d38942a
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewDesktop.tsx
@@ -0,0 +1,157 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Typography } from "@mui/material";
+import RunningStripe from "@ui_kit/RunningStripe";
+
+interface Props {
+  position: "topleft" | "topright" | "bottomleft" | "bottomright";
+  bannerFullWidth: boolean;
+  pulsation: boolean;
+  rounded: boolean;
+  withShadow: boolean;
+  buttonFlash: boolean;
+  buttonBackgroundColor: string;
+  buttonTextColor: string;
+  appealText: string;
+  quizHeaderText: string;
+}
+
+export default function BannerWidgetPreviewDesktop({
+  bannerFullWidth,
+  buttonBackgroundColor,
+  buttonFlash,
+  buttonTextColor,
+  position,
+  pulsation,
+  rounded,
+  withShadow,
+  appealText,
+  quizHeaderText,
+}: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(196 / 520 * 100%)",
+          height: "calc(30 / 262 * 100%)",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+        },
+        position === "topleft" && {
+          top: "calc(12.5 / 262 * 100%)",
+          left: "calc(50.6 / 520 * 100%)",
+        },
+        position === "topright" && {
+          top: "calc(12.5 / 262 * 100%)",
+          left: "calc(190 / 520 * 100%)",
+        },
+        position === "bottomleft" && {
+          top: "calc(178 / 262 * 100%)",
+          left: "calc(50.6 / 520 * 100%)",
+        },
+        position === "bottomright" && {
+          top: "calc(178 / 262 * 100%)",
+          left: "calc(190 / 520 * 100%)",
+        },
+        bannerFullWidth &&
+          position.startsWith("top") && {
+            top: "calc(7 / 262 * 100%)",
+            left: "calc(45 / 520 * 100%)",
+            width: "calc(348 / 520 * 100%)",
+            height: "calc(30 / 262 * 100%)",
+          },
+        bannerFullWidth &&
+          position.startsWith("bottom") && {
+            top: "calc(185 / 262 * 100%)",
+            left: "calc(45 / 520 * 100%)",
+            width: "calc(348 / 520 * 100%)",
+            height: "calc(30 / 262 * 100%)",
+          },
+        pulsation && {
+          ":before": {
+            content: "''",
+            position: "absolute",
+            height: "100%",
+            width: "100%",
+            pointerEvents: "none",
+            willChange: "box-shadow",
+            borderRadius: "30px",
+            animation: "pena-pulsation linear 5s infinite",
+            "@keyframes pena-pulsation": {
+              "0%": {
+                boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
+              },
+              "30%": {
+                boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
+              },
+              "100%": {
+                boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+              },
+            },
+          },
+        },
+      ]}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: buttonBackgroundColor,
+          containerType: "size",
+          gap: "calc(5 / 196 * 100%)",
+          borderRadius: rounded && !bannerFullWidth ? "30px" : 0,
+          boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
+        }}
+      >
+        <TaskIcon
+          sx={{
+            width: "auto",
+            height: "calc(18.57 / 29.5 * 100%)",
+            ml: "calc(7.36 / 196 * 100%)",
+            aspectRatio: 1,
+            color: buttonTextColor,
+          }}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            color: buttonTextColor,
+          }}
+        >
+          <Typography
+            fontSize="calc(6 / 29.5 * 100cqh)"
+            lineHeight="120%"
+          >
+            {appealText || "Пройти тест"}
+          </Typography>
+          <Typography
+            fontSize="calc(11 / 29.5 * 100cqh)"
+            lineHeight="120%"
+          >
+            {quizHeaderText || "Заголовок теста"}
+          </Typography>
+        </Box>
+        {buttonFlash && <RunningStripe />}
+      </Box>
+      <CloseIcon
+        sx={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          color: "white",
+          height: "calc(10 / 29.5 * 100%)",
+          width: "auto",
+          aspectRatio: 1,
+          backgroundColor: rounded || bannerFullWidth ? "#581ca763" : undefined,
+          borderRadius: "50%",
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewMobile.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewMobile.tsx
new file mode 100644
index 00000000..47a26914
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewMobile.tsx
@@ -0,0 +1,128 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Typography } from "@mui/material";
+import RunningStripe from "@ui_kit/RunningStripe";
+
+interface Props {
+  position: "topleft" | "topright" | "bottomleft" | "bottomright";
+  pulsation: boolean;
+  withShadow: boolean;
+  buttonFlash: boolean;
+  buttonBackgroundColor: string;
+  buttonTextColor: string;
+  appealText: string;
+  quizHeaderText: string;
+}
+
+export default function BannerWidgetPreviewMobile({
+  buttonBackgroundColor,
+  buttonFlash,
+  buttonTextColor,
+  position,
+  pulsation,
+  withShadow,
+  appealText,
+  quizHeaderText,
+}: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(94 / 520 * 100%)",
+          height: "calc(21 / 262 * 100%)",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+        },
+        position.startsWith("top") && {
+          top: "calc(66 / 262 * 100%)",
+          left: "calc(422 / 520 * 100%)",
+        },
+        position.startsWith("bottom") && {
+          top: "calc(208 / 262 * 100%)",
+          left: "calc(422 / 520 * 100%)",
+        },
+        pulsation && {
+          ":before": {
+            content: "''",
+            position: "absolute",
+            height: "100%",
+            width: "100%",
+            pointerEvents: "none",
+            willChange: "box-shadow",
+            borderRadius: "30px",
+            animation: "pena-pulsation linear 5s infinite",
+            "@keyframes pena-pulsation": {
+              "0%": {
+                boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
+              },
+              "30%": {
+                boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
+              },
+              "100%": {
+                boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+              },
+            },
+          },
+        },
+      ]}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: buttonBackgroundColor,
+          containerType: "size",
+          gap: "calc(5 / 196 * 100%)",
+          boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
+        }}
+      >
+        <TaskIcon
+          sx={{
+            width: "auto",
+            height: "calc(18.57 / 29.5 * 100%)",
+            ml: "calc(7.36 / 196 * 100%)",
+            aspectRatio: 1,
+            color: buttonTextColor,
+          }}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            color: buttonTextColor,
+          }}
+        >
+          <Typography
+            fontSize="calc(6 / 29.5 * 100cqh)"
+            lineHeight="120%"
+          >
+            {appealText || "Пройти тест"}
+          </Typography>
+          <Typography
+            fontSize="calc(11 / 29.5 * 100cqh)"
+            lineHeight="120%"
+          >
+            {quizHeaderText || "Заголовок теста"}
+          </Typography>
+        </Box>
+        {buttonFlash && <RunningStripe />}
+      </Box>
+      <CloseIcon
+        sx={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          color: "white",
+          height: "calc(8 / 29.5 * 100%)",
+          width: "auto",
+          aspectRatio: 1,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
index ca5dcad7..4cd14a40 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
@@ -1,5 +1,4 @@
 import { BannerWidgetParams } from "@frontend/squzanswerer";
-import CloseIcon from "@mui/icons-material/Close";
 import {
   Box,
   Button,
@@ -19,13 +18,13 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import PenaTextField from "@ui_kit/PenaTextField";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
-import RunningStripe from "@ui_kit/RunningStripe";
 import { ReactNode, useState } from "react";
-import fixedButtonWidgetPreview from "../../../../../assets/banner-widget-preview.png";
+import fixedBannerWidgetPreview from "../../../../../assets/banner-widget-preview.png";
 import WidgetScript from "../../WidgetScript";
 import { createBannerWidgetScriptText } from "../../createWidgetScriptText";
 import { useWidgetUrl } from "../../useWidgetUrl";
-import BannerWidgetPreviewIcon from "./BannerWidgetPreviewIcon";
+import BannerWidgetPreviewDesktop from "./BannerWidgetPreviewDesktop";
+import BannerWidgetPreviewMobile from "./BannerWidgetPreviewMobile";
 
 interface Props {
   step: 2 | 3;
@@ -49,7 +48,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
   const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
   const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
   const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
-  const [position, setPosition] = useState<BannerWidgetParams["position"]>("bottomleft");
+  const [position, setPosition] = useState<BannerWidgetParams["position"]>("topleft");
   const [bannerFullWidth, setBannerFullWidth] = useState<boolean>(false);
   const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
   const [appealText, setAppealText] = useState<string>("");
@@ -114,129 +113,35 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
           }}
         >
           <img
-            src={fixedButtonWidgetPreview}
+            src={fixedBannerWidgetPreview}
             style={{
               display: "block",
               width: "100%",
               height: "100%",
             }}
           />
-          <Box
-            sx={[
-              {
-                position: "absolute",
-                width: "calc(196 / 520 * 100%)",
-                height: "calc(30 / 262 * 100%)",
-              },
-              position === "topleft" && {
-                top: "calc(12.5 / 262 * 100%)",
-                left: "calc(50.6 / 520 * 100%)",
-              },
-              position === "topright" && {
-                top: "calc(12.5 / 262 * 100%)",
-                left: "calc(190 / 520 * 100%)",
-              },
-              position === "bottomleft" && {
-                top: "calc(178 / 262 * 100%)",
-                left: "calc(50.6 / 520 * 100%)",
-              },
-              position === "bottomright" && {
-                top: "calc(178 / 262 * 100%)",
-                left: "calc(190 / 520 * 100%)",
-              },
-              bannerFullWidth &&
-                position.startsWith("top") && {
-                  top: "calc(7 / 262 * 100%)",
-                  left: "calc(45 / 520 * 100%)",
-                  width: "calc(348 / 520 * 100%)",
-                  height: "calc(30 / 262 * 100%)",
-                },
-              bannerFullWidth &&
-                position.startsWith("bottom") && {
-                  top: "calc(185 / 262 * 100%)",
-                  left: "calc(45 / 520 * 100%)",
-                  width: "calc(348 / 520 * 100%)",
-                  height: "calc(30 / 262 * 100%)",
-                },
-              pulsation && {
-                ":before": {
-                  content: "''",
-                  position: "absolute",
-                  height: "100%",
-                  width: "100%",
-                  pointerEvents: "none",
-                  willChange: "box-shadow",
-                  borderRadius: "30px",
-                  animation: "pena-pulsation linear 5s infinite",
-                  "@keyframes pena-pulsation": {
-                    "0%": {
-                      boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
-                    },
-                    "30%": {
-                      boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
-                    },
-                    "100%": {
-                      boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
-                    },
-                  },
-                },
-              },
-            ]}
-          >
-            <Box
-              sx={{
-                width: "100%",
-                height: "100%",
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                backgroundColor: theme.palette.brightPurple.main,
-                containerType: "size",
-                gap: "calc(5 / 196 * 100%)",
-                borderRadius: rounded && !bannerFullWidth ? "30px" : 0,
-                boxShadow: withShadow
-                  ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)"
-                  : "none",
-              }}
-            >
-              <BannerWidgetPreviewIcon
-                sx={{
-                  height: "calc(18.57 / 29.5 * 100%)",
-                  width: "auto",
-                  aspectRatio: 1,
-                  ml: "calc(7.36 / 196 * 100%)",
-                }}
-              />
-              <Box
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  color: "white",
-                }}
-              >
-                <Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
-                  {appealText || "Пройти тест"}
-                </Typography>
-                <Typography fontSize="calc(11 / 29.5 * 100cqh)" lineHeight="120%">
-                  {quizHeaderText || "Заголовок теста"}
-                </Typography>
-              </Box>
-              {buttonFlash && <RunningStripe />}
-            </Box>
-            <CloseIcon
-              sx={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                color: "white",
-                height: "calc(10 / 29.5 * 100%)",
-                width: "auto",
-                aspectRatio: 1,
-                backgroundColor: rounded || bannerFullWidth ? "#581CA7" : undefined,
-                borderRadius: "50%",
-              }}
-            />
-          </Box>
+          <BannerWidgetPreviewDesktop
+            appealText={appealText}
+            quizHeaderText={quizHeaderText}
+            position={position}
+            pulsation={pulsation}
+            withShadow={withShadow}
+            buttonFlash={buttonFlash}
+            bannerFullWidth={bannerFullWidth}
+            buttonBackgroundColor={buttonBackgroundColor}
+            buttonTextColor={buttonTextColor}
+            rounded={rounded}
+          />
+          <BannerWidgetPreviewMobile
+            appealText={appealText}
+            quizHeaderText={quizHeaderText}
+            position={position}
+            pulsation={pulsation}
+            withShadow={withShadow}
+            buttonFlash={buttonFlash}
+            buttonBackgroundColor={buttonBackgroundColor}
+            buttonTextColor={buttonTextColor}
+          />
         </Box>
       </Box>
       <Box
@@ -332,9 +237,9 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
             alignItems: "center",
           }}
         >
-          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет баннера</Typography>
           <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
-          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
+          <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста баннера</Typography>
           <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
         </Box>
         <CustomCheckbox
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewDesktop.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewDesktop.tsx
new file mode 100644
index 00000000..4a64e9dd
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewDesktop.tsx
@@ -0,0 +1,73 @@
+import RunningStripe from "@/ui_kit/RunningStripe";
+import TaskIcon from "@/ui_kit/TaskIcon";
+import { Box, Typography } from "@mui/material";
+
+interface Props {
+  buttonBackgroundColor: string;
+  rounded: boolean;
+  withShadow: boolean;
+  fixedSide: "left" | "right";
+  buttonTextColor: string;
+  buttonText: string;
+  buttonFlash: boolean;
+}
+
+export default function ButtonWidgetPreviewDesktop({
+  buttonBackgroundColor,
+  buttonFlash,
+  buttonText,
+  buttonTextColor,
+  fixedSide,
+  rounded,
+  withShadow,
+}: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          height: "calc(20 / 262 * 100%)",
+          px: "calc(1%)",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: buttonBackgroundColor,
+          borderRadius: rounded ? "30px" : 0,
+          transform: "rotate(-90deg)",
+          transformOrigin: "left",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          boxShadow: withShadow ? "2px 5px 20px 2px rgba(25, 6, 50, 0.4), 0 2px 10px 0 rgba(35, 17, 58, 0.1)" : "none",
+        },
+        fixedSide === "left" && {
+          top: "calc(57%)",
+          left: "calc(55 / 520 * 100%)",
+        },
+        fixedSide === "right" && {
+          top: "calc(57%)",
+          left: "calc(383 / 520 * 100%)",
+        },
+      ]}
+    >
+      <TaskIcon
+        sx={{
+          width: "auto",
+          height: "calc(18.57 / 29.5 * 100%)",
+          aspectRatio: 1,
+          color: buttonTextColor,
+        }}
+      />
+      <Typography
+        fontSize="calc(3cqh)"
+        lineHeight="120%"
+        ml="3px"
+        color={buttonTextColor}
+      >
+        {buttonText || "Пройти тест"}
+      </Typography>
+      {buttonFlash && <RunningStripe />}
+    </Box>
+  );
+}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewMobile.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewMobile.tsx
new file mode 100644
index 00000000..e70eb7a6
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetPreviewMobile.tsx
@@ -0,0 +1,47 @@
+import TaskIcon from "@/ui_kit/TaskIcon";
+import { Box } from "@mui/material";
+
+interface Props {
+  fixedSide: "left" | "right";
+  buttonBackgroundColor: string;
+  buttonTextColor: string;
+}
+
+export default function ButtonWidgetPreviewMobile({ buttonBackgroundColor, fixedSide, buttonTextColor }: Props) {
+  return (
+    <Box
+      sx={[
+        {
+          position: "absolute",
+          width: "calc(22 / 520 * 100%)",
+          height: "calc(22 / 262 * 100%)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: buttonBackgroundColor,
+          borderRadius: "50%",
+          transitionProperty: "width, height, top, left",
+          transitionDuration: "0.5s",
+          transitionTimingFunction: "ease",
+        },
+        fixedSide === "left" && {
+          top: "calc(88%)",
+          left: "calc(82%)",
+        },
+        fixedSide === "right" && {
+          top: "calc(88%)",
+          left: "calc(94%)",
+        },
+      ]}
+    >
+      <TaskIcon
+        sx={{
+          width: "auto",
+          height: "calc(80%)",
+          aspectRatio: 1,
+          color: buttonTextColor,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetSetup.tsx
similarity index 80%
rename from src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
rename to src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetSetup.tsx
index dbf76127..86103443 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetSetup.tsx
@@ -21,11 +21,13 @@ import RadioIcon from "@ui_kit/RadioIcon";
 import RunningStripe from "@ui_kit/RunningStripe";
 import { nanoid } from "nanoid";
 import { ReactNode, useState } from "react";
-import Dots from "../../../../assets/dots.png";
-import fixedButtonWidgetPreview from "../../../../assets/fixed-button-widget-preview.png";
-import WidgetScript from "../WidgetScript";
-import { createButtonWidgetScriptText } from "../createWidgetScriptText";
-import { useWidgetUrl } from "../useWidgetUrl";
+import Dots from "../../../../../assets/dots.png";
+import fixedButtonWidgetPreview from "../../../../../assets/fixed-button-widget-preview.png";
+import WidgetScript from "../../WidgetScript";
+import { createButtonWidgetScriptText } from "../../createWidgetScriptText";
+import { useWidgetUrl } from "../../useWidgetUrl";
+import ButtonWidgetPreviewDesktop from "./ButtonWidgetPreviewDesktop";
+import ButtonWidgetPreviewMobile from "./ButtonWidgetPreviewMobile";
 
 interface Props {
   step: 2 | 3;
@@ -180,14 +182,47 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
               pt: "40px",
             }}
           >
-            <img
-              src={fixedButtonWidgetPreview}
-              style={{
-                display: "block",
-                width: "100%",
-                height: "100%",
+            <Box
+              sx={{
+                position: "relative",
               }}
-            />
+            >
+              <img
+                src={fixedButtonWidgetPreview}
+                style={{
+                  display: "block",
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  containerType: "size",
+                }}
+              >
+                <ButtonWidgetPreviewDesktop
+                  fixedSide={fixedSide}
+                  buttonBackgroundColor={buttonBackgroundColor}
+                  buttonTextColor={buttonTextColor}
+                  buttonFlash={buttonFlash}
+                  buttonText={buttonText}
+                  rounded={rounded}
+                  withShadow={withShadow}
+                />
+                {!hideOnMobile && (
+                  <ButtonWidgetPreviewMobile
+                    fixedSide={fixedSide}
+                    buttonBackgroundColor={buttonBackgroundColor}
+                    buttonTextColor={buttonTextColor}
+                  />
+                )}
+              </Box>
+            </Box>
           </Box>
         )}
       </Box>
@@ -199,7 +234,10 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
           flex: "1 1 0",
         }}
       >
-        <Typography fontWeight={500} color="#4D4D4D">
+        <Typography
+          fontWeight={500}
+          color="#4D4D4D"
+        >
           1. Задайте размеры окна квиза (опционально)
         </Typography>
         <CustomCheckbox
@@ -239,7 +277,10 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
             alignItems: "start",
           }}
         >
-          <Typography fontWeight={500} color="#4D4D4D">
+          <Typography
+            fontWeight={500}
+            color="#4D4D4D"
+          >
             2. Конструктор кнопки
           </Typography>
           <Box
@@ -250,17 +291,31 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
             }}
           >
             <Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
-            <CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
+            <CircleColorPicker
+              color={buttonBackgroundColor}
+              onChange={(color) => setButtonBackgroundColor(color)}
+            />
             <Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
-            <CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
+            <CircleColorPicker
+              color={buttonTextColor}
+              onChange={(color) => setButtonTextColor(color)}
+            />
           </Box>
           <CustomCheckbox
             label="Отключить на мобильных устройствах"
             checked={hideOnMobile}
             handleChange={(e) => setHideOnMobile(e.target.checked)}
           />
-          <CustomCheckbox label="Закругленная" checked={rounded} handleChange={(e) => setRounded(e.target.checked)} />
-          <CustomCheckbox label="С тенью" checked={withShadow} handleChange={(e) => setWithShadow(e.target.checked)} />
+          <CustomCheckbox
+            label="Закругленная"
+            checked={rounded}
+            handleChange={(e) => setRounded(e.target.checked)}
+          />
+          <CustomCheckbox
+            label="С тенью"
+            checked={withShadow}
+            handleChange={(e) => setWithShadow(e.target.checked)}
+          />
           <CustomCheckbox
             label="С бликом"
             checked={buttonFlash}
@@ -271,7 +326,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
             checked={fixedSide !== null}
             handleChange={(e) => setFixedSide(e.target.checked ? "left" : null)}
           />
-          {fixedSide && (
+          <Collapse in={fixedSide !== null}>
             <FormControl>
               <RadioGroup
                 sx={{
@@ -286,7 +341,12 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
               >
                 <FormControlLabel
                   value="left"
-                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                  control={
+                    <Radio
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  }
                   label="Слева"
                   sx={{
                     color: theme.palette.grey2.main,
@@ -294,7 +354,12 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                 />
                 <FormControlLabel
                   value="right"
-                  control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                  control={
+                    <Radio
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  }
                   label="Справа"
                   sx={{
                     color: theme.palette.grey2.main,
@@ -302,7 +367,7 @@ export default function ButtonWidgetSetup({ step, nextButton }: Props) {
                 />
               </RadioGroup>
             </FormControl>
-          )}
+          </Collapse>
           <Typography sx={{ color: theme.palette.grey2.main }}>Текст кнопки</Typography>
           <PenaTextField
             value={buttonText}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts b/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
index 923f8683..d251d074 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
+++ b/src/pages/InstallQuiz/QuizInstallationCard/createWidgetScriptText.ts
@@ -5,7 +5,6 @@ import {
   ContainerWidgetParams,
   PopupWidgetParams,
   SideWidgetParams,
-  WidgetType,
 } from "@frontend/squzanswerer";
 
 export function createContainerWidgetScriptText(params: ContainerWidgetParams, widgetUrl: string) {
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewIcon.tsx b/src/ui_kit/TaskIcon.tsx
similarity index 86%
rename from src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewIcon.tsx
rename to src/ui_kit/TaskIcon.tsx
index 0dfa7de6..d95a0ed5 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetPreviewIcon.tsx
+++ b/src/ui_kit/TaskIcon.tsx
@@ -4,7 +4,7 @@ interface Props {
   sx?: SxProps<Theme>;
 }
 
-export default function BannerWidgetPreviewIcon({ sx = [] }: Props) {
+export default function TaskIcon({ sx = [] }: Props) {
   return (
     <Box
       sx={[
@@ -13,6 +13,7 @@ export default function BannerWidgetPreviewIcon({ sx = [] }: Props) {
           alignItems: "center",
           justifyContent: "center",
           flexShrink: 0,
+          color: "white",
           "& svg": {
             width: "100%",
             height: "100%",
@@ -21,31 +22,35 @@ export default function BannerWidgetPreviewIcon({ sx = [] }: Props) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <svg viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        viewBox="0 0 20 19"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M13.2979 2.94922H15.4949C15.6488 2.94922 15.7964 3.01036 15.9052 3.11919C16.0141 3.22802 16.0752 3.37563 16.0752 3.52954V6.77848M7.21163 2.94922H5.04907C4.89516 2.94922 4.74755 3.01036 4.63872 3.11919C4.52989 3.22802 4.46875 3.37563 4.46875 3.52954V15.7163C4.46875 15.8702 4.52989 16.0178 4.63872 16.1267C4.74755 16.2355 4.89516 16.2966 5.04907 16.2966H8.53802M7.95068 16.2966H15.4949C15.6488 16.2966 15.7964 16.2355 15.9052 16.1267C16.0141 16.0178 16.0752 15.8702 16.0752 15.7163V11.9923"
-          stroke="white"
+          stroke="currentColor"
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.40182 13.7891H7.65735C7.58039 13.7891 7.50659 13.762 7.45217 13.7139C7.39776 13.6659 7.36719 13.6006 7.36719 13.5326V8.14708C7.36719 8.07906 7.39776 8.01383 7.45217 7.96574C7.50659 7.91764 7.58039 7.89062 7.65735 7.89062H9.10815H12.8802C12.9572 7.89062 13.031 7.91764 13.0854 7.96574C13.1398 8.01383 13.1704 8.07906 13.1704 8.14708V9.58283"
-          stroke="white"
+          stroke="currentColor"
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M7.36719 1.8125H13.1704V3.39705C13.1704 3.71756 12.9106 3.97737 12.5901 3.97737H7.94751C7.62701 3.97737 7.36719 3.71756 7.36719 3.39705V1.8125Z"
-          stroke="white"
+          stroke="currentColor"
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M17.0844 8.36719L11.8615 13.5901L9.25 10.9786"
-          stroke="white"
+          stroke="currentColor"
           strokeWidth="0.5"
           strokeLinecap="round"
           strokeLinejoin="round"