diff --git a/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js b/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js
index ac32b177b..7c8aec911 100644
--- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js
+++ b/apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
-import { useMenuStore } from '../../provider/stores';
+import { useMenuStore, useSettingStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
@@ -16,6 +16,7 @@ import { PressableButton } from '../PressableButton';
 export const ActionSheetColorsSection = ({item, close}) => {
   const [note, setNote] = useState(item);
   const setColorNotes = useMenuStore(state => state.setColorNotes)
+  const dimensions = useSettingStore(state => state.dimensions);
   const localRefresh = () => {
     toAdd = db.notes.note(note.id);
     if (toAdd) {
@@ -31,12 +32,16 @@ export const ActionSheetColorsSection = ({item, close}) => {
     setNote({...toAdd});
   };
 
+  let width = dimensions.width > 600 ? 600 : 500;
+
   const _renderColor = (c) => {
     const color = {
       name: c,
       value: COLORS_NOTE[c],
     };
 
+
+
     return (
       <PressableButton
         type="accent"
@@ -60,8 +65,8 @@ export const ActionSheetColorsSection = ({item, close}) => {
           eSendEvent(refreshNotesPage);
         }}
         customStyle={{
-          width: DDS.isTab ? 400 / 10 : dWidth / 9,
-          height: DDS.isTab ? 400 / 10 : dWidth / 9,
+          width: DDS.isTab ? width / 12 : dWidth / 9,
+          height: DDS.isTab ? width / 12 : dWidth / 9,
           borderRadius: 100,
           justifyContent: 'center',
           alignItems: 'center',
diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js
index 1ece6b7e1..33f619319 100644
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -18,6 +18,7 @@ import {Actions} from '../../provider/Actions';
 import {
   useMenuStore,
   useSelectionStore,
+  useSettingStore,
   useTrashStore,
   useUserStore
 } from '../../provider/stores';
@@ -79,6 +80,7 @@ export const ActionSheetComponent = ({
   const user = useUserStore(state => state.user);
   const lastSynced = useUserStore(state => state.lastSynced);
   const [notifPinned, setNotifPinned] = useState(null);
+  const dimensions = useSettingStore(state => state.dimensions);
 
   const refreshing = false;
   const isPublished = db.monographs.isPublished(note.id);
@@ -637,7 +639,9 @@ export const ActionSheetComponent = ({
     }
   ];
 
-  let columnItemWidth = DDS.isTab ? (400 - 24) / rowItems.length : (w - 24) / 5;
+  let width = dimensions.width > 600 ? 600 : 500;
+  let columnItemWidth = DDS.isTab ? (width - 24) / 5 : (w - 24) / 5;
+
   const _renderRowItem = rowItem => (
     <View
       onPress={rowItem.func}