diff --git a/app/components/Battle.js b/app/components/Battle.js
index 4458e7e..6576e8f 100644
--- a/app/components/Battle.js
+++ b/app/components/Battle.js
@@ -2,82 +2,72 @@ import React from 'react'
 import { FaUserFriends, FaFighterJet, FaTrophy, FaTimesCircle } from 'react-icons/fa'
 import PropTypes from 'prop-types'
 import Results from './Results'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 import { Link } from 'react-router-dom'
 
 function Instructions () {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {({ theme }) => (
-        <div className='instructions-container'>
-          <h1 className='center-text header-lg'>
-            Instructions
-          </h1>
-          <ol className='container-sm grid center-text battle-instructions'>
-            <li>
-              <h3 className='header-sm'>Enter two Github users</h3>
-              <FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
-            </li>
-            <li>
-              <h3 className='header-sm'>Battle</h3>
-              <FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
-            </li>
-            <li>
-              <h3 className='header-sm'>See the winners</h3>
-              <FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
-            </li>
-          </ol>
-        </div>
-      )}
-    </ThemeConsumer>
+    <div className='instructions-container'>
+      <h1 className='center-text header-lg'>
+        Instructions
+      </h1>
+      <ol className='container-sm grid center-text battle-instructions'>
+        <li>
+          <h3 className='header-sm'>Enter two Github users</h3>
+          <FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
+        </li>
+        <li>
+          <h3 className='header-sm'>Battle</h3>
+          <FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
+        </li>
+        <li>
+          <h3 className='header-sm'>See the winners</h3>
+          <FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
+        </li>
+      </ol>
+    </div>
   )
 }
 
