diff --git a/app/assets/styles/blink/_ConfDrawer.scss b/app/assets/styles/blink/_ConfDrawer.scss
new file mode 100644
index 0000000..d3812d6
--- /dev/null
+++ b/app/assets/styles/blink/_ConfDrawer.scss
@@ -0,0 +1,42 @@
+.margin {
+    padding: 10px;
+    background-color: #fff;
+    height: 100%;
+    // position: relative;
+    flex: 1;
+}
+
+.negative {
+    margin-left: -10px;
+    margin-top: -10px;
+    margin-right: -10px;
+    elevation: 0;
+}
+
+.flex {
+    flex: 1;
+}
+
+.container {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right:0;
+}
+
+.drawerColor {
+    background-color: #fff;
+}
+
+.backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.backdropColor{
+    background-color: rgba(0,0,0,.54);
+}
diff --git a/app/components/ConferenceDrawer.js b/app/components/ConferenceDrawer.js
index 248a758..b969974 100644
--- a/app/components/ConferenceDrawer.js
+++ b/app/components/ConferenceDrawer.js
@@ -1,41 +1,91 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Drawer, SheetSide } from 'material-bread';
 
+import { View, TouchableWithoutFeedback} from 'react-native';
+import { Appbar } from 'react-native-paper';
+import FadeInView from './FadeInView';
+
+import styles from '../assets/styles/blink/_ConfDrawer.scss';
 // const styleSheet = {
 //     paper: {
 //         width: 350,
 //         backgroundColor: Grey[100],
 //         borderLeft: '1px solid rgba(0, 0, 0, 0.12)',
 //         borderRight: 0
 //     },
 //     title: {
 //         flex: '0 1 auto'
 //     },
 //     grow: {
 //         flex: '1 1 auto'
 //     },
 //     toolbar: {
 //         minHeight: '50px',
 //         height: 50
 //     }
 // };
 
-const ConferenceDrawer = (props) => {
-    return (
-        <SheetSide
-            visible={props.show}
-            onBackdropPress={props.close}
-        >
-            {props.children}
-        </SheetSide>
-    );
-}
+const ConferenceDrawer = props => {
+    const [visible, setVisible] = useState(props.show);
+    const [open, setOpen] = useState(false);
+
+    const closed = () => {
+        setVisible(false);
+        setOpen(false);
+    }
+
+    const opened = () => {
+        setOpen(true);
+    }
+
+    useEffect(() => {
+        if (!visible && props.show === true) {
+            setVisible(props.show);
+        }
+        if (visible && props.show === false) {
+            setOpen(false);
+        }
+    }, [props.show])
+
+    let returnData = null;
+    let touch;
+    if (open) {
+        touch = (<TouchableWithoutFeedback onPress={props.close} >
+            <View style={[styles.flex, styles.backdrop, props.showBackdrop !== false && styles.backdropColor]}  />
+        </TouchableWithoutFeedback>);
+    }
+    if (visible) {
+        returnData = (
+            <View style={styles.container}>
+                {touch}
+                <FadeInView
+                    style={styles.margin}
+                    visible={props.show}
+                    onClose={closed}
+                    onOpen={opened}
+                    isLandscape={props.isLandscape}
+                >
+                    <View style={styles.flex}>
+                        <Appbar.Header dark={true} style={[styles.negative, styles.drawerColor]}>
+                            <Appbar.BackAction color="#000" onPress={props.close} />
+                            <Appbar.Content color="#000" title={props.title} />
+                        </Appbar.Header>
+                        {props.children}
+                    </View>
+                </FadeInView>
+            </View>
+        )
+    }
+    return (returnData)
+};
 
 ConferenceDrawer.propTypes = {
     show        : PropTypes.bool.isRequired,
     close       : PropTypes.func.isRequired,
-    children    : PropTypes.node
+    children    : PropTypes.node,
+    isLandscape : PropTypes.bool,
+    showBackdrop: PropTypes.bool,
+    title       : PropTypes.string
 };
 
 export default ConferenceDrawer;