diff --git a/apps/mobile/app/components/dialogs/color-picker/index.tsx b/apps/mobile/app/components/dialogs/color-picker/index.tsx
index a80d1060f..e68d7dfb9 100644
--- a/apps/mobile/app/components/dialogs/color-picker/index.tsx
+++ b/apps/mobile/app/components/dialogs/color-picker/index.tsx
@@ -16,23 +16,24 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { isThemeColor, useThemeColors } from "@notesnook/theme";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import { FlashList } from "react-native-actions-sheet";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { db } from "../../../common/database";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
+import { useRelationStore } from "../../../stores/use-relation-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogContainer from "../../dialog/dialog-container";
+import { Toast } from "../../toast";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { PressableButton } from "../../ui/pressable";
-import { ToastManager } from "../../../services/event-manager";
-import { Toast } from "../../toast";
-import { db } from "../../../common/database";
-import { useRelationStore } from "../../../stores/use-relation-store";
-import { useMenuStore } from "../../../stores/use-menu-store";
+import { Color } from "@notesnook/core";
 const arrayOfColors = [
   "#FF5733",
   "#33FF57",
@@ -142,10 +143,12 @@ const convertToColorObjects = (colors: string[]) => {
 
 const ColorPicker = ({
   visible,
-  setVisible
+  setVisible,
+  onColorAdded
 }: {
   visible: boolean;
   setVisible: (value: boolean) => void;
+  onColorAdded: (color: Color) => void;
 }) => {
   const [selectedColor, setSelectedColor] = useState<string>();
   const { colors } = useThemeColors();
@@ -282,13 +285,17 @@ const ColorPicker = ({
                   new Error(`Color #${selectedColor} already exists`)
                 );
 
-              await db.colors.add({
+              const id = await db.colors.add({
                 title: title.current,
                 colorCode: selectedColor
               });
               useRelationStore.getState().update();
               useMenuStore.getState().setColorNotes();
               setVisible(false);
+              const color = await db.colors.color(id);
+              if (color) {
+                onColorAdded?.(color);
+              }
             }}
             type={selectedColor ? "grayAccent" : "grayBg"}
             width="100%"
diff --git a/apps/mobile/app/components/list/reorderable-list.tsx b/apps/mobile/app/components/list/reorderable-list.tsx
index ec8802ba2..6940b7e0b 100644
--- a/apps/mobile/app/components/list/reorderable-list.tsx
+++ b/apps/mobile/app/components/list/reorderable-list.tsx
@@ -40,6 +40,7 @@ interface ReorderableListProps<T extends { id: string }>
   hiddenItems: string[];
   onHiddenItemsChanged?: (data: string[]) => void;
   canHideItems?: boolean;
+  disableDefaultDrag?: boolean;
 }
 
 function ReorderableList<T extends { id: string }>({
@@ -50,6 +51,7 @@ function ReorderableList<T extends { id: string }>({
   itemOrder = [],
   onHiddenItemsChanged,
   canHideItems = true,
+  disableDefaultDrag,
   ...restProps
 }: ReorderableListProps<T>) {
   const { colors } = useThemeColors();
@@ -158,6 +160,7 @@ function ReorderableList<T extends { id: string }>({
               dragging: true
             })
           }
+          itemsDraggable={disableDefaultDrag ? dragging : true}
           lockItemDragsToMainAxis
           onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
             const newOrder = getOrderedItems().map((item) => item.id);
diff --git a/apps/mobile/app/components/properties/color-tags.tsx b/apps/mobile/app/components/properties/color-tags.tsx
index 1bc8fdced..dfedad84c 100644
--- a/apps/mobile/app/components/properties/color-tags.tsx
+++ b/apps/mobile/app/components/properties/color-tags.tsx
@@ -20,7 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Color, Note } from "@notesnook/core/dist/types";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { View } from "react-native";
+import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
@@ -32,9 +33,9 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { refreshNotesPage } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import ColorPicker from "../dialogs/color-picker";
-import { PressableButton } from "../ui/pressable";
-import { FlashList } from "react-native-actions-sheet";
 import { Button } from "../ui/button";
+import { PressableButton } from "../ui/pressable";
+import NativeTooltip from "../../utils/tooltip";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -70,9 +71,12 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
       testID={notesnook.ids.dialogs.actionsheet.color(item.colorCode)}
       key={item.id}
       onPress={toggleColor}
+      onLongPress={(event) => {
+        NativeTooltip.show(event, item.title, NativeTooltip.POSITIONS.TOP);
+      }}
       customStyle={{
-        width: 30,
-        height: 30,
+        width: 35,
+        height: 35,
         borderRadius: 100,
         justifyContent: "center",
         alignItems: "center",
@@ -103,60 +107,24 @@ export const ColorTags = ({ item }: { item: Note }) => {
 
   return (
     <>
-      <ColorPicker visible={visible} setVisible={setVisible} />
+      <ColorPicker
+        visible={visible}
+        setVisible={setVisible}
+        onColorAdded={async (color) => {
+          await db.relations.add(color, note);
+          useRelationStore.getState().update();
+          useMenuStore.getState().setColorNotes();
+          Navigation.queueRoutesForUpdate();
+          eSendEvent(refreshNotesPage);
+        }}
+      />
       <View
         style={{
           flexGrow: isTablet ? undefined : 1,
-          paddingRight: 0,
-          flexDirection: "row"
+          flexDirection: "row",
+          marginLeft: 5
         }}
       >
-        {!colorNotes || !colorNotes.length ? (
-          <Button
-            onPress={async () => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
-            buttonType={{
-              text: colors.primary.accent
-            }}
-            title="Add color"
-            type="grayBg"
-            icon="plus"
-            iconPosition="right"
-            height={30}
-            fontSize={SIZE.xs}
-            style={{
-              marginRight: 5,
-              borderRadius: 100,
-              paddingHorizontal: 8
-            }}
-          />
-        ) : (
-          <PressableButton
-            customStyle={{
-              width: 30,
-              height: 30,
-              borderRadius: 100,
-              justifyContent: "center",
-              alignItems: "center",
-              marginRight: 5
-            }}
-            type="grayBg"
-            onPress={() => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
-          >
-            <Icon
-              testID="icon-plus"
-              name="plus"
-              color={colors.primary.icon}
-              size={SIZE.lg}
-            />
-          </PressableButton>
-        )}
-
         <FlashList
           data={colorNotes}
           estimatedItemSize={30}
@@ -164,6 +132,53 @@ export const ColorTags = ({ item }: { item: Note }) => {
           extraData={updater}
           renderItem={renderItem}
           showsHorizontalScrollIndicator={false}
+          ListFooterComponent={
+            !colorNotes || !colorNotes.length ? (
+              <Button
+                onPress={async () => {
+                  useSettingStore.getState().setSheetKeyboardHandler(false);
+                  setVisible(true);
+                }}
+                buttonType={{
+                  text: colors.primary.accent
+                }}
+                title="Add color"
+                type="grayBg"
+                icon="plus"
+                iconPosition="right"
+                height={30}
+                fontSize={SIZE.xs}
+                style={{
+                  marginRight: 5,
+                  borderRadius: 100,
+                  paddingHorizontal: 8
+                }}
+              />
+            ) : (
+              <PressableButton
+                customStyle={{
+                  width: 35,
+                  height: 35,
+                  borderRadius: 100,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  marginRight: 5
+                }}
+                type="grayBg"
+                onPress={() => {
+                  useSettingStore.getState().setSheetKeyboardHandler(false);
+                  setVisible(true);
+                }}
+              >
+                <Icon
+                  testID="icon-plus"
+                  name="plus"
+                  color={colors.primary.icon}
+                  size={SIZE.lg}
+                />
+              </PressableButton>
+            )
+          }
         />
       </View>
     </>
diff --git a/apps/mobile/app/components/properties/date-meta.js b/apps/mobile/app/components/properties/date-meta.js
index 3febd7f7b..29f02f381 100644
--- a/apps/mobile/app/components/properties/date-meta.js
+++ b/apps/mobile/app/components/properties/date-meta.js
@@ -78,7 +78,7 @@ export const DateMeta = ({ item }) => {
         paddingVertical: 5,
         marginTop: 5,
         borderTopWidth: 1,
-        borderTopColor: colors.secondary.background,
+        borderTopColor: colors.primary.border,
         paddingHorizontal: 12
       }}
     >
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index 82c560efd..a33d5d6b6 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -34,6 +34,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { TagStrip, Tags } from "./tags";
+import { PressableButton } from "../ui/pressable";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -80,17 +81,38 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
               paddingHorizontal: 12,
               marginTop: 5,
               zIndex: 10,
-              marginBottom: 6
+              marginBottom: 5
             }}
           >
-            <Heading size={SIZE.lg}>
-              {item.type === "tag" && !isColor ? (
-                <Heading size={SIZE.xl} color={colors.primary.accent}>
-                  #
-                </Heading>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center"
+              }}
+            >
+              {item.type === "color" ? (
+                <PressableButton
+                  type="accent"
+                  accentColor={item.colorCode}
+                  accentText={colors.static.white}
+                  customStyle={{
+                    width: 30,
+                    height: 30,
+                    borderRadius: 100,
+                    marginRight: 10
+                  }}
+                />
               ) : null}
-              {item.title}
-            </Heading>
+
+              <Heading size={SIZE.lg}>
+                {item.type === "tag" && !isColor ? (
+                  <Heading size={SIZE.xl} color={colors.primary.accent}>
+                    #
+                  </Heading>
+                ) : null}
+                {item.title}
+              </Heading>
+            </View>
 
             {item.type === "notebook" && item.description ? (
               <Paragraph>{item.description}</Paragraph>
@@ -118,8 +140,13 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
 
           <DateMeta item={item} />
           <Line bottom={0} />
-          {item.type === "note" ? <Tags close={close} item={item} /> : null}
 
+          {item.type === "note" ? (
+            <>
+              <Tags close={close} item={item} />
+              <Line bottom={0} />
+            </>
+          ) : null}
           {item.type === "note" ? (
             <View
               style={{
@@ -201,22 +228,14 @@ Properties.present = async (item, buttons = [], isSheet) => {
         "add-notebook"
       ]);
       break;
-    // case "topic":
-    //   props[0] = db.notebooks
-    //     .notebook(item.notebookId)
-    //     .topics.topic(item.id)._topic;
-    //   props.push([
-    //     "move-notes",
-    //     "edit-topic",
-    //     "add-shortcut",
-    //     "trash",
-    //     "default-topic"
-    //   ]);
-    //   break;
     case "tag":
       props[0] = await db.tags.tag(item.id);
       props.push(["add-shortcut", "trash", "rename-tag"]);
       break;
+    case "color":
+      props[0] = await db.colors.color(item.id);
+      props.push(["trash", "rename-color", "reorder"]);
+      break;
     case "reminder": {
       props[0] = await db.reminders.reminder(item.id);
       props.push(["edit-reminder", "trash", "disable-reminder"]);
diff --git a/apps/mobile/app/components/properties/items.js b/apps/mobile/app/components/properties/items.js
index fecf9a726..4dec64c4c 100644
--- a/apps/mobile/app/components/properties/items.js
+++ b/apps/mobile/app/components/properties/items.js
@@ -218,7 +218,8 @@ export const Items = ({ item, buttons, close }) => {
       <ScrollView
         horizontal
         style={{
-          paddingHorizontal: 12
+          paddingHorizontal: 12,
+          marginTop: 6
         }}
       >
         {topBarItems.map(renderTopBarItem)}
@@ -229,7 +230,6 @@ export const Items = ({ item, buttons, close }) => {
         keyExtractor={(item) => item.title}
         key={columnItemsCount + "key"}
         numColumns={columnItemsCount}
-        disableVirtualization={true}
         style={{
           marginTop: item.type !== "note" ? 10 : 0,
           paddingTop: 10,
diff --git a/apps/mobile/app/components/properties/tags.js b/apps/mobile/app/components/properties/tags.js
index 59e7d4e5b..d118aefc2 100644
--- a/apps/mobile/app/components/properties/tags.js
+++ b/apps/mobile/app/components/properties/tags.js
@@ -35,8 +35,6 @@ export const Tags = ({ item, close }) => {
     <View
       style={{
         marginTop: 5,
-        paddingTop: 6,
-        paddingBottom: 6,
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
@@ -53,16 +51,15 @@ export const Tags = ({ item, close }) => {
         buttonType={{
           text: colors.primary.accent
         }}
-        title="Add tags"
+        title="Add tag"
         type="grayBg"
         icon="plus"
         iconPosition="right"
         height={30}
-        fontSize={SIZE.xs}
+        fontSize={SIZE.sm - 1}
         style={{
-          marginRight: 5,
-          borderRadius: 100,
-          paddingHorizontal: 8
+          height: 35,
+          borderRadius: 100
         }}
       />
       <ColorTags item={item} />
diff --git a/apps/mobile/app/components/side-menu/color-section.tsx b/apps/mobile/app/components/side-menu/color-section.tsx
index d13a2e8ff..6e1cdd1a7 100644
--- a/apps/mobile/app/components/side-menu/color-section.tsx
+++ b/apps/mobile/app/components/side-menu/color-section.tsx
@@ -33,6 +33,7 @@ import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import ReorderableList from "../list/reorderable-list";
+import { Properties } from "../properties";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -57,6 +58,7 @@ export const ColorSection = React.memo(
         onHiddenItemsChanged={(data) => {
           db.settings.setSideBarHiddenItems("colors", data);
         }}
+        disableDefaultDrag={true}
         itemOrder={db.settings.getSideBarOrder("colors")}
         hiddenItems={db.settings.getSideBarHiddenItems("colors")}
         alwaysBounceVertical={false}
@@ -91,22 +93,7 @@ const ColorItem = React.memo(
     };
 
     const onLongPress = () => {
-      presentDialog({
-        title: "Rename color",
-        input: true,
-        inputPlaceholder: "Enter name for this color",
-        defaultValue: item.title,
-        paragraph: "You are renaming the color " + item.title,
-        positivePress: async (value) => {
-          if (!value || value.trim().length === 0) return;
-          await db.colors.add({
-            id: item.id,
-            title: value
-          });
-          setColorNotes();
-        },
-        positiveText: "Rename"
-      });
+      Properties.present(item);
     };
 
     return (
diff --git a/apps/mobile/app/hooks/use-actions.tsx b/apps/mobile/app/hooks/use-actions.tsx
index 6c0d09815..bb3742258 100644
--- a/apps/mobile/app/hooks/use-actions.tsx
+++ b/apps/mobile/app/hooks/use-actions.tsx
@@ -62,6 +62,7 @@ import { eOpenLoginDialog } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
+import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 
 export const useActions = ({
   close,
@@ -120,7 +121,7 @@ export const useActions = ({
   useEffect(() => {
     const sub = eSubscribeEvent(Notifications.Events.onUpdate, onUpdate);
     return () => {
-      sub.unsubscribe();
+      sub?.unsubscribe();
     };
   }, [item, onUpdate]);
 
@@ -205,23 +206,50 @@ export const useActions = ({
     });
   }
 
-  async function deleteItem() {
-    if (!checkItemSynced()) return;
+  async function renameColor() {
+    if (item.type !== "color") return;
     close();
-    if (item.type === "tag" || item.type === "reminder") {
-      await sleep(300);
+    await sleep(300);
+    presentDialog({
+      title: "Rename color",
+      input: true,
+      inputPlaceholder: "Enter name for this color",
+      defaultValue: item.title,
+      paragraph: "You are renaming the color " + item.title,
+      positivePress: async (value) => {
+        if (!value || value.trim().length === 0) return;
+        await db.colors.add({
+          id: item.id,
+          title: value
+        });
+        useMenuStore.getState().setColorNotes();
+      },
+      positiveText: "Rename"
+    });
+  }
+
+  const deleteItem = async () => {
+    close();
+    await sleep(300);
+
+    if (
+      item.type === "tag" ||
+      item.type === "reminder" ||
+      item.type === "color"
+    ) {
       presentDialog({
         title: `Delete ${item.type}`,
-        paragraph:
-          item.type === "reminder"
-            ? "This reminder will be removed"
-            : "This tag will be removed from all notes.",
+        paragraph: `Are you sure you want to delete this ${item.type}?`,
         positivePress: async () => {
           if (item.type === "reminder") {
             await db.reminders.remove(item.id);
+          } else if (item.type === "color") {
+            await db.colors.remove(item.id);
+            useMenuStore.getState().setColorNotes();
           } else {
             await db.tags.remove(item.id);
           }
+
           setImmediate(() => {
             useTagStore.getState().refresh();
             Navigation.queueRoutesForUpdate();
@@ -234,8 +262,7 @@ export const useActions = ({
       return;
     }
 
-    if (item.type === "note" && item.locked) {
-      await sleep(300);
+    if (item.type === "note" && (await db.vaults.itemExists(item))) {
       openVault({
         deleteNote: true,
         novault: true,
@@ -246,14 +273,12 @@ export const useActions = ({
       });
     } else {
       try {
-        close();
-        await sleep(300);
         await deleteItems([item.id], item.type);
       } catch (e) {
         console.error(e);
       }
     }
-  }
+  };
 
   async function deleteTrashItem() {
     if (item.type !== "trash") return;
@@ -295,17 +320,6 @@ export const useActions = ({
     type?: string;
     color?: string;
   }[] = [
-    {
-      id: "trash",
-      title:
-        item.type !== "notebook" && item.type !== "note"
-          ? "Delete " + item.type
-          : "Move to trash",
-      icon: "delete-outline",
-      type: "error",
-      func: deleteItem
-    }
-
     // {
     //   id: "ReferencedIn",
     //   title: "References",
@@ -325,12 +339,32 @@ export const useActions = ({
   if (item.type === "tag") {
     actions.push({
       id: "rename-tag",
-      title: "Rename tag",
+      title: "Rename",
       icon: "square-edit-outline",
       func: renameTag
     });
   }
 
+  if (item.type === "color") {
+    actions.push({
+      id: "rename-color",
+      title: "Rename",
+      icon: "square-edit-outline",
+      func: renameColor
+    });
+
+    actions.push({
+      id: "reorder",
+      title: "Reorder",
+      icon: "sort-ascending",
+      func: () => {
+        useSideBarDraggingStore.setState({
+          dragging: true
+        });
+      }
+    });
+  }
+
   if (item.type === "reminder") {
     actions.push(
       {
@@ -864,7 +898,18 @@ export const useActions = ({
       .then((notebook) => {
         setNoteInCurrentNotebook(!!notebook);
       });
-  }, []);
+  }, [item]);
+
+  actions.push({
+    id: "trash",
+    title:
+      item.type !== "notebook" && item.type !== "note"
+        ? "Delete " + item.type
+        : "Move to trash",
+    icon: "delete-outline",
+    type: "error",
+    func: deleteItem
+  });
 
   return actions;
 };
diff --git a/packages/core/src/collections/vaults.ts b/packages/core/src/collections/vaults.ts
index 468b9c718..a8e761eb8 100644
--- a/packages/core/src/collections/vaults.ts
+++ b/packages/core/src/collections/vaults.ts
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import Database from "../api";
-import { Vault } from "../types";
+import { ItemReference, Vault } from "../types";
 import { ICollection } from "./collection";
 import { SQLCollection } from "../database/sql-collection";
 import { getId } from "../utils/id";
@@ -80,4 +80,8 @@ export class Vaults implements ICollection {
       this.db.options?.batchSize
     );
   }
+
+  async itemExists(reference: ItemReference) {
+    return (await this.db.relations.to(reference, "vault").count()) > 0;
+  }
 }