diff --git a/screens/DetailsScreen.js b/screens/DetailsScreen.js
index 632aff2..0a30c05 100644
--- a/screens/DetailsScreen.js
+++ b/screens/DetailsScreen.js
@@ -1,6 +1,6 @@
 
-import React, {Component} from 'react';
-import { StyleSheet} from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet } from 'react-native';
 
 import { Container, Header, Content, Icon, Accordion, Text, View, Button, Right } from "native-base";
 
@@ -16,9 +16,10 @@ function renderHeader(item, expanded) {
       flexDirection: "row",
       padding: 10,
       justifyContent: "space-between",
-      alignItems: "center" ,
-      backgroundColor: "#A9DAD6" }}>
-    <Text style={{ fontWeight: "600", color: "#505050" }}>
+      alignItems: "center",
+      backgroundColor: "#A9DAD6"
+    }}>
+      <Text style={{ fontWeight: "600", color: "#505050" }}>
         {" "}{item.title}
       </Text>
       {expanded
@@ -30,27 +31,37 @@ function renderHeader(item, expanded) {
 
 function renderContent(item) {
   return (
-    <View style={{backgroundColor: "#e3f1f1"}}>
+    <View style={{ backgroundColor: "#e3f1f1" }}>
       <Text
         style={{
           backgroundColor: "#e3f1f1",
           padding: 10,
           fontStyle: "italic",
         }}
-      >   
+      >
         {item.content}
       </Text>
       <Right>
-        <Button iconLeft bordered success style={{backgroundColor: "white"}}>
-          <Icon type="FontAwesome" name="recycle" style = {{color: "green"}}/>
+        <Button iconLeft bordered success style={{ backgroundColor: "white" }}>
+          <Icon type="FontAwesome" name="recycle" style={{ color: "#23A75B" }} />
           <Text>I Recycled this</Text>
         </Button>
-      </Right>     
+      </Right>
     </View>
   );
 }
 
-export default function DetailsScreen () {
+export default function DetailsScreen({ route }) {
+  // fetch(`http://192.168.0.108:3000/search/${id}`, {
+  //   method: 'GET',
+  //   headers: {
+  //     'Content-Type': 'application/json'
+  //   }
+  // })
+  //   .then(res => res.json())
+  //   .then(res => res)
+  //   .catch(err => console.log({ err: 'err in search get fetch' }))
+  console.log(route.params.item)
   return (
     <Container>
       <Content padder style={{ backgroundColor: "white" }}>
diff --git a/screens/LoginScreen.js b/screens/LoginScreen.js
index 9d8337b..58c0fd3 100644
--- a/screens/LoginScreen.js
+++ b/screens/LoginScreen.js
@@ -4,7 +4,8 @@ import {
   Text,
   Image,
   TextInput,
-  TouchableOpacity
+  TouchableOpacity,
+  StyleSheet
 } from 'react-native';
 import { AuthContext } from '../contexts/AuthContext';
 
@@ -36,26 +37,82 @@ const LoginScreen = ({ navigation }) => {
   });
 
 
+  const handleGetUserData = () => {
+    /* get all a users data from database */
+    fetch(`http://192.168.0.110:3000/users/${id}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(res => res.json())
+      .then(res => console.log('fetch res', res))
+      .catch(err => console.log({ err: 'err in login get fetch' }))
+  }
 
   return (
-    <View>
+    <View style={styles.container}>
       <Image source={require('../assets/images/logo.png')} />
 
-      <TextInput onChangeText={text => setLoginState({ ...loginState, username: text })} style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+      <TextInput style={styles.input} onChangeText={text => setLoginState({ ...loginState, username: text })}
         placeholder="Username" />
-      <TextInput onChangeText={text => setLoginState({ ...loginState, password: text })} style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+      <TextInput style={styles.input} onChangeText={text => setLoginState({ ...loginState, password: text })}
         placeholder="Password" />
-      <View>
-        <TouchableOpacity onPress={handleLoginPress} style={{ borderColor: 'gray', borderWidth: 1 }}><Text>Login</Text></TouchableOpacity>
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity onPress={handleLogin} ><Text style={styles.buttonText}>Login</Text></TouchableOpacity>
       </View>
-      <View>
-        <Text>Forgot your login details?</Text><TouchableOpacity onPress={handleLoginPress} ><Text>Get help signing in.</Text></TouchableOpacity>
+      <View style={styles.text}>
+        <Text>Forgot your login details?</Text><TouchableOpacity onPress={handleLogin} ><Text style={{ color: "#23A75B", textAlign: 'center' }}>Get help signing in.</Text></TouchableOpacity>
       </View>
       <View>
-        <Text>Don't have an account?</Text><TouchableOpacity onPress={handleSignupPress} ><Text>Sign Up.</Text></TouchableOpacity>
+        <Text>Don't have an account?</Text><TouchableOpacity onPress={handleSignupPress} ><Text style={{ color: "#23A75B", textAlign: 'center' }}>Sign Up.</Text></TouchableOpacity>
       </View>
     </View >
   )
 }
 
-export default React.memo(LoginScreen);
\ No newline at end of file
+export default React.memo(LoginScreen);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    width: 420,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 80,
+    paddingTop: 125,
+    paddingBottom: 180,
+  },
+  input: {
+    height: 40,
+    backgroundColor: 'rgb(255, 255, 255)',
+    marginBottom: 20,
+    width: 200,
+    paddingHorizontal: 10,
+    color: 'black',
+    borderColor: 'gray',
+    borderWidth: 1
+  },
+  buttonContainer: {
+    backgroundColor: '#23A75B',
+    paddingVertical: 15,
+    borderRadius: 5,
+    marginTop: 10,
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+    fontWeight: '700',
+    fontSize: 16,
+    width: 175
+  },
+  addText: {
+    textAlign: 'center',
+    color: 'white',
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  text: {
+    marginTop: 25,
+  }
+});
\ No newline at end of file
diff --git a/screens/SearchScreen.js b/screens/SearchScreen.js
index c641484..e869d52 100644
--- a/screens/SearchScreen.js
+++ b/screens/SearchScreen.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Container,
   Header,
@@ -17,6 +17,16 @@ import { TextInput, Alert } from 'react-native';
 
 const SearchScreen = ({ navigation }) => {
   const [searchInput, setSearchInput] = useState('');
+  const [top, topOnChange] = useState(['CFL Lightbulbs',
+    'Paper',
+    'Aluminum Cans',
+    'Cardboard',
+    'Newspapers',
+    'Plastic Bottles',
+    'Glass Containers',
+    'Glossy Magazines',
+    'Oil-Based Paints',
+    'Christmas Trees']);
 
   const handleItemPress = item => {
     navigation.navigate('Details', {
@@ -26,24 +36,24 @@ const SearchScreen = ({ navigation }) => {
 
   const handleSearchPress = () => {
     if (searchInput !== '') {
-      // handle search
+      getSearched();
     } else {
       Alert.alert('Invalid Input', 'Please enter a valid search')
     }
   }
+  const getSearched = () => {
+    /* get search result data from database */
+    fetch(`http://192.168.0.108:3000/search/${id}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(res => res.json())
+      .then(res => res.rows)
+      .catch(err => console.log({ err: 'err in search get fetch' }))
+  }
 
-  const top = [
-    'CFL Lightbulbs',
-    'Paper',
-    'Aluminum Cans',
-    'Cardboard',
-    'Newspapers',
-    'Plastic Bottles',
-    'Glass Containers',
-    'Glossy Magazines',
-    'Oil-Based Paints',
-    'Christmas Trees'
-  ];
 
   const topList = top.map((item, i) => {
     return (
@@ -57,14 +67,15 @@ const SearchScreen = ({ navigation }) => {
       </ListItem>
     );
   });
+
   return (
     <Container>
       <Header searchBar rounded style={{ backgroundColor: "#23A75B" }}>
         <Item>
           <Icon name="ios-search" />
           <TextInput onChangeText={text => setSearchInput(text)} placeholder="Search" />
-          <Right style={{marginRight: 10}}>
-          <Icon name="ios-people" />
+          <Right style={{ marginRight: 10 }}>
+            <Icon name="ios-people" />
           </Right>
         </Item>
         <Right style={{ flex: 0.25 }}>
diff --git a/server/controllers/searchController.js b/server/controllers/searchController.js
index a51f78e..3c90e5c 100644
--- a/server/controllers/searchController.js
+++ b/server/controllers/searchController.js
@@ -63,4 +63,5 @@ searchController.deleteSearch = (req, res, next) => {
     .catch(err => next(err))
 }
 
-module.exports = searchController
\ No newline at end of file
+module.exports = searchController
+