diff --git a/decorators/__tests__/headerFooter-test.js b/decorators/__tests__/headerFooter-test.js
index 3c275ba0c7..280073f885 100644
--- a/decorators/__tests__/headerFooter-test.js
+++ b/decorators/__tests__/headerFooter-test.js
@@ -7,33 +7,88 @@ import TestComponent from './TestComponent';
 import headerFooter from '../headerFooter';
 import Template from '../../components/Template';
 
-var bemHeader = require('../../lib/utils').bemHelper('ais-header');
-var bemFooter = require('../../lib/utils').bemHelper('ais-footer');
-var cx = require('classnames');
-
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
 describe('headerFooter', () => {
   var renderer;
+  var defaultProps;
 
   beforeEach(() => {
     let {createRenderer} = TestUtils;
+    defaultProps = {
+      cssClasses: {
+        root: 'root',
+        body: 'body'
+      },
+      templateProps: {
+      }
+    };
     renderer = createRenderer();
   });
 
-  it('should render headerFooter(<div />)', () => {
-    var out = render({cssClasses: {root: 'wrapper'}});
+  it('should render the component in a root and body', () => {
+    var out = render(defaultProps);
+    expect(out).toEqualJSX(
+      <div className="root">
+        <div className="body">
+          <TestComponent {...defaultProps} />
+        </div>
+      </div>
+    );
+  });
+
+  it('should add a header if such a template is passed', () => {
+    // Given
+    defaultProps.templateProps.templates = {
+      header: 'HEADER'
+    };
+    // When
+    var out = render(defaultProps);
+    // Then
+    var templateProps = {
+      data: {},
+      templateKey: 'header',
+      transformData: null,
+      templates: {
+        header: 'HEADER'
+      }
+    };
     expect(out).toEqualJSX(
-      <div className="wrapper">
-        <div className={cx(bemHeader(null))}>
-          <Template data={{}} templateKey="header" transformData={null} />
+      <div className="root">
+        <div className="ais-header">
+          <Template {...templateProps} />
         </div>
-        <div className={undefined}>
-          <TestComponent cssClasses={{root: 'wrapper'}} />
+        <div className="body">
+          <TestComponent {...defaultProps} />
+        </div>
+      </div>
+    );
+  });
+
+  it('should add a footer if such a template is passed', () => {
+    // Given
+    defaultProps.templateProps.templates = {
+      footer: 'FOOTER'
+    };
+    // When
+    var out = render(defaultProps);
+    // Then
+    var templateProps = {
+      data: {},
+      templateKey: 'footer',
+      transformData: null,
+      templates: {
+        footer: 'FOOTER'
+      }
+    };
+    expect(out).toEqualJSX(
+      <div className="root">
+        <div className="body">
+          <TestComponent {...defaultProps} />
         </div>
-        <div className={cx(bemFooter(null))}>
-          <Template data={{}} templateKey="footer" transformData={null} />
+        <div className="ais-footer">
+          <Template {...templateProps} />
         </div>
       </div>
     );
diff --git a/decorators/headerFooter.js b/decorators/headerFooter.js
index 412e37edd2..e9cec8a354 100644
--- a/decorators/headerFooter.js
+++ b/decorators/headerFooter.js
@@ -9,29 +9,35 @@ var Template = require('../components/Template');
 
 function headerFooter(ComposedComponent) {
   class HeaderFooter extends React.Component {
+    getTemplate(type) {
+      let templates = this.props.templateProps.templates;
+      if (!templates || !templates[type]) {
+        return null;
+      }
+      let className = cx(this.props.cssClasses[type], `ais-${type}`);
+      return (
+        <div className={className}>
+          <Template templateKey={type} {...this.props.templateProps} transformData={null} />
+        </div>
+      );
+    }
     render() {
-      // override potential widget's defined transformData,
-      // header and footer currently do not have it
-      var transformData = null;
-      var templateProps = this.props.templateProps;
       var classNames = {
-        root: this.props.cssClasses.root,
-        header: cx(this.props.cssClasses.header, 'ais-header'),
-        body: this.props.cssClasses.body,
-        footer: cx(this.props.cssClasses.footer, 'ais-footer')
+        root: cx(this.props.cssClasses.root),
+        body: cx(this.props.cssClasses.body)
       };
 
+      // Only add header/footer if a template is defined
+      var header = this.getTemplate('header');
+      var footer = this.getTemplate('footer');
+
       return (
         <div className={classNames.root}>
-          <div className={classNames.header}>
-            <Template templateKey="header" {...templateProps} transformData={transformData} />
-          </div>
+          {header}
           <div className={classNames.body}>
             <ComposedComponent {...this.props} />
           </div>
-          <div className={classNames.footer}>
-            <Template templateKey="footer" {...templateProps} transformData={transformData} />
-          </div>
+          {footer}
         </div>
       );
     }