diff --git a/src/App.jsx b/src/App.jsx
index 490be93..1706442 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,23 +8,22 @@ import Search from './components/Search'
 
 const App = () => {
   const [books, setBooks] = useState([])
-  const [filteredBooks, setFilteredBooks] = useState([])
-  const [selectedBook, setSelectedBook] = useState(null)
   const [showPanel, setShowPanel] = useState(false)
+  const [showFaves, setShowFaves] = useState(false)
+  const faveBookIds = JSON.parse(localStorage.getItem('faveBookIds') || '[]')
 
   useEffect(() => {
     const fetchData = async () => {
       const response = await fetch('https://book-club-json.herokuapp.com/books')
       const books = await response.json()
-      setBooks(books)
-      setFilteredBooks(books)
+      setBooks(books.map((book) => ({...book, isFaved: faveBookIds.includes(book.id)})))
     }
 
     fetchData()
   }, [])
 
-  const pickBook = (book) => {
-    setSelectedBook(book)
+  const pickBook = (bookId) => {
+    setBooks((books) => books.map((book) => ({...book, isPicked: book.id === bookId})))
     setShowPanel(true)
   }
 
@@ -32,37 +31,76 @@ const App = () => {
     setShowPanel(false)
   }
 
+  const toggleShowFaves = () => {
+    setShowFaves((showFaves) => !showFaves)
+  }
+
+  const toggleFave = (bookId) => {
+    setBooks((books) => {
+      const updatedBooks = books.map((book) =>
+        book.id === bookId ? {...book, isFaved: !book.isFaved} : book
+      )
+
+      localStorage.setItem(
+        'faveBookIds',
+        JSON.stringify(updatedBooks.filter(({isFaved}) => isFaved).map(({id}) => id))
+      )
+      return updatedBooks
+    })
+  }
+
   const filterBooks = (searchTerm) => {
     const stringSearch = (bookAttribute, searchTerm) =>
       bookAttribute.toLowerCase().includes(searchTerm.toLowerCase())
 
-    if (!searchTerm) {
-      setFilteredBooks(books)
-    } else {
-      setFilteredBooks(
-        books.filter(
-          (book) => stringSearch(book.title, searchTerm) || stringSearch(book.author, searchTerm)
-        )
-      )
-    }
+    setBooks((books) =>
+      books.map((book) => {
+        const isFiltered = !searchTerm
+          ? false
+          : stringSearch(book.title, searchTerm) || stringSearch(book.author, searchTerm)
+          ? false
+          : true
+        return {...book, isFiltered: isFiltered}
+      })
+    )
   }
 
-  const hasFiltered = filteredBooks.length !== books.length
+  const hasFiltered = books.some((book) => book.isFiltered)
+
+  const displayBooks = hasFiltered
+    ? books.filter((book) => !book.isFiltered)
+    : showFaves
+    ? books.filter((book) => book.isFaved)
+    : books
+
+  const selectedBook = books.find((book) => book.isPicked)
 
   return (
     <>
       <GlobalStyle />
       <Header>
-        <Search filterBooks={filterBooks} />
+        <Search
+          filterBooks={filterBooks}
+          toggleShowFaves={toggleShowFaves}
+          showFaves={showFaves}
+          faveBooksLength={faveBookIds.length}
+        />
       </Header>
       <BooksContainer
-        books={filteredBooks}
+        books={displayBooks}
         pickBook={pickBook}
         isPanelOpen={showPanel}
-        title={hasFiltered ? 'Search results' : 'All books'}
+        title={hasFiltered ? 'Search results' : showFaves ? 'Favourite books' : 'All books'}
       />
       <Transition in={showPanel} timeout={300}>
-        {(state) => <DetailPanel book={selectedBook} state={state} closePanel={closePanel} />}
+        {(state) => (
+          <DetailPanel
+            book={selectedBook}
+            state={state}
+            toggleFave={toggleFave}
+            closePanel={closePanel}
+          />
+        )}
       </Transition>
     </>
   )
diff --git a/src/assets/sad-face.svg b/src/assets/sad-face.svg
new file mode 100644
index 0000000..7dbeec9
--- /dev/null
+++ b/src/assets/sad-face.svg
@@ -0,0 +1,6 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 78C61.8823 78 78 61.8823 78 42C78 22.1177 61.8823 6 42 6C22.1177 6 6 22.1177 6 42C6 61.8823 22.1177 78 42 78ZM42 84C65.196 84 84 65.196 84 42C84 18.804 65.196 0 42 0C18.804 0 0 18.804 0 42C0 65.196 18.804 84 42 84Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 53C35.6657 53 32.2517 56.6062 30.6048 59.4884C29.7827 60.927 27.9502 61.4268 26.5116 60.6047C25.0731 59.7827 24.5733 57.9501 25.3953 56.5116C27.7483 52.3938 32.8703 47 42 47C51.236 47 55.7854 52.5382 58.4412 56.2563C59.4043 57.6045 59.092 59.4782 57.7437 60.4412C56.3955 61.4042 54.5219 61.092 53.5588 59.7437C51.2146 56.4618 48.2281 53 42 53Z" fill="black"/>
+<path d="M33 32C33 34.7614 30.7614 37 28 37C25.2386 37 23 34.7614 23 32C23 29.2386 25.2386 27 28 27C30.7614 27 33 29.2386 33 32Z" fill="black"/>
+<path d="M61 32C61 34.7614 58.7614 37 56 37C53.2386 37 51 34.7614 51 32C51 29.2386 53.2386 27 56 27C58.7614 27 61 29.2386 61 32Z" fill="black"/>
+</svg>
diff --git a/src/components/Book/index.jsx b/src/components/Book/index.jsx
index 93e80a6..4239b1a 100644
--- a/src/components/Book/index.jsx
+++ b/src/components/Book/index.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {Container, Cover, Title, Author} from './styles'
 
 const Book = ({book, pickBook, isLarge}) => (
-  <Container $isLarge={isLarge} onClick={() => pickBook && pickBook(book)}>
+  <Container $isLarge={isLarge} onClick={() => pickBook && pickBook(book.id)}>
     <Cover src={book.image} alt={`Book cover for ${book.title} by ${book.author}`} />
     <figcaption>
       <Title $isLarge={isLarge}>{book.title}</Title>
diff --git a/src/components/BooksContainer/index.jsx b/src/components/BooksContainer/index.jsx
index ab5040e..da1af88 100644
--- a/src/components/BooksContainer/index.jsx
+++ b/src/components/BooksContainer/index.jsx
@@ -1,7 +1,15 @@
 import React, {useRef, useEffect, useState} from 'react'
 import {debounce} from 'lodash-es'
 import Book from '../Book'
-import {Container, H2, BookList} from './styles'
+import {Container, H2, BookList, NoBooksContainer, H3, SadFace, H4} from './styles'
+
+const NoBooksMessage = () => (
+  <NoBooksContainer>
+    <H3>Oh dear!</H3>
+    <SadFace />
+    <H4>There are no books to see here.</H4>
+  </NoBooksContainer>
+)
 
 const BooksContainer = ({books, pickBook, title, isPanelOpen}) => {
   const prevPanelState = useRef(false)
@@ -31,11 +39,15 @@ const BooksContainer = ({books, pickBook, title, isPanelOpen}) => {
   return (
     <Container $isPanelOpen={isPanelOpen} $top={scroll}>
       <H2>{title}</H2>
-      <BookList>
-        {books.map((book) => (
-          <Book key={book.id} book={book} pickBook={pickBook} />
-        ))}
-      </BookList>
+      {books.length > 0 ? (
+        <BookList>
+          {books.map((book) => (
+            <Book key={book.id} book={book} pickBook={pickBook} />
+          ))}
+        </BookList>
+      ) : (
+        <NoBooksMessage />
+      )}
     </Container>
   )
 }
diff --git a/src/components/BooksContainer/styles.js b/src/components/BooksContainer/styles.js
index 5b3a276..ac64c47 100644
--- a/src/components/BooksContainer/styles.js
+++ b/src/components/BooksContainer/styles.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import {ReactComponent as SadFaceSVG} from '../../assets/sad-face.svg'
 
 export const Container = styled.div`
   background-color: #a7e1f8;
@@ -39,3 +40,32 @@ export const BookList = styled.div`
     grid-column-gap: 20px;
   }
 `
+
+export const NoBooksContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  height: 50vh;
+`
+
+export const H3 = styled.h3`
+  font-size: 34px;
+  margin: 0;
+  @media (max-width: 1000px) {
+    font-size: 30px;
+  }
+`
+
+export const H4 = styled.h4`
+  font-size: 24px;
+  margin: 0;
+  @media (max-width: 1000px) {
+    font-size: 20px;
+  }
+`
+
+export const SadFace = styled(SadFaceSVG)`
+  margin: 20px 0;
+`
diff --git a/src/components/DetailPanel/index.jsx b/src/components/DetailPanel/index.jsx
index 121cd59..e1319c6 100644
--- a/src/components/DetailPanel/index.jsx
+++ b/src/components/DetailPanel/index.jsx
@@ -1,9 +1,9 @@
 import React, {useRef, useEffect} from 'react'
 import Book from '../Book'
 import {CloseWrapper, Panel, BG, P, Em} from './styles'
-import {Close} from '../../styles'
+import {Close, Button} from '../../styles'
 
-const DetailPanel = ({book, closePanel, state}) => {
+const DetailPanel = ({book, closePanel, state, toggleFave}) => {
   const panelEl = useRef(null)
   const prevBook = useRef(null)
 
@@ -23,6 +23,9 @@ const DetailPanel = ({book, closePanel, state}) => {
         </CloseWrapper>
         {book && (
           <>
+            <Button onClick={() => toggleFave(book.id)} $hasEmoji={true}>
+              {book.isFaved ? '💔 Unfave book' : '❤️ Fave book'}
+            </Button>
             <Book book={book} isLarge={true} />
             <P>{book.description}</P>
             <P>
diff --git a/src/components/DetailPanel/styles.js b/src/components/DetailPanel/styles.js
index ce2dca9..da7f366 100644
--- a/src/components/DetailPanel/styles.js
+++ b/src/components/DetailPanel/styles.js
@@ -18,7 +18,7 @@ export const Panel = styled.article`
   background-color: #ffe581;
   border-left: 2px solid #000;
   box-sizing: border-box;
-  height: calc(100vh - 82px);
+  height: calc(100vh - 83px);
   width: 660px;
   position: fixed;
   z-index: 2;
@@ -29,10 +29,10 @@ export const Panel = styled.article`
   transition: 300ms;
   right: ${({$state}) => ($state === 'entering' || $state === 'entered' ? 0 : '-660px')};
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
+    height: calc(100vh - 75px);
     border-left: none;
     width: 100vw;
-    height: calc(100vh - 75px);
     padding: 40px 86px 20px 20px;
     bottom: ${({$state}) => ($state === 'entering' || $state === 'entered' ? 0 : '-100vh')};
     right: unset;
@@ -42,7 +42,7 @@ export const Panel = styled.article`
 export const CloseWrapper = styled(Pill)`
   position: fixed;
   cursor: pointer;
-  top: 120px;
+  top: 130px;
   right: 40px;
   z-index: 4;
   display: ${({$state}) => ($state === 'entered' ? 'flex' : 'none')};
@@ -51,7 +51,7 @@ export const CloseWrapper = styled(Pill)`
     margin-left: -3px;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
     top: unset;
     bottom: 20px;
     right: 20px;
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index b5ee704..1e446a5 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import {HeaderContainer, Logo} from './styles'
+import {HeaderContainer, Logo, RightContainer} from './styles'
 
 const Header = ({children}) => (
   <HeaderContainer>
     <a href="/">
       <Logo title="Book Club logo" />
     </a>
-    {children}
+    <RightContainer>{children}</RightContainer>
   </HeaderContainer>
 )
 
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index 00fc352..df82719 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -23,8 +23,14 @@ export const Logo = styled(LogoAsset)`
   width: 270px;
   display: block;
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
     height: 33px;
-    width: 222px;
+    width: 200px;
   }
 `
+
+export const RightContainer = styled.div`
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+`
diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx
index 0e59e90..10b31e3 100644
--- a/src/components/Search/index.jsx
+++ b/src/components/Search/index.jsx
@@ -1,8 +1,17 @@
 import React, {useState, useRef} from 'react'
-import {Input, SearchContainer, Icon, Wrapper} from './styles'
-import {Close} from '../../styles'
+import {Input, SearchContainer, Icon, Wrapper, FaveButtonContainer, Counter} from './styles'
+import {Close, Button} from '../../styles'
 
-const Search = ({filterBooks}) => {
+const FaveButton = ({faveBooksLength, toggleShowFaves, showFaves}) => (
+  <FaveButtonContainer>
+    <Counter>{faveBooksLength}</Counter>
+    <Button onClick={toggleShowFaves} $isHeader={true}>
+      {showFaves ? 'Hide faves' : 'Show faves'}
+    </Button>
+  </FaveButtonContainer>
+)
+
+const Search = ({filterBooks, faveBooksLength, toggleShowFaves, showFaves}) => {
   const inputEl = useRef(null)
   const [showOnDesktop, setShowOnDesktop] = useState(false)
 
@@ -22,6 +31,11 @@ const Search = ({filterBooks}) => {
 
   return (
     <Wrapper>
+      <FaveButton
+        toggleShowFaves={toggleShowFaves}
+        showFaves={showFaves}
+        faveBooksLength={faveBooksLength}
+      />
       <SearchContainer $showOnDesktop={showOnDesktop}>
         <Icon onClick={showSearch} />
         <Input ref={inputEl} type="text" name="search" onChange={handleChange} autoComplete="off" />
diff --git a/src/components/Search/styles.js b/src/components/Search/styles.js
index daefeae..caf756b 100644
--- a/src/components/Search/styles.js
+++ b/src/components/Search/styles.js
@@ -3,9 +3,11 @@ import {ReactComponent as MagnifyingIcon} from '../../assets/search.svg'
 import {Pill} from '../../styles'
 
 export const Wrapper = styled.div`
-  @media (max-width: 800px) {
+  display: flex;
+  gap: 20px;
+
+  @media (max-width: 1000px) {
     border-top: 2px solid black;
-    display: flex;
     align-items: center;
     justify-content: center;
     background: #ffbccc;
@@ -15,6 +17,7 @@ export const Wrapper = styled.div`
     bottom: 0;
     position: fixed;
     z-index: 1;
+    gap: unset;
   }
 `
 
@@ -26,13 +29,14 @@ export const SearchContainer = styled(Pill)`
   button {
     display: ${({$showOnDesktop}) => ($showOnDesktop ? 'block' : 'none')};
 
-    @media (max-width: 800px) {
+    @media (max-width: 1000px) {
       display: block;
     }
   }
 
-  @media (max-width: 800px) {
-    width: 85%;
+  @media (max-width: 1000px) {
+    width: 50%;
+    margin-right: 10px;
   }
 `
 
@@ -44,9 +48,31 @@ export const Input = styled.input`
   background: inherit;
   border: none;
   padding: 6px;
+  width: 100%;
 `
 
 export const Icon = styled(MagnifyingIcon)`
-  width: 20px;
+  width: 30px;
   cursor: pointer;
 `
+
+export const FaveButtonContainer = styled.div`
+  display: flex;
+
+  @media (max-width: 1000px) {
+    position: relative;
+    left: -15px;
+  }
+`
+
+export const Counter = styled(Pill)`
+  position: relative;
+  right: -150px;
+  bottom: 10px;
+  padding: 4px;
+
+  @media (max-width: 1000px) {
+    right: -120px;
+    padding: 2px;
+  }
+`
diff --git a/src/styles.js b/src/styles.js
index 328c849..631e12f 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -29,7 +29,7 @@ export const Close = styled.button`
   border: 0;
   cursor: pointer;
   height: 24px;
-  padding: 0;
+  padding: 0 12px;
   position: relative;
   width: 24px;
 
@@ -50,3 +50,21 @@ export const Close = styled.button`
     transform: rotate(-45deg);
   }
 `
+
+export const Button = styled.button`
+  display: block;
+  border-radius: 30px;
+  padding: ${({$hasEmoji}) => ($hasEmoji ? '5px 14px' : '8px')};
+  border: 2px solid #000;
+  background: transparent;
+  font-family: 'Work Sans', sans-serif;
+  font-size: 18px;
+  margin-bottom: ${({$isHeader}) => ($isHeader ? '0' : '14px')};
+  cursor: pointer;
+  width: ${({$isHeader}) => ($isHeader ? '140px' : 'unset')};
+
+  @media (max-width: 1000px) {
+    font-size: 14px;
+    width: ${({$isHeader}) => ($isHeader ? '110px' : 'unset')};
+  }
+`