diff --git a/Part_8/library-frontend/src/App.js b/Part_8/library-frontend/src/App.js
index e8967f5..03d40e0 100644
--- a/Part_8/library-frontend/src/App.js
+++ b/Part_8/library-frontend/src/App.js
@@ -2,16 +2,9 @@ import { useState } from 'react'
 import Authors from './components/Authors'
 import Books from './components/Books'
 import NewBook from './components/NewBook'
-import { useQuery } from '@apollo/client'
-import { ALL_AUTHORS } from './queries'
 
 const App = () => {
     const [page, setPage] = useState('authors')
-    const result = useQuery(ALL_AUTHORS)
-
-    if (result.loading) {
-        return <div>Loading Data...</div>
-    }
 
     return (
         <div>
@@ -21,7 +14,7 @@ const App = () => {
                 <button onClick={() => setPage('add')}>Add Book</button>
             </div>
 
-            <Authors show={page === 'authors'} authors={result.data.allAuthors} />
+            <Authors show={page === 'authors'} />
 
             <Books show={page === 'books'} />
 
diff --git a/Part_8/library-frontend/src/components/Authors.js b/Part_8/library-frontend/src/components/Authors.js
index 48429e9..d0ac13e 100644
--- a/Part_8/library-frontend/src/components/Authors.js
+++ b/Part_8/library-frontend/src/components/Authors.js
@@ -1,8 +1,19 @@
-const Authors = ({ authors, show }) => {
+import { useQuery } from '@apollo/client'
+import { ALL_AUTHORS } from '../queries'
+
+const Authors = ({ show }) => {
+    const result = useQuery(ALL_AUTHORS)
+    
     if (!show) {
         return null
     }
 
+    if (result.loading) {
+        return <div>Loading Data...</div>
+    }
+
+    const authors = result.data.allAuthors
+    
     if (!authors) {
         return <div>Data Not Available...</div>
     }
diff --git a/Part_8/library-frontend/src/components/Books.js b/Part_8/library-frontend/src/components/Books.js
index 32747ed..fb6ec9b 100644
--- a/Part_8/library-frontend/src/components/Books.js
+++ b/Part_8/library-frontend/src/components/Books.js
@@ -1,13 +1,26 @@
-const Books = (props) => {
-    if (!props.show) {
+import { useQuery } from '@apollo/client'
+import { ALL_BOOKS } from '../queries'
+
+const Books = ({ show }) => {
+    const result = useQuery(ALL_BOOKS)
+
+    if (!show) {
         return null
     }
+    
+    if (result.loading) {
+        return <div>Loading Data...</div>
+    }
 
-    const books = []
+    const books = result.data.allBooks
+    
+    if (!books) {
+        return <div>Data Not Available...</div>
+    }
 
     return (
         <div>
-        <h2>books</h2>
+        <h2>Books</h2>
 
         <table>
             <tbody>
diff --git a/Part_8/library-frontend/src/queries.js b/Part_8/library-frontend/src/queries.js
index 9264eb2..65d1113 100644
--- a/Part_8/library-frontend/src/queries.js
+++ b/Part_8/library-frontend/src/queries.js
@@ -8,4 +8,15 @@ query {
         bookCount
     }
 }
+`
+
+export const ALL_BOOKS = gql`
+query {
+    allBooks {
+        title
+        published
+        author
+        genres
+    }
+}
 `
\ No newline at end of file