diff --git a/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js b/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js
index 2c46f95d4..b7c88f4cd 100644
--- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js
+++ b/apps/mobile/src/components/ActionSheetComponent/ActionSheetTagsSection.js
@@ -151,35 +151,6 @@ export const ActionSheetTagsSection = ({item, close}) => {
     setSuggestions(_suggestions);
   };
 
-  const _renderTag = (tag) => (
-    <TouchableOpacity
-      key={tag}
-      onPress={async () => {
-        let oldProps = {...note};
-        try {
-          await db.notes
-            .note(note.id)
-            .untag(oldProps.tags[oldProps.tags.indexOf(tag)]);
-          sendNoteEditedEvent(note.id, false, true);
-          dispatch({type: Actions.TAGS});
-          localRefresh(note.type);
-        } catch (e) {
-          sendNoteEditedEvent(note.id, false, true);
-        }
-      }}
-      style={{
-        paddingHorizontal: 5,
-        backgroundColor: colors.shade,
-        marginLeft: 5,
-        borderRadius: 2.5,
-      }}>
-      <Paragraph>
-        <Paragraph color={colors.accent}>#</Paragraph>
-        {tag}
-      </Paragraph>
-    </TouchableOpacity>
-  );
-
   return note.id || note.dateCreated ? (
     <View
       style={{
@@ -253,7 +224,9 @@ export const ActionSheetTagsSection = ({item, close}) => {
           </Paragraph>
         ) : null}
 
-        {note && note.tags ? note.tags.map(_renderTag) : null}
+        {note && note.tags
+          ? note.tags.map((item) => <TagItem tag={item} note={note} />)
+          : null}
         <TextInput
           style={{
             minWidth: 100,
@@ -263,7 +236,7 @@ export const ActionSheetTagsSection = ({item, close}) => {
             paddingHorizontal: 5,
             paddingVertical: 0,
             height: 40,
-            fontSize: SIZE.sm,
+            fontSize: SIZE.md,
             textAlignVertical: 'center',
           }}
           testID={notesnook.ids.dialogs.actionsheet.hashtagInput}
@@ -292,3 +265,39 @@ export const ActionSheetTagsSection = ({item, close}) => {
     </View>
   ) : null;
 };
+
+const TagItem = ({tag, note}) => {
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
+
+  const onPress = async () => {
+    let prevNote = {...note};
+    try {
+      await db.notes
+        .note(note.id)
+        .untag(prevNote.tags[prevNote.tags.indexOf(tag)]);
+      sendNoteEditedEvent(note.id, false, true);
+      dispatch({type: Actions.TAGS});
+      localRefresh(note.type);
+    } catch (e) {
+      sendNoteEditedEvent(note.id, false, true);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      key={tag}
+      onPress={onPress}
+      style={{
+        paddingHorizontal: 8,
+        backgroundColor: colors.shade,
+        marginLeft: 5,
+        borderRadius: 100,
+        paddingVertical:2
+      }}>
+      <Paragraph size={SIZE.md} color={colors.accent}>
+        #{tag}
+      </Paragraph>
+    </TouchableOpacity>
+  );
+};
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index 192e9c41a..30fcbda55 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -1,21 +1,20 @@
-import React, {useEffect, useState} from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useTracked} from '../../provider';
-import {Actions} from '../../provider/Actions';
-import {eSendEvent, openVault} from '../../services/EventManager';
-import {getElevation} from '../../utils';
-import {hexToRGBA} from '../../utils/ColorUtils';
-import {db} from '../../utils/DB';
-import {refreshNotesPage} from '../../utils/Events';
-import {SIZE} from '../../utils/SizeUtils';
-import {ActionIcon} from '../ActionIcon';
-import {Button} from '../Button';
-import {simpleDialogEvent} from '../DialogManager/recievers';
-import {TEMPLATE_PERMANANT_DELETE} from '../DialogManager/Templates';
-import {PressableButton} from '../PressableButton';
+import { useTracked } from '../../provider';
+import { Actions } from '../../provider/Actions';
+import { eSendEvent, openVault } from '../../services/EventManager';
+import { getElevation } from '../../utils';
+import { hexToRGBA } from '../../utils/ColorUtils';
+import { db } from '../../utils/DB';
+import { refreshNotesPage } from '../../utils/Events';
+import { SIZE } from '../../utils/SizeUtils';
+import { ActionIcon } from '../ActionIcon';
+import { Button } from '../Button';
+import { simpleDialogEvent } from '../DialogManager/recievers';
+import { TEMPLATE_PERMANANT_DELETE } from '../DialogManager/Templates';
+import { PressableButton } from '../PressableButton';
 import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
 
 const Filler = ({item, background}) => {
   const [state] = useTracked();
@@ -273,7 +272,7 @@ const ActionStrip = ({note, setActionStrip}) => {
               style={{
                 width: 40,
                 height: 40,
-                backgroundColor: item.bg || colors.bg,
+                backgroundColor: item.bg || colors.nav,
                 borderRadius: 100,
                 justifyContent: 'center',
                 alignItems: 'center',