diff --git a/app/containers/App/index.js b/app/containers/App/index.js
index 8f6c3092..e1a4a525 100644
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
-
+import { hot } from 'react-hot-loader';
 import ErrorBoundary from 'components/ErrorBoundary';
 import Header from 'components/Header';
 import Budget from 'routes/Budget';
@@ -24,4 +24,4 @@ const App = () => (
   </ErrorBoundary>
 );
 
-export default App;
+export default hot(module)(App);
diff --git a/app/index.js b/app/index.js
index e2e641db..65533994 100644
--- a/app/index.js
+++ b/app/index.js
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { AppContainer } from 'react-hot-loader';
 
 import App from 'containers/App';
 import store from 'store';
@@ -16,9 +15,7 @@ const renderApp = (Component: React.ComponentType<any>) => {
     <React.Suspense fallback={null}>
       <Provider store={store}>
         <Router>
-          <AppContainer>
-            <Component />
-          </AppContainer>
+          <Component />
         </Router>
       </Provider>
     </React.Suspense>,
@@ -28,7 +25,9 @@ const renderApp = (Component: React.ComponentType<any>) => {
 
 renderApp(App);
 
-// Hot Module Replacement API
-if (module && module.hot && module.hot.accept) {
-  module.hot.accept('containers/App', () => renderApp(App));
+// webpack Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./containers/App', () => {
+    renderApp(App);
+  });
 }
diff --git a/package.json b/package.json
index 2a250fda..fb0ab98e 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "prop-types": "15.6.2",
     "react": "16.6.1",
     "react-dom": "16.6.1",
-    "react-hot-loader": "^3.0.0-beta.7",
+    "react-hot-loader": "4.5.0",
     "react-redux": "5.0.7",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
diff --git a/webpack.config.base.js b/webpack.config.base.js
index 0b08d698..8055953b 100644
--- a/webpack.config.base.js
+++ b/webpack.config.base.js
@@ -82,8 +82,7 @@ module.exports = config => ({
     watchOptions: {
       ignored: ['node_modules', '*.svg'],
     },
-    // hot: true,
-    // inline: true,
+    hot: true,
     compress: false,
     disableHostCheck: true,
     stats,
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index ad857814..9a8aaffd 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -17,9 +17,6 @@ module.exports = require('./webpack.config.base')({
 
   entry: {
     front: [
-      // activate HMR for React
-      'react-hot-loader/patch',
-
       // bundle the client for webpack-dev-server
       // and connect to the provided endpoint
       `webpack-dev-server/client?http://${host}:${port}`,