diff --git a/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx
index 53ac5d7e..900f9833 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/InstallationStepButton.tsx
@@ -1,31 +1,42 @@
-import { ButtonBase, Typography, useTheme } from "@mui/material";
+import NumberIcon from "@icons/NumberIcon";
+import { Button, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 
 interface Props {
-  active?: boolean;
+  state: "active" | "done" | "inactive";
   onClick?: () => void;
-  leftIcon?: ReactNode;
+  index: number;
   children?: ReactNode;
 }
 
 export default function InstallationStepButton({
-  active,
-  leftIcon,
+  state = "done",
+  index,
   onClick,
   children,
 }: Props) {
   const theme = useTheme();
 
+  const buttonColorByState: Record<string, string> = {
+    active: "#FC712F",
+    done: theme.palette.brightPurple.main,
+    inactive: theme.palette.grey2.main,
+  };
+
+  const color = buttonColorByState[state];
+
   return (
-    <ButtonBase onClick={onClick}>
-      {leftIcon}
-      <Typography
-        sx={{
-          color: active ? "#FC712F" : theme.palette.grey2.main,
-        }}
-      >
-        {children}
-      </Typography>
-    </ButtonBase>
+    <Button
+      onClick={onClick}
+      startIcon={<NumberIcon number={index} color={color} />}
+      sx={{
+        color: buttonColorByState[state],
+        "& .MuiButton-startIcon": {
+          mr: "5px",
+        },
+      }}
+    >
+      {children}
+    </Button>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
index 63796407..ea1648e9 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  ButtonBase,
   IconButton,
   InputAdornment,
   TextField as MuiTextField,
@@ -13,9 +12,13 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useDomainDefine } from "@utils/hooks/useDomainDefine";
 import { FC, useState } from "react";
 import CopyIcon from "../../../assets/icons/CopyIcon";
-import OneIconBorder from "../../../assets/icons/OneIconBorder";
 import InstallationStepButton from "./InstallationStepButton";
+import WidgetTypeButton from "./WidgetTypeButton";
+import BannerWidgetPreview from "./previewIcons/BannerWidgetPreview";
+import ButtonWidgetPreview from "./previewIcons/ButtonWidgetPreview";
 import ContainerWidgetPreview from "./previewIcons/ContainerWidgetPreview";
+import PopupWidgetPreview from "./previewIcons/PopupWidgetPreview";
+import SideWidgetPreview from "./previewIcons/SideWidgetPreview";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
@@ -23,16 +26,17 @@ export default function QuizInstallationCard() {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
   const { isTestServer } = useDomainDefine();
-  const [stepState, setStepState] = useState("step1");
+  const [stepState, setStepState] = useState<1 | 2 | 3>(1);
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
 
   if (!quiz) return null;
 
+  const scriptText = `<div id="idpena"></div> <script type="module"> import widget from "https://${isTestServer ? "s." : ""}hbpn.link/export/pub.js"; widget.create({ selector: "idpena", quizId: "${quiz.qid}" }) </script>`;
+
   return (
     <Box
       sx={{
         backgroundColor: "#ffffff",
-        padding: "20px",
         borderRadius: "12px",
         maxWidth: "1160px",
         boxShadow:
@@ -41,81 +45,100 @@ export default function QuizInstallationCard() {
     >
       <Box
         sx={{
+          py: "10px",
+          px: "20px",
           display: "flex",
           alignItems: isSmallMonitor ? "flex-start" : "center",
-          gap: "30px",
+          gap: "11px",
           flexDirection: isSmallMonitor ? "column" : "row",
         }}
       >
-        <Typography variant="h5" sx={{ paddingRight: "30px" }}>
+        <Typography variant="h5" mr="9px">
           Установка quiz на сайте
         </Typography>
         <InstallationStepButton
-          active={stepState === "step1"}
-          leftIcon={
-            <OneIconBorder
-              color={
-                stepState === "step1" ? "#FC712F" : theme.palette.grey2.main
-              }
-            />
-          }
+          state={stepState === 1 ? "active" : "done"}
+          index={1}
           onClick={() => {
-            setStepState("step1");
+            setStepState(1);
           }}
         >
           Способ установки
         </InstallationStepButton>
         <InstallationStepButton
-          active={stepState === "step2"}
-          leftIcon={
-            <OneIconBorder
-              color={
-                stepState === "step2" ? "#FC712F" : theme.palette.grey2.main
-              }
-            />
+          state={
+            stepState === 1 ? "inactive" : stepState === 2 ? "active" : "done"
           }
+          index={2}
           onClick={() => {
-            setStepState("step2");
+            setStepState(2);
+          }}
+        >
+          Настройка кнопки
+        </InstallationStepButton>
+        <InstallationStepButton
+          state={stepState === 3 ? "active" : "inactive"}
+          index={3}
+          onClick={() => {
+            setStepState(3);
           }}
         >
           Вставить код на сайт
         </InstallationStepButton>
       </Box>
-
       <Box
         sx={{
-          padding: "20px",
+          px: "12px",
+          pt: "4px",
+          pb: "20px",
           display: "flex",
-          flexDirection: "column",
-          gap: "30px",
+          flexWrap: "wrap",
+          gap: "14px",
         }}
       >
-        {stepState === "step1" ? (
-          <ButtonBase
-            onClick={() => {
-              setStepState("step2");
-            }}
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "start",
-              alignItems: "start",
-              maxWidth: "205px",
-              gap: "15px",
-            }}
-          >
-            <ContainerWidgetPreview />
-            <Typography>В тело сайта</Typography>
-            <Typography
-              sx={{
-                fontSize: "16px",
-                color: theme.palette.grey2.main,
-                textAlign: "start",
+        {stepState === 1 ? (
+          <>
+            <WidgetTypeButton
+              image={<ButtonWidgetPreview />}
+              text1="По кнопке"
+              text2="Конструктор кнопки или собственная кнопка"
+              onClick={() => {
+                setStepState(2);
               }}
-            >
-              Задайте свои размеры и встройте в сайт
-            </Typography>
-          </ButtonBase>
+            />
+            <WidgetTypeButton
+              image={<BannerWidgetPreview />}
+              text1="Баннером"
+              text2="Сбоку или на всю ширину экрана"
+              onClick={() => {
+                setStepState(2);
+              }}
+            />
+            <WidgetTypeButton
+              image={<ContainerWidgetPreview />}
+              text1="В тело сайта"
+              text2="Задайте свои размеры и встройте в сайт"
+              onClick={() => {
+                setStepState(2);
+              }}
+            />
+            <WidgetTypeButton
+              image={<PopupWidgetPreview />}
+              text1="Автооткрытие"
+              text2="Автооткрытие поп-ап на сайте"
+              onClick={() => {
+                setStepState(2);
+              }}
+            />
+            <WidgetTypeButton
+              image={<SideWidgetPreview />}
+              text1="Виджет"
+              text2="Сбоку страницы, как консультант"
+              onClick={() => {
+                setStepState(2);
+              }}
+            />
+          </>
         ) : (
           <>
             <Box
@@ -139,10 +162,9 @@ export default function QuizInstallationCard() {
                   Установите код в то место, где должен быть quiz
                 </Typography>
                 <TextField
-                  id="outlined-multiline-static"
                   multiline
                   rows={9}
-                  value={`<div id="idpena"></div> <script type="module"> import widget from "https://${isTestServer ? "s." : ""}hbpn.link/export/pub.js"; widget.create({ selector: "idpena", quizId: "${quiz.qid}" }) </script>`}
+                  value={scriptText}
                   sx={{
                     "& .MuiInputBase-root": {
                       maxWidth: "520px",
@@ -158,11 +180,9 @@ export default function QuizInstallationCard() {
                         <IconButton
                           edge="end"
                           sx={{ marginTop: "22px" }}
-                          onClick={() => navigator.clipboard.writeText( // TODO
-                              document.getElementById(
-                                  "outlined-multiline-static"
-                              ).value
-                          )}
+                          onClick={() =>
+                            navigator.clipboard.writeText(scriptText)
+                          }
                         >
                           <CopyIcon
                             color={"#ffffff"}
@@ -179,7 +199,7 @@ export default function QuizInstallationCard() {
               sx={{
                 background: "#EEE4FC",
                 border: "1px solid #7E2AEA",
-                padding: "20px 50px 20px 20px",
+                p: "20px 50px 20px 20px",
                 borderRadius: "8px",
                 display: "flex",
                 flexDirection: "column",
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/WidgetTypeButton.tsx b/src/pages/InstallQuiz/QuizInstallationCard/WidgetTypeButton.tsx
new file mode 100644
index 00000000..c0dffefc
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/WidgetTypeButton.tsx
@@ -0,0 +1,42 @@
+import { Button, ButtonBase, Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+interface Props {
+  onClick?: () => void;
+  image: ReactNode;
+  text1: string;
+  text2: string;
+}
+
+export default function WidgetTypeButton({
+  onClick,
+  image,
+  text1,
+  text2,
+}: Props) {
+  return (
+    <Button
+      onClick={onClick}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "start",
+        width: "min-content",
+        borderRadius: "8px",
+      }}
+    >
+      {image}
+      <Typography mt="20px">{text1}</Typography>
+      <Typography
+        sx={{
+          mt: "15px",
+          fontSize: "16px",
+          color: (theme) => theme.palette.grey2.main,
+          textAlign: "start",
+        }}
+      >
+        {text2}
+      </Typography>
+    </Button>
+  );
+}
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx
index d3825aca..b1e2c678 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/BannerWidgetPreview.tsx
@@ -1,49 +1,34 @@
-import { Box } from "@mui/material";
+import WidgetPreviewContainer from "./WidgetPreviewContainer";
 
 export default function BannerWidgetPreview() {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
-      <svg
-        width="204"
-        height="134"
-        viewBox="0 0 204 134"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="1.25"
-          y="1.25"
-          width="201.5"
-          height="131.5"
-          rx="6.75"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <rect
-          x="7.5"
-          y="21.0078"
-          width="95.0002"
-          height="19"
-          fill="#7E2AEA"
-          stroke="#7E2AEA"
-        />
-        <path
-          d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
-          fill="#F2F3F7"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
-      </svg>
-    </Box>
+    <WidgetPreviewContainer>
+      <rect
+        x="1.25"
+        y="1.25"
+        width="201.5"
+        height="131.5"
+        rx="6.75"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="7.5"
+        y="21.0078"
+        width="95.0002"
+        height="19"
+        fill="#7E2AEA"
+        stroke="#7E2AEA"
+      />
+      <path
+        d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
+        fill="#F2F3F7"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
+    </WidgetPreviewContainer>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx
index efa49eb9..07ce6678 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ButtonWidgetPreview.tsx
@@ -1,50 +1,35 @@
-import { Box } from "@mui/material";
+import WidgetPreviewContainer from "./WidgetPreviewContainer";
 
 export default function ButtonWidgetPreview() {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
-      <svg
-        width="204"
-        height="134"
-        viewBox="0 0 204 134"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="1.25"
-          y="1.25"
-          width="201.5"
-          height="131.5"
-          rx="6.75"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <rect
-          x="16.5"
-          y="98.5"
-          width="64"
-          height="19"
-          rx="9.5"
-          fill="#7E2AEA"
-          stroke="#7E2AEA"
-        />
-        <path
-          d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
-          fill="#F2F3F7"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
-      </svg>
-    </Box>
+    <WidgetPreviewContainer>
+      <rect
+        x="1.25"
+        y="1.25"
+        width="201.5"
+        height="131.5"
+        rx="6.75"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="16.5"
+        y="98.5"
+        width="64"
+        height="19"
+        rx="9.5"
+        fill="#7E2AEA"
+        stroke="#7E2AEA"
+      />
+      <path
+        d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
+        fill="#F2F3F7"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
+    </WidgetPreviewContainer>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx
index 1c8653d8..1709638b 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/ContainerWidgetPreview.tsx
@@ -1,50 +1,35 @@
-import { Box } from "@mui/material";
+import WidgetPreviewContainer from "./WidgetPreviewContainer";
 
 export default function ContainerWidgetPreview() {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
-      <svg
-        width="204"
-        height="134"
-        viewBox="0 0 204 134"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="1.25"
-          y="1.25"
-          width="201.5"
-          height="131.5"
-          rx="6.75"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <rect
-          x="22.5"
-          y="50.5"
-          width="159"
-          height="76"
-          rx="3.5"
-          fill="#7E2AEA"
-          stroke="#7E2AEA"
-        />
-        <path
-          d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
-          fill="#F2F3F7"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
-      </svg>
-    </Box>
+    <WidgetPreviewContainer>
+      <rect
+        x="1.25"
+        y="1.25"
+        width="201.5"
+        height="131.5"
+        rx="6.75"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="22.5"
+        y="50.5"
+        width="159"
+        height="76"
+        rx="3.5"
+        fill="#7E2AEA"
+        stroke="#7E2AEA"
+      />
+      <path
+        d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
+        fill="#F2F3F7"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
+    </WidgetPreviewContainer>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx
index 9469e502..a5b37797 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/PopupWidgetPreview.tsx
@@ -1,54 +1,39 @@
-import { Box } from "@mui/material";
+import WidgetPreviewContainer from "./WidgetPreviewContainer";
 
 export default function PopupWidgetPreview() {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
-      <svg
-        width="204"
-        height="134"
-        viewBox="0 0 204 134"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="1.25"
-          y="1.25"
-          width="201.5"
-          height="131.5"
-          rx="6.75"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M2 14H202V126C202 129.314 199.314 132 196 132H7.99999C4.68629 132 2 129.314 2 126V14Z"
-          fill="#EEE4FC"
-        />
-        <rect
-          x="18.5"
-          y="32.0078"
-          width="167"
-          height="83"
-          rx="5.5"
-          fill="#7E2AEA"
-          stroke="#7E2AEA"
-        />
-        <path
-          d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
-          fill="#F2F3F7"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
-      </svg>
-    </Box>
+    <WidgetPreviewContainer>
+      <rect
+        x="1.25"
+        y="1.25"
+        width="201.5"
+        height="131.5"
+        rx="6.75"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2 14H202V126C202 129.314 199.314 132 196 132H7.99999C4.68629 132 2 129.314 2 126V14Z"
+        fill="#EEE4FC"
+      />
+      <rect
+        x="18.5"
+        y="32.0078"
+        width="167"
+        height="83"
+        rx="5.5"
+        fill="#7E2AEA"
+        stroke="#7E2AEA"
+      />
+      <path
+        d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
+        fill="#F2F3F7"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
+    </WidgetPreviewContainer>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx
index bf9abb95..06aefe35 100644
--- a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/SideWidgetPreview.tsx
@@ -1,50 +1,35 @@
-import { Box } from "@mui/material";
+import WidgetPreviewContainer from "./WidgetPreviewContainer";
 
 export default function SideWidgetPreview() {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
-      <svg
-        width="204"
-        height="134"
-        viewBox="0 0 204 134"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          x="1.25"
-          y="1.25"
-          width="201.5"
-          height="131.5"
-          rx="6.75"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <rect
-          x="147.5"
-          y="62.5"
-          width="49"
-          height="64"
-          rx="3.5"
-          fill="#7E2AEA"
-          stroke="#7E2AEA"
-        />
-        <path
-          d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
-          fill="#F2F3F7"
-          stroke="#9A9AAF"
-          strokeWidth="1.5"
-        />
-        <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
-        <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
-      </svg>
-    </Box>
+    <WidgetPreviewContainer>
+      <rect
+        x="1.25"
+        y="1.25"
+        width="201.5"
+        height="131.5"
+        rx="6.75"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="147.5"
+        y="62.5"
+        width="49"
+        height="64"
+        rx="3.5"
+        fill="#7E2AEA"
+        stroke="#7E2AEA"
+      />
+      <path
+        d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
+        fill="#F2F3F7"
+        stroke="#9A9AAF"
+        strokeWidth="1.5"
+      />
+      <circle cx="169.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="177.5" cy="8" r="2.5" fill="#9A9AAF" />
+      <circle cx="185.5" cy="8" r="2.5" fill="#9A9AAF" />
+    </WidgetPreviewContainer>
   );
 }
diff --git a/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/WidgetPreviewContainer.tsx b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/WidgetPreviewContainer.tsx
new file mode 100644
index 00000000..31ca9fa4
--- /dev/null
+++ b/src/pages/InstallQuiz/QuizInstallationCard/previewIcons/WidgetPreviewContainer.tsx
@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+import { ReactNode } from "react";
+
+interface Props {
+  children?: ReactNode;
+}
+
+export default function WidgetPreviewContainer({ children }: Props) {
+  return (
+    <Box
+      sx={{
+        width: "200px",
+        aspectRatio: "204 / 134",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+      }}
+    >
+      <svg viewBox="0 0 204 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {children}
+      </svg>
+    </Box>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 9785f209..51c9ffbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1121,6 +1121,14 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime-corejs3@^7.24.4":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.5.tgz#d2a5f46a088caf8f3899ad095054f83b0a686194"
+  integrity sha512-GWO0mgzNMLWaSYM4z4NVIuY0Cd1fl8cPnuetuddu5w/qGuvt5Y7oUi/kvvQGK9xgOkFJDQX2heIvTRn/OQ1XTg==
+  dependencies:
+    core-js-pure "^3.30.2"
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
@@ -1519,16 +1527,19 @@
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"
 
-"@frontend/squzanswerer@^1.0.37":
-  version "1.0.37"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.37.tgz#76d6b90488b3d42e83bd37c9c8e0dc6ccd47e76f"
-  integrity sha1-dta5BIiz1C6DvTfJyODcbM1H528=
+"@frontend/squzanswerer@^1.0.38":
+  version "1.0.38"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/@frontend/squzanswerer/-/@frontend/squzanswerer-1.0.38.tgz#51f382368d73f9ad36c4f7f3357dedb32d5453e8"
+  integrity sha1-UfOCNo1z+a02xPfzNX3tsy1UU+g=
   dependencies:
     bowser "1.9.4"
     country-flag-emoji-polyfill "^0.1.8"
     current-device "^0.10.2"
     hex-rgb "^5.0.0"
     mobile-detect "^1.4.5"
+    mui-tel-input "^5.1.2"
+    react-imask "^7.6.0"
+    react-phone-number-input "^3.4.1"
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -2589,6 +2600,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.96.tgz#eb0012d23ff53d14d64ec8a352bf89792de6aade"
   integrity sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==
 
+"@types/node@^20.11.17":
+  version "20.12.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.11.tgz#c4ef00d3507000d17690643278a60dc55a9dc9be"
+  integrity sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -3908,7 +3926,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -4176,7 +4194,7 @@ core-js-compat@^3.31.0, core-js-compat@^3.36.1:
   dependencies:
     browserslist "^4.23.0"
 
-core-js-pure@^3.23.3:
+core-js-pure@^3.23.3, core-js-pure@^3.30.2:
   version "3.37.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.37.0.tgz#ce99fb4a7cec023fdbbe5b5bd1f06bbcba83316e"
   integrity sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==
@@ -4231,6 +4249,11 @@ country-flag-emoji-polyfill@^0.1.8:
   resolved "https://registry.yarnpkg.com/country-flag-emoji-polyfill/-/country-flag-emoji-polyfill-0.1.8.tgz#d2cfb23dd2f949b80d83eb9822b613bf62957173"
   integrity sha512-Mbah52sADS3gshUYhK5142gtUuJpHYOXlXtLFI3Ly4RqgkmPMvhX9kMZSTqDM8P7UqtSW99eHKFphhQSGXA3Cg==
 
+country-flag-icons@^1.5.11:
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.11.tgz#04c0556728e517a6207946656355698ac6237080"
+  integrity sha512-B+mvFywunkRJs270k7kCBjhogvIA0uNn6GAXv6m2cPn3rrwqZzZVr2gBWcz+Cz7OGVWlcbERlYRIX0S6OGr8Bw==
+
 craco-alias@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/craco-alias/-/craco-alias-3.0.1.tgz#45e5cb338b222a7f62d17e398b54aff7cf1572af"
@@ -6509,6 +6532,13 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+imask@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/imask/-/imask-7.6.0.tgz#ed071748cfdf6b12ac153f69878e08c4333df984"
+  integrity sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.24.4"
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
@@ -6578,6 +6608,13 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+input-format@^0.3.10:
+  version "0.3.10"
+  resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.10.tgz#e8a8855e2e89e3b1cd995333f6277c14865f0e35"
+  integrity sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==
+  dependencies:
+    prop-types "^15.8.1"
+
 internal-slot@^1.0.4, internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
@@ -7777,6 +7814,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libphonenumber-js@^1.10.55, libphonenumber-js@^1.10.61:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.11.1.tgz#2596683e1876bfee74082bb49339fe0a85ae34f9"
+  integrity sha512-Wze1LPwcnzvcKGcRHFGFECTaLzxOtujwpf924difr5zniyYv1C2PiW0419qDR7m8lKDxsImu5mwxFuXhXpjmvw==
+
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -8190,6 +8232,14 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mui-tel-input@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mui-tel-input/-/mui-tel-input-5.1.2.tgz#3e26a3cbe63e10ceed4d6226079fdeafa0257579"
+  integrity sha512-KVco/YT8oFzkuAHvNR8S7kjMzDubGDAY/aUgqI0GnOQb3DXkKgyPIQpwfaO1WLtUgM8whGJqH2onAefOfihHYA==
+  dependencies:
+    "@types/node" "^20.11.17"
+    libphonenumber-js "^1.10.55"
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -9588,6 +9638,14 @@ react-image-file-resizer@^0.4.8:
   resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
   integrity sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ==
 
+react-imask@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/react-imask/-/react-imask-7.6.0.tgz#5948fc39e1d7d036292d4fade43df4636d43e7b7"
+  integrity sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==
+  dependencies:
+    imask "^7.6.0"
+    prop-types "^15.8.1"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9608,6 +9666,17 @@ react-lazily@^0.9.2:
   resolved "https://registry.yarnpkg.com/react-lazily/-/react-lazily-0.9.2.tgz#74596dbde43c8e0f607445da5c4839cf6cc48ab5"
   integrity sha512-oBVRDQ+SuMPWenBO/0Kq+iZk34lOYJEmjiTto4bYRufndf8pux3E50BT3mJZbsq0vBsAVbX3fpQjlUvsXgDVag==
 
+react-phone-number-input@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.4.1.tgz#c9a73cace2ac4a7c5fd625e1020baae7607a4d49"
+  integrity sha512-guuenZqU/DYvDBFzFdTrppC4rs+q5ybTFHrxEo9VGvX0pPLWM4ZXlRa0llT7LRAvfxX8RjQNnQkkCiTHTzhLZA==
+  dependencies:
+    classnames "^2.5.1"
+    country-flag-icons "^1.5.11"
+    input-format "^0.3.10"
+    libphonenumber-js "^1.10.61"
+    prop-types "^15.8.1"
+
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"