diff --git a/src/App.js b/src/App.js
index e4b5a63..1e4acac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -125,6 +125,7 @@ const readData = async () => {
     listdata.push( item )
   })
   setData( listdata )
+ 
 }
 
 
diff --git a/src/pages/Home.js b/src/pages/Home.js
index c434765..7f7eb9b 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -3,44 +3,73 @@ import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
 import Card from "react-bootstrap/Card";
 
-import {ref, getDownloadURL} from "firebase/storage"
+import { ref, getDownloadURL } from "firebase/storage"
 import { useState, useEffect, useContext } from "react"
 import { StorageContext } from '../contexts/StorageContext';
 
-export function Home ( props ) {
-    const [ books, setBooks ] = useState([])
+export function Home(props) {
+    const [books, setBooks] = useState([props.items])
 
-    const Storage = useContext( StorageContext )
+    const Storage = useContext(StorageContext)
+    console.log(props.items)
 
-    useEffect( () => {
-    setBooks( props.items )
-    console.log( props.items )
-    },[props.items])
+    // useEffect( () => {
+    //     if( books.length === 0 )
+    //     setBooks(props.items)
+    // }
+    // , [props.items])
 
-    // collection
-    const Items = books.map( (item, key) => {
+    // card image component
+    const ItemImage = (props) => {
+        const [image, setImage] = useState()
+        useEffect(() => {
+
+
+        }, [props.name, image])
+        const imgRef = ref(Storage, `book_covers/${props.name}`)
+        if (image) {
+            return (
+                <Card.Img variant="top" src={image} />
+            )
+        }
+
+        else {
+            return (
+                <p>Loading...</p>
+            )
+        }
+    }
+ 
+    if (!books) {
+        return null
+    }
+    else {
+           // collection
+    const Items = books.map((item, key) => {
         return (
             <Col key={key} md="4">
                 <Card>
                     <Card.Body>
+                        <ItemImage name={item.cover_image} />
                         <Card.Title>{item.book_title}</Card.Title>
-                       <Card.Text>
-                       By {item.author}
+                        <Card.Text>
+                            By {item.author}
                         </Card.Text>
+                        <Card.Text>{item.cover_image}</Card.Text>
                     </Card.Body>
                 </Card>
 
             </Col>
         )
     })
+        return (
+            <Container>
+                <Row>
+                    {Items}
+                </Row>
+            </Container>
 
+        )
+    }
 
-    return (
-        <Container>
-            <Row>
-                {Items}
-            </Row>
-        </Container>
-
-    )
 }
\ No newline at end of file