diff --git a/apps/mobile/app/components/container/floating-button.tsx b/apps/mobile/app/components/container/floating-button.tsx
index 4baef0bc5..de3d5f6ce 100644
--- a/apps/mobile/app/components/container/floating-button.tsx
+++ b/apps/mobile/app/components/container/floating-button.tsx
@@ -36,6 +36,7 @@ import { getElevationStyle } from "../../utils/elevation";
 import { AppFontSize, normalize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { hexToRGBA, RGB_Linear_Shade } from "../../utils/colors";
+import AppIcon from "../ui/AppIcon";
 
 interface FloatingButtonProps {
   onPress: () => void;
@@ -140,7 +141,7 @@ const FloatingButton = ({
           borderBottomWidth: 0,
           borderLeftWidth: 0,
           borderRightWidth: 0,
-          backgroundColor: colors.primary.background
+          backgroundColor: colors.primary.accent
         }}
         onPress={onPress}
       >
@@ -148,26 +149,19 @@ const FloatingButton = ({
           style={{
             alignItems: "center",
             justifyContent: "center",
-            height: normalize(size === "small" ? 40 : 60),
-            width: normalize(size === "small" ? 40 : 60),
+            height: 55,
+            width: 55,
             backgroundColor: color
               ? RGB_Linear_Shade(0.87, hexToRGBA(color))
-              : colors.primary.shade,
+              : colors.primary.accent,
             borderRadius: size === "small" ? 15 : 20
           }}
         >
-          <Icon
-            name={
-              icon
-                ? icon
-                : route.name === "Notebooks"
-                ? "notebook-plus"
-                : route.name === "Trash"
-                ? "delete"
-                : "plus"
-            }
-            color={color || colors.primary.accent}
-            size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}
+          <AppIcon
+            name={icon ? icon : route.name === "Trash" ? "trash-alt" : "plus"}
+            iconFamily="notesnook"
+            color={color || colors.primary.accentForeground}
+            size={24}
           />
         </View>
       </TouchableOpacity>
diff --git a/apps/mobile/app/components/list-items/headers/section-header.tsx b/apps/mobile/app/components/list-items/headers/section-header.tsx
index 620b6692b..c2191e603 100644
--- a/apps/mobile/app/components/list-items/headers/section-header.tsx
+++ b/apps/mobile/app/components/list-items/headers/section-header.tsx
@@ -82,7 +82,7 @@ export const SectionHeader = React.memo<
           width: "100%",
           paddingHorizontal: Spacing.LEVEL_3,
           marginBottom: Spacing.LEVEL_3,
-          marginTop: Spacing.LEVEL_3
+          marginTop: index === 0 ? 0 : Spacing.LEVEL_3
         }}
       >
         <View
@@ -95,12 +95,13 @@ export const SectionHeader = React.memo<
           }}
         >
           <Paragraph
-            fontSize="MD"
+            fontSize="SM"
+            fontFamily="MEDIUM"
             style={{
               alignSelf: "center",
               textAlignVertical: "center"
             }}
-            color={colors.secondary.heading}
+            color={colors.secondary.paragraph}
           >
             {!item.title || item.title === ""
               ? screen === "Search"
@@ -180,6 +181,7 @@ export const SectionHeader = React.memo<
                         : "normal"
                     });
                   }}
+                  type={isCompactModeEnabled ? "shade" : undefined}
                   size={16}
                 />
               </>
diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx
index 012cdb4af..343ba3159 100644
--- a/apps/mobile/app/components/list-items/note/index.tsx
+++ b/apps/mobile/app/components/list-items/note/index.tsx
@@ -381,7 +381,7 @@ const NoteItem = ({
             <Heading
               numberOfLines={1}
               color={primaryColors.heading}
-              size={AppFontSize.sm}
+              fontSize="MD"
               style={{
                 flexShrink: 1
               }}
@@ -475,6 +475,7 @@ const NoteItem = ({
               flexWrap: "wrap"
             }}
             color={primaryColors.paragraph}
+            fontSize="SM"
             numberOfLines={2}
           >
             {decode(item.headline, {
@@ -492,21 +493,24 @@ const NoteItem = ({
           {compactMode ? null : (
             <View
               style={{
-                gap: Spacing.LEVEL_0 + 2,
+                gap: Spacing.LEVEL_0,
                 flexDirection: "row"
               }}
             >
               <AppIcon
                 color={colors.secondary.icon}
-                size={13}
+                size={12}
+                style={{
+                  marginTop: 1
+                }}
                 name="calendar"
                 iconFamily="notesnook"
               />
               <Paragraph
                 style={{
-                  fontSize: AppFontSize.xs,
                   color: colors.secondary.paragraph
                 }}
+                fontSize="XS"
               >
                 {getFormattedDate(
                   date,
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
index 5f91ea5ca..dcf5c610b 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx
@@ -73,7 +73,6 @@ const SelectionWrapper = ({
   return (
     <View
       style={{
-        // paddingHorizontal: Spacing.LEVEL_3,
         backgroundColor: isEditingNote ? colors.selected.background : undefined
       }}
     >
@@ -87,16 +86,19 @@ const SelectionWrapper = ({
         customAlpha={!isDark ? -0.02 : 0.02}
         customOpacity={1}
         style={{
-          width: "100%",
-          alignSelf: "center",
-          overflow: "hidden",
-          paddingHorizontal: Spacing.LEVEL_3,
-          borderRadius: 0,
-          alignItems: "flex-start",
-          // paddingVertical: Spacing.LEVEL_2,
-          paddingTop: Spacing.LEVEL_2
+          paddingHorizontal: Spacing.LEVEL_3
         }}
       >
+        {hasGroupHeader ? null : (
+          <View
+            style={{
+              marginVertical: Spacing.LEVEL_2,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.separator,
+              width: "100%"
+            }}
+          />
+        )}
         <View
           style={{
             width: "100%",
@@ -105,14 +107,6 @@ const SelectionWrapper = ({
         >
           {children}
         </View>
-        <View
-          style={{
-            marginTop: Spacing.LEVEL_2,
-            borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
-            width: "100%"
-          }}
-        />
       </Pressable>
     </View>
   );
diff --git a/apps/mobile/app/components/list/card.tsx b/apps/mobile/app/components/list/card.tsx
index a3197234a..8c90314b2 100644
--- a/apps/mobile/app/components/list/card.tsx
+++ b/apps/mobile/app/components/list/card.tsx
@@ -49,8 +49,7 @@ export const Card = ({
       style={{
         width: "100%",
         paddingHorizontal: Spacing.LEVEL_3,
-        marginBottom: Spacing.LEVEL_4,
-        marginTop: Spacing.LEVEL_3
+        marginBottom: Spacing.LEVEL_4
       }}
     >
       <Pressable
@@ -80,7 +79,7 @@ export const Card = ({
             style={{
               width: 34,
               height: 34,
-              borderRadius: Radius.XXS,
+              borderRadius: Radius.XS,
               alignItems: "center",
               justifyContent: "center",
               backgroundColor: colors.secondary.background
diff --git a/apps/mobile/app/components/side-menu/index.tsx b/apps/mobile/app/components/side-menu/index.tsx
index 06e7982c9..09b6e9455 100644
--- a/apps/mobile/app/components/side-menu/index.tsx
+++ b/apps/mobile/app/components/side-menu/index.tsx
@@ -183,8 +183,9 @@ export const SideMenu = React.memo(
           flex: 1,
           backgroundColor: colors.primary.background,
           paddingTop: Math.max(insets.top, Spacing.LEVEL_4),
-          paddingBottom: Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
-          paddingLeft: insets.left,
+          paddingBottom:
+            Math.max(insets.bottom, Spacing.LEVEL_4) + Spacing.LEVEL_1,
+          paddingLeft: insets.left
         }}
       >
         <SimpleTabView
@@ -238,6 +239,7 @@ const TabBar = (props: SimpleTabBarProps) => {
           flexDirection: "row",
           width: "100%",
           justifyContent: "space-between",
+          paddingHorizontal: isSelectionEnabled ? Spacing.LEVEL_5 : 0,
           backgroundColor: colors.primary.background,
           borderTopWidth: 1,
           borderTopColor: colors.primary.separator,
@@ -439,7 +441,11 @@ const TabBar = (props: SimpleTabBarProps) => {
                                     name: "title",
                                     placeholder: "eg. journal",
                                     ref: React.createRef(),
-                                    validators: [validators.required(strings.allFieldsRequired())]
+                                    validators: [
+                                      validators.required(
+                                        strings.allFieldsRequired()
+                                      )
+                                    ]
                                   }
                                 ],
                                 onFormSubmit: async (form) => {
@@ -451,7 +457,10 @@ const TabBar = (props: SimpleTabBarProps) => {
                                     useTagStore.getState().refresh();
                                     return true;
                                   } catch (e) {
-                                    form.setError("title", (e as Error).message);
+                                    form.setError(
+                                      "title",
+                                      (e as Error).message
+                                    );
                                     return false;
                                   }
                                 }
diff --git a/apps/mobile/app/components/side-menu/side-menu-tags.tsx b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
index efdd50bc2..a139bdc1c 100644
--- a/apps/mobile/app/components/side-menu/side-menu-tags.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-tags.tsx
@@ -76,7 +76,7 @@ const TagItem = (props: {
     >
       {item ? (
         <Pressable
-          type={isSelected || isFocused ? "selected" : "transparent"}
+          type={isFocused ? "selected" : "transparent"}
           onLongPress={() => {
             Properties.present(item, false, [
               {
@@ -147,21 +147,16 @@ const TagItem = (props: {
           </View>
 
           {enabled ? (
-            <View
-              style={{
-                width: 22,
-                height: 22,
-                justifyContent: "center",
-                alignItems: "center"
-              }}
-            >
-              <AppIcon
-                name={
-                  isSelected ? "checkbox-outline" : "checkbox-blank-outline"
-                }
-                color={isSelected ? colors.selected.icon : colors.primary.icon}
-              />
-            </View>
+            <AppIcon
+              name={isSelected ? "checkbox" : "box-empty"}
+              iconFamily="notesnook"
+              size={16}
+              color={
+                isSelected
+                  ? [colors.primary.accent, colors.primary.accentForeground]
+                  : colors.primary.icon
+              }
+            />
           ) : (
             <>
               {item?.id && totalNotes.totalNotes?.(item?.id) !== undefined ? (
@@ -322,9 +317,9 @@ export const SideMenuTags = () => {
               style={{
                 width: "100%",
                 backgroundColor: colors.primary.background,
-                borderTopColor: colors.primary.border,
+                borderTopColor: colors.primary.separator,
                 borderTopWidth: 1,
-                paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                paddingVertical: Spacing.LEVEL_2,
                 flexDirection: "row",
                 justifyContent: "space-between"
               }}
diff --git a/apps/mobile/app/components/ui/icon-button/index.tsx b/apps/mobile/app/components/ui/icon-button/index.tsx
index c6ed9bebc..c70b58350 100644
--- a/apps/mobile/app/components/ui/icon-button/index.tsx
+++ b/apps/mobile/app/components/ui/icon-button/index.tsx
@@ -53,10 +53,10 @@ export const IconButton = ({
   style,
   size = AppFontSize.xxl,
   iconStyle = {},
-  left = 10,
-  right = 10,
-  top = 30,
-  bottom = 10,
+  left = 4,
+  right = 4,
+  top = 4,
+  bottom = 4,
   onLongPress,
   tooltipText,
   type = "plain",
diff --git a/apps/mobile/app/hooks/use-actions.tsx b/apps/mobile/app/hooks/use-actions.tsx
index 2907ae2fd..0c40f51ad 100644
--- a/apps/mobile/app/hooks/use-actions.tsx
+++ b/apps/mobile/app/hooks/use-actions.tsx
@@ -416,6 +416,10 @@ export const useActions = ({
       presentDialog({
         title: strings.doActions.delete.unknown(item.type, 1),
         paragraph: strings.actionConfirmations.delete.unknown(item.type, 1),
+        icon: "warning-circle",
+        centered: true,
+        iconFamily: "notesnook",
+        iconType: "error",
         positivePress: async () => {
           if (item.type === "reminder") {
             await db.reminders.remove(item.id);
@@ -434,7 +438,7 @@ export const useActions = ({
           });
         },
         positiveText: strings.delete(),
-        positiveType: "errorShade"
+        positiveType: "accent"
       });
       return;
     }
diff --git a/apps/mobile/app/screens/home/index.tsx b/apps/mobile/app/screens/home/index.tsx
index b8d220aee..4b7cf5d5e 100755
--- a/apps/mobile/app/screens/home/index.tsx
+++ b/apps/mobile/app/screens/home/index.tsx
@@ -31,6 +31,7 @@ import useNavigationStore from "../../stores/use-navigation-store";
 import { useNotes } from "../../stores/use-notes-store";
 import { openEditor } from "../notes/common";
 import LineSeparator from "../../components/ui/seperator/line-separator";
+import { Spacing } from "../../common/design/spacing";
 
 export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
   const [notes, loading] = useNotes();
@@ -67,7 +68,7 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
         onPressDefaultRightButton={openEditor}
       />
 
-      <LineSeparator />
+      <LineSeparator paddingVertical={Spacing.LEVEL_3} />
 
       <DelayLayout wait={loading}>
         <List
diff --git a/apps/mobile/app/utils/functions.ts b/apps/mobile/app/utils/functions.ts
index 3604031e7..7ed382904 100644
--- a/apps/mobile/app/utils/functions.ts
+++ b/apps/mobile/app/utils/functions.ts
@@ -172,6 +172,10 @@ export const deleteItems = async (
       positiveText: strings.delete(),
       negativeText: strings.cancel(),
       paragraph: strings.actionConfirmations.delete.tag(2),
+      icon: "warning-circle",
+      centered: true,
+      iconFamily: "notesnook",
+      iconType: "error",
       positivePress: async () => {
         await db.tags.remove(...itemIds);
         useTagStore.getState().refresh();