diff --git a/src/app.module.js b/src/app.module.js
index 7866916..c7cd49d 100644
--- a/src/app.module.js
+++ b/src/app.module.js
@@ -13,8 +13,10 @@ const setupRoutes = ($stateProvider) => {
                 this.comments = comments;
             },
             template: `
-                <h3>Hello World!</h3>
+                <app-header title="'Hello World!'"></app-header>
+                <comment-counter comments="$ctrl.comments"></comment-counter>
                 <comment-list comments="$ctrl.comments"></comment-list>
+                <app-footer></app-footer>
             `,
         });
 };
@@ -28,6 +30,9 @@ module.exports = angular.module('ngReactExample', [
     require('./services/CommentService').name,
     require('./services/AuthorService').name,
     require('./components/CommentList').name,
+    require('./components/Header').name,
+    require('./components/Footer').name,
+    require('./components/CommentCounter').name,
 ])
     .config(enableHtml5Mode)
     .config(setupRoutes);
diff --git a/src/components/CommentCounter/index.js b/src/components/CommentCounter/index.js
new file mode 100644
index 0000000..f7378d4
--- /dev/null
+++ b/src/components/CommentCounter/index.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import CommentCounter from './presenter';
+
+module.exports = angular.module('ngReactExample.commentCounter', [
+]).component('commentCounter', reactToAngularComponent(CommentCounter));
diff --git a/src/components/CommentCounter/presenter.js b/src/components/CommentCounter/presenter.js
new file mode 100644
index 0000000..860693b
--- /dev/null
+++ b/src/components/CommentCounter/presenter.js
@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+
+const CommentCounter = ({ comments }) => {
+    const count = comments ? comments.length : 0;
+    return (
+        <div style={{ padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '10px' }}>
+            Total Comments: { count }
+        </div>
+    );
+};
+
+CommentCounter.propTypes = {
+    comments: PropTypes.array.isRequired,
+};
+
+export default CommentCounter;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
new file mode 100644
index 0000000..6c89466
--- /dev/null
+++ b/src/components/Footer/index.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import Footer from './presenter';
+
+module.exports = angular.module('ngReactExample.footer', [
+]).component('appFooter', reactToAngularComponent(Footer));
diff --git a/src/components/Footer/presenter.js b/src/components/Footer/presenter.js
new file mode 100644
index 0000000..3b89307
--- /dev/null
+++ b/src/components/Footer/presenter.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Footer = () => (
+    <footer style={{ marginTop: '20px', padding: '10px', borderTop: '1px solid #ccc' }}>
+        <p>AngularJS to React Migration Example</p>
+    </footer>
+);
+
+export default Footer;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 0000000..4beea2b
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+import { reactToAngularComponent } from '../../services/AngularReactHelper';
+import Header from './presenter';
+
+module.exports = angular.module('ngReactExample.header', [
+]).component('appHeader', reactToAngularComponent(Header));
diff --git a/src/components/Header/presenter.js b/src/components/Header/presenter.js
new file mode 100644
index 0000000..20c5e66
--- /dev/null
+++ b/src/components/Header/presenter.js
@@ -0,0 +1,11 @@
+import React, { PropTypes } from 'react';
+
+const Header = ({ title }) => (
+    <h3>{ title }</h3>
+);
+
+Header.propTypes = {
+    title: PropTypes.string.isRequired,
+};
+
+export default Header;