diff --git a/__tests__/AddNoteScreen.test.tsx b/__tests__/AddNoteScreen.test.tsx
index 00cf76d..737c84e 100644
--- a/__tests__/AddNoteScreen.test.tsx
+++ b/__tests__/AddNoteScreen.test.tsx
@@ -60,7 +60,7 @@ describe('AddNoteScreen', () => {
     const { getByTestId } = render(<AddNoteScreen route={routeMock as any} />);
 
     // Check if the RichEditor is rendered
-    expect(getByTestId('RichEditor')).toBeTruthy();
+    expect(getByTestId('TenTapEditor')).toBeTruthy();
   });
 
 
diff --git a/__tests__/HomeScreen.test.tsx b/__tests__/HomeScreen.test.tsx
index d4311ba..7fb8617 100644
--- a/__tests__/HomeScreen.test.tsx
+++ b/__tests__/HomeScreen.test.tsx
@@ -41,12 +41,24 @@ afterEach(() => {
 });
 
 describe('HomeScreen', () => {
-  it('renders without crashing', () => {
+  it('renders toggle search bar', async () => {
     const routeMock = { params: { untitledNumber: 1 } };
     const { getByTestId } = render(<HomeScreen route={routeMock as any} />);
+  
+    const toggleButton = await waitFor(() => getByTestId('searchButton'));
+    expect(toggleButton).toBeTruthy();
+  });
 
-    // Check if the RichEditor is rendered
-    expect(getByTestId('searchBar')).toBeTruthy();
+  it('toggle search bar visibility', async () => {
+    const routeMock = { params: { untitledNumber: 1 } };
+    const { getByTestId } = render(<HomeScreen route={routeMock as any} />);
+  
+    const toggleButton = await waitFor(() => getByTestId('searchButton'));
+    fireEvent.press(toggleButton);
+  
+    const searchBar = await waitFor(() => getByTestId('searchBar'));
+    expect(searchBar).toBeTruthy();
   });
 
-});
\ No newline at end of file
+});
+
diff --git a/__tests__/__snapshots__/SetTime.test.tsx.snap b/__tests__/__snapshots__/SetTime.test.tsx.snap
index 2a236b4..851a93e 100644
--- a/__tests__/__snapshots__/SetTime.test.tsx.snap
+++ b/__tests__/__snapshots__/SetTime.test.tsx.snap
@@ -38,8 +38,8 @@ exports[`LocationWindow renders without crashing 1`] = `
           }
         }
       >
-        11/4/2024
-01:36 PM
+        10/27/2024
+01:29 PM
       </Text>
     </View>
     <View
diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx
index 8f40962..53819a2 100644
--- a/lib/screens/AddNoteScreen.tsx
+++ b/lib/screens/AddNoteScreen.tsx
@@ -298,14 +298,14 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
         style={{ flex: 1 }}
         keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
       >
-      
-          <View style={[NotePageStyles().richTextContainer]}>
+          <View style={[NotePageStyles().richTextContainer]} testID="TenTapEditor">
           <RichText
             editor={editor}
             placeholder="Write something..."
             style={[NotePageStyles().editor, {backgroundColor: Platform.OS == "android" && "white"}]}
 
           />
+           
           </View>
        
         {/* Toolbar placed at the bottom */}
diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx
index 6ad2faa..e798fbe 100644
--- a/lib/screens/EditNoteScreen.tsx
+++ b/lib/screens/EditNoteScreen.tsx
@@ -12,6 +12,8 @@ import {
   SafeAreaView,
   Dimensions
 } from "react-native";
+import {  StyleSheet } from "react-native";
+
 import { Ionicons } from "@expo/vector-icons";
 import { Note } from "../../types";
 import PhotoScroller from "../components/photoScroller";
@@ -30,6 +32,8 @@ import ToastMessage from 'react-native-toast-message';
 import { useTheme } from "../components/ThemeProvider";
 import LoadingModal from "../components/LoadingModal";
 import * as Location from 'expo-location';
+import { DEFAULT_TOOLBAR_ITEMS, RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor";
+
 
 
 const user = User.getInstance();
@@ -49,7 +53,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   const [isPublished, setIsPublished] = useState(note.published);
   const [creator, setCreator] = useState(note.creator);
   const [owner, setOwner] = useState(false);
-  const scrollViewRef = useRef<ScrollView | null>(null);
+  //const scrollViewRef = useRef<ScrollView | null>(null);
   const [viewMedia, setViewMedia] = useState(false);
   const [viewAudio, setViewAudio] = useState(false);
   const [isTagging, setIsTagging] = useState(false);
@@ -63,6 +67,139 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   const richTextRef = useRef<RichEditor | null>(null);
   const [isTime, setIsTime] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [bodyText, setBodyText] = useState<string>("");
+  const {  isDarkmode, toggleDarkmode, theme } = useTheme();
+  const [refreshEditor, setRefreshEditor] = useState(false);
+
+  // Pass the appropriate theme based on dark mode status
+  const editor = useEditorBridge({
+    initialContent: bodyText || "",
+    autofocus: true,
+  });
+  
+
+
+
+  // Define the dynamic CSS for text color based on isDarkmode
+  const textColorCSS = `
+    p, span, div {
+      color: ${theme.text} !important;
+    }
+    * {
+      color: ${theme.text} !important;
+    }
+  `;
+
+  
+  const exampleStyles = StyleSheet.create({
+    fullScreen: {
+      ...Platform.select({  
+        android: {
+          flex: 1,
+          backgroundColor: theme.primaryColor, // Match the background color of your screen
+        },
+        ios: {
+          flex: 1,
+          backgroundColor: theme.primaryColor, // Match the background color of your screen
+        },
+      }),
+    },
+    richTextContainer: {
+      flex: 1, // Use full available height for RichText component
+      justifyContent: 'center',
+      paddingHorizontal: 10, // Add some padding horizontally
+      backgroundColor: theme.primaryColor, // Apply black background to the entire container
+      color: theme.tertiaryColor,
+      ...Platform.select({
+        android: {
+          flex: 1, // Use full available height for RichText component
+          justifyContent: 'center',
+          paddingHorizontal: 10, // Add some padding horizontally
+          backgroundColor: theme.primaryColor, // Apply black background to the entire container
+          color: theme.tertiaryColor,
+        },
+
+      }),
+    },
+    richText: {  
+
+      flex: 1,
+      minHeight: '100%', // Ensure it takes full height available
+      padding: 10,
+      borderWidth: 1,
+      borderColor: theme.primaryColor,
+      color: theme.text, // Set text color to white for dark mode
+      ...Platform.select({
+        android: {
+          flex: 1,
+          minHeight: '100%', // Ensure it takes full height available
+          padding: 2,
+          borderWidth: 1,
+          borderColor: theme.primaryColor,
+          color: theme.primaryColor, // Set text color to white for dark mode
+        },
+
+      }),
+    },
+    editor: {   
+          backgroundColor: theme.primaryColor,
+          marginBottom: 4,
+          width: "100%",
+          minHeight: 200, // Adjust for better visibility
+          color: theme.text, // Ensure text is visible
+          padding: 10, // Add padding for better input experience
+      ...Platform.select({
+        android: {
+          backgroundColor: theme.primaryColor, // Ensure consistent background color on Android
+          color: theme.text, // Ensure consistent text color on Android
+          marginBottom: 4,
+          width: "100%",
+          minHeight: 200, // Adjust for better visibility
+          padding: 10, // Add padding for better input experience
+        },
+      }),
+    },
+    editorContainer: {
+      backgroundColor: theme.primaryColor, // Ensure consistent background color on iOS
+      marginBottom: 1,
+      width: "100%",
+      ...Platform.select({
+        android: {
+          backgroundColor: theme.primaryColor, // Ensure consistent background color on Android
+          marginBottom: 1,
+          width: "100%",
+        },
+      }),
+    },
+    toolbar: {
+      height: 40, // Fixed height for the toolbar at the bottom
+      backgroundColor: '#333', // Ensure the toolbar has a background color
+  
+      ...Platform.select({
+        android: {
+          height: 70, // Fixed height for the toolbar at the bottom
+          backgroundColor: theme.primaryColor, // Ensure the toolbar has a background color
+          overflow: 'hidden', // Ensure no extra space
+          marginTop: 50
+        },
+        ios: {
+          height: 50, // Fixed height for the toolbar at the bottom
+          backgroundColor: theme.primaryColor, 
+          overflow: 'hidden', // Ensure no extra space
+          marginTop: 50
+
+        },
+      }),
+    },
+  });
+    
+  useEffect(() => {
+    if (editor) {
+      editor.injectCSS(textColorCSS, 'text-color-style');
+    }
+  }, [isDarkmode, editor, theme]);  
+
+
   let [location, setLocation] = useState<{
     latitude: number;
     longitude: number;
@@ -77,7 +214,6 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   console.log(note.latitude);
   console.log(note.longitude);
   const { height, width } = useWindowDimensions();
-  const { theme } = useTheme();
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
@@ -107,7 +243,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
     };
     checkOwner();
   }, [creator]);
-
+/*
   const handleScroll = (position) => {
     if (keyboardOpen && scrollViewRef.current) {
       const viewportHeight = Dimensions.get('window').height - keyboardHeight;
@@ -122,7 +258,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
       }
     }
   };
-
+*/
   const [latitude, setLatitude] = useState(
     location?.latitude?.toString() || ""
   );
@@ -293,6 +429,25 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
     }
   };
 
+  if (isDarkmode && editor) {
+    editor.injectCSS(textColorCSS, 'text-color-style');
+  }
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
+      setIsKeyboardVisible(true);
+    });
+    const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
+      setIsKeyboardVisible(false);
+    });
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={NotePageStyles().topContainer}>
@@ -363,26 +518,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           )}
           {isTime && <TimeWindow time={time} setTime={setTime} />}
         </View>
-        <View>
-          <RichToolbar
-            style={NotePageStyles().container}
-            editor={richTextRef}
-            actions={[
-              actions.keyboard,
-              actions.undo,
-              actions.redo,
-              actions.setBold,
-              actions.setItalic,
-              actions.setUnderline,
-              actions.insertBulletsList,
-              actions.blockquote,
-              actions.indent,
-              actions.outdent,
-            ]}
-            iconTint={NotePageStyles().saveText.color}
-            selectedIconTint="#2095F2"
-          />
-        </View>
+    
         <View key="Tags Container">
           {tags.length > 0 && (
             <ScrollView
@@ -446,42 +582,44 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           </View>
 
       </View>
+      <SafeAreaView style={exampleStyles.fullScreen}>
       <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
-      >
-        <View style={[NotePageStyles().editorContainer, { flex: 1 }]}>
-          <ScrollView
-            nestedScrollEnabled={true}
-            showsVerticalScrollIndicator={false}
-            style={{ flex: 1 }}
-            ref={scrollViewRef}
-          >
-            <RichEditor
-              ref={(r) => (richTextRef.current = r)}
-              style={[NotePageStyles().editor, {flex: 1, minHeight: 650 }]}
-              editorStyle={
-              {
-                contentCSSText: `
-                  position: absolute; 
-                  top: 0; right: 0; bottom: 0; left: 0;
-                `,
-                backgroundColor: theme.primaryColor,
-                color: theme.text,
-              }}
-              autoCorrect={true}
-              placeholder="Write your note here"
-              onChange={(text) => setText(text)}
-              initialContentHTML={text}
-              onCursorPosition={handleScroll}
-              disabled={!owner}
-            />
-          </ScrollView>
+        behavior={Platform.OS === 'android' ? 'height' : 'padding'}
+        style={exampleStyles.fullScreen}
+      >      
+        <View style={exampleStyles.richTextContainer}>
+          <RichText 
+            editor={editor} 
+            style={[exampleStyles.editor, {backgroundColor: Platform.OS == "android" && theme.primaryColor}]} // Apply styling here
+          />
+   
+          </View>
+
+          <View style={[exampleStyles.toolbar]}>
+          <Toolbar
+            editor={editor}
+            items={DEFAULT_TOOLBAR_ITEMS}
+          />
         </View>
+
+      {Platform.OS === 'ios' && (
+      <Toolbar
+        editor={editor}
+        items={DEFAULT_TOOLBAR_ITEMS}
+      />
+    )}
       </KeyboardAvoidingView>
+
+
+    </SafeAreaView>
       <LoadingModal visible={isUpdating} />
     </SafeAreaView>
   );
 };
 
+
+
+
+
+
 export default EditNoteScreen;
\ No newline at end of file
diff --git a/lib/screens/HomeScreen.tsx b/lib/screens/HomeScreen.tsx
index a897b11..1cff282 100644
--- a/lib/screens/HomeScreen.tsx
+++ b/lib/screens/HomeScreen.tsx
@@ -49,6 +49,8 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
   const [items, setItems] = useState(initialItems);
   const [selectedNote, setSelectedNote] = useState<Note | undefined>(undefined);
   const [isModalVisible, setModalVisible] = useState(false);
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
 
   const { theme } = useTheme();
 
@@ -161,7 +163,6 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
     });
     return maxNumber + 1;
   };
-  
 
   const styles = StyleSheet.create({
     container: {
@@ -332,7 +333,7 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
       padding: 10,
       alignSelf: "center",
     },
-    seachBar:{
+    searchBar:{
       backgroundColor: theme.homeColor,
       borderRadius: 20,
       fontSize: 18,
@@ -539,12 +540,10 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
     );
   };
 
-  //Part of searchbar:
-  const [searchQuery, setSearchQuery] = useState("");
-
   const handleSearch = (query: string) => {
     setSearchQuery(query);
   };
+
   const formatDate = (date: Date) => {
     const day = date.getDate().toString();
     const month = (date.getMonth() + 1).toString(); // Months are zero-based
@@ -562,10 +561,14 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
     });
   }, [notes, searchQuery]);
 
-
+  // Reset search query when toggling search visibility
+  const resetSearchQuery = () => {
+    if(isSearchVisible){
+      setSearchQuery('');
+    }
+  };
 
   return (
- 
     <View style={styles.container}>
       <View style={styles.topView}>
         <View
@@ -589,7 +592,20 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
           >
             <Text style={styles.pfpText}>{userInitials}</Text>
           </TouchableOpacity>
-          <Image source={require('../../assets/icon.png')} style={{width: width * 0.105, height: width * 0.105, marginEnd: width * 0.435}} />
+          <Image source={require('../../assets/icon.png')} style={{width: width * 0.105, height: width * 0.105, marginEnd: width * 0.025}} />
+          <TouchableOpacity 
+            onPress={() => {
+              setIsSearchVisible(!isSearchVisible);
+              resetSearchQuery(); // Reset search query when toggling search visibility              
+            }}
+          >
+            <Ionicons
+              testID="searchButton"
+              name={isSearchVisible ? "close-outline" : "search-outline"} // Switch between "X" and search icon
+              size={36}
+              color={theme.black}
+            />
+          </TouchableOpacity>
         </View>
       </View>
        
@@ -634,12 +650,15 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation, route }) => {
           showArrowIcon={true}
         /> 
       </View>
+      {isSearchVisible && (
       <TextInput
-          testID="searchBar"
-          placeholder="Search notes.."
-          onChangeText={handleSearch}
-          style= {styles.seachBar}
+        testID="searchBar"
+        placeholder="Search notes..."
+        onChangeText={handleSearch}
+        style={styles.searchBar}
         />
+      )}
+
       <View style={styles.horizontalLine} />
       <View style={styles.scrollerBackgroundColor}>
         {rendering ? <NoteSkeleton /> : renderList(notes)}
diff --git a/styles/pages/NoteStyles.tsx b/styles/pages/NoteStyles.tsx
index 4c754d9..1c9fdf6 100644
--- a/styles/pages/NoteStyles.tsx
+++ b/styles/pages/NoteStyles.tsx
@@ -112,7 +112,7 @@ const NotePageStyles = () => {
     },
     //tool bar styles
     toolBar: {
-      height: 50
+      height: 100
     },
     closeKeyboardButton: {
       padding: 10,