diff --git a/Part_8/library-frontend/src/App.js b/Part_8/library-frontend/src/App.js
index 8e31b69..f5a2735 100644
--- a/Part_8/library-frontend/src/App.js
+++ b/Part_8/library-frontend/src/App.js
@@ -8,7 +8,7 @@ import { useApolloClient, useSubscription } from '@apollo/client'
 import Recommend from './components/Recommended'
 import { ALL_BOOKS, BOOK_ADDED } from './queries'
 
-export const updateCache = (cache, query, addedBook) => {
+const updateCache = (cache, query, addedBook) => {
 	const uniqById = a => {
 		let seen = new Set()
 		return a.filter(item => {
diff --git a/Part_8/library-frontend/src/components/Books.js b/Part_8/library-frontend/src/components/Books.js
index 8e841c6..7cbaff5 100644
--- a/Part_8/library-frontend/src/components/Books.js
+++ b/Part_8/library-frontend/src/components/Books.js
@@ -1,6 +1,7 @@
-import { ApolloConsumer, useQuery } from '@apollo/client'
+import { ApolloConsumer, useQuery, useSubscription } from '@apollo/client'
 import { union } from 'lodash'
 import { ALL_BOOKS } from '../queries'
+import { BOOK_ADDED } from '../queries.js'
 import { useState } from 'react'
 import { useEffect } from 'react'
 
@@ -16,7 +17,7 @@ const Books = () => {
 	const result = useQuery(ALL_BOOKS, {
 		variables: { genre: selectedGenre }
 	})
-		
+
 	useEffect(() => {
 		if (result.data) {
 			const allBookGenres = getAllGenres(result.data.allBooks)
@@ -30,6 +31,17 @@ const Books = () => {
 		}
 	}, [result.data])
 
+	useSubscription(BOOK_ADDED, {
+    onData: ({ data }) => {
+		  const addedBook = data.data.bookAdded
+		  setBooks((prevBooks) => {
+			const updatedBooks = prevBooks.concat(addedBook)
+			return selectedGenre ? updatedBooks.filter((book) => book.genres.includes(selectedGenre)) : updatedBooks
+		  })
+		},
+	  })
+
+
     if (result.loading) {
         return <div>Loading Data...</div>
     }
diff --git a/Part_8/library-frontend/src/components/NewBook.js b/Part_8/library-frontend/src/components/NewBook.js
index 4f2bce0..ef6bea7 100644
--- a/Part_8/library-frontend/src/components/NewBook.js
+++ b/Part_8/library-frontend/src/components/NewBook.js
@@ -76,11 +76,11 @@ const NewBook = () => {
                     </button>
                 </p>
             </div>
-            <div><p>genres: {genres.join(', ')}</p></div>
+            <div><p>Genres: {genres.join(', ')}</p></div>
             <button type="submit">Add Book</button>
         </form>
         </div>
     )
 }
 
-export default NewBook
\ No newline at end of file
+export default NewBook
diff --git a/Part_8/library-frontend/src/components/Recommended.js b/Part_8/library-frontend/src/components/Recommended.js
index 2dc2abe..8e17f67 100644
--- a/Part_8/library-frontend/src/components/Recommended.js
+++ b/Part_8/library-frontend/src/components/Recommended.js
@@ -1,17 +1,28 @@
-import { useQuery } from '@apollo/client'
-import { ALL_BOOKS, ME } from '../queries'
+import { useQuery, useSubscription } from '@apollo/client'
+import { updateCache } from '../App'
+import { ALL_BOOKS, BOOK_ADDED, ME } from '../queries'
 
 const Recommend = () => {
     const result = useQuery(ME)
     const bookResult = useQuery(ALL_BOOKS)
 
+	useSubscription(BOOK_ADDED, {
+		onData: ({ data }) => {
+			const addedBook = data.data.bookAdded
+			if (addedBook) {
+				const updatedBooks = bookResult.data.allBooks.concat(addedBook)
+				bookResult.allBooks = updatedBooks
+			}
+		}
+	})
+
     if (result.loading || bookResult.loading) {
         return <div>Loading Data...</div>
     }
 
     const user = result.data.me
 	const userBooks = bookResult.data.allBooks.filter(book => book.genres.includes(user.favouriteGenre))
-    
+
     if (!user || !userBooks) {
         return <div>Data Not Available...</div>
     }