diff --git a/apps/mobile/src/components/ActionSheetComponent/index.js b/apps/mobile/src/components/ActionSheetComponent/index.js
index 4d8f72c45..1093c7208 100644
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/apps/mobile/src/components/ActionSheetComponent/index.js
@@ -342,12 +342,10 @@ export const ActionSheetComponent = ({
         if (noteColors.includes(color)) {
           await db.notes.note(note.id).uncolor(color);
         } else {
-          noteColors.push(color);
+          await db.notes.note(note.id).color(color);
         }
-
-        await db.notes.note(note.id).color(color);
-
-        localRefresh(item.type);
+        dispatch({type: ACTIONS.COLORS});
+        localRefresh(note.type);
       }}
       style={{
         flexDirection: 'row',
diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js
index b2131381e..43a5f0f44 100644
--- a/apps/mobile/src/components/Container/index.js
+++ b/apps/mobile/src/components/Container/index.js
@@ -44,6 +44,7 @@ export const Container = ({
   placeholder = '',
   noSearch = false,
   noSelectionHeader = false,
+  headerColor = null,
 }) => {
   // State
   const [state, dispatch] = useTracked();
@@ -181,6 +182,7 @@ export const Container = ({
               countUp = 0;
               countDown = 0;
             }}
+            headerColor={headerColor}
             navigation={navigation}
             colors={colors}
             isLoginNavigator={isLoginNavigator}
@@ -195,6 +197,7 @@ export const Container = ({
               clear={() => setText('')}
               hide={hideHeader}
               onChangeText={onChangeText}
+              headerColor={headerColor}
               onSubmitEditing={onSubmitEditing}
               placeholder={placeholder}
               onBlur={onBlur}
@@ -234,7 +237,7 @@ export const Container = ({
 
                 alignSelf: 'center',
                 borderRadius: br,
-                backgroundColor: colors.accent,
+                backgroundColor: headerColor ? headerColor : colors.accent,
                 justifyContent: 'center',
                 alignItems: 'center',
                 marginBottom: 0,
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index ebb1fc927..53739523f 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -41,7 +41,7 @@ export const Menu = ({
   noTextMode = false,
 }) => {
   const [state, dispatch] = useTracked();
-  const {colors, tags} = state;
+  const {colors, tags, colorNotes} = state;
   // todo
 
   let overlayRef;
@@ -386,42 +386,61 @@ export const Menu = ({
               marginTop: pv / 2,
               marginBottom: pv / 2,
             }}>
-            {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
-              item => (
-                <TouchableOpacity
-                  key={item}
-                  activeOpacity={opacity / 2}
+            {colorNotes.map(item => (
+              <TouchableOpacity
+                key={item.id}
+                activeOpacity={opacity / 2}
+                onPress={() => {
+                  NavigationService.navigate('Notes', {
+                    type: 'color',
+                    title: item.title,
+                    color: item,
+                  });
+                }}
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: noTextMode ? 'center' : 'flex-start',
+                  alignItems: 'center',
+                  margin: noTextMode ? 0 : 5,
+                  marginLeft: 0,
+                  marginRight: noTextMode ? 0 : 15,
+                  marginTop: normalize(15),
+                }}>
+                <View
                   style={{
-                    flexDirection: 'row',
-                    justifyContent: noTextMode ? 'center' : 'flex-start',
-                    alignItems: 'center',
-                    margin: noTextMode ? 0 : 5,
-                    marginTop: normalize(15),
+                    width: noTextMode ? SIZE.md : normalize(30),
+                    height: noTextMode ? SIZE.md : normalize(30),
+                    backgroundColor: item.title,
+                    borderRadius: 100,
+                  }}></View>
+                <Text
+                  style={{
+                    color: colors.pri,
+                    fontSize: SIZE.xxs - 2,
+                    minWidth: 12,
+                    minHeight: 12,
+                    borderWidth: 0.5,
+                    paddingHorizontal: 2,
+                    borderColor: item.title,
+                    borderRadius: 100,
+                    textAlign: 'center',
+                    position: 'absolute',
+                    bottom: -5,
+                    right:
+                      item.count < 10
+                        ? -8
+                        : item.count >= 10 && item.count < 100
+                        ? -10
+                        : item.count >= 100 && item.count < 1000
+                        ? -12
+                        : item.count > 1000
+                        ? -14
+                        : -8,
                   }}>
-                  <View
-                    style={{
-                      width: noTextMode ? SIZE.md : normalize(30),
-                      height: noTextMode ? SIZE.md : normalize(30),
-                      backgroundColor: item,
-                      borderRadius: 100,
-                    }}></View>
-                  <Text
-                    style={{
-                      color: colors.pri,
-                      fontSize: SIZE.xxs - 2,
-                      minWidth: 10,
-                      minHeight: 10,
-                      borderRadius: 2,
-                      textAlign: 'center',
-                      padding: 0,
-                      paddingHorizontal: 1,
-                      position: 'absolute',
-                      top: -5,
-                      right: -10,
-                    }}></Text>
-                </TouchableOpacity>
-              ),
-            )}
+                  {item.count + 10}
+                </Text>
+              </TouchableOpacity>
+            ))}
           </View>
         </View>
 
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index 06e9e23dc..cc014a368 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -22,6 +22,7 @@ export default class NoteItem extends React.Component {
     this.cipher = {
       value: false,
     };
+    this.colors = [];
     this.actionSheet;
     this.show = null;
     this.setMenuRef = {};
@@ -29,7 +30,10 @@ export default class NoteItem extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    if (nextProps.item.locked !== this.cipher.value) {
+    if (
+      nextProps.item.locked !== this.cipher.value ||
+      nextProps.item.colors.length !== this.colors.length
+    ) {
       return true;
     } else {
       return (
@@ -39,12 +43,15 @@ export default class NoteItem extends React.Component {
     }
   }
   componentDidUpdate() {
+    this.colors = [...this.props.item.colors];
     this.cipher.value = this.props.item.locked ? true : false;
   }
   componentWillUnmount() {
+    this.colors = [];
     this.cipher.value = false;
   }
   componentDidMount() {
+    this.colors = [];
     if (this.props.item.locked) {
       this.cipher.value = true;
     }
@@ -60,7 +67,8 @@ export default class NoteItem extends React.Component {
       pinned,
       index,
     } = this.props;
-    console.log('rerendering', index, item.content.text.length);
+
+    console.log('rerendering again', index);
     return (
       <View
         style={[
diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js
index cdca5f892..426aebf36 100644
--- a/apps/mobile/src/components/SearchInput/index.js
+++ b/apps/mobile/src/components/SearchInput/index.js
@@ -61,7 +61,11 @@ export const Search = props => {
           borderRadius: br,
           height: '90%',
           borderWidth: props.hide ? 0 : 1.5,
-          borderColor: focus ? colors.accent : colors.nav,
+          borderColor: focus
+            ? props.headerColor
+              ? props.headerColor
+              : colors.accent
+            : colors.nav,
         }}>
         <TextInput
           ref={inputRef}
@@ -96,7 +100,13 @@ export const Search = props => {
             });
           }}
           name={props.value && props.value.length > 0 ? '' : 'search'}
-          color={focus ? colors.accent : colors.icon}
+          color={
+            focus
+              ? props.headerColor
+                ? props.headerColor
+                : colors.accent
+              : colors.icon
+          }
           size={SIZE.xl}
         />
       </Animated.View>
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index e6ac0921c..86b1cf73b 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -21,6 +21,7 @@ export const Header = ({
   preventDefaultMargins,
   navigation = null,
   isLoginNavigator,
+  headerColor,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
@@ -110,7 +111,7 @@ export const Header = ({
         <Text
           style={{
             fontSize: SIZE.xl,
-            color: colors.pri,
+            color: headerColor ? headerColor : colors.pri,
             fontFamily: WEIGHT.bold,
           }}>
           <Text
diff --git a/apps/mobile/src/provider/actions.js b/apps/mobile/src/provider/actions.js
index 7ef8380bd..8a31b1c09 100644
--- a/apps/mobile/src/provider/actions.js
+++ b/apps/mobile/src/provider/actions.js
@@ -12,4 +12,5 @@ export const ACTIONS = {
   CLEAR_SELECTION: 'clearSelection',
   LOGIN_NAVIGATOR: 'loginNavigator',
   CURRENT_EDITING_NOTE: 'currentEditingNote',
+  COLORS: 'colorNotes',
 };
diff --git a/apps/mobile/src/provider/defaultState.js b/apps/mobile/src/provider/defaultState.js
index 6ebb53d06..61dc6dc56 100644
--- a/apps/mobile/src/provider/defaultState.js
+++ b/apps/mobile/src/provider/defaultState.js
@@ -10,6 +10,7 @@ export const defaultState = {
   favorites: [],
   pinned: [],
   tags: [],
+  colorNotes: [],
   colors: {
     night: false,
     bg: 'white',
diff --git a/apps/mobile/src/provider/reducer.js b/apps/mobile/src/provider/reducer.js
index 624fb7d66..c0d698171 100644
--- a/apps/mobile/src/provider/reducer.js
+++ b/apps/mobile/src/provider/reducer.js
@@ -55,6 +55,13 @@ export const reducer = (state, action) => {
         favorites: [...favorites],
       };
     }
+    case ACTIONS.COLORS: {
+      let colors = db.notes.colors;
+      return {
+        ...state,
+        colorNotes: [...colors],
+      };
+    }
     case ACTIONS.SELECTION_MODE: {
       if (action.enabled) {
         SideMenuEvent.disable();
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 7435ad09a..d6691408d 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 import {SafeAreaView} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {useIsFocused} from 'react-navigation-hooks';
-import {DDS} from '../../../App';
+import {DDS, db} from '../../../App';
 import Container from '../../components/Container';
 import {NotesList} from '../../components/NotesList';
 import SelectionHeader from '../../components/SelectionHeader';
@@ -22,6 +22,7 @@ export const Home = ({navigation}) => {
   const isFocused = useIsFocused();
 
   useEffect(() => {
+    dispatch({type: ACTIONS.COLORS});
     dispatch({type: ACTIONS.NOTES});
   }, [isFocused]);
 
diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js
index 9183de94e..9d763b71a 100644
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -10,7 +10,7 @@ import {ACTIONS} from '../../provider/actions';
 
 export const Notes = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, currentEditingNote} = state;
+  const {colors, selectionMode, currentEditingNote, colorNotes} = state;
   const allNotes = state.notes;
   const [notes, setNotes] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
@@ -28,6 +28,11 @@ export const Notes = ({navigation}) => {
     if (params.type === 'tag') {
       let notesInTag = db.notes.tagged(params.tag.title);
       setNotes([...notesInTag]);
+    } else if (params.type == 'color') {
+      let notesInColors = db.notes.colored(params.color.id);
+      console.log(notesInColors);
+      setNotes([...notesInColors]);
+      //setNotes(...);
     } else {
       let allNotes = db.notebooks
         .notebook(params.notebookID)
@@ -36,7 +41,7 @@ export const Notes = ({navigation}) => {
         setNotes(allNotes);
       }
     }
-  }, [allNotes]);
+  }, [allNotes, colorNotes]);
 
   const _renderItem = ({item, index}) => (
     <SelectionWrapper
@@ -110,7 +115,12 @@ export const Notes = ({navigation}) => {
     <Container
       bottomButtonText="Create a new note"
       canGoBack={false}
-      heading={'#' + params.title}
+      heading={
+        params.type == 'tag'
+          ? '#' + params.title
+          : params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
+      }
+      headerColor={params.type == 'color' ? params.title : null}
       canGoBack={true}
       data={notes}
       placeholder={`Search in ${