diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index d6d39626e..fae93320c 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -138,8 +138,6 @@ const App = () => {
         </SideMenu>
       )}
 
-      <Toast />
-
       {/* {fab ? (
         <ActionButton elevation={5} buttonColor={colors.accent}>
           <ActionButton.Item
@@ -186,6 +184,8 @@ const App = () => {
       ) : (
         undefined
       )} */}
+
+      <Toast />
     </View>
   );
 };
diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js
index e2678c657..877a0c387 100644
--- a/apps/mobile/src/components/Menu/index.js
+++ b/apps/mobile/src/components/Menu/index.js
@@ -60,7 +60,10 @@ export const Menu = ({colors, close = () => {}}) => (
             {
               name: 'Notebooks',
               icon: 'book',
-              func: () => NavigationService.navigate('Folders'),
+              func: () =>
+                NavigationService.navigate('Folders', {
+                  title: 'Notebooks',
+                }),
             },
             {
               name: 'Lists',
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index d91a21b7d..b2dc1cb27 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -23,21 +23,22 @@ import {
 
 import Icon from 'react-native-vector-icons/Feather';
 import {Reminder} from '../Reminder';
-import {getElevation, timeSince} from '../../utils/utils';
+import {getElevation, timeSince, ToastEvent} from '../../utils/utils';
 import NavigationService from '../../services/NavigationService';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
+import {Dialog} from '../Dialog';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
-let setMenuRef = {};
+
 const NoteItem = props => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const [visible, setVisible] = useState(false);
   const item = props.item;
-
+  let setMenuRef = {};
   return (
     <View
       style={{
         marginHorizontal: w * 0.05,
-
         marginVertical: h * 0.015,
         borderRadius: br,
         justifyContent: 'center',
@@ -49,6 +50,16 @@ const NoteItem = props => {
         borderBottomWidth: 1,
         borderBottomColor: '#f0f0f0',
       }}>
+      <Dialog
+        visible={visible}
+        title="Delete note"
+        icon="trash"
+        paragraph="Do you want to delete this note?"
+        positiveText="Delete"
+        close={() => {
+          setVisible(false);
+        }}
+      />
       <TouchableOpacity
         activeOpacity={1}
         onPress={() => {
@@ -78,6 +89,7 @@ const NoteItem = props => {
               width: '100%',
             }}>
             <Text
+              numberOfLines={2}
               style={{
                 fontSize: SIZE.xs + 2,
                 color: colors.icon,
@@ -127,19 +139,29 @@ const NoteItem = props => {
             </TouchableOpacity>
           }>
           <MenuItem
+            onPress={() => {
+              setMenuRef[props.index].hide();
+              ToastEvent.show(
+                'Note added to favorites.',
+                'success',
+                3000,
+                () => {},
+                'Ok',
+              );
+            }}
             textStyle={{
               color: colors.pri,
-              backgroundColor: colors.bg,
+
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.sm,
             }}>
             <Icon name="star" size={SIZE.sm} color={colors.icon} />
-            {'  '}Favourite
+            {'  '}Favorite
           </MenuItem>
+
           <MenuItem
             textStyle={{
               color: colors.pri,
-              backgroundColor: colors.bg,
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.sm,
             }}>
@@ -148,15 +170,108 @@ const NoteItem = props => {
           </MenuItem>
 
           <MenuItem
+            onPress={() => {
+              setMenuRef[props.index].hide();
+              ToastEvent.show(
+                'Note copied to clipboard.',
+                'success',
+                3000,
+                () => {},
+                '',
+              );
+            }}
             textStyle={{
               color: colors.pri,
-              backgroundColor: colors.bg,
+
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.sm,
+            }}>
+            <Icon name="copy" size={SIZE.sm} color={colors.icon} />
+            {'  '}Copy
+          </MenuItem>
+          <MenuItem
+            onPress={() => {
+              setMenuRef[props.index].hide();
+              NavigationService.navigate('Folders', {
+                note: item,
+                title: 'Choose Notebook',
+                isMove: true,
+                hideMore: true,
+              });
+            }}
+            textStyle={{
+              color: colors.pri,
+
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.sm,
+            }}>
+            <Icon name="arrow-right" size={SIZE.sm} color={colors.icon} />
+            {'  '}Move
+          </MenuItem>
+
+          <MenuItem
+            onPress={() => {
+              setVisible(true);
+              setMenuRef[props.index].hide();
+            }}
+            textStyle={{
+              color: colors.pri,
+
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.sm,
             }}>
             <Icon name="trash" size={SIZE.sm} color={colors.icon} />
             {'  '}Delete
           </MenuItem>
+          <MenuDivider />
+          <MenuItem
+            disabled={true}
+            textStyle={{
+              color: colors.icon,
+
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.xs,
+            }}
+            style={{
+              paddingVertical: 0,
+              margin: 0,
+              height: 30,
+            }}>
+            Notebook: School Notes
+          </MenuItem>
+          <MenuItem
+            disabled={true}
+            textStyle={{
+              color: colors.icon,
+
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.xs,
+            }}
+            style={{
+              paddingVertical: 0,
+              margin: 0,
+              height: 30,
+              paddingBottom: 10,
+            }}>
+            {'  '}- Topic: Physics
+          </MenuItem>
+
+          <MenuItem
+            disabled={true}
+            textStyle={{
+              color: colors.icon,
+
+              fontFamily: WEIGHT.regular,
+              fontSize: SIZE.xs,
+            }}
+            style={{
+              paddingVertical: 0,
+              margin: 0,
+              height: 30,
+              paddingBottom: 10,
+            }}>
+            Created on: {new Date(item.dateCreated).toISOString().slice(0, 10)}
+          </MenuItem>
         </Menu>
       </View>
     </View>
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index cfe286ad4..0fd21de20 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -13,12 +13,21 @@ import {
   WEIGHT,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
-export const NotebookItem = ({item, index, colors}) => {
+export const NotebookItem = ({
+  item,
+  index,
+  colors,
+  hideMore,
+  isTopic = false,
+}) => {
   return (
     <TouchableOpacity
       onPress={() => {
         NavigationService.navigate('Notebook', {
           notebook: item,
+          title: hideMore ? 'Choose topic' : item.name,
+          isMove: hideMore ? true : false,
+          hideMore: hideMore ? true : false,
         });
       }}
       style={{
@@ -55,7 +64,37 @@ export const NotebookItem = ({item, index, colors}) => {
           </Text>
         </View>
 
-        <Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
+        {hideMore ? null : (
+          <Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
+        )}
+        {hideMore && isTopic ? (
+          <TouchableOpacity
+            activeOpacity={opacity}
+            onPress={() => {
+              NavigationService.navigate('Home');
+            }}
+            style={{
+              borderWidth: 1,
+              borderRadius: 5,
+              width: '20%',
+              paddingHorizontal: ph - 5,
+              borderColor: '#f0f0f0',
+              paddingVertical: pv,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: colors.accent,
+            }}>
+            <Text
+              style={{
+                fontSize: SIZE.xs,
+                fontFamily: WEIGHT.semibold,
+                color: 'white',
+              }}>
+              Move
+            </Text>
+          </TouchableOpacity>
+        ) : null}
       </View>
     </TouchableOpacity>
   );
diff --git a/apps/mobile/src/components/Toast/index.js b/apps/mobile/src/components/Toast/index.js
index ea0d97dff..cee8c9ec5 100644
--- a/apps/mobile/src/components/Toast/index.js
+++ b/apps/mobile/src/components/Toast/index.js
@@ -1,14 +1,25 @@
 import React, {useState, useEffect} from 'react';
 
-import {DeviceEventEmitter, Text} from 'react-native';
+import {
+  DeviceEventEmitter,
+  Text,
+  TouchableNativeFeedback,
+  View,
+  TouchableOpacity,
+} from 'react-native';
 import {COLOR_SCHEME, SIZE, opacity, WEIGHT, pv, ph} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import * as Animatable from 'react-native-animatable';
-import {h} from '../../utils/utils';
+import {h, w} from '../../utils/utils';
 
+const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
+  TouchableOpacity,
+);
 export const Toast = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [toast, setToast] = useState(false);
+  const [message, setMessage] = useState([]);
+  const [data, setData] = useState([]);
   const [toastStyle, setToastStyle] = useState({
     backgroundColor: colors.errorBg,
     color: colors.errorText,
@@ -16,8 +27,11 @@ export const Toast = () => {
 
   useEffect(() => {
     DeviceEventEmitter.addListener('showToast', data => {
+      setData(data);
       setToast(true);
-
+      if (data.message) {
+        setMessage(data.message);
+      }
       if (data.type === 'success') {
         setToastStyle({
           backgroundColor: colors.successBg,
@@ -32,7 +46,7 @@ export const Toast = () => {
 
       setTimeout(() => {
         setToast(false);
-      }, data.duration || 1000);
+      }, data.duration);
     });
     DeviceEventEmitter.addListener('hideToast', data => {
       setToast(false);
@@ -40,7 +54,11 @@ export const Toast = () => {
 
     return () => {
       DeviceEventEmitter.removeListener('showToast', data => {
+        setData(data);
         setToast(true);
+        if (data.message) {
+          setMessage(data.message);
+        }
         if (data.type === 'success') {
           setToastStyle({
             backgroundColor: colors.successBg,
@@ -55,7 +73,7 @@ export const Toast = () => {
 
         setTimeout(() => {
           setToast(false);
-        }, data.duration || 1000);
+        }, data.duration);
       });
 
       DeviceEventEmitter.removeListener('hideToast', data => {
@@ -65,32 +83,58 @@ export const Toast = () => {
   }, []);
 
   return (
-    <Animatable.View
+    <AnimatedTouchableOpacity
+      activeOpacity={opacity + 0.1}
+      onPress={() => {
+        alert('hello');
+      }}
       transition="translateY"
       duration={250}
       useNativeDriver={true}
+      pointerEvents="box-only"
       style={{
         ...toastStyle,
-        height: 55,
+        height: 60,
         width: '90%',
-        marginHorizontal: '5%',
-        marginBottom: h * 0.025,
+        marginHorizontal: w * 0.05,
+
         position: 'absolute',
-        bottom: 0,
+        bottom: h * 0.025,
         fontFamily: WEIGHT.regular,
         fontSize: SIZE.md,
         zIndex: 999,
         borderRadius: 5,
-        paddingHorizontal: ph,
-        justifyContent: 'center',
-        elevation: 10,
+        paddingHorizontal: ph + 5,
+        justifyContent: 'space-between',
+        elevation: 25,
+        flexDirection: 'row',
+        alignItems: 'center',
         transform: [
           {
             translateY: toast ? 0 : 150,
           },
         ],
       }}>
-      <Text>Hello</Text>
-    </Animatable.View>
+      <Text
+        style={{
+          ...toastStyle,
+          backgroundColor: 'transparent',
+          fontFamily: WEIGHT.regular,
+          fontSize: SIZE.md,
+        }}>
+        {message}
+      </Text>
+
+      <TouchableOpacity activeOpacity={1}>
+        <Text
+          style={{
+            ...toastStyle,
+            fontFamily: WEIGHT.bold,
+            fontSize: SIZE.md,
+          }}>
+          {data.actionText}
+        </Text>
+      </TouchableOpacity>
+    </AnimatedTouchableOpacity>
   );
 };
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index 60056ae43..9123ba822 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -20,7 +20,7 @@ export const Header = ({heading, colors, canGoBack = true}) => {
           style={{
             justifyContent: 'center',
             alignItems: 'center',
-            height: 40,
+
             paddingRight: 15,
           }}>
           <Icon name={'chevron-left'} size={SIZE.xl} />
diff --git a/apps/mobile/src/services/NavigationService.js b/apps/mobile/src/services/NavigationService.js
index 91bfeb5fe..cf80ef708 100755
--- a/apps/mobile/src/services/NavigationService.js
+++ b/apps/mobile/src/services/NavigationService.js
@@ -16,6 +16,7 @@ import Trash from '../views/Trash';
 import Notes from '../views/Notes';
 import Tags from '../views/Tags';
 import Notebook from '../views/Notebook';
+import Move from '../views/Move';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -67,6 +68,9 @@ const TopLevelNavigator = createStackNavigator(
     Notebook: {
       screen: Notebook,
     },
+    Move: {
+      screen: Move,
+    },
   },
   {
     initialRouteName: 'Home',
diff --git a/apps/mobile/src/utils/utils.js b/apps/mobile/src/utils/utils.js
index 783bd2761..617140787 100755
--- a/apps/mobile/src/utils/utils.js
+++ b/apps/mobile/src/utils/utils.js
@@ -40,11 +40,23 @@ export const w = Dimensions.get('window').width;
 export const h = Dimensions.get('window').height;
 
 export const ToastEvent = {
-  show: (message, type, duration = 1000, func = null) => {
-    DeviceEventEmitter.emit('showToast', {message, type, duration, func});
+  show: (message, type, duration = 10000, func = null, actionText = 'Ok') => {
+    DeviceEventEmitter.emit('showToast', {
+      message,
+      type,
+      duration,
+      func,
+      actionText,
+    });
   },
-  hide: (message, type, duration = 1000, func = null) => {
-    DeviceEventEmitter.emit('hideToast', {message, type, duration, func});
+  hide: (message, type, duration = 1000, func = null, actionText = 'Ok') => {
+    DeviceEventEmitter.emit('hideToast', {
+      message,
+      type,
+      duration,
+      func,
+      actionText,
+    });
   },
 };
 
diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js
index 789056468..1fb431fea 100644
--- a/apps/mobile/src/views/Folders/index.js
+++ b/apps/mobile/src/views/Folders/index.js
@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   Platform,
   Modal,
+  KeyboardAvoidingView,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -29,91 +30,98 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../ListsEditor';
 import {AddNotebookDialog} from '../../components/AddNotebookDialog';
 import {NotebookItem} from '../../components/NotebookItem';
-
-const refs = [];
+import {Search} from '../../components/SearchInput';
 
 export const Folders = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [addNotebook, setAddNotebook] = useState(false);
+  const [notebooks, setNotebooks] = useState([]);
+  const params = navigation.state.params;
+
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        height: '100%',
+      }}>
       <AddNotebookDialog
         visible={addNotebook}
         close={() => setAddNotebook(false)}
       />
-      <View
+      <KeyboardAvoidingView
         style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingHorizontal: '5%',
-          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
-          marginBottom: h * 0.04,
+          height: '100%',
         }}>
-        <Text
+        <View
           style={{
-            fontSize: SIZE.xxl,
-            color: colors.pri,
-            fontFamily: WEIGHT.bold,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: '5%',
+            marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+            marginBottom: h * 0.04,
           }}>
-          Notebooks
-        </Text>
-        <Icon name="more-vertical" color={colors.icon} size={SIZE.xxl} />
-      </View>
-
-      <FlatList
-        style={{
-          width: '100%',
-        }}
-        data={[
-          {
-            name: 'Class Notes',
-            Qty: '8',
-          },
-          {
-            name: 'Notes of water tabs',
-            Qty: '3',
-          },
-          {
-            name: 'My Lists',
-            Qty: '3',
-          },
-        ]}
-        ListHeaderComponent={
-          <TouchableOpacity
-            activeOpacity={opacity}
-            onPress={() => {
-              setAddNotebook(true);
-            }}
+          <Text
             style={{
-              borderWidth: 1,
-              borderRadius: 5,
-              width: '90%',
-              marginHorizontal: '5%',
-              paddingHorizontal: ph,
-              borderColor: '#f0f0f0',
-              paddingVertical: pv + 5,
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              marginBottom: 15,
-              backgroundColor: colors.accent,
+              fontSize: SIZE.xxl,
+              color: colors.pri,
+              fontFamily: WEIGHT.bold,
             }}>
-            <Text
-              style={{
-                fontSize: SIZE.md,
-                fontFamily: WEIGHT.semibold,
-                color: 'white',
-              }}>
-              Create a new notebook
-            </Text>
-            <Icon name="plus" color="white" size={SIZE.lg} />
-          </TouchableOpacity>
-        }
-        renderItem={({item, index}) => (
-          <NotebookItem item={item} index={index} colors={colors} />
-        )}
-      />
+            {params.title}
+          </Text>
+          <Icon
+            style={{
+              marginTop: 10,
+            }}
+            name="more-vertical"
+            color={colors.icon}
+            size={SIZE.xxl}
+          />
+        </View>
+        <Search />
+        <FlatList
+          style={{
+            width: '100%',
+          }}
+          data={notebooks}
+          renderItem={({item, index}) => (
+            <NotebookItem
+              hideMore={params.hideMore}
+              item={item}
+              index={index}
+              colors={colors}
+            />
+          )}
+        />
+        <TouchableOpacity
+          activeOpacity={opacity}
+          onPress={() => {
+            setAddNotebook(true);
+          }}
+          style={{
+            borderWidth: 1,
+            borderRadius: 5,
+            width: '90%',
+            marginHorizontal: '5%',
+            paddingHorizontal: ph,
+            borderColor: '#f0f0f0',
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 15,
+            backgroundColor: colors.accent,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.semibold,
+              color: 'white',
+            }}>
+            Create a new notebook
+          </Text>
+          <Icon name="plus" color="white" size={SIZE.lg} />
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 };
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 1fd516b91..b5e144991 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -71,6 +71,7 @@ export const Home = ({navigation}) => {
             setUpdate(update + 1);
           }}
         />
+
         <Header colors={colors} heading="Home" canGoBack={false} />
 
         <Search
diff --git a/apps/mobile/src/views/Move/index.js b/apps/mobile/src/views/Move/index.js
new file mode 100644
index 000000000..d23672949
--- /dev/null
+++ b/apps/mobile/src/views/Move/index.js
@@ -0,0 +1,112 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+  FlatList,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Feather';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+import {Header} from '../../components/header';
+import NoteItem from '../../components/NoteItem';
+import {NotebookItem} from '../../components/NotebookItem';
+import {AddNotebookDialog} from '../../components/AddNotebookDialog';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Move = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const [addNotebook, setAddNotebook] = useState(false);
+
+  return (
+    <SafeAreaView>
+      <AddNotebookDialog
+        visible={addNotebook}
+        close={() => setAddNotebook(false)}
+      />
+      <Header colors={colors} heading="Move to" canGoBack={false} />
+      <FlatList
+        style={{
+          width: '100%',
+        }}
+        data={[
+          {
+            name: 'Class Notes',
+            Qty: '8',
+          },
+          {
+            name: 'Notes of water tabs',
+            Qty: '3',
+          },
+          {
+            name: 'My Lists',
+            Qty: '3',
+          },
+        ]}
+        ListHeaderComponent={
+          <TouchableOpacity
+            activeOpacity={opacity}
+            onPress={() => {
+              setAddNotebook(true);
+            }}
+            style={{
+              borderWidth: 1,
+              borderRadius: 5,
+              width: '90%',
+              marginHorizontal: '5%',
+              paddingHorizontal: ph,
+              borderColor: '#f0f0f0',
+              paddingVertical: pv + 5,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 15,
+              backgroundColor: colors.accent,
+            }}>
+            <Text
+              style={{
+                fontSize: SIZE.md,
+                fontFamily: WEIGHT.semibold,
+                color: 'white',
+              }}>
+              Create a new notebook
+            </Text>
+            <Icon name="plus" color="white" size={SIZE.lg} />
+          </TouchableOpacity>
+        }
+        renderItem={({item, index}) => (
+          <NotebookItem
+            hideMore={true}
+            item={item}
+            index={index}
+            colors={colors}
+          />
+        )}
+      />
+    </SafeAreaView>
+  );
+};
+
+Move.navigationOptions = {
+  header: null,
+};
+
+export default Move;
diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js
index 0c4c5641d..dd1ec5de9 100644
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   Platform,
   FlatList,
+  KeyboardAvoidingView,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -27,104 +28,116 @@ import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
 import {NotebookItem} from '../../components/NotebookItem';
+import {Search} from '../../components/SearchInput';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Notebook = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
-
+  const params = navigation.state.params;
   return (
-    <SafeAreaView>
-      <Header
-        colors={colors}
-        heading={navigation.state.params.notebook.name}
-        canGoBack={false}
-      />
-
-      <FlatList
+    <SafeAreaView
+      style={{
+        height: '100%',
+      }}>
+      <KeyboardAvoidingView
         style={{
-          width: '100%',
-        }}
-        data={[
-          {
-            name: 'Class Notes',
-            Qty: '8',
-          },
-          {
-            name: 'Notes of water tabs',
-            Qty: '3',
-          },
-          {
-            name: 'My Lists',
-            Qty: '3',
-          },
-        ]}
-        ListHeaderComponent={
-          <>
-            <TouchableOpacity
-              activeOpacity={opacity}
-              onPress={() => {
-                setAddNotebook(true);
-              }}
-              style={{
-                borderWidth: 1,
-                borderRadius: 5,
-                width: '90%',
-                marginHorizontal: '5%',
-                paddingHorizontal: ph,
-                borderColor: '#f0f0f0',
-                paddingVertical: pv + 5,
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 15,
-                backgroundColor: colors.accent,
-              }}>
-              <Text
-                style={{
-                  fontSize: SIZE.md,
-                  fontFamily: WEIGHT.semibold,
-                  color: 'white',
-                }}>
-                Add a new topic
-              </Text>
-              <Icon name="plus" color="white" size={SIZE.lg} />
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              activeOpacity={opacity}
-              onPress={() => {
-                setAddNotebook(true);
-              }}
-              style={{
-                borderWidth: 1,
-                borderRadius: 5,
-                width: '90%',
-                marginHorizontal: '5%',
-                paddingHorizontal: ph,
-                borderColor: '#f0f0f0',
-                paddingVertical: pv + 5,
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 15,
-              }}>
-              <Text
-                style={{
-                  fontSize: SIZE.md,
-                  fontFamily: WEIGHT.bold,
-                  color: colors.pri,
-                }}>
-                View All Notes
-              </Text>
-            </TouchableOpacity>
-          </>
-        }
-        renderItem={({item, index}) => (
-          <NotebookItem item={item} index={index} colors={colors} />
-        )}
-      />
+          height: '100%',
+        }}>
+        <Header colors={colors} heading={params.title} canGoBack={false} />
+        <Search />
+        <FlatList
+          style={{
+            width: '100%',
+          }}
+          data={[
+            {
+              name: 'Class Notes',
+              Qty: '8',
+            },
+            {
+              name: 'Notes of water tabs',
+              Qty: '3',
+            },
+            {
+              name: 'My Lists',
+              Qty: '3',
+            },
+          ]}
+          ListHeaderComponent={
+            <>
+              {params.hideMore ? null : (
+                <TouchableOpacity
+                  activeOpacity={opacity}
+                  onPress={() => {
+                    setAddNotebook(true);
+                  }}
+                  style={{
+                    borderWidth: 1,
+                    borderRadius: 5,
+                    width: '90%',
+                    marginHorizontal: '5%',
+                    paddingHorizontal: ph,
+                    borderColor: '#f0f0f0',
+                    paddingVertical: pv + 5,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 15,
+                  }}>
+                  <Text
+                    style={{
+                      fontSize: SIZE.md,
+                      fontFamily: WEIGHT.bold,
+                      color: colors.pri,
+                    }}>
+                    View All Notes
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </>
+          }
+          renderItem={({item, index}) => (
+            <NotebookItem
+              hideMore={params.hideMore}
+              isTopic={true}
+              item={item}
+              index={index}
+              colors={colors}
+            />
+          )}
+        />
+        <TouchableOpacity
+          activeOpacity={opacity}
+          onPress={() => {
+            setAddNotebook(true);
+          }}
+          style={{
+            borderWidth: 1,
+            borderRadius: 5,
+            width: '90%',
+            marginHorizontal: '5%',
+            paddingHorizontal: ph,
+            borderColor: '#f0f0f0',
+            paddingVertical: pv + 5,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 15,
+            backgroundColor: colors.accent,
+          }}>
+          <Text
+            style={{
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.semibold,
+              color: 'white',
+            }}>
+            Add a new topic
+          </Text>
+          <Icon name="plus" color="white" size={SIZE.lg} />
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 };