diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
index 7b65b18..8788612 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@@ -36,26 +36,26 @@ export const StartPageViewPublication = () => {
 
   const background =
     settings.cfg.startpage.background.type === "image" ? (
-      settings.cfg.startpage.background.desktop ? (
-        <img
-          src={
-            DESIGN_LIST[settings.cfg.design] ||
-            settings.cfg.startpage.background.desktop
-          }
-          alt=""
-          style={{
-            display: "block",
-            width:
-              isMobile || settings.cfg.startpageType === "expanded"
-                ? "100%"
-                : undefined,
-            height: "100%",
-            maxHeight: "100vh",
-            objectFit: "cover",
-            overflow: "hidden",
-          }}
-        />
-      ) : null
+      <img
+        src={
+          settings.cfg.startpage.background.desktop ||
+          DESIGN_LIST[settings.cfg.theme] ||
+          ""
+        }
+        alt=""
+        style={{
+          display: "block",
+          width:
+            isMobile || settings.cfg.startpageType === "expanded"
+              ? "100%"
+              : undefined,
+          height: "100%",
+          minWidth: "100%",
+          maxHeight: "100vh",
+          objectFit: "cover",
+          overflow: "hidden",
+        }}
+      />
     ) : settings.cfg.startpage.background.type === "video" ? (
       settings.cfg.startpage.background.video ? (
         <YoutubeEmbedIframe
diff --git a/lib/ui_kit/Stepper.tsx b/lib/ui_kit/Stepper.tsx
index 86ef22f..7b7d2b1 100644
--- a/lib/ui_kit/Stepper.tsx
+++ b/lib/ui_kit/Stepper.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from "@mui/material";
 import MobileStepper from "@mui/material/MobileStepper";
+import { hexToRgba } from "@utils/hexToRgba";
 
 interface Props {
   activeStep: number;
@@ -23,11 +24,10 @@ export default function ProgressMobileStepper({ activeStep, steps }: Props) {
           height: "4px",
           background: theme.palette.primary.light,
           width: "100%",
-          opacity: 0.5,
         },
-        "& .MuiLinearProgress-bar": {
-          background: theme.palette.primary.main,
-          opacity: 1,
+        "& .MuiLinearProgress-bar": { background: theme.palette.primary.main },
+        "& .MuiMobileStepper-progress": {
+          background: hexToRgba(theme.palette.primary.main, 0.5),
         },
       }}
       nextButton={<></>}
diff --git a/lib/utils/hexToRgba.ts b/lib/utils/hexToRgba.ts
new file mode 100644
index 0000000..023edcd
--- /dev/null
+++ b/lib/utils/hexToRgba.ts
@@ -0,0 +1,7 @@
+import hexRgb from "hex-rgb";
+
+export const hexToRgba = (hexColor: string, opacity?: number): string => {
+  const { red, green, blue, alpha } = hexRgb(hexColor);
+
+  return `rgba(${red}, ${green}, ${blue}, ${opacity || alpha})`;
+};
diff --git a/lib/utils/themes/Publication/themePublication.ts b/lib/utils/themes/Publication/themePublication.ts
index 1590195..4686ce3 100644
--- a/lib/utils/themes/Publication/themePublication.ts
+++ b/lib/utils/themes/Publication/themePublication.ts
@@ -239,7 +239,7 @@ const Design1 = createTheme({
     },
 
     background: {
-      default: "#FFFCF6",
+      default: "#333647",
     },
   },
 });
@@ -248,34 +248,14 @@ const Design2 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#758E4F",
+      main: "#3D9A63",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#758E4F",
-    },
-
-    background: {
-      default: "#F9FBF1",
-    },
-  },
-});
-
-const Design3 = createTheme({
-  ...themePublic,
-  palette: {
-    primary: {
-      main: "#07A0C3",
-    },
-    secondary: {
-      main: "#252734",
-    },
-    text: {
-      primary: "#FFFFFF",
-      secondary: "#07A0C3",
+      secondary: "#3D9A63",
     },
 
     background: {
@@ -284,22 +264,42 @@ const Design3 = createTheme({
   },
 });
 
+const Design3 = createTheme({
+  ...themePublic,
+  palette: {
+    primary: {
+      main: "#4B6A99",
+    },
+    secondary: {
+      main: "#252734",
+    },
+    text: {
+      primary: "#333647",
+      secondary: "#4B6A99",
+    },
+
+    background: {
+      default: "#FFFFFF",
+    },
+  },
+});
+
 const Design4 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#F2B133",
+      main: "#FF9431",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#F2B133",
+      secondary: "#FF9431",
     },
 
     background: {
-      default: "#FFFCF6",
+      default: "#333647",
     },
   },
 });
@@ -308,14 +308,14 @@ const Design5 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#07A0C3",
+      main: "#2D99BA",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#07A0C3",
+      secondary: "#2D99BA",
     },
 
     background: {
@@ -344,18 +344,18 @@ const Design6 = createTheme({
   },
 });
 
-const Design8 = createTheme({
+const Design7 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#D34085",
+      main: "#B47C3B",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#D34085",
+      secondary: "#B47C3B",
     },
 
     background: {
@@ -364,22 +364,22 @@ const Design8 = createTheme({
   },
 });
 
-const Design7 = createTheme({
+const Design8 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#F2B133",
+      main: "#F0B136",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#F2B133",
+      secondary: "#F0B136",
     },
 
     background: {
-      default: "#FFFCF6",
+      default: "#333647",
     },
   },
 });
@@ -388,18 +388,18 @@ const Design9 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#758E4F",
+      main: "#678F48",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#758E4F",
+      secondary: "#678F48",
     },
 
     background: {
-      default: "#F9FBF1",
+      default: "#333647",
     },
   },
 });
@@ -408,14 +408,14 @@ const Design10 = createTheme({
   ...themePublic,
   palette: {
     primary: {
-      main: "#07A0C3",
+      main: "#3666AF",
     },
     secondary: {
       main: "#252734",
     },
     text: {
       primary: "#FFFFFF",
-      secondary: "#07A0C3",
+      secondary: "#3666AF",
     },
 
     background: {
diff --git a/package.json b/package.json
index e7500ca..52ac4d6 100755
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
         "zustand": "^4.3.8"
     },
     "dependencies": {
-        "country-flag-emoji-polyfill": "^0.1.8"
+        "country-flag-emoji-polyfill": "^0.1.8",
+        "hex-rgb": "^5.0.0"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 841478e..4d84606 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2269,6 +2269,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hex-rgb@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
+  integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
+
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"