diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js
index 0ec6f37f8..61163a7b7 100755
--- a/apps/mobile/src/common/common.js
+++ b/apps/mobile/src/common/common.js
@@ -72,6 +72,17 @@ let adjustedHeight = windowSize.height * PixelRatio.get();
 const pixelDensity = PixelRatio.get();
 
 
+export const COLORS_NOTE = {
+  red: "#f44336",
+  orange: "#FF9800",
+  yellow: "#FFD600",
+  green: "#4CAF50",
+  blue: "#2196F3",
+  purple: "#673AB7",
+  gray: "#9E9E9E",
+};
+
+
 
 const getDeviceSize = () => {
   let dpi = getDpi(pixelDensity);
diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js
index 140a890e4..ed5d1264c 100644
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -23,11 +23,19 @@ import {
   setColorScheme,
   SIZE,
   WEIGHT,
+  COLORS_NOTE,
 } from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
-import {timeConverter, ToastEvent, DDS, db} from '../../utils/utils';
+import {
+  timeConverter,
+  ToastEvent,
+  DDS,
+  db,
+  hexToRGBA,
+  RGB_Linear_Shade,
+} from '../../utils/utils';
 import {openVault, eSendEvent} from '../../services/eventManager';
 import {
   refreshNotesPage,
@@ -36,6 +44,7 @@ import {
 } from '../../services/events';
 import {PremiumTag} from '../Premium/PremiumTag';
 import {MMKV} from '../../utils/storage';
+import {PressableButton} from '../PressableButton';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -433,41 +442,47 @@ export const ActionSheetComponent = ({
     </TouchableOpacity>
   );
 
-  const _renderColor = (color) => (
-    <TouchableOpacity
-      key={color}
-      onPress={async () => {
-        let noteColors = note.colors;
+  const _renderColor = (c) => {
+    console.log(COLORS_NOTE[c]);
+    const color = {
+      name: c,
+      value: COLORS_NOTE[c],
+    };
 
-        if (noteColors.includes(color)) {
-          await db.notes.note(note.id).uncolor(color);
-        } else {
-          await db.notes.note(note.id).color(color);
-        }
-        dispatch({type: ACTIONS.COLORS});
-        localRefresh(note.type);
-      }}
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        borderColor: colors.nav,
-      }}>
-      <View
-        style={{
+    return (
+      <PressableButton
+        color={RGB_Linear_Shade(
+          !colors.night ? -0.2 : 0.2,
+          hexToRGBA(color.value, 1),
+        )}
+        selectedColor={color.value}
+        alpha={!colors.night ? -0.1 : 0.1}
+        opacity={1}
+        key={color.value}
+        onPress={async () => {
+          let noteColors = note.colors;
+
+          if (noteColors.includes(color.name)) {
+            await db.notes.note(note.id).uncolor(color.name);
+          } else {
+            await db.notes.note(note.id).color(color.name);
+          }
+          dispatch({type: ACTIONS.COLORS});
+          localRefresh(note.type);
+        }}
+        customStyle={{
           width: DDS.isTab ? 400 / 10 : w / 10,
           height: DDS.isTab ? 400 / 10 : w / 10,
-          backgroundColor: color,
           borderRadius: 100,
           justifyContent: 'center',
           alignItems: 'center',
         }}>
-        {note && note.colors && note.colors.includes(color) ? (
+        {note && note.colors && note.colors.includes(color.name) ? (
           <Icon name="check" color="white" size={SIZE.lg} />
         ) : null}
-      </View>
-    </TouchableOpacity>
-  );
+      </PressableButton>
+    );
+  };
 
   const _renderRowItem = (rowItem) =>
     rowItems.includes(rowItem.name) ? (
@@ -778,9 +793,7 @@ export const ActionSheetComponent = ({
             alignItems: 'center',
             justifyContent: 'space-between',
           }}>
-          {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
-            _renderColor,
-          )}
+          {Object.keys(COLORS_NOTE).map(_renderColor)}
         </View>
       ) : null}
 
diff --git a/apps/mobile/src/components/Container/ContainerBottomButton.js b/apps/mobile/src/components/Container/ContainerBottomButton.js
index 03acc5d5b..b8d6268a7 100644
--- a/apps/mobile/src/components/Container/ContainerBottomButton.js
+++ b/apps/mobile/src/components/Container/ContainerBottomButton.js
@@ -65,8 +65,8 @@ export const ContainerBottomButton = ({root}) => {
         ],
       }}>
       <PressableButton
-        color={colors.accent}
-        selectedColor={colors.accent}
+        color={containerBottomButton.color? containerBottomButton.color : colors.accent}
+        selectedColor={containerBottomButton.color? containerBottomButton.color : colors.accent}
         onPress={containerBottomButton.bottomButtonOnPress}>
         <View
           style={{
diff --git a/apps/mobile/src/components/ExportDialog/index.js b/apps/mobile/src/components/ExportDialog/index.js
index 9f9fec6bc..76c5f12ac 100644
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -26,7 +26,7 @@ import Seperator from '../Seperator';
 const ExportDialog = () => {
   const [state, dispatch] = useTracked();
   const {colors, tags, premiumUser} = state;
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const [notes, setNotes] = useState([]);
   const [exporting, setExporting] = useState(false);
   const [complete, setComplete] = useState(false);
diff --git a/apps/mobile/src/components/Menu/ColorSection.js b/apps/mobile/src/components/Menu/ColorSection.js
index fbbd2bbc0..0e412fa10 100644
--- a/apps/mobile/src/components/Menu/ColorSection.js
+++ b/apps/mobile/src/components/Menu/ColorSection.js
@@ -1,11 +1,12 @@
-import React, {useEffect} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {opacity, pv, SIZE} from '../../common/common';
-import {useTracked} from '../../provider';
-import {ACTIONS} from '../../provider/actions';
-import {eSendEvent} from '../../services/eventManager';
-import {refreshNotesPage} from '../../services/events';
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import { COLORS_NOTE, pv, SIZE } from '../../common/common';
+import { useTracked } from '../../provider';
+import { ACTIONS } from '../../provider/actions';
+import { eSendEvent } from '../../services/eventManager';
+import { refreshNotesPage } from '../../services/events';
 import NavigationService from '../../services/NavigationService';
+import { PressableButton } from '../PressableButton';
 
 export const ColorSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
@@ -21,10 +22,18 @@ export const ColorSection = ({noTextMode}) => {
         width: '100%',
         paddingHorizontal: 10,
       }}>
-      {colorNotes.map(item => (
-        <TouchableOpacity
+      {colorNotes.map((item) => (
+        <PressableButton
           key={item.id}
-          activeOpacity={opacity / 2}
+          onPress={_onPress}
+          color={
+            currentScreen === item.name.toLowerCase()
+              ? colors.shade
+              : 'transparent'
+          }
+          selectedColor={colors.accent}
+          alpha={!colors.night ? -0.02 : 0.02}
+          opacity={0.12}
           onPress={() => {
             let params = {
               type: 'color',
@@ -71,7 +80,7 @@ export const ColorSection = ({noTextMode}) => {
               style={{
                 width: SIZE.md,
                 height: SIZE.md,
-                backgroundColor: item.title,
+                backgroundColor: COLORS_NOTE[item.title],
                 borderRadius: 100,
                 justifyContent: 'center',
                 marginRight: 10,
@@ -105,7 +114,7 @@ export const ColorSection = ({noTextMode}) => {
               </Text>
             </View>
           )}
-        </TouchableOpacity>
+        </PressableButton>
       ))}
     </View>
   );
diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js
index 2158af5d6..c17b9bb4b 100644
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -16,8 +16,9 @@ import {
 } from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
 import {db, DDS, editing, ToastEvent} from '../../utils/utils';
-import { NoteItemWrapper } from '../../components/SimpleList/NoteItemWrapper';
-import { Placeholder } from '../../components/ListPlaceholders';
+import {NoteItemWrapper} from '../../components/SimpleList/NoteItemWrapper';
+import {Placeholder} from '../../components/ListPlaceholders';
+import {COLORS_NOTE} from '../../common/common';
 
 export const Notes = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -61,7 +62,7 @@ export const Notes = ({route, navigation}) => {
     };
   }, []);
 
-  const init = data => {
+  const init = (data) => {
     params = route.params;
     if (data) {
       params = data;
@@ -92,7 +93,7 @@ export const Notes = ({route, navigation}) => {
           menu: params.type === 'color' ? true : false,
           canGoBack: params.type === 'color' ? false : true,
           route: route,
-          color: params.type == 'color' ? params.title : null,
+          color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
           navigation: navigation,
         },
       });
@@ -100,7 +101,7 @@ export const Notes = ({route, navigation}) => {
         type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
         state: {
           visible: true,
-          color: params.type == 'color' ? params.title : null,
+          color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
           bottomButtonOnPress: _bottomBottomOnPress,
           bottomButtonText: 'Create a new note',
         },
@@ -197,7 +198,7 @@ export const Notes = ({route, navigation}) => {
       focused={isFocused}
       customRefresh={_onRefresh}
       RenderItem={NoteItemWrapper}
-      placeholder={<Placeholder type="notes"/>}
+      placeholder={<Placeholder type="notes" />}
       placeholderText={`Add some notes to this" ${
         params.type ? params.type : 'topic.'
       }`}
diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js
index cf5d1bc0a..9724742b3 100644
--- a/apps/mobile/src/views/Settings/index.js
+++ b/apps/mobile/src/views/Settings/index.js
@@ -37,7 +37,7 @@ import NavigationService from '../../services/NavigationService';
 import {db, DDS, setSetting, ToastEvent, w, RGB_Linear_Shade, hexToRGBA} from '../../utils/utils';
 import {MMKV} from '../../utils/storage';
 import {PressableButton} from '../../components/PressableButton';
-
+  
 export const Settings = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, user, settings} = state;
@@ -530,14 +530,11 @@ export const Settings = ({route, navigation}) => {
                 justifyContent: 'center',
                 alignItems: 'center',
               }}>
-              <View
-                style={{
-                
-                }}>
+             
                 {colors.accent === item ? (
                   <Icon size={SIZE.lg} color="white" name="check" />
                 ) : null}
-              </View>
+            
             </PressableButton>
           ))}
         </View>