diff --git a/src/App.css b/src/App.css
index b780245..67dac78 100644
--- a/src/App.css
+++ b/src/App.css
@@ -119,6 +119,7 @@ button:active {
 
 .search-books-results {
   padding: 80px 10px 20px;
+  height: 100vh;
 }
 
 /* books grid */
diff --git a/src/App.js b/src/App.js
index 55268a5..366dc71 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,15 +4,16 @@ import Navigation from './components/Navigation/Navigation'
 import Main from './components/Main/Main'
 import { StoreProvider } from './Store'
 import { getAll, update } from './BooksAPI'
-
 const BooksApp = () => {
   const [searchResults, setSearchResults] = useState([])
   const [books, setBooks] = useState([])
   const [shouldUpdate, setShouldUpdate] = useState(true)
+  const [darkTheme, setDarkTheme] = useState(true)
 
   const currentlyReading = books && books.filter((book) => book.shelf === 'currentlyReading')
   const wantToRead = books && books.filter((book) => book.shelf === 'wantToRead')
   const read = books && books.filter((book) => book.shelf === 'read')
+  const darkStyle = { background: '#313131' }
 
   useEffect(() => {
     if (shouldUpdate) {
@@ -49,24 +50,27 @@ const BooksApp = () => {
   }
 
   return (
-    <div className='app'>
-      <Navigation />
+    <StoreProvider
+      value={{
+        books,
+        handleShelf,
+        searchResults,
+        setSearchResults,
+        currentlyReading,
+        read,
+        wantToRead,
+        darkTheme,
+        setDarkTheme,
+      }}
+    >
+      <div style={darkTheme ? darkStyle : null} className='app'>
+        <Navigation />
+
+        {/* Pass books down to make it available for any consumer component within the provider */}
 
-      {/* Pass books down to make it available for any consumer component within the provider */}
-      <StoreProvider
-        value={{
-          books,
-          handleShelf,
-          searchResults,
-          setSearchResults,
-          currentlyReading,
-          read,
-          wantToRead,
-        }}
-      >
         <Main />
-      </StoreProvider>
-    </div>
+      </div>
+    </StoreProvider>
   )
 }
 
diff --git a/src/components/Book/Book.js b/src/components/Book/Book.js
index 10c4510..b17e946 100644
--- a/src/components/Book/Book.js
+++ b/src/components/Book/Book.js
@@ -5,8 +5,9 @@ import placeholder from '../../assets/book-placeholder.jpeg'
 
 const Book = ({ book, search }) => {
   const { title, authors, shelf, id, imageLinks } = book
-
-  const { books } = useContext(StoreContext)
+  const { books, darkTheme } = useContext(StoreContext)
+  const titleDarkStyle = { color: '#7dad7b' }
+  const authorDarkStyle = { color: '#abb3af' }
 
   // if book list coming from search results, check if book is already is in any shelf mybooks
   const isBook = () => {
@@ -34,8 +35,12 @@ const Book = ({ book, search }) => {
             <BookShelfChanger shelf={shelf} book={isBook() !== undefined ? isBook() : book} search={search} />
           </div>
         </div>
-        <div className='book-title'>{title}</div>
-        <div className='book-authors'>{bookAuthors}</div>
+        <div style={darkTheme ? titleDarkStyle : null} className='book-title'>
+          {title}
+        </div>
+        <div style={darkTheme ? authorDarkStyle : null} className='book-authors'>
+          {bookAuthors}
+        </div>
       </div>
     </li>
   )
diff --git a/src/components/BookShelf/BookShelf.js b/src/components/BookShelf/BookShelf.js
index dcc8b49..888fa00 100644
--- a/src/components/BookShelf/BookShelf.js
+++ b/src/components/BookShelf/BookShelf.js
@@ -1,9 +1,16 @@
+import { useContext } from 'react'
+import { StoreContext } from '../../Store'
 import BookList from '../BookList/BookList'
 
 const BookShelf = ({ name, books }) => {
+  const { darkTheme } = useContext(StoreContext)
+
+  const darkStyle = { color: '#7dad7b', borderBottomColor: 'rgb(97 92 92' }
   return (
     <section className='bookshelf'>
-      <h2 className='bookshelf-title'>{name && name}</h2>
+      <h2 style={darkTheme ? darkStyle : null} className='bookshelf-title'>
+        {name && name}
+      </h2>
       <div className='bookshelf-books'>
         <BookList books={books} />
       </div>
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index 0b88ef0..c23f532 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -1,7 +1,24 @@
+import { useContext } from 'react'
+import { StoreContext } from '../../Store'
+
 const Navigation = () => {
+  const { darkTheme, setDarkTheme } = useContext(StoreContext)
+  const buttonText = darkTheme ? 'Switch to light theme' : 'Switch to dark theme'
+
+  const style = { display: 'flex', justifyContent: 'space-between', padding: '10px 30px' }
+  const buttonLightStyle = { background: '#554e4e', color: '#f2f2f2' }
+
+  const handleClick = (e) => {
+    e.target.blur()
+    setDarkTheme(!darkTheme)
+  }
+
   return (
-    <nav className='list-books-title'>
+    <nav style={style} className='list-books-title'>
       <h1>MyReads</h1>
+      <button style={!darkTheme ? buttonLightStyle : null} onClick={handleClick}>
+        {buttonText}
+      </button>
     </nav>
   )
 }
diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js
index ac23d16..454358c 100644
--- a/src/components/Search/Search.js
+++ b/src/components/Search/Search.js
@@ -1,16 +1,23 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
+import { StoreContext } from '../../Store'
 import { Link } from 'react-router-dom'
 import BookList from '../BookList/BookList'
 import { search } from '../../BooksAPI'
 import { useDebounce } from '../../hooks/useDebounce'
 
 const Search = () => {
+  const { darkTheme } = useContext(StoreContext)
+
   // APi query value (delayed)
   const [query, setQuery] = useState('')
   const [searchResults, setSearchResults] = useState([])
   const [message, setMessage] = useState('')
   // Inpute value
   const [value, setValue] = useState('')
+  const darkStyleInner = { background: '#bec2be' }
+  const darkStyleOuter = { background: '#4b514d' }
+  const msgDarkStyle = { color: '#1fcf17' }
+  //#4b514d
 
   // fetch api
   useEffect(() => {
@@ -26,7 +33,7 @@ const Search = () => {
     if (query.length && !searchResults.length) {
       setTimeout(() => {
         setMessage('Not found! Try another search term!')
-      }, 800)
+      }, 1000)
     }
   }, [query, searchResults])
 
@@ -42,21 +49,26 @@ const Search = () => {
 
   return (
     <div className='search-books'>
-      <div className='search-books-bar'>
+      <div style={darkTheme ? darkStyleOuter : null} className='search-books-bar'>
         <Link className='close-search' to='/'>
           Close
         </Link>
         <div className='search-books-input-wrapper'>
           <input
+            style={darkTheme ? darkStyleInner : null}
             type='text'
-            placeholder='Search by title or author and add to your reads'
+            placeholder='Search by title or author'
             onChange={handleChange}
             value={value}
           />
         </div>
       </div>
       <div className='search-books-results'>
-        {searchResults.length ? <BookList search={true} books={searchResults} /> : <strong>{message}</strong>}
+        {searchResults.length ? (
+          <BookList search={true} books={searchResults} />
+        ) : (
+          <strong style={darkTheme ? msgDarkStyle : null}>{message}</strong>
+        )}
       </div>
     </div>
   )