diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx
index b818296..cb318d6 100644
--- a/lib/screens/AddNoteScreen.tsx
+++ b/lib/screens/AddNoteScreen.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from "react";
 import {
   Alert,
   View,
-  StyleSheet,
   TextInput,
   TouchableOpacity,
   Keyboard,
@@ -24,7 +23,7 @@ import {
   RichToolbar,
   actions,
 } from "react-native-pell-rich-editor";
-import Constants from "expo-constants";
+import { NotePageStyles } from "../../styles/pages/NoteStyles";
 
 const user = User.getInstance();
 
@@ -110,12 +109,12 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
 
   return (
     <View>
-      <View style={styles.topContainer}>
-        <TouchableOpacity style={styles.topButtons} onPress={saveNote}>
+      <View style={NotePageStyles.topContainer}>
+        <TouchableOpacity style={NotePageStyles.topButtons} onPress={saveNote}>
           <Ionicons name="arrow-back-outline" size={30} color="white" />
         </TouchableOpacity>
         <TextInput
-          style={styles.title}
+          style={NotePageStyles.title}
           placeholder="Title Field Note"
           onChangeText={(text) => setTitleText(text)}
           value={titleText}
@@ -123,21 +122,21 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
 
         {isPublished ? (
           <TouchableOpacity
-            style={styles.topButtons}
+            style={NotePageStyles.topButtons}
             onPress={() => setIsPublished(!isPublished)}
           >
             <Ionicons name="share" size={30} color="white" />
           </TouchableOpacity>
         ) : (
           <TouchableOpacity
-            style={styles.topButtons}
+            style={NotePageStyles.topButtons}
             onPress={() => setIsPublished(!isPublished)}
           >
             <Ionicons name="share-outline" size={30} color="white" />
           </TouchableOpacity>
         )}
       </View>
-      <View style={styles.keyContainer}>
+      <View style={NotePageStyles.keyContainer}>
         <TouchableOpacity
           onPress={() => {
             setViewMedia(!viewMedia);
@@ -222,7 +221,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
         iconTint={"#000"}
         selectedIconTint={"#2095F2"}
       />
-      <View style={styles.container}>
+      <View style={NotePageStyles.container}>
         <ScrollView
           nestedScrollEnabled={true}
           showsVerticalScrollIndicator={false}
@@ -297,7 +296,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
           >
             <RichEditor
               ref={(r) => (richTextRef.current = r)}
-              style={styles.input}
+              style={NotePageStyles.input}
               autoCorrect={true}
               placeholder="Write your note here"
               onChange={(text) => setBodyText(text)}
@@ -314,87 +313,4 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
   );
 };
 
-const styles = StyleSheet.create({
-  topContainer: {
-    justifyContent: "space-between",
-    paddingHorizontal: 5,
-    paddingTop: Constants.statusBarHeight,
-    flexDirection: "row",
-    backgroundColor: "#F4DFCD",
-    alignItems: "center",
-    textAlign: "center",
-  },
-  topText: {
-    flex: 1,
-    maxWidth: "100%",
-    fontWeight: "700",
-    fontSize: 32,
-    textAlign: "center",
-  },
-  topButtons: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 99,
-  },
-  toggles: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 10,
-    zIndex: 99,
-  },
-  container: {
-    backgroundColor: "white",
-    overflow: "hidden",
-  },
-  title: {
-    height: 45,
-    width: "70%",
-    borderColor: "#111111",
-    borderWidth: 1,
-    borderRadius: 30,
-    paddingHorizontal: 10,
-    textAlign: "center",
-    fontSize: 30,
-  },
-  input: {
-    flex: 1,
-    borderColor: "#111111",
-    fontSize: 22,
-  },
-  addButton: {
-    position: "absolute",
-    bottom: 20,
-    right: 20,
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  keyContainer: {
-    height: 60,
-    paddingVertical: 5,
-    width: "100%",
-    backgroundColor: "#F4DFCD",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 40,
-  },
-  saveText: {
-    color: "#111111",
-    fontWeight: "bold",
-    fontSize: 12,
-  },
-});
-
 export default AddNoteScreen;
diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx
index 6692f13..481e242 100644
--- a/lib/screens/EditNoteScreen.tsx
+++ b/lib/screens/EditNoteScreen.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from "react";
 import {
   View,
   TextInput,
-  StyleSheet,
   Keyboard,
   ScrollView,
   useWindowDimensions,
@@ -28,6 +27,7 @@ import {
   actions,
 } from "react-native-pell-rich-editor";
 import LoadingImage from "../components/loadingImage";
+import { NotePageStyles } from "../../styles/pages/NoteStyles";
 
 const user = User.getInstance();
 
@@ -143,30 +143,30 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
 
   return (
     <View>
-      <View style={styles.topContainer}>
+      <View style={NotePageStyles.topContainer}>
         <TouchableOpacity
-          style={styles.topButtons}
+          style={NotePageStyles.topButtons}
           onPress={owner ? handleSaveNote : () => navigation.goBack()}
         >
           <Ionicons name="arrow-back-outline" size={30} color="white" />
         </TouchableOpacity>
         <TextInput
           placeholder="Title Field Note"
-          style={styles.title}
+          style={NotePageStyles.title}
           value={title}
           onChangeText={setTitle}
         />
         {owner ? (
           isPublished ? (
             <TouchableOpacity
-              style={styles.topButtons}
+              style={NotePageStyles.topButtons}
               onPress={() => setIsPublished(!isPublished)}
             >
               <Ionicons name="share" size={30} color="white" />
             </TouchableOpacity>
           ) : (
             <TouchableOpacity
-              style={styles.topButtons}
+              style={NotePageStyles.topButtons}
               onPress={() => setIsPublished(!isPublished)}
             >
               <Ionicons name="share-outline" size={30} color="white" />
@@ -176,7 +176,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           <View />
         )}
       </View>
-      <View style={styles.keyContainer}>
+      <View style={NotePageStyles.keyContainer}>
         <TouchableOpacity
           onPress={() => {
             setViewMedia(!viewMedia);
@@ -267,7 +267,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
         selectedIconTint={"#2095F2"}
       />
 
-      <View style={styles.container}>
+      <View style={NotePageStyles.container}>
         <ScrollView
           nestedScrollEnabled={true}
           showsVerticalScrollIndicator={false}
@@ -353,7 +353,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
                   shouldPlay={true}
                   useNativeControls={true}
                   isLooping={true}
-                  style={styles.video}
+                  style={NotePageStyles.video}
                 />
               )}
             </View>
@@ -367,7 +367,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           >
             <RichEditor
               ref={(r) => (richTextRef.current = r)}
-              style={styles.input}
+              style={NotePageStyles.input}
               autoCorrect={true}
               placeholder="Write your note here"
               onChange={(text) => setText(text)}
@@ -384,125 +384,120 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  topContainer: {
-    justifyContent: "space-between",
-    paddingHorizontal: 5,
-    paddingTop: Constants.statusBarHeight,
-    flexDirection: "row",
-    backgroundColor: "#F4DFCD",
-    alignItems: "center",
-    textAlign: "center",
-  },
-  topText: {
-    flex: 1,
-    maxWidth: "100%",
-    fontWeight: "700",
-    fontSize: 32,
-    textAlign: "center",
-  },
-  topButtons: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 99,
-  },
-  toggles: {
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 10,
-    zIndex: 99,
-  },
-  container: {
-    backgroundColor: "white",
-    overflow: "hidden",
-    paddingBottom: "50%",
-  },
-  title: {
-    height: 45,
-    width: "70%",
-    borderColor: "#111111",
-    borderWidth: 1,
-    borderRadius: 30,
-    paddingHorizontal: 10,
-    textAlign: "center",
-    fontSize: 30,
-  },
-  input: {
-    flex: 1,
-    borderColor: "#111111",
-    fontSize: 22,
-  },
-  addButton: {
-    position: "absolute",
-    bottom: 20,
-    right: 20,
-    backgroundColor: "#111111",
-    borderRadius: 50,
-    width: 50,
-    height: 50,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  keyContainer: {
-    height: 60,
-    paddingVertical: 5,
-    width: "100%",
-    backgroundColor: "#F4DFCD",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 40,
-  },
-  saveText: {
-    color: "#111111",
-    fontWeight: "bold",
-    fontSize: 12,
-  },
-  video: {
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignSelf: "center",
-  },
-  closeUnderlay: {
-    position: "absolute",
-    top: 50,
-    right: 10,
-    width: 50,
-    height: 50,
-    borderRadius: 30,
-    backgroundColor: "rgba(5,5,5,0.5)",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 100,
-  },
-  icon: {
-    alignSelf: "center",
-    marginLeft: 4,
-  },
-  footerContainer: {
-    backgroundColor: "rgba(255,255,255, 0.8)",
-    padding: 10,
-    alignItems: "center",
-    marginBottom: "13%",
-    width: "80%",
-    justifyContent: "center",
-    alignSelf: "center",
-    borderRadius: 10,
-  },
-  footerText: {
-    textAlign: "center",
-    fontSize: 16,
-    fontWeight: "700",
-  },
-});
+// const styles = StyleSheet.create({
+//   topContainer: {
+//     justifyContent: "space-between",
+//     paddingHorizontal: 5,
+//     paddingTop: Constants.statusBarHeight,
+//     flexDirection: "row",
+//     backgroundColor: "#F4DFCD",
+//     alignItems: "center",
+//     textAlign: "center",
+//   },
+//   topText: {
+//     flex: 1,
+//     maxWidth: "100%",
+//     fontWeight: "700",
+//     fontSize: 32,
+//     textAlign: "center",
+//   },
+//   topButtons: {
+//     backgroundColor: "#111111",
+//     borderRadius: 50,
+//     width: 50,
+//     height: 50,
+//     alignItems: "center",
+//     justifyContent: "center",
+//     zIndex: 99,
+//   },
+//   toggles: {
+//     backgroundColor: "#111111",
+//     borderRadius: 50,
+//     width: 50,
+//     height: 50,
+//     alignItems: "center",
+//     justifyContent: "center",
+//     marginLeft: 10,
+//     zIndex: 99,
+//   },
+//   container: {
+//     backgroundColor: "white",
+//     overflow: "hidden",
+//     paddingBottom: "50%",
+//   },
+//   title: {
+//     height: 45,
+//     width: "70%",
+//     borderColor: "#111111",
+//     borderWidth: 1,
+//     borderRadius: 30,
+//     paddingHorizontal: 10,
+//     textAlign: "center",
+//     fontSize: 30,
+//   },
+//   input: {
+//     flex: 1,
+//     borderColor: "#111111",
+//     fontSize: 22,
+//   },
+//   addButton: {
+//     position: "absolute",
+//     bottom: 20,
+//     right: 20,
+//     backgroundColor: "#111111",
+//     borderRadius: 50,
+//     width: 50,
+//     height: 50,
+//     alignItems: "center",
+//     justifyContent: "center",
+//   },
+//   keyContainer: {
+//     height: 60,
+//     paddingVertical: 5,
+//     width: "100%",
+//     backgroundColor: "#F4DFCD",
+//     flexDirection: "row",
+//     alignItems: "center",
+//     justifyContent: "space-between",
+//     paddingHorizontal: 40,
+//   },
+//   saveText: {
+//     color: "#111111",
+//     fontWeight: "bold",
+//     fontSize: 12,
+//   },
+//   
+//   closeUnderlay: {
+//     position: "absolute",
+//     top: 50,
+//     right: 10,
+//     width: 50,
+//     height: 50,
+//     borderRadius: 30,
+//     backgroundColor: "rgba(5,5,5,0.5)",
+//     alignItems: "center",
+//     justifyContent: "center",
+//     zIndex: 100,
+//   },
+//   icon: {
+//     alignSelf: "center",
+//     marginLeft: 4,
+//   },
+//   footerContainer: {
+//     backgroundColor: "rgba(255,255,255, 0.8)",
+//     padding: 10,
+//     alignItems: "center",
+//     marginBottom: "13%",
+//     width: "80%",
+//     justifyContent: "center",
+//     alignSelf: "center",
+//     borderRadius: 10,
+//   },
+//   footerText: {
+//     textAlign: "center",
+//     fontSize: 16,
+//     fontWeight: "700",
+//   },
+// });
 
 export default EditNoteScreen;
diff --git a/styles/colors.ts b/styles/colors.ts
index 3358efd..314ec3f 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -4,10 +4,10 @@ export const lightTheme = {
   backgroundPrimary: "#faf7f7",
   backgroundSecondary: "#fff",
   backgroundTertiary: "#111",
-  border: "#999",
   actionPrimary: "#1f65ff",
   highlightPrimary: "red",
   highlightSecondary: "#02c484",
+  highlightTertiary: "#F4DFCD",
 };
 
 export const darkTheme = {
@@ -16,8 +16,8 @@ export const darkTheme = {
   backgroundPrimary: "#111",
   backgroundSecondary: "#222",
   backgroundTertiary: "#000",
-  border: "#444",
   actionPrimary: "#1a58cc",
   highlightPrimary: "#cc0000",
   highlightSecondary: "#02c484",
+  highlightTertiary: "#444",
 };
diff --git a/styles/pages/HomeStyles.ts b/styles/pages/HomeStyles.ts
index aaa61b3..9763447 100644
--- a/styles/pages/HomeStyles.ts
+++ b/styles/pages/HomeStyles.ts
@@ -22,7 +22,7 @@ export const HomeStyles = StyleSheet.create({
     color: globalStyle.highlightSecondary,
   },
   highlightColor: {
-    color: globalStyle.border,
+    color: globalStyle.highlightTertiary,
   },
   backColor: {
     color: globalStyle.backgroundTertiary,
@@ -91,7 +91,7 @@ export const HomeStyles = StyleSheet.create({
   },
   filters: {
     justifyContent: "center",
-    borderColor: globalStyle.border,
+    borderColor: globalStyle.highlightTertiary,
     borderWidth: 2,
     borderRadius: 30,
     marginRight: 10,
diff --git a/styles/pages/NoteStyles.ts b/styles/pages/NoteStyles.ts
index e69de29..628eb5e 100644
--- a/styles/pages/NoteStyles.ts
+++ b/styles/pages/NoteStyles.ts
@@ -0,0 +1,89 @@
+import { StyleSheet } from "react-native";
+import { lightTheme, darkTheme } from "../colors";
+import Constants from "expo-constants";
+
+// build out settings for dark/light mode configuration
+const globalStyle = lightTheme;
+// const globalStyle = darkTheme;
+
+export const NotePageStyles = StyleSheet.create({
+  topContainer: {
+    justifyContent: "space-between",
+    paddingHorizontal: 5,
+    paddingTop: Constants.statusBarHeight,
+    flexDirection: "row",
+    backgroundColor: globalStyle.highlightTertiary,
+    alignItems: "center",
+    textAlign: "center",
+  },
+  topText: {
+    flex: 1,
+    maxWidth: "100%",
+    fontWeight: "700",
+    fontSize: 32,
+    textAlign: "center",
+    color: globalStyle.textPrimary,
+  },
+  topButtons: {
+    backgroundColor: globalStyle.backgroundTertiary,
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 99,
+  },
+  container: {
+    backgroundColor: globalStyle.backgroundPrimary,
+    overflow: "hidden",
+  },
+  title: {
+    height: 45,
+    width: "70%",
+    borderColor: globalStyle.backgroundTertiary,
+    borderWidth: 1,
+    borderRadius: 30,
+    paddingHorizontal: 10,
+    textAlign: "center",
+    fontSize: 30,
+    color: globalStyle.textPrimary,
+  },
+  input: {
+    flex: 1,
+    borderColor: globalStyle.backgroundTertiary,
+    fontSize: 22,
+    color: globalStyle.textPrimary,
+  },
+  addButton: {
+    position: "absolute",
+    bottom: 20,
+    right: 20,
+    backgroundColor: globalStyle.backgroundTertiary,
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  keyContainer: {
+    height: 60,
+    paddingVertical: 5,
+    width: "100%",
+    backgroundColor: globalStyle.highlightTertiary,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 40,
+  },
+  saveText: {
+    color: globalStyle.textPrimary,
+    fontWeight: "bold",
+    fontSize: 12,
+  },
+  video: {
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignSelf: "center",
+      },
+});