-class PlayerInput extends React.Component {
-  state = {
-    username: ''
-  }
-  handleSubmit = (event) => {
-    event.preventDefault()
+function PlayerInput ({ onSubmit, label }) {
+  const [username, setUsername] = React.useState('')
 
-    this.props.onSubmit(this.state.username)
-  }
-  handleChange = (event) => {
-    this.setState({
-      username: event.target.value
-    })
-  }
-  render() {
-    return (
-      <ThemeConsumer>
-        {({ theme }) => (
-          <form className='column player' onSubmit={this.handleSubmit}>
-            <label htmlFor='username' className='player-label'>
-              {this.props.label}
-            </label>
-            <div className='row player-inputs'>
-              <input
-                type='text'
-                id='username'
-                className={`input-${theme}`}
-                placeholder='github username'
-                autoComplete='off'
-                value={this.state.username}
-                onChange={this.handleChange}
-              />
-              <button
-                className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
-                type='submit'
-                disabled={!this.state.username}
-              >
-                Submit
-              </button>
-            </div>
-          </form>
-        )}
-      </ThemeConsumer>
-    )
+  const handleSubmit = (e) => {
+    e.preventDefault()
+
+    onSubmit(username)
   }
+
+  const handleChange = (event) => setUsername(event.target.value)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <form className='column player' onSubmit={handleSubmit}>
+      <label htmlFor='username' className='player-label'>
+        {label}
+      </label>
+      <div className='row player-inputs'>
+        <input
+          type='text'
+          id='username'
+          className={`input-${theme}`}
+          placeholder='github username'
+          autoComplete='off'
+          value={username}
+          onChange={handleChange}
+        />
+        <button
+          className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
+          type='submit'
+          disabled={!username}
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  )
 }
 
 PlayerInput.propTypes = {
@@ -86,31 +76,29 @@ PlayerInput.propTypes = {
 }
 
 function PlayerPreview ({ username, onReset, label }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {({ theme }) => (
-        <div className='column player'>
-          <h3 className='player-label'>{label}</h3>
-          <div className={`row bg-${theme}`}>
-            <div className='player-info'>
-              <img
-                className='avatar-small'
-                src={`https://github.com/${username}.png?size=200`}
-                alt={`Avatar for ${username}`}
-              />
-              <a
-                href={`https://github.com/${username}`}
-                className='link'>
-                  {username}
-              </a>
-            </div>
-            <button className='btn-clear flex-center' onClick={onReset}>
-              <FaTimesCircle color='rgb(194, 57, 42)' size={26} />
-            </button>
-          </div>
+    <div className='column player'>
+      <h3 className='player-label'>{label}</h3>
+      <div className={`row bg-${theme}`}>
+        <div className='player-info'>
+          <img
+            className='avatar-small'
+            src={`https://github.com/${username}.png?size=200`}
+            alt={`Avatar for ${username}`}
+          />
+          <a
+            href={`https://github.com/${username}`}
+            className='link'>
+              {username}
+          </a>
         </div>
-      )}
-    </ThemeConsumer>
+        <button className='btn-clear flex-center' onClick={onReset}>
+          <FaTimesCircle color='rgb(194, 57, 42)' size={26} />
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -120,70 +108,63 @@ PlayerPreview.propTypes = {
   label: PropTypes.string.isRequired
 }
 
-export default class Battle extends React.Component {
-  state = {
-    playerOne: null,
-    playerTwo: null,
-  }
-  handleSubmit = (id, player) => {
-    this.setState({
-      [id]: player
-    })
-  }
-  handleReset = (id) => {
-    this.setState({
-      [id]: null
-    })
-  }
-  render() {
-    const { playerOne, playerTwo } = this.state
-
-    return (
-      <React.Fragment>
-        <Instructions />
-
-        <div className='players-container'>
-          <h1 className='center-text header-lg'>Players</h1>
-          <div className='row space-around'>
-            {playerOne === null
-              ? <PlayerInput
-                  label='Player One'
-                  onSubmit={(player) => this.handleSubmit('playerOne', player)}
-                />
-              : <PlayerPreview
-                  username={playerOne}
-                  label='Player One'
-                  onReset={() => this.handleReset('playerOne')}
-                />
-            }
-
-            {playerTwo === null
-              ? <PlayerInput
-                  label='Player Two'
-                  onSubmit={(player) => this.handleSubmit('playerTwo', player)}
-                />
-              : <PlayerPreview
-                  username={playerTwo}
-                  label='Player Two'
-                  onReset={() => this.handleReset('playerTwo')}
-                />
-            }
-          </div>
-
-
-          {playerOne && playerTwo && (
-            <Link
-              className='btn dark-btn btn-space'
-              to={{
-                pathname: '/battle/results',
-                search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
-              }}
-            >
-              Battle
-            </Link>
-          )}
+export default function Battle () {
+  const [playerOne, setPlayerOne] = React.useState(null)
+  const [playerTwo, setPlayerTwo] = React.useState(null)
+
+  const handleSubmit = (id, player) => id === 'playerOne'
+    ? setPlayerOne(player)
+    : setPlayerTwo(player)
+
+  const handleReset = (id) => id === 'playerOne'
+    ? setPlayerOne(null)
+    : setPlayerTwo(null)
+
+  return (
+    <React.Fragment>
+      <Instructions />
+
+      <div className='players-container'>
+        <h1 className='center-text header-lg'>Players</h1>
+        <div className='row space-around'>
+          {playerOne === null
+            ? <PlayerInput
+                label='Player One'
+                onSubmit={(player) => handleSubmit('playerOne', player)}
+              />
+            : <PlayerPreview
+                username={playerOne}
+                label='Player One'
+                onReset={() => handleReset('playerOne')}
+              />
+          }
+
+          {playerTwo === null
+            ? <PlayerInput
+                label='Player Two'
+                onSubmit={(player) => handleSubmit('playerTwo', player)}
+              />
+            : <PlayerPreview
+                username={playerTwo}
+                label='Player Two'
+                onReset={() => handleReset('playerTwo')}
+              />
+          }
         </div>
-      </React.Fragment>
-    )
-  }
+
+
+        {playerOne && playerTwo && (
+          <Link
+            className='btn dark-btn btn-space'
+            to={{
+              pathname: '/battle/results',
+              search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
+            }}
+          >
+            Battle
+          </Link>
+        )}
+      </div>
+    </React.Fragment>
+  )
 }
\ No newline at end of file
diff --git a/app/components/Card.js b/app/components/Card.js
index 05dcbc5..d719e5a 100644
--- a/app/components/Card.js
+++ b/app/components/Card.js
@@ -1,34 +1,32 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 
 export default function Card ({ header, subheader, avatar, href, name, children }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {({ theme }) => (
-        <div className={`card bg-${theme}`}>
-          <h4 className='header-lg center-text'>
-            {header}
-          </h4>
-          <img
-            className='avatar'
-            src={avatar}
-            alt={`Avatar for ${name}`}
-          />
-          {subheader && (
-            <h4 className='center-text'>
-              {subheader}
-            </h4>
-          )}
-          <h2 className='center-text'>
-            <a className='link' href={href}>
-              {name}
-            </a>
-          </h2>
-          {children}
-        </div>
+    <div className={`card bg-${theme}`}>
+      <h4 className='header-lg center-text'>
+        {header}
+      </h4>
+      <img
+        className='avatar'
+        src={avatar}
+        alt={`Avatar for ${name}`}
+      />
+      {subheader && (
+        <h4 className='center-text'>
+          {subheader}
+        </h4>
       )}
-    </ThemeConsumer>
+      <h2 className='center-text'>
+        <a className='link' href={href}>
+          {name}
+        </a>
+      </h2>
+      {children}
+    </div>
   )
 }
 
diff --git a/app/components/Hover.js b/app/components/Hover.js
deleted file mode 100644
index de236f0..0000000
--- a/app/components/Hover.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-export default class Hover extends React.Component {
-  state = { hovering: false }
-  mouseOver = () => this.setState({ hovering: true })
-  mouseOut = () => this.setState({ hovering: false })
-  render () {
-    return (
-      <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
-        {this.props.children(this.state.hovering)}
-      </div>
-    )
-  }
-}
\ No newline at end of file
diff --git a/app/components/Nav.js b/app/components/Nav.js
index 26a514a..90b0cab 100644
--- a/app/components/Nav.js
+++ b/app/components/Nav.js
@@ -1,44 +1,42 @@
 import React from 'react'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 import { NavLink } from 'react-router-dom'
 
 const activeStyle = {
   color: 'rgb(187, 46, 31)'
 }
 
-export default function Nav () {
+export default function Nav ({ toggleTheme }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {({ theme, toggleTheme }) => (
-        <nav className='row space-between'>
-          <ul className='row nav'>
-            <li>
-              <NavLink
-                to='/'
-                exact
-                activeStyle={activeStyle}
-                className='nav-link'>
-                  Popular
-              </NavLink>
-            </li>
-            <li>
-              <NavLink
-                to='/battle'
-                activeStyle={activeStyle}
-                className='nav-link'>
-                  Battle
-              </NavLink>
-            </li>
-          </ul>
-          <button
-            style={{fontSize: 30}}
-            className='btn-clear'
-            onClick={toggleTheme}
-          >
-            {theme === 'light' ? '🔦' : '💡'}
-          </button>
-        </nav>
-      )}
-    </ThemeConsumer>
+    <nav className='row space-between'>
+      <ul className='row nav'>
+        <li>
+          <NavLink
+            to='/'
+            exact
+            activeStyle={activeStyle}
+            className='nav-link'>
+              Popular
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to='/battle'
+            activeStyle={activeStyle}
+            className='nav-link'>
+              Battle
+          </NavLink>
+        </li>
+      </ul>
+      <button
+        style={{fontSize: 30}}
+        className='btn-clear'
+        onClick={toggleTheme}
+      >
+        {theme === 'light' ? '🔦' : '💡'}
+      </button>
+    </nav>
   )
 }
\ No newline at end of file
diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js
index a10cd55..09fce1e 100644
--- a/app/components/Tooltip.js
+++ b/app/components/Tooltip.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Hover from './Hover'
+import useHover from '../hooks/useHover'
 
 const styles = {
   container: {
@@ -25,15 +25,13 @@ const styles = {
 }
 
 export default function Tooltip ({ text, children }) {
+  const [hovering, attrs] = useHover()
+
   return (
-    <Hover>
-      {(hovering) => (
-        <div style={styles.container}>
-          {hovering === true && <div style={styles.tooltip}>{text}</div>}
-          {children}
-        </div>
-      )}
-    </Hover>
+    <div style={styles.container} {...attrs}>
+      {hovering === true && <div style={styles.tooltip}>{text}</div>}
+      {children}
+    </div>
   )
 }
 
diff --git a/app/contexts/theme.js b/app/contexts/theme.js
index 7e4742b..9373368 100644
--- a/app/contexts/theme.js
+++ b/app/contexts/theme.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
-const { Consumer, Provider } = React.createContext()
+const ThemeContext = React.createContext()
 
-export const ThemeConsumer = Consumer
-export const ThemeProvider = Provider
\ No newline at end of file
+export default ThemeContext
+export const ThemeConsumer = ThemeContext.Consumer
+export const ThemeProvider = ThemeContext.Provider
diff --git a/app/hooks/useHover.js b/app/hooks/useHover.js
new file mode 100644
index 0000000..9a6807f
--- /dev/null
+++ b/app/hooks/useHover.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function useHover () {
+  const [hovering, setHovering] = React.useState(false)
+
+  const onMouseOver = () => setHovering(true)
+  const onMouseOut = () => setHovering(false)
+
+  return [hovering, {
+    onMouseOut,
+    onMouseOver
+  }]
+}
\ No newline at end of file
diff --git a/app/index.js b/app/index.js
index 33a7308..09766cd 100644
--- a/app/index.js
+++ b/app/index.js
@@ -10,37 +10,30 @@ const Popular = React.lazy(() => import('./components/Popular'))
 const Battle = React.lazy(() => import('./components/Battle'))
 const Results = React.lazy(() => import('./components/Results'))
 
-class App extends React.Component {
-  state = {
-    theme: 'light',
-    toggleTheme: () => {
-      this.setState(({ theme }) => ({
-        theme: theme === 'light' ? 'dark' : 'light'
-      }))
-    }
-  }
-  render() {
-    return (
-      <Router>
-        <ThemeProvider value={this.state}>
-          <div className={this.state.theme}>
-            <div className='container'>
-              <Nav />
+function App () {
+  const [theme, setTheme] = React.useState('light')
+  const toggleTheme = () => setTheme((theme) => theme === 'light' ? 'dark' : 'light')
 
-              <React.Suspense fallback={<Loading />} >
-                <Switch>
-                  <Route exact path='/' component={Popular} />
-                  <Route exact path='/battle' component={Battle} />
-                  <Route path='/battle/results' component={Results} />
-                  <Route render={() => <h1>404</h1>} />
-                </Switch>
-              </React.Suspense>
-            </div>
+  return (
+    <Router>
+      <ThemeProvider value={theme}>
+        <div className={theme}>
+          <div className='container'>
+            <Nav toggleTheme={toggleTheme} />
+
+            <React.Suspense fallback={<Loading />} >
+              <Switch>
+                <Route exact path='/' component={Popular} />
+                <Route exact path='/battle' component={Battle} />
+                <Route path='/battle/results' component={Results} />
+                <Route render={() => <h1>404</h1>} />
+              </Switch>
+            </React.Suspense>
           </div>
-        </ThemeProvider>
-      </Router>
-    )
-  }
+        </div>
+      </ThemeProvider>
+    </Router>
+  )
 }
 
 ReactDOM.render(