diff --git a/apps/web/src/common/index.js b/apps/web/src/common/index.js
index f68333dd2..9145ca4f8 100644
--- a/apps/web/src/common/index.js
+++ b/apps/web/src/common/index.js
@@ -5,6 +5,6 @@ import events from "events";
 export const db = new Database(StorageInterface);
 export const ev = new events.EventEmitter();
 console.log("from common", db);
-export function sendNewNoteEvent() {
-  ev.emit("onNewNote");
+export function sendNewNoteEvent(context) {
+  ev.emit("onNewNote", context);
 }
diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index 36618dfb5..ff84c71d2 100644
--- a/apps/web/src/components/editor/index.js
+++ b/apps/web/src/components/editor/index.js
@@ -104,7 +104,7 @@ export default class Editor extends React.Component {
     this.setState({ pinned });
   }
 
-  onNewNote(show = true, cb = null) {
+  onNewNote(context, show = true, cb = null) {
     clearTimeout(this.timeout);
     this.saveNote().then(() => {
       this.titleRef.value = "";
@@ -112,6 +112,12 @@ export default class Editor extends React.Component {
       this.title = undefined;
       this.titleRef.focus();
       this.quill.setText("\n");
+      this.setState({
+        colors: [...this.state.colors, ...context.colors],
+        tags: [...this.state.tags, ...context.tags]
+      });
+      console.log(this.state.colors);
+      ev.emit("refreshNotes");
       cb && cb();
       if (show) {
         showSnack("Let's start writing!", Icon.Edit2);
@@ -121,14 +127,14 @@ export default class Editor extends React.Component {
 
   onClearNote(id = undefined) {
     if (id && id !== this.id) return;
-    this.onNewNote(false);
+    this.onNewNote(null, false);
   }
 
   onOpenNote(note) {
     if (!note) return;
-    this.onNewNote(false, async () => {
+    this.onNewNote(null, false, async () => {
       let dbNote = db.notes.note(note.id);
-      if (!dbNote) return this.onNewNote(false);
+      if (!dbNote) return this.onNewNote(null, false);
       this.id = note.id;
       this.title = note.title;
       this.titleRef.value = note.title;
@@ -160,7 +166,7 @@ export default class Editor extends React.Component {
       id: this.id,
       favorite: this.favorite,
       pinned: this.pinned,
-      colors: this.state.colors,
+      colors: this.state.colors
       //tags: this.state.tags
     };
     return await db.notes.add(note);
@@ -244,8 +250,7 @@ export default class Editor extends React.Component {
               tags[this.state.tags.length] = tag;
             }
             this.setState({ tags });
-            if (this.id)
-              await db.notes.note(this.id).tag(tag);
+            if (this.id) await db.notes.note(this.id).tag(tag);
           }}
           onLocked={state => {}}
         />
diff --git a/apps/web/src/navigation/index.js b/apps/web/src/navigation/index.js
index 3e81f4656..e6fe95498 100644
--- a/apps/web/src/navigation/index.js
+++ b/apps/web/src/navigation/index.js
@@ -101,7 +101,7 @@ const NavigationContainer = props => {
           >
             <Icon.Menu size={38} />
           </Box>
-          <Heading fontSize="heading">
+          <Heading fontSize="heading" color={props.route.titleColor || "text"}>
             {props.route.title || props.route.params.title}
           </Heading>
         </Flex>
diff --git a/apps/web/src/navigation/navigators/rootnavigator.js b/apps/web/src/navigation/navigators/rootnavigator.js
index ced8cc685..013f2392a 100644
--- a/apps/web/src/navigation/navigators/rootnavigator.js
+++ b/apps/web/src/navigation/navigators/rootnavigator.js
@@ -4,6 +4,7 @@ import {
   Favorites,
   Trash,
   NotebooksContainer,
+  Notes,
   TagsContainer
 } from "../../views";
 import * as Icon from "react-feather";
@@ -16,18 +17,54 @@ import {
 import Navigator from "../index";
 import { showSignInDialog } from "../../components/dialogs";
 import { changeTheme, isDarkTheme } from "../../utils/theme";
+import { db } from "../../common";
 
 /*For color Search*/
 const colorRoutes = {
-  ...createColorRoute("red", "#ed2d37"),
-  ...createColorRoute("orange", "#ec6e05"),
-  ...createColorRoute("yellow", "yellow"),
-  ...createColorRoute("green", "green"),
-  ...createColorRoute("blue", "blue"),
-  ...createColorRoute("purple", "purple"),
-  ...createColorRoute("gray", "gray")
+  ...createColorRoute("Red", Notes, "#ed2d37", {
+    onClick: () => {
+      onClickMethod("Red", "red");
+    }
+  }),
+  ...createColorRoute("Orange", Notes, "#ec6e05", {
+    onClick: () => {
+      onClickMethod("Orange", "orange");
+    }
+  }),
+  ...createColorRoute("Yellow", Notes, "yellow", {
+    onClick: () => {
+      onClickMethod("Yellow", "yellow");
+    }
+  }),
+  ...createColorRoute("Green", Notes, "green", {
+    onClick: () => {
+      onClickMethod("Green", "green");
+    }
+  }),
+  ...createColorRoute("Blue", Notes, "blue", {
+    onClick: () => {
+      onClickMethod("Blue", "blue");
+    }
+  }),
+  ...createColorRoute("Purple", Notes, "purple", {
+    onClick: () => {
+      onClickMethod("Purple", "purple");
+    }
+  }),
+  ...createColorRoute("Gray", Notes, "gray", {
+    onClick: () => {
+      onClickMethod("Gray", "gray");
+    }
+  })
 };
 
+function onClickMethod(Title, label) {
+  RootNavigator.navigate(Title, {
+    notes: db.notes.colored(label),
+    context: { colors: [label] }
+  });
+}
+
 const bottomRoutes = {
   ...createDeadRoute("nightmode", Icon.Moon, {
     onClick: () => changeTheme(),
diff --git a/apps/web/src/navigation/routes.js b/apps/web/src/navigation/routes.js
index f99b391ef..344476fd5 100644
--- a/apps/web/src/navigation/routes.js
+++ b/apps/web/src/navigation/routes.js
@@ -11,8 +11,14 @@ export function createRoute(key, component, props = {}, params = {}) {
   };
 }
 
-export function createColorRoute(key, color, props = {}) {
-  return createRoute(key, undefined, { icon: Icon.Circle, color, ...props });
+export function createColorRoute(key, component, color, props = {}) {
+  return createRoute(key, component, {
+    title: key,
+    titleColor: color,
+    icon: Icon.Circle,
+    color,
+    ...props
+  });
 }
 
 export function createNormalRoute(key, component, icon, props = {}) {
diff --git a/apps/web/src/views/Notes.js b/apps/web/src/views/Notes.js
index 3b42d9831..eb5f7abc3 100644
--- a/apps/web/src/views/Notes.js
+++ b/apps/web/src/views/Notes.js
@@ -11,7 +11,13 @@ const Notes = props => {
       itemsLength={props.notes.length}
       button={{
         content: "Make a new note",
-        onClick: sendNewNoteEvent
+        onClick: () =>
+          sendNewNoteEvent({
+            colors: [],
+            tags: [],
+            notebook: {},
+            ...props.context
+          })
       }}
     />
   );
diff --git a/apps/web/src/views/Tags.js b/apps/web/src/views/Tags.js
index c81fd827e..4e580e8c8 100644
--- a/apps/web/src/views/Tags.js
+++ b/apps/web/src/views/Tags.js
@@ -28,7 +28,9 @@ const Tags = props => {
           onClick={() => {
             const notesOfTag = db.notes.tagged(tags[index].title);
             props.navigator.navigate("notes", {
-              notes: notesOfTag,title:tags[index].title
+              notes: notesOfTag,
+              title: tags[index].title,
+              context: { tags: [tags[index].title] }
             });
           }}
         />