diff --git a/app/screens/list.tsx b/app/screens/list.tsx
index ec590069c8075829bfb02ffef7f70a6e0ab36eba..528de8caa6c9e03e890ba738e420f071cfce0265 100644
--- a/app/screens/list.tsx
+++ b/app/screens/list.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, Button, TextInput, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
 import Ionicons from '@expo/vector-icons/Ionicons';
-
+import {Entypo} from '@expo/vector-icons'
 export interface Todo {
     title: string;
     done: boolean;
@@ -52,10 +52,12 @@ const renderTodo = ({item} : any) => {
     }
     return(
         <View>
-            <TouchableOpacity onPress={toggleDone}>
-                {!item.done && <Ionicons name="checkmark-circle"  />}
-                <Text> {item.title}</Text>
+            <TouchableOpacity onPress={toggleDone} style={styles.todo}>
+                {item.done && <Ionicons name="checkmark-circle"  />}
+                 {!item.done && <Entypo name="circle" size={24} color="black"/>}
+                <Text style={styles.todoText}> {item.title}</Text>
             </TouchableOpacity>
+            <Ionicons name="trash-bin-outline" size={24} color="red" onPress={deleteItem}/>
         </View>
     );
 };
@@ -102,5 +104,21 @@ const styles = StyleSheet.create ({
         borderRadius: 4,
         padding: 10,
         backgroundColor: '#fff',
+    },
+
+    todoContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        padding: 10,
+        marginVertical: 4,
+    },
+    todoText: {
+        flex: 1,
+
+    },
+    todo: {
+     flexDirection: 'row',
+     alignItems: 'center',
     }
 });
\ No newline at end of file