diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js
index 137a63b6f..10ccc036f 100644
--- a/apps/mobile/src/components/AddTopicDialog/index.js
+++ b/apps/mobile/src/components/AddTopicDialog/index.js
@@ -8,6 +8,9 @@ import {eSendEvent} from '../../services/eventManager';
 import {eOnNewTopicAdded} from '../../services/events';
 import {Toast} from '../Toast';
 import {Button} from '../Button';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogHeader from '../Dialog/dialog-header';
+import DialogButtons from '../Dialog/dialog-buttons';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
@@ -31,7 +34,7 @@ export class AddTopicDialog extends React.Component {
     } else {
       let topic = this.props.toEdit;
       topic.title = this.title;
-    
+
       await db.notebooks.notebook(topic.notebookId).topics.add(topic);
     }
     this.close();
@@ -44,6 +47,7 @@ export class AddTopicDialog extends React.Component {
     });
   }
   close() {
+    refs = [];
     this.title = null;
     this.setState({
       visible: false,
@@ -55,116 +59,66 @@ export class AddTopicDialog extends React.Component {
     const {colors, toEdit} = this.props;
 
     return (
-      <Modal
-        visible={visible}
-        animated
-        animationType="fade"
-        transparent={true}
+      <BaseDialog
         onShow={() => {
           this.titleRef.current?.focus();
         }}
-        onRequestClose={() => {
-          refs = [];
-          this.close();
-        }}>
+        visible={visible}
+        onRequestClose={this.close}>
         <View
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
+            ...getElevation(5),
+            width: '80%',
+            maxHeight: 350,
+            borderRadius: 5,
+            backgroundColor: colors.bg,
+            paddingHorizontal: ph,
+            paddingVertical: pv,
           }}>
-          <TouchableOpacity
-            onPress={() => this.close()}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
+          <DialogHeader
+            icon="book-outline"
+            title={toEdit ? 'Edit Topic' : 'Add New Topic'}
           />
 
-          <View
+          <TextInput
+            ref={this.titleRef}
             style={{
-              ...getElevation(5),
-              width: '80%',
-              maxHeight: 350,
-              borderRadius: 5,
-              backgroundColor: colors.bg,
+              padding: pv,
+              borderWidth: 1.5,
+              borderColor: titleFocused ? colors.accent : colors.nav,
               paddingHorizontal: ph,
-              paddingVertical: pv,
-            }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <Icon name="book-outline" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.bold,
-                  marginLeft: 5,
-                  fontSize: SIZE.md,
-                }}>
-                {toEdit ? 'Edit Topic' : 'Add New Topic'}
-              </Text>
-            </View>
+              borderRadius: 5,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+              color: colors.pri,
+              marginTop: 20,
+            }}
+            onFocus={() => {
+              this.setState({
+                titleFocused: true,
+              });
+            }}
+            onBlur={() => {
+              this.setState({
+                titleFocused: true,
+              });
+            }}
+            defaultValue={toEdit ? toEdit.title : null}
+            onChangeText={(value) => {
+              this.title = value;
+            }}
+            placeholder="Enter title of topic"
+            placeholderTextColor={colors.icon}
+          />
 
-            <TextInput
-              ref={this.titleRef}
-              style={{
-                padding: pv,
-                borderWidth: 1.5,
-                borderColor: titleFocused ? colors.accent : colors.nav,
-                paddingHorizontal: ph,
-                borderRadius: 5,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                color: colors.pri,
-                marginTop: 20,
-              }}
-              onFocus={() => {
-                this.setState({
-                  titleFocused: true,
-                });
-              }}
-              onBlur={() => {
-                this.setState({
-                  titleFocused: true,
-                });
-              }}
-              defaultValue={toEdit ? toEdit.title : null}
-              onChangeText={(value) => {
-                this.title = value;
-              }}
-              placeholder="Enter title of topic"
-              placeholderTextColor={colors.icon}
-            />
-
-            <View
-              style={{
-                justifyContent: 'space-around',
-                alignItems: 'center',
-                flexDirection: 'row',
-                marginTop: 20,
-              }}>
-              <Button
-                activeOpacity={opacity}
-                onPress={async () => await this.addNewTopic()}
-                title={toEdit ? 'Save' : 'Add'}
-              />
-              <Button
-                activeOpacity={opacity}
-                onPress={() => this.close()}
-                title="Cancel"
-              />
-            </View>
-          </View>
+          <DialogButtons
+            positiveTitle={toEdit ? 'Save' : 'Add'}
+            onPressNegative={this.close}
+            onPressPositive={this.addNewTopic}
+          />
         </View>
         <Toast context="local" />
