diff --git a/host/webpack.config.js b/host/webpack.config.js
index 4226ed8..ce150d2 100644
--- a/host/webpack.config.js
+++ b/host/webpack.config.js
@@ -46,7 +46,9 @@ module.exports = {
       remotes: {
         nav: 'nav@http://localhost:3001/remoteEntry.js',
       },
-      exposes: {},
+      exposes: {
+        './store': './src/store',
+      },
       shared: {
         ...deps,
         react: {
diff --git a/nav/src/App.jsx b/nav/src/App.jsx
index 578e1aa..4e7f66f 100644
--- a/nav/src/App.jsx
+++ b/nav/src/App.jsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { CountProvider } from 'host/store';
+
 import Header from './Header';
 
 import './index.css';
 
 const App = () => (
-  <div className='container'>
-    <Header />
-    Name: Nav
-  </div>
+  <CountProvider>
+    <div className='container'>
+      <Header />
+      Name: Nav
+    </div>
+  </CountProvider>
 );
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/nav/src/Header.js b/nav/src/Header.js
index 4bfa609..f6b34ee 100644
--- a/nav/src/Header.js
+++ b/nav/src/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
+import { useCount } from 'host/store';
+
+function Header() {
+  const [count, setCount] = useCount();
 
-function Header({ count, onClear }) {
   return (
     <div style={{ border: '1px solid black' }}>
       Header
       <div>{count}</div>
-      <button onClick={onClear}>Clear</button>
+      <button onClick={() => setCount(0)}>Clear</button>
     </div>
   );
 }
diff --git a/nav/webpack.config.js b/nav/webpack.config.js
index f97273b..27ae348 100644
--- a/nav/webpack.config.js
+++ b/nav/webpack.config.js
@@ -43,7 +43,9 @@ module.exports = {
     new ModuleFederationPlugin({
       name: 'nav',
       filename: 'remoteEntry.js',
-      remotes: {},
+      remotes: {
+        host: 'host@http://localhost:3000/remoteEntry.js',
+      },
       exposes: { './Header': './src/Header.js' },
       shared: {
         ...deps,