diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
index 3c53ff558..814c0e899 100644
--- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isTypeCustomColors }) => {
     return (
         <div className='palette'>
-            {themeColors.map((row, rowIndex) => {
+            {themeColors?.length && themeColors.map((row, rowIndex) => {
                 return(
                     <div key={`tc-row-${rowIndex}`} className='row'>
                         {row.map((effect, index) => {
@@ -27,7 +27,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isType
 const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
     return (
         <div className='palette'>
-            {standartColors.map((color, index) => {
+            {standartColors?.length && standartColors.map((color, index) => {
                 return(
                     index === 0 && options.transparent ?
                         <a key={`sc-${index}`}
@@ -48,6 +48,7 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
 const CustomColors = ({ options, customColors, isTypeColors, onColorClick, curColor }) => {
     const colors = customColors.length > 0 ? customColors : [];
     const emptyItems = [];
+
     if (colors.length < options.customcolors) {
         for (let i = colors.length; i < options.customcolors; i++) {
             emptyItems.push(<a className='empty-color'
@@ -61,7 +62,7 @@ const CustomColors = ({ options, customColors, isTypeColors, onColorClick, curCo
     
     return (
         <div className='palette'>
-            {colors && colors.length > 0 && colors.map((color, index) => {
+            {colors?.length && colors.map((color, index) => {
                 return(
                     <a key={`dc-${index}`}
                        className={curColor && curColor === color && index === indexCurColor && !isTypeColors ? 'active' : ''}
@@ -92,17 +93,22 @@ const ThemeColorPalette = props => {
     const themeColors = [];
     const effectColors = Common.Utils.ThemeColor.getEffectColors();
     let row = -1;
-    effectColors.forEach((effect, index) => {
-        if (0 == index % options.themecolors) {
-            themeColors.push([]);
-            row++;
-        }
-        themeColors[row].push(effect);
-    });
+
+    if(effectColors?.length) {
+        effectColors.forEach((effect, index) => {
+            if (0 == index % options.themecolors) {
+                themeColors.push([]);
+                row++;
+            }
+            themeColors[row].push(effect);
+        });
+    }
+
     const standartColors = Common.Utils.ThemeColor.getStandartColors();
-    let isTypeColors = standartColors.some( value => value === curColor );
+    let isTypeColors = standartColors?.length && standartColors.some( value => value === curColor );
     // custom color
     let customColors = props.customColors;
+
     if (customColors.length < 1) {
         customColors = localStorage.getItem('mobile-custom-colors');
         customColors = customColors ? customColors.toLowerCase().split(',') : [];
@@ -142,14 +148,18 @@ const CustomColorPicker = props => {
     };
 
     let currentColor = props.currentColor;
+
     if (props.autoColor) {
         currentColor = rgb2hex(props.autoColor);
     }
+
     if (currentColor === 'transparent' || !currentColor) {
         currentColor = 'ffffff';
     }
+
     const countDynamicColors = props.countdynamiccolors || 10;
     const [stateColor, setColor] = useState(`#${currentColor}`);
+
     useEffect(() => {
         if (document.getElementsByClassName('color-picker-wheel').length < 1) {
             const colorPicker = f7.colorPicker.create({
@@ -165,6 +175,7 @@ const CustomColorPicker = props => {
             });
         }
     });
+
     const addNewColor = (color) => {
         let colors = localStorage.getItem('mobile-custom-colors');
         colors = colors ? colors.split(',') : [];
@@ -173,7 +184,8 @@ const CustomColorPicker = props => {
         localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase());
         props.onAddNewColor && props.onAddNewColor(colors, newColor);
     };
-    return(
+
+    return (
         <div id='color-picker'>
             <div className='color-picker-container'></div>
             <div className='right-block'>