diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index d14b0f595..85881fbba 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -901,6 +901,14 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+// Highlight Colors
+
+.highlight-color {
+    width: 38px;
+    height: 38px;
+    margin: 1px;
+    border: 0.5px solid #9E9E9E;
+}
 
 
 
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 626c53d84..3cdc9b2d0 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -304,7 +304,8 @@
     "textTopAndBottom": "Top and Bottom",
     "textTotalRow": "Total Row",
     "textType": "Type",
-    "textWrap": "Wrap"
+    "textWrap": "Wrap",
+    "textNoFill": "No Fill"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index b07f4eb7d..8f86a0cca 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -4,6 +4,7 @@ import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page,
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const PageFonts = props => {
@@ -465,18 +466,19 @@ const PageBackgroundColor = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const backgroundColor = props.storeTextSettings.backgroundColor;
-    const customColors = props.storePalette.customColors;
+    // const customColors = props.storePalette.customColors;
     const changeColor = (color, effectId) => {
         if (color !== 'empty') {
-            if (effectId !==undefined ) {
+            if (effectId !== undefined ) {
                 props.onBackgroundColor({color: color, effectId: effectId});
             } else {
                 props.onBackgroundColor(color);
             }
-        } else {
-            // open custom color menu
-            props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}});
         }
+        // } else {
+        //     // open custom color menu
+        //     props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}});
+        // }
     };
     return(
         <Page>
@@ -489,12 +491,13 @@ const PageBackgroundColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
+            <HighlightColorPalette />
+            {/* <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{
                     onBackgroundColor: props.onBackgroundColor
                 }}></ListItem>
-            </List>
+            </List> */}
         </Page>
     )
 };