diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
index 317a73f..332340e 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
@@ -23,14 +23,14 @@ type StartPageDesktopProps = {
 type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
 
 const StandartLayout = ({
-    alignType,
-    quizHeaderBlock,
-    quizMainBlock,
-    backgroundBlock,
-}: LayoutProps) => {
+                            alignType,
+                            quizHeaderBlock,
+                            quizMainBlock,
+                            backgroundBlock,
+                        }: LayoutProps) => {
     const size = useRootContainerSize();
     const isTablet = size >= 700 && size < 1100;
-    const { settings } = useQuizData();
+    const {settings} = useQuizData();
 
     return (
         <Box
@@ -49,54 +49,65 @@ const StandartLayout = ({
                     width: 0,
                 },
                 overflowY: "auto",
-                padding: isTablet ? "15px" : "0",
+
             }}
         >
             <Box
                 sx={{
-                    width: "40%",
-                    height: "100%",
                     display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start",
-                    p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
-                    overflowY: "auto",
-                    background:
-                        settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
-                            ? "linear-gradient(90deg,#272626,transparent)"
-                            : null,
-                    scrollbarWidth: "none",
-                    "&::-webkit-scrollbar": {
-                        width: 0,
-                    },
+                    flexDirection: alignType === "left" ? "row" : "row-reverse",
+                    padding: isTablet ? "15px" : "0",
+                    background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+                        ? alignType === 'left'
+                            ? "linear-gradient(90deg, #272626, transparent)"
+                            : alignType === 'right'
+                                ? "linear-gradient(-90deg, #272626, transparent)"
+                                : "linear-gradient(0deg, #272626, transparent)"
+                        : null,
                 }}
             >
-                {quizHeaderBlock}
-                {quizMainBlock}
-            </Box>
-            {settings.cfg.startpage.background.desktop && (
-                <Box sx={{ width: "60%", overflow: "hidden" }}><Box
+                <Box
                     sx={{
-                        width: "100%",
+                        width: "40%",
                         height: "100%",
-                        padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
                         display: "flex",
-                        justifyContent: "center",
-                        "& > img": { width: "100%", borderRadius: "12px" },
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        p: isTablet ? "25px" : alignType === 'left' ? "25px 25px 25px 35px" : "25px 35px 25px 25px",
+                        overflowY: "auto",
+                        scrollbarWidth: "none",
+                        "&::-webkit-scrollbar": {
+                            width: 0,
+                        },
                     }}
-                >{backgroundBlock}</Box></Box>
-            )}
+                >
+                    {quizHeaderBlock}
+                    {quizMainBlock}
+                </Box>
+                {settings.cfg.startpage.background.desktop && (
+                    <Box sx={{width: "60%", overflow: "hidden"}}><Box
+                        sx={{
+                            width: "100%",
+                            height: "100%",
+                            padding: alignType === "left" ? "25px 25px 25px 15px" : "25px 15px 25px 25px",
+                            display: "flex",
+                            justifyContent: "center",
+                            "& > img": {width: "100%", borderRadius: "12px"},
+                        }}
+                    >{backgroundBlock}</Box></Box>
+                )}
+            </Box>
         </Box>
     );
 };
 
 const ExpandedLayout = ({
-    alignType,
-    quizHeaderBlock,
-    quizMainBlock,
-    backgroundBlock,
-}: LayoutProps) => {
+                            alignType,
+                            quizHeaderBlock,
+                            quizMainBlock,
+                            backgroundBlock,
+                        }: LayoutProps) => {
     const size = useRootContainerSize();
     const isTablet = size >= 700 && size < 1100;
     return (
@@ -171,12 +182,12 @@ const ExpandedLayout = ({
 }
 
 const CenteredLayout = ({
-    quizHeaderBlock,
-    quizMainBlock,
-    backgroundBlock,
-}: LayoutProps) => {
+                            quizHeaderBlock,
+                            quizMainBlock,
+                            backgroundBlock,
+                        }: LayoutProps) => {
     const isTablet = useRootContainerSize() < 1100;
-    const { settings } = useQuizData();
+    const {settings} = useQuizData();
     return (
         <Box
             sx={{
@@ -188,9 +199,8 @@ const CenteredLayout = ({
                 height: "100%",
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
-                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-                    : null,
+                backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+                    ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
                 scrollbarWidth: "none",
                 "&::-webkit-scrollbar": {
                     width: 0,
@@ -207,7 +217,7 @@ const CenteredLayout = ({
                         height: isTablet ? "530px" : "306px",
                         display: "flex",
                         justifyContent: "center",
-                        "& > img": { width: "100%", borderRadius: "12px" },
+                        "& > img": {width: "100%", borderRadius: "12px"},
                     }}
                 >
                     {backgroundBlock}
@@ -219,12 +229,12 @@ const CenteredLayout = ({
 };
 
 export const StartPageDesktop = ({
-    quizHeaderBlock,
-    quizMainBlock,
-    backgroundBlock,
-    startpageType,
-    alignType,
-}: StartPageDesktopProps) => {
+                                     quizHeaderBlock,
+                                     quizMainBlock,
+                                     backgroundBlock,
+                                     startpageType,
+                                     alignType,
+                                 }: StartPageDesktopProps) => {
     switch (startpageType) {
         case null:
         case "standard": {
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
index 797bced..7b11f30 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
@@ -9,171 +9,174 @@ import type {QuizStartpageType} from "@model/settingsData";
 import {DESIGN_LIST} from "@/utils/designList";
 
 type StartPageMobileProps = {
-  quizHeaderBlock: JSX.Element;
-  quizMainBlock: JSX.Element;
-  backgroundBlock: JSX.Element | null;
-  startpageType: QuizStartpageType;
+    quizHeaderBlock: JSX.Element;
+    quizMainBlock: JSX.Element;
+    backgroundBlock: JSX.Element | null;
+    startpageType: QuizStartpageType;
 };
 
 type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
 
 const StandartMobileLayout = ({
-  quizHeaderBlock,
-  quizMainBlock,
-  backgroundBlock,
-}: MobileLayoutProps) => {
-  const { settings } = useQuizData();
+                                  quizHeaderBlock,
+                                  quizMainBlock,
+                                  backgroundBlock,
+                              }: MobileLayoutProps) => {
+    const {settings} = useQuizData();
 
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        justifyContent: "flex-end",
-        minHeight: "100%",
-        height: "100%",
-        "&::-webkit-scrollbar": { width: 0 },
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        backgroundImage: settings.cfg.design
-          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-          : null,
-      }}
-    >
-      <Box
-        sx={{
-          width: "100%",
-          display: "flex",
-          flexGrow: 1,
-          flexDirection: "column",
-          justifyContent: "space-between",
-          alignItems: "flex-start",
-          p: "20px",
-          height: "100%",
-          overflowY: "auto",
-          overflowX: "hidden",
-          background:
-            settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
-              ? "linear-gradient(90deg,#272626,transparent)"
-              : null,
-          "&::-webkit-scrollbar": {
-            width: "4px",
-          },
-          "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#b8babf",
-          },
-        }}
-      >
-          <Box sx={{marginBottom: "13px"}}>
-        {quizHeaderBlock}
-          </Box>
-          {settings.cfg.startpage.background.desktop && (
-              <Box sx={{ width: "100%", overflow: "hidden" }}>
-                  <Box
-                      sx={{
-                          width: "100%",
-                          height: "100%",
-                          display: "flex",
-                          justifyContent: "center",
-                          "& > img": { width: "100%", borderRadius: "12px" },
-                      }}
-                  >
-                      {backgroundBlock}
-                  </Box>
-              </Box>
-          )}
+    return (
         <Box
-          sx={{
-            height: "80%",
-            display: "flex",
-            flexGrow: 1,
-            flexDirection: "column",
-            justifyContent: "space-between",
-            width: "100%",
-              marginTop: "30px"
-          }}
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                flexGrow: 1,
+                justifyContent: "flex-end",
+                minHeight: "100%",
+                height: "100%",
+                "&::-webkit-scrollbar": {width: 0},
+                backgroundPosition: "center",
+                backgroundSize: "cover",
+                backgroundImage: settings.cfg.design
+                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
+                    : null,
+            }}
         >
-          {quizMainBlock}
+            <Box
+                sx={{
+                    width: "100%",
+                    display: "flex",
+                    flexGrow: 1,
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                    p: "20px",
+                    height: "100%",
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    background:
+                        settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+                            ? "linear-gradient(90deg,#272626,transparent)"
+                            : null,
+                    "&::-webkit-scrollbar": {
+                        width: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                        backgroundColor: "#b8babf",
+                    },
+                }}
+            >
+                <Box sx={{marginBottom: "13px"}}>
+                    {quizHeaderBlock}
+                </Box>
+                {settings.cfg.startpage.background.desktop && (
+                    <Box sx={{width: "100%", overflow: "hidden"}}>
+                        <Box
+                            sx={{
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                justifyContent: "center",
+                                "& > img": {
+                                    width: "100%",
+                                    borderRadius: "12px"
+                                },
+                            }}
+                        >
+                            {backgroundBlock}
+                        </Box>
+                    </Box>
+                )}
+                <Box
+                    sx={{
+                        height: "80%",
+                        display: "flex",
+                        flexGrow: 1,
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        width: "100%",
+                        marginTop: "30px"
+                    }}
+                >
+                    {quizMainBlock}
+                </Box>
+            </Box>
         </Box>
-      </Box>
-    </Box>
-  );
+    );
 };
 
 const ExpandedMobileLayout = ({
-  quizHeaderBlock,
-  quizMainBlock,
-  backgroundBlock,
-}: MobileLayoutProps) => (
-  <Box
-    sx={{
-      display: "flex",
-      flexDirection: "column-reverse",
-      flexGrow: 1,
-      justifyContent: "flex-end",
-      minHeight: "100%",
-      height: "100%",
-      "&::-webkit-scrollbar": { width: 0 },
-    }}
-  >
+                                  quizHeaderBlock,
+                                  quizMainBlock,
+                                  backgroundBlock,
+                              }: MobileLayoutProps) => (
     <Box
-      sx={{
-        zIndex: 3,
-        width: "100%",
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        height: "100%",
-        overflowY: "auto",
-        overflowX: "hidden",
-        "&::-webkit-scrollbar": { width: "4px" },
-        "&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
-      }}
-    >
-      <Box
         sx={{
-          padding: "20px",
-          height: "80%",
-          display: "flex",
-          flexGrow: 1,
-          flexDirection: "column",
-          justifyContent: "space-between",
-          width: "100%",
+            display: "flex",
+            flexDirection: "column-reverse",
+            flexGrow: 1,
+            justifyContent: "flex-end",
+            minHeight: "100%",
+            height: "100%",
+            "&::-webkit-scrollbar": {width: 0},
         }}
-      >
-          {quizHeaderBlock}
-        {quizMainBlock}
-      </Box>
-    </Box>
-    <Box
-      sx={{
-        zIndex: -1,
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-        // minHeight: "100%",
-        overflow: "hidden",
-        "& > img": {
-          display: "block",
-          minHeight: "100%",
-        },
-      }}
     >
-      {backgroundBlock}
+        <Box
+            sx={{
+                zIndex: 3,
+                width: "100%",
+                display: "flex",
+                flexGrow: 1,
+                flexDirection: "column",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                height: "100%",
+                overflowY: "auto",
+                overflowX: "hidden",
+                "&::-webkit-scrollbar": {width: "4px"},
+                "&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
+            }}
+        >
+            <Box
+                sx={{
+                    padding: "20px",
+                    height: "80%",
+                    display: "flex",
+                    flexGrow: 1,
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    width: "100%",
+                }}
+            >
+                {quizHeaderBlock}
+                {quizMainBlock}
+            </Box>
+        </Box>
+        <Box
+            sx={{
+                zIndex: -1,
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "100%",
+                height: "100%",
+                // minHeight: "100%",
+                overflow: "hidden",
+                "& > img": {
+                    display: "block",
+                    minHeight: "100%",
+                },
+            }}
+        >
+            {backgroundBlock}
+        </Box>
     </Box>
-  </Box>
 );
 
 const CenteredMobileLayout = ({
-  quizHeaderBlock,
-  quizMainBlock,
-  backgroundBlock,
-}: MobileLayoutProps) => {
+                                  quizHeaderBlock,
+                                  quizMainBlock,
+                                  backgroundBlock,
+                              }: MobileLayoutProps) => {
     const {settings} = useQuizData();
     return (
         <Box
@@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
                 height: "100%",
                 backgroundPosition: "center",
                 backgroundSize: "cover",
-                backgroundImage: settings.cfg.design
-                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-                    : null,
+                backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
+                    ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
                 "&::-webkit-scrollbar": {width: 0},
             }}
         >
@@ -211,11 +213,11 @@ const CenteredMobileLayout = ({
                 {quizHeaderBlock}
                 {settings.cfg.startpage.background.desktop && (
                     <Box
-                    sx={{
-                        width: "100%",
-                        overflow: "hidden",
-                        "& > img": {width: "100%", borderRadius: "12px"},
-                    }}
+                        sx={{
+                            width: "100%",
+                            overflow: "hidden",
+                            "& > img": {width: "100%", borderRadius: "12px"},
+                        }}
                     >
                         {backgroundBlock}
                     </Box>
@@ -238,44 +240,44 @@ const CenteredMobileLayout = ({
 }
 
 export const StartPageMobile = ({
-  quizHeaderBlock,
-  quizMainBlock,
-  backgroundBlock,
-  startpageType,
-}: StartPageMobileProps) => {
-  switch (startpageType) {
-    case null:
-    case "standard": {
-      return (
-        <StandartMobileLayout
-          quizHeaderBlock={quizHeaderBlock}
-          quizMainBlock={quizMainBlock}
-          backgroundBlock={backgroundBlock}
-        />
-      );
-    }
+                                    quizHeaderBlock,
+                                    quizMainBlock,
+                                    backgroundBlock,
+                                    startpageType,
+                                }: StartPageMobileProps) => {
+    switch (startpageType) {
+        case null:
+        case "standard": {
+            return (
+                <StandartMobileLayout
+                    quizHeaderBlock={quizHeaderBlock}
+                    quizMainBlock={quizMainBlock}
+                    backgroundBlock={backgroundBlock}
+                />
+            );
+        }
 
-    case "expanded": {
-      return (
-        <ExpandedMobileLayout
-          quizHeaderBlock={quizHeaderBlock}
-          quizMainBlock={quizMainBlock}
-          backgroundBlock={backgroundBlock}
-        />
-      );
-    }
+        case "expanded": {
+            return (
+                <ExpandedMobileLayout
+                    quizHeaderBlock={quizHeaderBlock}
+                    quizMainBlock={quizMainBlock}
+                    backgroundBlock={backgroundBlock}
+                />
+            );
+        }
 
-    case "centered": {
-      return (
-        <CenteredMobileLayout
-          quizHeaderBlock={quizHeaderBlock}
-          quizMainBlock={quizMainBlock}
-          backgroundBlock={backgroundBlock}
-        />
-      );
-    }
+        case "centered": {
+            return (
+                <CenteredMobileLayout
+                    quizHeaderBlock={quizHeaderBlock}
+                    quizMainBlock={quizMainBlock}
+                    backgroundBlock={backgroundBlock}
+                />
+            );
+        }
 
-    default:
-      notReachable(startpageType);
-  }
+        default:
+            notReachable(startpageType);
+    }
 };