diff --git a/lecture5/email-client-context/app/contexts/EmailsContext.js b/lecture5/email-client-context/app/contexts/EmailsContext.js
deleted file mode 100644
index 744c935..0000000
--- a/lecture5/email-client-context/app/contexts/EmailsContext.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const { Provider, Consumer } = React.createContext();
-
-export { Provider as EmailsProvider, Consumer as EmailsConsumer };
diff --git a/lecture5/email-client-context/app/contexts/EmailsContext.jsx b/lecture5/email-client-context/app/contexts/EmailsContext.jsx
new file mode 100644
index 0000000..bdb2856
--- /dev/null
+++ b/lecture5/email-client-context/app/contexts/EmailsContext.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { fetchEmails } from '../actions';
+
+const { Provider, Consumer } = React.createContext();
+
+class EmailsProvider extends React.Component {
+  state = {
+    emails: [],
+  };
+
+  fetchEmails = async () => {
+    const { emails } = await fetchEmails();
+
+    return this.setState(state => ({
+      emails: [...state.emails, ...emails],
+    }));
+  };
+
+  render() {
+    const { emails } = this.state;
+    return (
+      <Provider
+        value={{
+          state: {
+            emails: emails,
+          },
+          actions: {
+            fetchEmails: this.fetchEmails,
+          },
+        }}>
+        {this.props.children}
+      </Provider>
+    );
+  }
+}
+
+export { EmailsProvider, Consumer as EmailsConsumer };
diff --git a/lecture5/email-client-context/app/index.jsx b/lecture5/email-client-context/app/index.jsx
index c6611a7..b2db827 100644
--- a/lecture5/email-client-context/app/index.jsx
+++ b/lecture5/email-client-context/app/index.jsx
@@ -4,26 +4,16 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import { AuthProvider, UserProvider, EmailsProvider } from './contexts';
 import { HomePage, LoginPage } from './containers';
-import { login, fetchEmails } from './actions';
 
 class App extends React.Component {
   state = {
     user: undefined,
-    emails: [],
   };
 
   updateUser = user => this.setState({ user });
 
-  fetchEmails = async () => {
-    const { emails } = await fetchEmails();
-
-    return this.setState(state => ({
-      emails: [...state.emails, ...emails],
-    }));
-  };
-
   render() {
-    const { user, emails } = this.state;
+    const { user } = this.state;
 
     return (
       <Router>
@@ -37,15 +27,7 @@ class App extends React.Component {
                   state: { user },
                   actions: {},
                 }}>
-                <EmailsProvider
-                  value={{
-                    state: {
-                      emails,
-                    },
-                    actions: {
-                      fetchEmails: this.fetchEmails,
-                    },
-                  }}>
+                <EmailsProvider>
                   <HomePage />
                 </EmailsProvider>
               </UserProvider>