diff --git a/Part_8/library-frontend/package-lock.json b/Part_8/library-frontend/package-lock.json
index 4eeaeba..bbc9fed 100644
--- a/Part_8/library-frontend/package-lock.json
+++ b/Part_8/library-frontend/package-lock.json
@@ -17,6 +17,7 @@
         "npm": "^9.6.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.11.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3130,6 +3131,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -17400,6 +17409,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -22390,6 +22429,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -32359,6 +32403,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "requires": {
+        "@remix-run/router": "1.6.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "requires": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/Part_8/library-frontend/package.json b/Part_8/library-frontend/package.json
index 642d60d..0dc5d67 100644
--- a/Part_8/library-frontend/package.json
+++ b/Part_8/library-frontend/package.json
@@ -12,6 +12,7 @@
     "npm": "^9.6.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/Part_8/library-frontend/src/App.js b/Part_8/library-frontend/src/App.js
index 03d40e0..cedcb28 100644
--- a/Part_8/library-frontend/src/App.js
+++ b/Part_8/library-frontend/src/App.js
@@ -1,24 +1,28 @@
-import { useState } from 'react'
+import { Routes, Route, Link, Navigate } from 'react-router-dom'
 import Authors from './components/Authors'
 import Books from './components/Books'
 import NewBook from './components/NewBook'
 
 const App = () => {
-    const [page, setPage] = useState('authors')
+
+    const padding = {
+        paddingRight: 5
+    }
 
     return (
         <div>
             <div>
-                <button onClick={() => setPage('authors')}>Authors</button>
-                <button onClick={() => setPage('books')}>Books</button>
-                <button onClick={() => setPage('add')}>Add Book</button>
+                <Link style={padding} to='/'>Authors</Link>
+                <Link style={padding} to='/books'>Books</Link>
+                <Link style={padding} to='/add-book'>Add Book</Link>
             </div>
 
-            <Authors show={page === 'authors'} />
-
-            <Books show={page === 'books'} />
-
-            <NewBook show={page === 'add'} />
+            <Routes>
+                <Route path='/' element={<Authors />}/>
+                <Route path='/authors' element={ <Navigate replace to='/' />} />
+                <Route path='/books' element={<Books />}/>
+                <Route path='/add-book' element={<NewBook />}/>
+            </Routes>
         </div>
     )
 }
diff --git a/Part_8/library-frontend/src/components/Authors.js b/Part_8/library-frontend/src/components/Authors.js
index d0ac13e..2467ccf 100644
--- a/Part_8/library-frontend/src/components/Authors.js
+++ b/Part_8/library-frontend/src/components/Authors.js
@@ -1,13 +1,9 @@
 import { useQuery } from '@apollo/client'
 import { ALL_AUTHORS } from '../queries'
 
-const Authors = ({ show }) => {
+const Authors = () => {
     const result = useQuery(ALL_AUTHORS)
     
-    if (!show) {
-        return null
-    }
-
     if (result.loading) {
         return <div>Loading Data...</div>
     }
diff --git a/Part_8/library-frontend/src/components/Books.js b/Part_8/library-frontend/src/components/Books.js
index fb6ec9b..0eb7fa2 100644
--- a/Part_8/library-frontend/src/components/Books.js
+++ b/Part_8/library-frontend/src/components/Books.js
@@ -1,13 +1,9 @@
 import { useQuery } from '@apollo/client'
 import { ALL_BOOKS } from '../queries'
 
-const Books = ({ show }) => {
+const Books = () => {
     const result = useQuery(ALL_BOOKS)
 
-    if (!show) {
-        return null
-    }
-    
     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 98ab465..4f2bce0 100644
--- a/Part_8/library-frontend/src/components/NewBook.js
+++ b/Part_8/library-frontend/src/components/NewBook.js
@@ -1,21 +1,26 @@
+import { useMutation } from '@apollo/client'
 import { useState } from 'react'
+import { ADD_BOOK, ALL_AUTHORS, ALL_BOOKS } from '../queries'
+import { useNavigate } from 'react-router-dom'
 
-const NewBook = (props) => {
+const NewBook = () => {
+    const navigate = useNavigate()
     const [title, setTitle] = useState('')
     const [author, setAuthor] = useState('')
     const [published, setPublished] = useState('')
     const [genre, setGenre] = useState('')
     const [genres, setGenres] = useState([])
 
-    if (!props.show) {
-        return null
-    }
+    const [ addBook ] = useMutation(ADD_BOOK, {
+        refetchQueries: [ { query: ALL_BOOKS }, { query: ALL_AUTHORS } ]
+    })
 
     const submit = async (event) => {
         event.preventDefault()
 
-        console.log('add book...')
+        await addBook({ variables: { title, author, published: parseInt(published), genres } })
 
+        navigate('/books')
         setTitle('')
         setPublished('')
         setAuthor('')
@@ -51,7 +56,7 @@ const NewBook = (props) => {
             </div>
             <div>
                 <p>
-                    published
+                    Published:&nbsp;
                     <input
                         type="number"
                         value={published}
@@ -67,12 +72,12 @@ const NewBook = (props) => {
                     />
                     &nbsp;
                     <button onClick={addGenre} type="button">
-                        add genre
+                        Add Genre
                     </button>
                 </p>
             </div>
             <div><p>genres: {genres.join(', ')}</p></div>
-            <button type="submit">create book</button>
+            <button type="submit">Add Book</button>
         </form>
         </div>
     )
diff --git a/Part_8/library-frontend/src/index.js b/Part_8/library-frontend/src/index.js
index 41ce149..d1977a1 100644
--- a/Part_8/library-frontend/src/index.js
+++ b/Part_8/library-frontend/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter as Router } from 'react-router-dom'
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
 
 import App from './App'
@@ -11,6 +12,8 @@ const client = new ApolloClient({
 
 ReactDOM.createRoot(document.getElementById('root')).render(
     <ApolloProvider client={client}>
-        <App />
+        <Router>
+            <App />
+        </Router>
     </ApolloProvider>
 )
\ No newline at end of file
diff --git a/Part_8/library-frontend/src/queries.js b/Part_8/library-frontend/src/queries.js
index 65d1113..b2c4e49 100644
--- a/Part_8/library-frontend/src/queries.js
+++ b/Part_8/library-frontend/src/queries.js
@@ -19,4 +19,20 @@ query {
         genres
     }
 }
+`
+
+export const ADD_BOOK = gql`
+mutation addBook($title: String!, $published: Int!, $author: String!, $genres: [String!]!) {
+    addBook(
+        title: $title,
+        published: $published,
+        author: $author,
+        genres: $genres
+    ) {
+        title
+        published
+        author
+        genres
+    }
+}
 `
\ No newline at end of file