-      </Modal>
+      </BaseDialog>
     );
   }
 }
diff --git a/apps/mobile/src/components/Dialog/BaseDialog.js b/apps/mobile/src/components/Dialog/BaseDialog.js
new file mode 100644
index 000000000..fa8fdb106
--- /dev/null
+++ b/apps/mobile/src/components/Dialog/BaseDialog.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {useTracked} from '../../provider';
+
+const BaseDialog = ({visible, onRequestClose, children, onShow}) => {
+  const [state, dispatch] = useTracked();
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animated
+      statusBarTranslucent
+      onShow={onShow}
+      animationType="fade"
+      onRequestClose={onRequestClose}>
+      <View
+        style={[
+          {
+            backgroundColor: state.colors.night
+              ? 'rgba(255,255,255,0.15)'
+              : 'rgba(0,0,0,0.3)',
+          },
+          styles.backdrop,
+        ]}>
+        <TouchableOpacity
+          onPress={onRequestClose}
+          style={styles.overlayButton}
+        />
+        {children}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayButton: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+});
+
+export default BaseDialog;
diff --git a/apps/mobile/src/components/Dialog/DialogButtons.js b/apps/mobile/src/components/Dialog/DialogButtons.js
new file mode 100644
index 000000000..13cb4c1c7
--- /dev/null
+++ b/apps/mobile/src/components/Dialog/DialogButtons.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTracked} from '../../provider';
+import {Button} from '../Button';
+
+const DialogButtons = ({
+  onPressPositive,
+  onPressNegative,
+  positiveTitle,
+  negativeTitle = 'Cancel',
+}) => {
+  return (
+    <View
+      style={styles.container}>
+      <Button onPress={onPressPositive} title={positiveTitle} />
+      <Button onPress={onPressNegative} title={negativeTitle} />
+    </View>
+  );
+};
+
+export default DialogButtons;
+
+const styles = StyleSheet.create({
+  container:{
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop: 20,
+  }
+})
diff --git a/apps/mobile/src/components/Dialog/DialogHeader.js b/apps/mobile/src/components/Dialog/DialogHeader.js
new file mode 100644
index 000000000..25d12245e
--- /dev/null
+++ b/apps/mobile/src/components/Dialog/DialogHeader.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTracked} from '../../provider';
+
+const DialogHeader = ({icon, title}) => {
+  const [state, dispatch] = useTracked();
+  const colors = state.colors;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      {icon ? <Icon name={icon} color={colors.accent} size={SIZE.lg} /> : null}
+      <Text
+        style={{
+          color: colors.accent,
+          fontFamily: WEIGHT.bold,
+          marginLeft: 5,
+          fontSize: SIZE.md,
+        }}>
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+export default DialogHeader
diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/Dialog/index.js
index 2f8b9b247..edae460a8 100644
--- a/apps/mobile/src/components/Dialog/index.js
+++ b/apps/mobile/src/components/Dialog/index.js
@@ -1,20 +1,22 @@
 import React, {Component} from 'react';
 import {Modal, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
+  eApplyChanges,
   eClearEditor,
   eCloseFullscreenEditor,
+  eOnLoadNote,
   eOnNewTopicAdded,
-  eApplyChanges, eOnLoadNote
 } from '../../services/events';
 import NavigationService from '../../services/NavigationService';
 import {db, DDS, getElevation, history, ToastEvent} from '../../utils/utils';
+import {Button} from '../Button';
 import {dialogActions} from '../DialogManager/dialogActions';
 import {updateEvent} from '../DialogManager/recievers';
-import {Button} from '../Button';
+import BaseDialog from './base-dialog';
 
 export class Dialog extends Component {
   constructor(props) {
@@ -134,7 +136,7 @@ export class Dialog extends Component {
         break;
       }
       case dialogActions.ACTION_NEW_NOTE: {
-        eSendEvent(eOnLoadNote, {type:"new"});
+        eSendEvent(eOnLoadNote, {type: 'new'});
         this.hide();
         break;
       }
@@ -205,93 +207,70 @@ export class Dialog extends Component {
     const {title, paragraph, positiveText, negativeText, icon} = template;
     const {visible} = this.state;
     return (
-      <Modal
-        visible={visible}
-        transparent={true}
-        animated
-        animationType="fade"
-        onRequestClose={() => this.setState({visible: false})}>
+      <BaseDialog visible={visible} onRequestClose={this.hide}>
         <View
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
+            ...getElevation(5),
+            width: DDS.isTab ? '40%' : '80%',
+            maxHeight: 350,
+            borderRadius: 5,
+            backgroundColor: colors.bg,
+            paddingHorizontal: ph,
+            paddingVertical: pv,
           }}>
-          <TouchableOpacity
-            onPress={this.hide}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
-          />
           <View
             style={{
-              ...getElevation(5),
-              width: DDS.isTab ? '40%' : '80%',
-              maxHeight: 350,
-              borderRadius: 5,
-              backgroundColor: colors.bg,
-              paddingHorizontal: ph,
-              paddingVertical: pv,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
             }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              {icon ? (
-                <Icon name={icon} color={colors.accent} size={SIZE.lg} />
-              ) : null}
-
-              {template.noTitle ? null : (
-                <Text
-                  style={{
-                    color: colors.accent,
-                    fontFamily: WEIGHT.bold,
-                    marginLeft: 5,
-                    fontSize: SIZE.md,
-                  }}>
-                  {title}
-                </Text>
-              )}
-            </View>
-
-            {paragraph ? (
-              <Text
-                style={{
-                  color: colors.icon,
-                  fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.sm - 2,
-                  textAlign: 'center',
-                  marginTop: 10,
-                }}>
-                {this.state.selectedItemsLength > 0
-                  ? 'Delete ' +
-                    this.state.selectedItemsLength +
-                    ' selected items?'
-                  : paragraph}
-              </Text>
+            {icon ? (
+              <Icon name={icon} color={colors.accent} size={SIZE.lg} />
             ) : null}
 
-            {template.noButtons ? null : (
-              <View
+            {template.noTitle ? null : (
+              <Text
                 style={{
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  flexDirection: 'row',
-                  marginTop: 20,
+                  color: colors.accent,
+                  fontFamily: WEIGHT.bold,
+                  marginLeft: 5,
+                  fontSize: SIZE.md,
                 }}>
-                <Button onPress={this._onClose} title={negativeText} grayed />
-                <Button onPress={this._onPress} title={positiveText} />
-              </View>
+                {title}
+              </Text>
             )}
           </View>
+
+          {paragraph ? (
+            <Text
+              style={{
+                color: colors.icon,
+                fontFamily: WEIGHT.regular,
+                fontSize: SIZE.xs + 1,
+                textAlign: 'center',
+              }}>
+              {this.state.selectedItemsLength > 0
+                ? 'Delete ' +
+                  this.state.selectedItemsLength +
+                  ' selected items?'
+                : paragraph}
+            </Text>
+          ) : null}
+
+          {template.noButtons ? null : (
+            <View
+              style={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexDirection: 'row',
+                marginTop: 20,
+              }}>
+              <Button onPress={this._onClose} title={negativeText} grayed />
+              <Button onPress={this._onPress} title={positiveText} />
+            </View>
+          )}
         </View>
-      </Modal>
+      </BaseDialog>
     );
   }
 }
diff --git a/apps/mobile/src/components/ExportDialog/index.js b/apps/mobile/src/components/ExportDialog/index.js
index 554f90c05..d004560d7 100644
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -14,6 +14,8 @@ import {useTracked} from '../../provider';
 import storage from '../../utils/storage';
 import {DDS, getElevation, ToastEvent} from '../../utils/utils';
 import {Button} from '../Button/index';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogHeader from '../Dialog/dialog-header';
 import {Loading} from '../Loading';
 import Seperator from '../Seperator';
 
@@ -112,94 +114,70 @@ const ExportDialog = () => {
   ];
 
   return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animated
-      animationType="fade"
-      onRequestClose={close}>
-      <View style={styles.wrapper}>
-        <TouchableOpacity onPress={close} style={styles.overlay} />
-        <View
-          style={[
-            {
-              width: DDS.isTab ? '40%' : '80%',
-              backgroundColor: colors.bg,
-            },
-            styles.container,
-          ]}>
-          <View style={styles.headingContainer}>
-            <Icon name="export" color={colors.accent} size={SIZE.lg} />
-            <Text style={[{color: colors.accent}, styles.heading]}>
-              Export
-              {notes.length === 0 || notes.length === 1
-                ? ''
-                : ' ' + notes.length}{' '}
-              Note
-            </Text>
-          </View>
+    <BaseDialog onRequestClose={close} visible={visible}>
+      <View
+        style={[
+          {
+            width: DDS.isTab ? '40%' : '80%',
+            backgroundColor: colors.bg,
+          },
+          styles.container,
+        ]}>
+        <DialogHeader icon="export" title="Export Note" />
 
-          <Seperator half />
-          {exporting ? (
-            <Loading
-              done={complete}
-              doneText={doneText}
-              onDone={() => {
-                FileViewer.open(result.filePath, {
-                  showOpenWithDialog: true,
-                  showAppsSuggestions: true,
-                }).catch((e) => {
-                  console.log(e);
-                  ToastEvent.show(
-                    `No application found to open ${result.name} file`,
-                  );
-                });
-                close();
-              }}
-              tagline="Exporting notes"
-            />
-          ) : (
-            <>
-              <Text
-                style={[
-                  {
-                    color: colors.pri,
-                    fontSize: SIZE.xs + 1,
-                    alignSelf: 'center',
-                  },
-                ]}>
-                Export your note in any of the following formats.
-              </Text>
-              <View style={styles.buttonContainer}>
-                {actions.map((item) => (
-                  <Fragment key={item.title}>
-                    <Seperator half />
-                    <Button
-                      width="100%"
-                      title={item.title}
-                      icon={item.icon}
-                      activeOpacity={opacity}
-                      onPress={item.func}
-                    />
-                  </Fragment>
-                ))}
-              </View>
-            </>
-          )}
-        </View>
+        <Seperator half />
+        {exporting ? (
+          <Loading
+            done={complete}
+            doneText={doneText}
+            onDone={() => {
+              FileViewer.open(result.filePath, {
+                showOpenWithDialog: true,
+                showAppsSuggestions: true,
+              }).catch((e) => {
+                console.log(e);
+                ToastEvent.show(
+                  `No application found to open ${result.name} file`,
+                );
+              });
+              close();
+            }}
+            tagline="Exporting notes"
+          />
+        ) : (
+          <>
+            <Text
+              style={[
+                {
+                  color: colors.pri,
+                  fontSize: SIZE.xs + 1,
+                  alignSelf: 'center',
+                },
+              ]}>
+              Export your note in any of the following formats.
+            </Text>
+            <View style={styles.buttonContainer}>
+              {actions.map((item) => (
+                <Fragment key={item.title}>
+                  <Seperator half />
+                  <Button
+                    width="100%"
+                    title={item.title}
+                    icon={item.icon}
+                    activeOpacity={opacity}
+                    onPress={item.func}
+                  />
+                </Fragment>
+              ))}
+            </View>
+          </>
+        )}
       </View>
-    </Modal>
+    </BaseDialog>
   );
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   container: {
     ...getElevation(5),
     maxHeight: 350,
@@ -207,20 +185,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: ph,
     paddingVertical: pv,
   },
-  headingContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   buttonContainer: {
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  heading: {
-    fontFamily: WEIGHT.bold,
-    marginLeft: 5,
-    fontSize: SIZE.md,
-  },
   button: {
     paddingVertical: pv,
     paddingHorizontal: ph,
diff --git a/apps/mobile/src/components/VaultDialog/index.js b/apps/mobile/src/components/VaultDialog/index.js
index 4094b040d..f55aab84b 100644
--- a/apps/mobile/src/components/VaultDialog/index.js
+++ b/apps/mobile/src/components/VaultDialog/index.js
@@ -19,6 +19,9 @@ import {
 import {openEditorAnimation} from '../../utils/animations';
 import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
 import {Button} from '../Button/index';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogButtons from '../Dialog/dialog-buttons';
+import DialogHeader from '../Dialog/dialog-header';
 import {updateEvent} from '../DialogManager/recievers';
 import {Toast} from '../Toast';
 const passInputRef = createRef();
@@ -251,98 +254,100 @@ export class VaultDialog extends Component {
     } = this.state;
 
     return (
-      <Modal
+      <BaseDialog
         onShow={() => {
           passInputRef.current?.focus();
         }}
-        visible={visible}
-        transparent={true}
-        onRequestClose={this.close}>
+        onRequestClose={this.close}
+        visible={visible}>
         <View
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: colors.night
-              ? 'rgba(255,255,255,0.3)'
-              : 'rgba(0,0,0,0.3)',
-            justifyContent: 'center',
-            alignItems: 'center',
+            ...getElevation(5),
+            width: '80%',
+            maxHeight: 350,
+            borderRadius: 5,
+            backgroundColor: colors.bg,
+            paddingHorizontal: ph,
+            paddingVertical: pv,
           }}>
-          <View
-            style={{
-              ...getElevation(5),
-              width: '80%',
-              maxHeight: 350,
-              borderRadius: 5,
-              backgroundColor: colors.bg,
-              paddingHorizontal: ph,
-              paddingVertical: pv,
-            }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <Icon name="shield" color={colors.accent} size={SIZE.lg} />
-              <Text
-                style={{
-                  color: colors.accent,
-                  fontFamily: WEIGHT.bold,
-                  marginLeft: 5,
-                  fontSize: SIZE.md,
-                }}>
-                {!novault
-                  ? 'Create vault'
-                  : note.locked
-                  ? this.state.deleteNote
-                    ? 'Delete note'
-                    : this.state.share
-                    ? 'Share note'
-                    : this.state.goToEditor
-                    ? 'Unlock note'
-                    : 'Unlock note'
-                  : 'Lock note'}
-              </Text>
-            </View>
-
-            <Text
-              style={{
-                color: colors.icon,
-                fontFamily: WEIGHT.regular,
-                textAlign: 'center',
-                fontSize: SIZE.sm - 1,
-                flexWrap: 'wrap',
-                maxWidth: '90%',
-                alignSelf: 'center',
-                marginTop: 10,
-                marginBottom: 5,
-              }}>
-              {!novault
-                ? 'Set a password to create vault'
-                : permanant
-                ? 'Enter password to remove note from vault.'
+          <DialogHeader
+            title={
+              !novault
+                ? 'Create vault'
                 : note.locked
                 ? this.state.deleteNote
-                  ? 'Unlock note to delete it.'
+                  ? 'Delete note'
                   : this.state.share
-                  ? 'Unlock note to share it.'
+                  ? 'Share note'
                   : this.state.goToEditor
-                  ? 'Unlock note to open it in editor'
-                  : 'Enter vault password to unlock note.'
-                : 'Enter vault password to lock note.'}
-            </Text>
+                  ? 'Unlock note'
+                  : 'Unlock note'
+                : 'Lock note'
+            }
+            icon="shield"
+          />
 
-            {note.locked || locked || permanant ? (
+          <Text
+            style={{
+              color: colors.icon,
+              fontFamily: WEIGHT.regular,
+              textAlign: 'center',
+              fontSize: SIZE.sm - 1,
+              flexWrap: 'wrap',
+              maxWidth: '90%',
+              alignSelf: 'center',
+              marginTop: 10,
+              marginBottom: 5,
+            }}>
+            {!novault
+              ? 'Set a password to create vault'
+              : permanant
+              ? 'Enter password to remove note from vault.'
+              : note.locked
+              ? this.state.deleteNote
+                ? 'Unlock note to delete it.'
+                : this.state.share
+                ? 'Unlock note to share it.'
+                : this.state.goToEditor
+                ? 'Unlock note to open it in editor'
+                : 'Enter vault password to unlock note.'
+              : 'Enter vault password to lock note.'}
+          </Text>
+
+          {note.locked || locked || permanant ? (
+            <TextInput
+              ref={passInputRef}
+              style={{
+                padding: pv - 5,
+                borderWidth: 1.5,
+                borderColor: wrongPassword ? colors.errorText : colors.nav,
+                paddingHorizontal: ph,
+                borderRadius: 5,
+                marginTop: 10,
+                fontSize: SIZE.sm,
+                fontFamily: WEIGHT.regular,
+              }}
+              onChangeText={(value) => {
+                this.password = value;
+              }}
+              secureTextEntry
+              placeholder="Password"
+              placeholderTextColor={colors.icon}
+            />
+          ) : null}
+
+          {!novault ? (
+            <View>
               <TextInput
                 ref={passInputRef}
                 style={{
                   padding: pv - 5,
                   borderWidth: 1.5,
-                  borderColor: wrongPassword ? colors.errorText : colors.nav,
+                  borderColor: passwordsDontMatch
+                    ? colors.errorText
+                    : colors.nav,
                   paddingHorizontal: ph,
                   borderRadius: 5,
-                  marginTop: 10,
                   fontSize: SIZE.sm,
                   fontFamily: WEIGHT.regular,
                 }}
@@ -353,93 +358,58 @@ export class VaultDialog extends Component {
                 placeholder="Password"
                 placeholderTextColor={colors.icon}
               />
-            ) : null}
 
-            {!novault ? (
-              <View>
-                <TextInput
-                  ref={passInputRef}
-                  style={{
-                    padding: pv - 5,
-                    borderWidth: 1.5,
-                    borderColor: passwordsDontMatch
-                      ? colors.errorText
-                      : colors.nav,
-                    paddingHorizontal: ph,
-                    borderRadius: 5,
-                    fontSize: SIZE.sm,
-                    fontFamily: WEIGHT.regular,
-                  }}
-                  onChangeText={(value) => {
-                    this.password = value;
-                  }}
-                  secureTextEntry
-                  placeholder="Password"
-                  placeholderTextColor={colors.icon}
-                />
-
-                <TextInput
-                  ref={confirmPassRef}
-                  style={{
-                    padding: pv - 5,
-                    borderWidth: 1.5,
-                    borderColor: passwordsDontMatch
-                      ? colors.errorText
-                      : colors.nav,
-                    paddingHorizontal: ph,
-                    borderRadius: 5,
-                    fontSize: SIZE.sm,
-                    fontFamily: WEIGHT.regular,
-                    marginTop: 10,
-                  }}
-                  secureTextEntry
-                  onChangeText={(value) => {
-                    this.confirmPassword = value;
-                    if (value !== this.password) {
-                      this.setState({
-                        passwordsDontMatch: true,
-                      });
-                    } else {
-                      this.setState({
-                        passwordsDontMatch: false,
-                      });
-                    }
-                  }}
-                  placeholder="Confirm password"
-                  placeholderTextColor={colors.icon}
-                />
-              </View>
-            ) : null}
-
-            <View
-              style={{
-                justifyContent: 'space-around',
-                alignItems: 'center',
-                flexDirection: 'row',
-                marginTop: 20,
-              }}>
-              <Button onPress={this.close} title="Cancel" />
-
-              <Button
-                onPress={this.onPress}
-                title={
-                  note.locked
-                    ? this.state.deleteNote
-                      ? 'Delete'
-                      : this.state.share
-                      ? 'Share '
-                      : this.state.goToEditor
-                      ? 'Open'
-                      : 'Unlock'
-                    : 'Lock'
-                }
-                grayed
+              <TextInput
+                ref={confirmPassRef}
+                style={{
+                  padding: pv - 5,
+                  borderWidth: 1.5,
+                  borderColor: passwordsDontMatch
+                    ? colors.errorText
+                    : colors.nav,
+                  paddingHorizontal: ph,
+                  borderRadius: 5,
+                  fontSize: SIZE.sm,
+                  fontFamily: WEIGHT.regular,
+                  marginTop: 10,
+                }}
+                secureTextEntry
+                onChangeText={(value) => {
+                  this.confirmPassword = value;
+                  if (value !== this.password) {
+                    this.setState({
+                      passwordsDontMatch: true,
+                    });
+                  } else {
+                    this.setState({
+                      passwordsDontMatch: false,
+                    });
+                  }
+                }}
+                placeholder="Confirm password"
+                placeholderTextColor={colors.icon}
               />
             </View>
-          </View>
+          ) : null}
+
+          <DialogButtons
+            onPressNegative={this.close}
+            onPressPositive={this.onPress}
+            positiveTitle={
+              note.locked
+                ? this.state.deleteNote
+                  ? 'Delete'
+                  : this.state.share
+                  ? 'Share '
+                  : this.state.goToEditor
+                  ? 'Open'
+                  : 'Unlock'
+                : 'Lock'
+            }
+          />
         </View>
         <Toast context="local" />
-      </Modal>
+      </BaseDialog>
     );
   }
 }
diff --git a/apps/mobile/src/utils/animations.js b/apps/mobile/src/utils/animations.js
index 42e74c090..223b43dae 100644
--- a/apps/mobile/src/utils/animations.js
+++ b/apps/mobile/src/utils/animations.js
@@ -7,7 +7,9 @@ const {color, Value, timing} = Animated;
 export const EditorPosition = new Value(Dimensions.get('window').width * 1.5);
 export const EditorScale = new Value(1);
 export const EditorOpacity = new Value(0);
-export const EditorTranslateY = new Value(Dimensions.get('window').height * 0.75);
+export const EditorTranslateY = new Value(
+  Dimensions.get('window').height * 0.75,
+);
 
 export function openEditorAnimation() {
   EditorPosition.setValue(Dimensions.get('window').width * 1.5);
@@ -18,17 +20,16 @@ export function openEditorAnimation() {
 
   EditorPosition.setValue(0);
 
-    timing(EditorTranslateY, {
-      duration: 200,
-      toValue: 0,
-      easing:  Easing.out(Easing.ease),
-    }).start();
-    timing(EditorOpacity, {
-      duration: 150,
-      toValue: 1,
-      easing: Easing.out(Easing.ease),
-    }).start();
-
+  timing(EditorTranslateY, {
+    duration: 200,
+    toValue: 0,
+    easing: Easing.out(Easing.ease),
+  }).start();
+  timing(EditorOpacity, {
+    duration: 150,
+    toValue: 1,
+    easing: Easing.out(Easing.ease),
+  }).start();
 }
 
 export function exitEditorAnimation() {
@@ -37,21 +38,18 @@ export function exitEditorAnimation() {
   EditorTranslateY.setValue(0);
   editing.currentlyEditing = false;
 
-    timing(EditorOpacity, {
-      duration: 150,
-      toValue: 0,
-      easing: Easing.inOut(Easing.ease),
-    }).start(() => {
-      EditorPosition.setValue(Dimensions.get('window').width * 1.5);
-    });
-    timing(EditorTranslateY, {
-      duration: 200,
-      toValue: Dimensions.get('window').height * 0.75,
-      easing: Easing.inOut(Easing.ease),
-    }).start();
-  
-
- 
+  timing(EditorOpacity, {
+    duration: 150,
+    toValue: 0,
+    easing: Easing.inOut(Easing.ease),
+  }).start(() => {
+    EditorPosition.setValue(Dimensions.get('window').width * 1.5);
+  });
+  timing(EditorTranslateY, {
+    duration: 200,
+    toValue: Dimensions.get('window').height * 0.75,
+    easing: Easing.inOut(Easing.ease),
+  }).start();
 }
 
 export const slideRight = {