diff --git a/app/config.js b/app/config.js
new file mode 100644
index 00000000..3a9cfc17
--- /dev/null
+++ b/app/config.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { ipcRenderer, remote } from 'electron';
+
+const config = remote.require('./config');
+
+export default class Config extends React.Component {
+
+  constructor () {
+    super();
+    this.state = {
+      config: config.get()
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange () {
+    new Notification('HyperTerm configuration reloaded!');
+    this.setState({ config: config.get() });
+  }
+
+  componentDidMount () {
+    ipcRenderer.on('config change', this.onChange);
+  }
+
+  // passes `config` as props to the decorated component
+  render () {
+    const child = React.Children.only(this.props.children);
+    const { config } = this.state;
+    return React.cloneElement(child, { config });
+  }
+
+  componentWillUnmount () {
+    ipcRenderer.removeListener('config change', this.onChange);
+  }
+
+}
diff --git a/app/index.js b/app/index.js
index e752e422..2aa54bb5 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,8 +1,9 @@
 import { render } from 'react-dom';
 import HyperTerm from './hyperterm';
 import React from 'react';
+import Config from './config';
 
 require('./css/hyperterm.css');
 require('./css/tabs.css');
 
-render(<HyperTerm />, document.getElementById('mount'));
+render(<Config><HyperTerm /></Config>, document.getElementById('mount'));