diff --git a/package-lock.json b/package-lock.json
index ff8f93b..639145e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@expo-google-fonts/open-sans": "^0.2.3",
         "@react-native-async-storage/async-storage": "^1.19.3",
+        "@react-native-community/datetimepicker": "^7.2.0",
         "@react-navigation/bottom-tabs": "^6.5.8",
         "@react-navigation/material-top-tabs": "^6.6.3",
         "@react-navigation/native": "^6.1.7",
@@ -5870,6 +5871,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-7.2.0.tgz",
+      "integrity": "sha512-dO1sQy83M/EvnHE2egto05iwXZX7EYn5f/VDMp6afZFRFXRiRo7CzB3VFg4B55gJRJMNBv06NYMLPM3SlpnEGQ==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.72.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.72.0.tgz",
diff --git a/package.json b/package.json
index 6aedd17..553b1d5 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo-google-fonts/open-sans": "^0.2.3",
     "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
diff --git a/src/components/AppButton.js b/src/components/AppButton.js
index 564cb1a..5d46db1 100644
--- a/src/components/AppButton.js
+++ b/src/components/AppButton.js
@@ -4,11 +4,12 @@ import TextOpen from "./TextOpen"
 
 const AppButton = ({
   onPress,
-  title
+  title,
+  style
 }) => {
   return (
     <Pressable
-      style = {styles.btn}
+      style = {{...styles.btn, ...style}}
       onPress = {onPress}
     >
       <TextOpen
diff --git a/src/components/AppTextInput.js b/src/components/AppTextInput.js
index e72fe79..6168628 100644
--- a/src/components/AppTextInput.js
+++ b/src/components/AppTextInput.js
@@ -9,7 +9,7 @@ const AppTextInput = ({
     <View style = {{flex: 1}}>
       <TextInput
         style = {{
-          borderColor: colors.inputBorder,
+          borderColor: "rgba(244, 198, 255, 1)",
           borderWidth: 0.5,
           paddingVertical: 10,
           paddingHorizontal: 10,
diff --git a/src/components/CreateEventInputBox.js b/src/components/CreateEventInputBox.js
index b14f309..5ab780d 100644
--- a/src/components/CreateEventInputBox.js
+++ b/src/components/CreateEventInputBox.js
@@ -16,13 +16,13 @@ const CreateEventInputBox = ({
     <View style = {{
       flexDirection: "row", 
       flex: 1, 
-      backgroundColor: "#f0f0f0",
+      backgroundColor: "rgba(240, 232, 242, 1)",
       borderRadius: 10,
       ...style
     }}
     >
       <AppTextInput
-        onChangeText = {onChangeText}
+        onChangeText = {val => onChangeText(val)}
         style = {{borderTopRightRadius: button ? 0 : 10 , borderBottomRightRadius: button ? 0 : 10}}
         
         {...props}
@@ -35,10 +35,10 @@ const CreateEventInputBox = ({
           source = {iconSrc}
           style = {{width: 20, height: 20}}
         />
-        <TextOpen 
+        {btnText && <TextOpen 
           style = {styles.label}
           font = {"OpenSans_600SemiBold"}
-        >{btnText}</TextOpen>
+        >{btnText}</TextOpen>}
       </Pressable>}
     </View>
     
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 10,
     borderBottomRightRadius: 10,
     borderWidth: 0.5,
+    borderColor: "rgba(244, 198, 255, 1)",
     
   },
 })
\ No newline at end of file
diff --git a/src/components/EventItem.js b/src/components/EventItem.js
index 7ee44ad..7929cd4 100644
--- a/src/components/EventItem.js
+++ b/src/components/EventItem.js
@@ -1,4 +1,7 @@
 import {View, Text, Image, StyleSheet} from "react-native";
+import colors from "../layouts/colors"
+import openSans from "../layouts/fonts"
+import TextOpen from "./TextOpen"
 import colors from "../layouts/colors";
 import openSans from "../layouts/fonts";
 
@@ -11,6 +14,23 @@ const EventItem = () => {
           style={{width: 50, height: 50}}
         />
       </View>
+      <View style = {{gap: 5, flex: 1}}>
+        <TextOpen 
+          style = {styles.title}
+          font = {"OpenSans_700Bold"}
+        >Football Game</TextOpen>
+        <TextOpen 
+          style = {styles.date}
+          font = {"OpenSans_600SemiBold"}
+        >May 20, 2023</TextOpen>
+        <TextOpen 
+          style = {styles.time}
+          font = {"OpenSans_600SemiBold"}
+        >Friday 4-6pm</TextOpen>
+        <TextOpen 
+          style = {styles.location}
+          font = {"OpenSans_700Bold"}
+        >Teslim Balogun Stadium</TextOpen>
       <View style={{gap: 2, flex: 1}}>
         <Text style={styles.title}>Football Game</Text>
         <Text style={styles.date}>May 20, 2023</Text>
@@ -67,7 +87,6 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 18,
-    fontWeight: "bold",
     color: "rgba(124, 20, 155, 1)",
   },
   date: {
@@ -76,11 +95,11 @@ const styles = StyleSheet.create({
   },
   time: {
     color: "#000",
-    fontSize: 12,
+    fontSize: 14,
   },
   location: {
     fontSize: 18,
     fontWeight: "bold",
-    color: "rgba(234, 186, 0, 1)",
+    color: "#f49400"
   },
 });
diff --git a/src/navigators/HomeStack.js b/src/navigators/HomeStack.js
index 1dc1bcf..81f3131 100644
--- a/src/navigators/HomeStack.js
+++ b/src/navigators/HomeStack.js
@@ -9,7 +9,7 @@ const HomeStack = () => {
     <Stack.Navigator 
       screenOptions = {{headerShown: false}}
     >
-      <Stack.Screen name = {"Home"} component = {Home}/>
+      <Stack.Screen name = {"HomeScreen"} component = {Home}/>
       <Stack.Screen name = {"Create"} component = {CreateEvent}/>
     </Stack.Navigator>
   )
diff --git a/src/screens/AllEvents.js b/src/screens/AllEvents.js
index 351262b..96e3bac 100644
--- a/src/screens/AllEvents.js
+++ b/src/screens/AllEvents.js
@@ -19,7 +19,7 @@ const AllEvents = () => {
       >
         <Image
           source = {require("../../assets/icons/plus-icon.png")}
-          style = {{width: 20, height: 20}}
+          style = {{width: 25, height: 25}}
         />
       </Pressable>
     </View>
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: 20,
     right: 20,
-    backgroundColor: "rgba(234, 186, 0, 1)",
+    backgroundColor: "#f49400",
     padding: 15,
     borderRadius: 50,
   }
diff --git a/src/screens/CreateEvent.js b/src/screens/CreateEvent.js
index 5fdb630..6898166 100644
--- a/src/screens/CreateEvent.js
+++ b/src/screens/CreateEvent.js
@@ -1,7 +1,7 @@
 import { StyleSheet, Text, View, TextInput, ScrollView, Pressable, Image } from 'react-native'
-import React, { useState } from 'react'
+import React, { useState, useReducer } from 'react'
 import Constants from "expo-constants"
-import DatePicker from "react-native-date-picker"
+import DateTimePicker from "@react-native-community/datetimepicker"
 import colors from "../layouts/colors"
 import CreateEventInputBox from "../components/CreateEventInputBox"
 import AppTextInput from "../components/AppTextInput"
@@ -9,56 +9,124 @@ import TextOpen from "../components/TextOpen"
 import AppButton from "../components/AppButton"
 import DropdownPicker from "react-native-dropdown-picker"
 
+const pickerReducer = (state, action) => {
+  switch (action.type) {
+    case 'START_DATE_OPEN':
+      return {...state, startDateOpen: true}
+      break;
+    case 'START_DATE_CLOSE':
+      return {...state, startDateOpen: false}
+      break;
+    case 'START_TIME_OPEN':
+      return {...state, startTimeOpen: true}
+      break;
+    case 'START_TIME_CLOSE':
+      return {...state, startTimeOpen: false}
+      break;
+    case 'END_DATE_OPEN':
+      return {...state, endDateOpen: true}
+      break;
+    case 'END_DATE_CLOSE':
+      return {...state, endDateOpen: false}
+      break;
+    case 'END_TIME_OPEN':
+      return {...state, endTimeOpen: true}
+      break;
+    case 'END_TIME_CLOSE':
+      return {...state, endTimeOpen: false}
+      break;
+    
+    default:
+      return state
+  }
+}
+
 const CreateEvent = () => {
   const [date, setDate] = useState(new Date())
-  const [dateOpen, setDateOpen] = useState(false)
-  const [timeOpen, setTimeOpen] = useState(false)
+  const [state, dispatch] = useReducer(pickerReducer, {})
   const [selectedGroup, setSelectedGroup] = useState("")
   const [openDropdown, setOpenDropdown] = useState(false)
+  const [startDate, setStartDate] = useState(null)
+  const [endDate, setEndDate] = useState(null)
   const groups = [
     {
       value: 1,
-      label: "YBNL group",
+      label: "Mafia group",
     },
     {
       value: 2,
-      label: "Mafia group",
+      label: "Techies",
     },
+    
   ]
   
+  const [newEvent, setNewEvent] = useState({})
+  const [formatted, setFormatted] = useState({})
+  
   return (
     <View style = { styles.container}>
-      <DatePicker
-        modal
-        open = {dateOpen}
-        date = {date}
+    
+      {state.startDateOpen && <DateTimePicker
+        display = {"default"}
+        value = {date}
         mode = {"date"}
-        onConfirm = {(date) => {
-          console.log(date);
-          setDateOpen(false)
+        onChange = {(e, selectedDate) => {
+          setDate(selectedDate)
+          setFormatted({...formatted, startDate: `${selectedDate.getUTCDate()}/${(selectedDate.getUTCMonth() + 1) < 10 ? "0" + (selectedDate.getUTCMonth() + 1) : selectedDate.getUTCMonth()+ 1}/${selectedDate.getUTCFullYear()}`});
+          setNewEvent({...newEvent, startDate: selectedDate})
+          dispatch({type: "START_DATE_CLOSE"})
         }}
-        onCancel = {() => {
-          setDateOpen(false)
+        minimumDate = {new Date()}
+        
+      />}
+      {state.endDateOpen && <DateTimePicker
+        display = {"default"}
+        value = {date}
+        mode = {"date"}
+        onChange = {(e, selectedDate) => {
+          setDate(selectedDate)
+          setFormatted({...formatted, endDate: `${selectedDate.getUTCDate()}/${(selectedDate.getUTCMonth() + 1) < 10 ? "0" + (selectedDate.getUTCMonth() + 1) : selectedDate.getUTCMonth()+ 1}/${selectedDate.getUTCFullYear()}`});
+          setNewEvent({...newEvent, endDate: selectedDate})
+          dispatch({type: "END_DATE_CLOSE"})
+          
         }}
-      />
-      <DatePicker
-        modal
-        open = {timeOpen}
-        date = {date}
+        minimumDate = {newEvent.startDate}
+        
+      />}
+      
+      {state.startTimeOpen && <DateTimePicker
+        display = "default"
+        value = {date}
         mode = {"time"}
-        onConfirm = {(date) => {
-          console.log(date);
-          setTimeOpen(false)
+        onChange = {(e, selectedDate) => {
+          setDate(selectedDate)
+          setFormatted({...formatted, startTime: `${(selectedDate.getUTCHours() + 1) < 10 ? "0" + (selectedDate.getUTCHours() + 1) : selectedDate.getUTCHours()+ 1}:${(selectedDate.getUTCMinutes() + 1) < 10 ? "0" + (selectedDate.getUTCMinutes()) : selectedDate.getUTCMinutes()}`});
+          setNewEvent({...newEvent, startDate: selectedDate})
+          dispatch({type: "START_TIME_CLOSE"})
         }}
-        onCancel = {() => {
-          setTimeOpen(false)
+        minimumDate = {new Date()}
+      />}
+      
+      {state.endTimeOpen && <DateTimePicker
+        display = "default"
+        value = {date}
+        mode = {"time"}
+        onChange = {(e, selectedDate) => {
+          setDate(selectedDate)
+          setFormatted({...formatted, endTime: `${(selectedDate.getUTCHours() + 1) < 10 ? "0" + (selectedDate.getUTCHours() + 1) : selectedDate.getUTCHours()+ 1}:${(selectedDate.getUTCMinutes() + 1) < 10 ? "0" + (selectedDate.getUTCMinutes()) : selectedDate.getUTCMinutes()}`});
+          setNewEvent({...newEvent, endDate: selectedDate})
+          dispatch({type: "END_TIME_CLOSE"})
         }}
-      />
+        minimumDate = {newEvent.startDate}
+      />}
     
     
       <ScrollView>
         <View style= {{marginBottom: 20}}>
-          <Text style = {styles.header}>Create Event</Text>
+          <TextOpen 
+            style = {styles.header}
+            font = {"OpenSans_700Bold"}
+          >Create Event</TextOpen>
         </View>
         
         <View style = {{marginBottom: 20}}>
@@ -67,7 +135,7 @@ const CreateEvent = () => {
             font = {"OpenSans_600SemiBold"}
           >Event Description</TextOpen>
           <CreateEventInputBox
-            onChangeText = {() => {}}
+            onChangeText = {(val) => setNewEvent({...newEvent, title: val})}
             button = {false}
             numberOfLines = {1}
           />
@@ -82,8 +150,8 @@ const CreateEvent = () => {
             button = {true}
             iconSrc = {require("../../assets/icons/location-icon.png")}
             btnText = {"Add Location"}
-            editable = {false}
             numberOfLines = {1}
+            onChangeText = {(val) => setNewEvent({...newEvent, location : val})}
           />
         </View>
         
@@ -98,20 +166,22 @@ const CreateEvent = () => {
               iconSrc = {require("../../assets/icons/calendar-icon.png")}
               numberOfLines = {1}
               editable = {false}
-              placeholder = {"DD/MM/YYYY"}
-              onPress = {() => setDateOpen(true)}
+              placeholder = {formatted?.startDate || "DD/MM/YYYY"}
+              onPress = {() => dispatch({type: "START_DATE_OPEN"})}
+              placeholderTextColor={formatted.startDate && "#000"}
             />
             <CreateEventInputBox
               button = {true}
               iconSrc = {require("../../assets/icons/time-icon.png")}
               numberOfLines = {1}
               editable = {false}
-              placeholder = {"00:00"}
-              onPress = {() => setTimeOpen(true)}
+              placeholder = {formatted.startTime || "00:00"}
+              onPress = {() => dispatch({type: "START_TIME_OPEN"})}
+              placeholderTextColor={formatted.startTime && "#000"}
             />
-            
           </View>
         </View>
+        
         <View style = {{marginBottom: 20}}>
           <TextOpen 
             style = {styles.label}
@@ -123,18 +193,19 @@ const CreateEvent = () => {
               iconSrc = {require("../../assets/icons/calendar-icon.png")}
               numberOfLines = {1}
               editable = {false}
-              placeholder = {"DD/MM/YYYY"}
-              onPress = {() => setDateOpen(true)}
+              placeholder = {formatted.endDate || "DD/MM/YYYY"}
+              onPress = {() => dispatch({type: "END_DATE_OPEN"})}
+              placeholderTextColor={formatted.endDate && "#000"}
             />
             <CreateEventInputBox
               button = {true}
               iconSrc = {require("../../assets/icons/time-icon.png")}
               numberOfLines = {1}
               editable = {false}
-              placeholder = {"00:00"}
-              onPress = {() => setTimeOpen(true)}
+              placeholder = {formatted.endTime || "00:00"}
+              onPress = {() => dispatch({type: "END_TIME_OPEN"})}
+              placeholderTextColor={formatted.endTime && "#000"}
             />
-            
           </View>
         </View>
         <View style ={{marginBottom: 30}}>
@@ -148,17 +219,18 @@ const CreateEvent = () => {
             items={groups}
             open={openDropdown}
             containerStyle={{
-              borderColor: colors.inputBorder,
+              borderColor: "rgba(244, 198, 255, 1)",
               backgroundColor: colors.white,
-              borderRadius: 10,
               zIndex: 1,
+              borderRadius: 10,
             }}
             style = {{
-              backgroundColor: "#f0f0f0",
+              backgroundColor: "rgba(240, 232, 242, 1)",
               borderWidth: 0.5,
+              borderColor: "rgba(244, 198, 255, 1)",
             }}
             placeholderStyle={{ fontSize: 16 }}
-            placeholder={selectedGroup ? selectedGroup : ""}
+            placeholder={newEvent?.group || ""}
             onPress={() => setOpenDropdown(!openDropdown)}
             keyExtractor={(item, index) => item}
             dropDownContainerStyle={{
@@ -168,7 +240,7 @@ const CreateEvent = () => {
             }}
             textStyle={{ fontSize: 16, }}
             onSelectItem={(val) => {
-              setSelectedGroup(val.label);
+              setNewEvent({...newEvent, group: val.label})
               setOpenDropdown(false);
             }}
             labelStyle={{ fontSize: 16, }}
@@ -177,8 +249,11 @@ const CreateEvent = () => {
         </View>
         
         <AppButton
-          onPress = {() => {}}
+          onPress = {() => {
+            console.log(newEvent);
+          }}
           title = {"Create Event"}
+          style = {{marginVertical: 20}}
         />
         
       </ScrollView>
@@ -197,7 +272,6 @@ const styles = StyleSheet.create({
     paddingBottom: 20,
   },
   header: {
-    fontWeight: "bold",
     color: "rgba(124, 20, 155, 1)",
     fontSize: 30,
   },
diff --git a/src/screens/FriendEvents.js b/src/screens/FriendEvents.js
index c8e25a4..c219faf 100644
--- a/src/screens/FriendEvents.js
+++ b/src/screens/FriendEvents.js
@@ -19,7 +19,7 @@ const FriendEvents = () => {
       >
         <Image
           source = {require("../../assets/icons/plus-icon.png")}
-          style = {{width: 20, height: 20}}
+          style = {{width: 25, height: 25}}
         />
       </Pressable>
     </View>
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: 20,
     right: 20,
-    backgroundColor: "rgba(234, 186, 0, 1)",
+    backgroundColor: "#f49400",
     padding: 15,
     borderRadius: 50,
   }
diff --git a/src/screens/Home.js b/src/screens/Home.js
index 7e942c3..351c010 100644
--- a/src/screens/Home.js
+++ b/src/screens/Home.js
@@ -2,11 +2,15 @@ import { StyleSheet, Text, View, Image } from 'react-native'
 import React from 'react'
 import Constants from "expo-constants"
 import TopBarNavigator from "../navigators/TopBarNavigation"
+import TextOpen from "../components/TextOpen"
 
 const Home = () => {
   return (
     <View style = { styles.container}>
-      <Text style = {styles.header}>Timeline</Text>
+      <TextOpen 
+        style = {styles.header}
+        font = {"OpenSans_700Bold"}
+      >Timeline</TextOpen>
       
       <TopBarNavigator />
     </View>