diff --git a/elements/a2j-template-ssr/a2j-template-ssr-test.js b/elements/a2j-template-ssr/a2j-template-ssr-test.js
index 4909930..a769f06 100644
--- a/elements/a2j-template-ssr/a2j-template-ssr-test.js
+++ b/elements/a2j-template-ssr/a2j-template-ssr-test.js
@@ -1,10 +1,18 @@
+import 'steal-mocha'
+import 'models/fixtures-author/templates'
+import './a2j-template-ssr'
+
+import $ from 'jquery'
 import { assert } from 'chai'
 import CanList from 'can-list'
+import F from 'funcunit'
+import stache from 'can-stache'
+import template2115 from '~/models/fixtures-author/templates/guide1261-template2115'
 import TemplateSsrVM from './a2j-template-ssr-vm'
 
-describe('a2j-template-srr', function () {
+describe('a2j-template-ssr', function () {
   describe('viewModel', function () {
-    it.skip('templatesPromise resolves a list of templates', function (done) {
+    it('templatesPromise resolves a list of templates', function (done) {
       const vm = new TemplateSsrVM({ guideId: '1261', templateId: '2112' })
 
       vm.attr('templatesPromise').then(templates => {
@@ -13,4 +21,81 @@ describe('a2j-template-srr', function () {
       })
     })
   })
+
+  describe('Component', function () {
+    describe('template without a custom header and footer', () => {
+      beforeEach(function () {
+        const frag = stache(
+          '<a2j-template-ssr guideId:from="guideId" templateId:from="templateId" />'
+        )
+        $('#test-area').html(frag({ guideId: '1261', templateId: '2112' }))
+      })
+
+      afterEach(function () {
+        $('#test-area').empty()
+      })
+
+      it('does not render a custom header or footer', function (done) {
+        F('a2j-template-ssr a2j-template').visible('template should be visible')
+        F('a2j-template-ssr footer').missing('custom footer should not be visible')
+        F('a2j-template-ssr header').missing('custom header should not be visible')
+        F(done)
+      })
+    })
+
+    describe('template with a custom header and footer', () => {
+      describe('when renderTemplateFootersAndHeaders is false', () => {
+        beforeEach(function () {
+          const frag = stache(
+            '<a2j-template-ssr guideId:from="guideId" renderTemplateFootersAndHeaders:from="renderTemplateFootersAndHeaders" templateId:from="templateId" />'
+          )
+          $('#test-area').html(frag({
+            guideId: '1261',
+            renderTemplateFootersAndHeaders: false,
+            templateId: '2115'
+          }))
+        })
+
+        afterEach(function () {
+          $('#test-area').empty()
+        })
+
+        it('does not render a custom header or footer', function (done) {
+          F('a2j-template-ssr a2j-template').visible('template should be visible')
+          F('a2j-template-ssr footer p').missing('custom footer should not be visible')
+          F('a2j-template-ssr header p').missing('custom header should not be visible')
+          F(done)
+        })
+      })
+
+      describe('when renderTemplateFootersAndHeaders is true', () => {
+        beforeEach(function () {
+          const frag = stache(
+            '<a2j-template-ssr guideId:from="guideId" renderTemplateFootersAndHeaders:from="renderTemplateFootersAndHeaders" templateId:from="templateId" />'
+          )
+          $('#test-area').html(frag({
+            guideId: '1261',
+            renderTemplateFootersAndHeaders: true,
+            templateId: '2115'
+          }))
+        })
+
+        afterEach(function () {
+          $('#test-area').empty()
+        })
+
+        it('renders the custom headers and footers', function (done) {
+          F('a2j-template-ssr footer p').visible('custom footer should be visible')
+          F('a2j-template-ssr header p').visible('custom header should be visible')
+
+          F(function () {
+            assert.strictEqual(F('a2j-template-ssr footer')[0].innerHTML, template2115.footer, 'should have the custom footer text')
+            assert.strictEqual(F('a2j-template-ssr header')[0].innerHTML, template2115.header, 'should have the custom header text')
+          })
+
+          F(done)
+        })
+      })
+    })
+  })
 })
diff --git a/elements/a2j-template-ssr/a2j-template-ssr-vm.js b/elements/a2j-template-ssr/a2j-template-ssr-vm.js
index aa35ac0..9741fd6 100644
--- a/elements/a2j-template-ssr/a2j-template-ssr-vm.js
+++ b/elements/a2j-template-ssr/a2j-template-ssr-vm.js
@@ -16,6 +16,10 @@ export default CanMap.extend({
   define: {
     // passed in from server.stache
     guideId: {},
+    renderTemplateFootersAndHeaders: {
+      type: 'boolean',
+      default: false
+    },
     templateId: {},
     templateIds: {
       type: '*'
diff --git a/elements/a2j-template-ssr/a2j-template-ssr.html b/elements/a2j-template-ssr/a2j-template-ssr.html
new file mode 100644
index 0000000..a708ee8
--- /dev/null
+++ b/elements/a2j-template-ssr/a2j-template-ssr.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>A2J-Template-SSR Tests</title>
+<div id="mocha"></div>
+<div id="test-area"></div>
+<script src="../../node_modules/steal/steal.js" mocha="bdd" main="~/elements/a2j-template-ssr/a2j-template-ssr-test"></script>
\ No newline at end of file
diff --git a/elements/a2j-template-ssr/a2j-template-ssr.stache b/elements/a2j-template-ssr/a2j-template-ssr.stache
index 0ddcfbc..18fdaee 100644
--- a/elements/a2j-template-ssr/a2j-template-ssr.stache
+++ b/elements/a2j-template-ssr/a2j-template-ssr.stache
@@ -4,12 +4,20 @@
 {{#if(scope.vm.templatesPromise.isResolved)}}
   {{#each(scope.vm.templates)}}
     {{#if(scope.vm.canRenderTemplate(this))}}
-      <a2j-template
-        vm:template:from="."
-        use-answers:raw="true"
-        vm:answers:from="scope.vm.answers"
-        edit-enabled:raw="false"
-      />
+      <section>
+        {{#and(scope.vm.renderTemplateFootersAndHeaders, this.header)}}
+          <header>{{{this.header}}}</header>
+        {{/and}}
+        <a2j-template
+          vm:template:from="."
+          use-answers:raw="true"
+          vm:answers:from="scope.vm.answers"
+          edit-enabled:raw="false"
+        />
+        {{#and(scope.vm.renderTemplateFootersAndHeaders, this.footer)}}
+          <footer>{{{this.footer}}}</footer>
+        {{/and}}
+      </section>
     {{/if}}
   {{/each}}
 {{/if}}
diff --git a/elements/a2j-template-ssr/demo.html b/elements/a2j-template-ssr/demo.html
index d53b295..83f4b06 100644
--- a/elements/a2j-template-ssr/demo.html
+++ b/elements/a2j-template-ssr/demo.html
@@ -17,10 +17,10 @@
       var $ = require('jquery');
       var stache = require('can-stache/');
 
-      require('styles.less!');
+      require('models/fixtures-author/templates')
       require('elements/a2j-template-ssr/');
 
-      var template = '<a2j-template-ssr {guide-id}="guideId" {answers}="answers" />';
+      var template = '<a2j-template-ssr answers:from="answers" guideId:from="guideId" />';
       var answers = {"user gender":{"name":"User Gender","repeating":false,"type":"MC","values":[null,"Male"]},"client first name te":{"name":"Client first name TE","repeating":false,"type":"Text","values":[null,"Manuel"]},"client middle name te":{"name":"Client middle name TE","repeating":false,"type":"Text","values":[null,"Antonio"]},"client last name te":{"name":"Client last name TE","repeating":false,"type":"Text","values":[null,"Mujica"]},"a2j version":{"name":"A2J Version","repeating":false,"type":"Text","values":[null,"5.0.2.4"]},"a2j interview id":{"name":"A2J Interview ID","repeating":false,"type":"Text","values":[null,"1276765160"]},"a2j bookmark":{"name":"A2J Bookmark","repeating":false,"type":"Text","values":[null,"1-Question 1"]},"a2j history":{"name":"A2J History","repeating":false,"type":"Text","values":[null,"&lt;LABELS/&gt;"]}};
       var frag = stache(template);
 
diff --git a/models/fixtures-author/a2j-templates.js b/models/fixtures-author/a2j-templates.js
index de42b6e..b15d14b 100644
--- a/models/fixtures-author/a2j-templates.js
+++ b/models/fixtures-author/a2j-templates.js
@@ -2,11 +2,12 @@ import template2111 from './templates/guide1261-template2111'
 import template2112 from './templates/guide1261-template2112'
 import template2113 from './templates/guide1261-template2113'
 import template2114 from './templates/guide20-template2114'
+import template2115 from './templates/guide1261-template2115'
 
 // emulates a Guide's local templates.json file which has a map like {"guideId":20,"templateIds":[2114]}
 // and the api call that returns the template based on guideId/templateId comboId like {20-2114}
 let fixtureTemplates = {
-  1261: { 2111: template2111, 2112: template2112, 2113: template2113 },
+  1261: { 2111: template2111, 2112: template2112, 2113: template2113, 2115: template2115 },
   20: { 2114: template2114 },
   5150: {} // used for 'throw away' tests that don't need templates map to persist
 }
diff --git a/models/fixtures-author/templates/guide1261-template2112.js b/models/fixtures-author/templates/guide1261-template2112.js
index a6c31bc..ca73d28 100644
--- a/models/fixtures-author/templates/guide1261-template2112.js
+++ b/models/fixtures-author/templates/guide1261-template2112.js
@@ -8,16 +8,50 @@ export default {
     tag: 'a2j-template',
     state: {},
     children: [
-      { tag: 'a2j-repeat-loop',
-        state: {}
+      {
+        tag: 'a2j-repeat-loop',
+        state: {
+          listStyleType: 'disc',
+          loopTitleTag: 'h1',
+          repeatEachInOneList: true,
+          tableStyle: 'bordered',
+          tableColumns: [
+            {
+              width: 50,
+              variable: 'Item name TE',
+              column: 'Item name'
+            },
+            {
+              variable: 'Item value NU',
+              width: 50,
+              column: 'Item value'
+            }
+          ],
+          loopCounter: 1,
+          listItems: [
+            {
+              variable: '',
+              item: 'Item 1'
+            }
+          ],
+          loopType: 'variable',
+          loopTitle: 'This is a repeat loop title',
+          displayType: 'table',
+          loopRichText: '',
+          loopVariable: 'CountVar'
+        }
       },
-      { tag: 'a2j-rich-text',
+      {
+        tag: 'a2j-rich-text',
         state: {
-          userContent: 'User\'s last name <a2j-variable name="Client last name TE" />.'
+          notes: '',
+          userContent: 'User\'s last name <a2j-variable name=Client last name TE />.'
         }
       },
-      { tag: 'a2j-rich-text',
+      {
+        tag: 'a2j-rich-text',
         state: {
+          notes: '',
           userContent: `<p><em>Lorem ipsum dolor sit amet, pri ad porro consul
             disputando. Mea tale admodum cu, soluta fuisset per ad. Te omittam
             noluisse consequat vel. Impetus appetere antiopam sit ut, at nec
diff --git a/models/fixtures-author/templates/guide1261-template2115.js b/models/fixtures-author/templates/guide1261-template2115.js
new file mode 100644
index 0000000..697e531
--- /dev/null
+++ b/models/fixtures-author/templates/guide1261-template2115.js
@@ -0,0 +1,28 @@
+export default {
+  guideId: '1261',
+  templateId: '2115',
+  updatedAt: '2021-12-08T17:51:00.688Z',
+  active: true,
+  title: 'Test template',
+  header: '<p>This is a custom header. The author might use this to include court information or a caption.&nbsp;</p>\n',
+  footer: '<p>This is a custom footer. The author might include this to display the fact that this form was created with the assistance of a specific legal aid organization or a court division. They might include <em>itallics</em> or <strong>bold text</strong> to make it stand out.&nbsp;</p>\n',
+  rootNode: {
+    tag: 'a2j-template',
+    state: {},
+    children: [
+      { tag: 'a2j-rich-text',
+        state: {
+          notes: '',
+          userContent: 'Hello, <a2j-variable name="Client first name TE"></a2j-variable>.'
+        }
+      },
+      { tag: 'a2j-section-title',
+        state: {
+          title: 'This is a Section Title',
+          titleTag: 'h2',
+          underline: true
+        }
+      }
+    ]
+  }
+}
diff --git a/models/tests/a2j-template-test.js b/models/tests/a2j-template-test.js
index da5761f..3c7544d 100644
--- a/models/tests/a2j-template-test.js
+++ b/models/tests/a2j-template-test.js
@@ -22,7 +22,7 @@ describe('A2JTemplate Model', function () {
     let promise = A2JTemplate.findAll({ guideId: 1261 })
 
     return promise.then(function (a2jTemplates) {
-      assert.equal(a2jTemplates.length, 3, 'should have 3 total templates')
+      assert.equal(a2jTemplates.length, 4, 'should have 4 total templates')
       a2jTemplates.forEach(function (a2jTemplate) {
         assert.ok(a2jTemplate.attr('rootNode') instanceof A2JNode)
 
@@ -37,7 +37,7 @@ describe('A2JTemplate Model', function () {
     let promise = A2JTemplate.findAll({ guideId: 1261, active: true })
 
     return promise.then(function (a2jTemplates) {
-      assert.equal(a2jTemplates.length, 2, 'should only have 2 active of 3 templates')
+      assert.equal(a2jTemplates.length, 3, 'should only have 3 active of 4 templates')
     })
   })