diff --git a/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts b/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts
index ef72084e5..2a95a318d 100644
--- a/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts
+++ b/app/src/features/meta-picker/ui/components/meta-picker-entry.styles.ts
@@ -7,6 +7,7 @@ export default EStyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: '1rem',
+        paddingHorizontal: '1.5rem',
     },
     containerBorder: {
         borderBottomWidth: 1,
@@ -21,7 +22,7 @@ export default EStyleSheet.create({
         backgroundColor: '#83c9f4',
     },
     entryText: {
-        fontSize: '1.2rem',
+        fontSize: '1.4rem',
         color: '$textColor',
         fontWeight: '400',
     },
diff --git a/app/src/features/meta-picker/ui/components/search-add-input.styles.ts b/app/src/features/meta-picker/ui/components/search-add-input.styles.ts
index 617bc5199..e2048fdc8 100644
--- a/app/src/features/meta-picker/ui/components/search-add-input.styles.ts
+++ b/app/src/features/meta-picker/ui/components/search-add-input.styles.ts
@@ -3,6 +3,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'
 export default EStyleSheet.create({
     container: {
         margin: '1rem',
+        marginHorizontal: '1.5rem',
         borderRadius: 5,
         backgroundColor: '#f1f1f1',
     },
diff --git a/app/src/features/page-share/ui/components/action-bar-segment.styles.ts b/app/src/features/page-share/ui/components/action-bar-segment.styles.ts
index 9e853e1c7..72c24d28c 100644
--- a/app/src/features/page-share/ui/components/action-bar-segment.styles.ts
+++ b/app/src/features/page-share/ui/components/action-bar-segment.styles.ts
@@ -8,13 +8,21 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: 15,
+        paddingHorizontal: '1.5rem',
         borderBottomWidth: 1,
         borderBottomColor: '#eaeae9',
-        height: 50,
+        height: '4rem',
+    },
+    buttonText: {
+        fontSize: '1.3rem',
+        color: '#007AFF',
+    },
+    buttonTextDisabled: {
+        fontSize: '1.3rem',
+        color: '#C4C4C4',
     },
     mainText: {
-        fontSize: 18,
+        fontSize: '1rem',
         fontWeight: 'bold',
     },
 })
diff --git a/app/src/features/page-share/ui/components/action-bar-segment.tsx b/app/src/features/page-share/ui/components/action-bar-segment.tsx
index a30758148..c6a428e39 100644
--- a/app/src/features/page-share/ui/components/action-bar-segment.tsx
+++ b/app/src/features/page-share/ui/components/action-bar-segment.tsx
@@ -6,6 +6,7 @@ import {
     NativeSyntheticEvent,
     NativeTouchEvent,
     Keyboard,
+    TouchableOpacity,
 } from 'react-native'
 
 import styles from './action-bar-segment.styles'
@@ -19,16 +20,22 @@ export interface Props {
 const ActionBar: React.StatelessComponent<Props> = props => (
     <View style={styles.container} onTouchStart={() => Keyboard.dismiss()}>
         {props.onCancelPress ? (
-            <Button title="Back" onPress={props.onCancelPress} />
+            <TouchableOpacity onPress={props.onCancelPress}>
+                <Text style={styles.buttonText}>Back</Text>
+            </TouchableOpacity>
         ) : (
             <Text style={styles.placeholderBtn}>Back</Text>
         )}
         <Text style={styles.mainText}>{props.children}</Text>
         {props.onConfirmPress &&
             (props.isConfirming ? (
-                <Button title="Saving..." disabled onPress={f => f} />
+                <TouchableOpacity disabled>
+                    <Text style={styles.buttonTextDisabled}>Saving...</Text>
+                </TouchableOpacity>
             ) : (
-                <Button title="Save" onPress={props.onConfirmPress} />
+                <TouchableOpacity onPress={props.onConfirmPress}>
+                    <Text style={styles.buttonText}>Save</Text>
+                </TouchableOpacity>
             ))}
     </View>
 )
diff --git a/app/src/features/page-share/ui/components/note-input-segment.styles.ts b/app/src/features/page-share/ui/components/note-input-segment.styles.ts
index 12801fc83..53b583cd7 100644
--- a/app/src/features/page-share/ui/components/note-input-segment.styles.ts
+++ b/app/src/features/page-share/ui/components/note-input-segment.styles.ts
@@ -6,14 +6,16 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         borderBottomWidth: 1,
         borderBottomColor: '#eaeae9',
-        padding: 15,
+        padding: '2rem',
+        paddingTop: '1rem',
         paddingBottom: 0,
     },
     textInput: {
         height: '100%',
         width: '100%',
-        color: '#545454',
+        color: '$textColor',
         fontWeight: '500',
-        fontSize: 16,
+        fontStyle: 'italic',
+        fontSize: '1.2rem',
     },
 })
diff --git a/app/src/features/page-share/ui/components/note-input-segment.tsx b/app/src/features/page-share/ui/components/note-input-segment.tsx
index 7321efa88..8f7232bae 100644
--- a/app/src/features/page-share/ui/components/note-input-segment.tsx
+++ b/app/src/features/page-share/ui/components/note-input-segment.tsx
@@ -19,6 +19,7 @@ const NoteInput: React.StatelessComponent<Props> = props => (
             placeholder="Add Note"
             multiline
             editable={!props.disabled}
+            placeholderTextColor={'#3a2f45'}
         />
     </View>
 )
diff --git a/app/src/features/page-share/ui/components/share-modal.styles.ts b/app/src/features/page-share/ui/components/share-modal.styles.ts
index 2ee4a00a7..c36f39056 100644
--- a/app/src/features/page-share/ui/components/share-modal.styles.ts
+++ b/app/src/features/page-share/ui/components/share-modal.styles.ts
@@ -9,7 +9,7 @@ export default EStyleSheet.create({
         position: 'absolute',
         left: '2%',
         right: '2%',
-        top: 10,
+        top: '0rem',
         bottom: 200,
         borderRadius: 10,
         height: '50%',
diff --git a/app/src/features/page-share/ui/components/touchable-segment.styles.ts b/app/src/features/page-share/ui/components/touchable-segment.styles.ts
index 026e77ec6..c7ebaa619 100644
--- a/app/src/features/page-share/ui/components/touchable-segment.styles.ts
+++ b/app/src/features/page-share/ui/components/touchable-segment.styles.ts
@@ -6,15 +6,16 @@ export default EStyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingHorizontal: 15,
+        paddingHorizontal: '1.5rem',
     },
     outter: {
         flex: 1,
+        justifyContent: 'center',
     },
     mainText: {
         color: '#3a2f45',
-        fontWeight: '700',
-        fontSize: 14,
+        fontWeight: '600',
+        fontSize: '1.2rem',
         fontFamily: 'Poppins',
     },
     border: {
@@ -22,7 +23,7 @@ export default EStyleSheet.create({
         borderBottomColor: '#eaeae9',
     },
     starIcon: {
-        width: 15,
-        height: 15,
+        width: '1.3rem',
+        height: '1.3rem',
     },
 })